JSF Tools Tutorial

+ inputname.jsp + + + Click on the + Diagram + tab for the configuration file editor + + + Open the editor for this first JSP file by doubl= e-clicking on the + /pages/inputname. jsp<= /property> + icon + + + = + The Visual Page Editor will open in a screen split betwe= en source code along the + top and a WYSIWIG view along the bottom: +

+ Visual Page Editor + + + + + + + Some JSF code is already in the file, because we have ch= osen a template to create + a page. + + + Select the + Visual + tab, so we can work with the editor comple= tely in its WYSIWYG + mode + + + To the right of the editor, in the JBoss Tools P= alette, expand the + JSF HTML + palette folder by selecting it + + +

+ JBoss Tools Palette + + + + + + + + + Click on + form + within this folder, drag the cursor over t= o the editor, and drop + it inside the red box in the editor + + + Another red box will appear inside the first red= box + + + Right-click on the innermost box and select + <h:form> + Attributes from the menu + + + In the value field next to id, type + greeting + and click on the + Close + button + + + Type "Please enter name:" inside the boxes + + + Select + inputText + within the JSF HTML palette folder and dra= g it into the + innermost box in the editor after "Please enter + name:" + + + In the attributes dialog, click in the + value + field next to the value attribute and clic= k on the ... + button + + + Then, select the + Managed Beans > per= sonBean > name + node and click on the + Ok + button + + + Back in the attributes dialog, select the + Advanced + tab, type in + name + as the value for the + "id" + attribute, and then click on the + Finish + button + + + Select + commandButton + within the JSF HTML palette folder and dra= g it into the + innermost box in the editor after the input box + + + In the attributes dialog, click in the value fie= ld next to the + "action" + attribute and click on the ... + button + + + Then, select the + View Actions > gree= ting + node and click on the + OK + button + + + Back in the attributes dialog box, type in "Say = Hello" + as the value for the value attribute ("Say Hello")= and + then click on the + Finish + button + + + The source coding should be something like this now: + +<%@ taglib uri=3D"http://java.sun.com/jsf/core" prefix=3D"f" %> + + + + + + + +Please enter a name: + + + + + + +]]> + The editor should look like this: +

+ Visual Page Editor + + + + + + + + + Save the file by selecting + File > Save + from the menu bar + + +

+ greeting.jsp + + + Click on the + faces-config.xml + tab to bring the diagram back + + + Open the editor for the second file by double-cl= icking on the + /pages/greeting.jsp + icon + + + Select the + Visual + tab, so we can work with the editor comple= tely in its WYSIWYG + mode + + + Type "Hello "(note space after Hello) into the + box + + + Select + outputText + within the JSF HTML palette folder and dra= g it into the + innermost box in the editor after "Hello" + + + In the attributes dialog, click in + value + field next to the value attribute and clic= k on the + ... (Browse= ) button + + + Then, select the + Managed Beans > per= sonBean > name + node, click on the + Ok + button, and then click on the + Finish + button + + + Right after the output field, type an + exclamation point + ( + ! + ) + + + The source coding should be something like this now: + +<%@ taglib uri=3D"http://java.sun.com/jsf/core" prefix=3D"f" %> + + + + + + +Hello ! + + + +]]> + + + Save the file + + +