|
What do we have in this session 7?
Modifying the Index.xhtml Page
In this exercise you will make some simple changes to the index.xhtml page to add some UI components. You will add a form with an input text field and a button.
Open index.xhtml in the editor. Modify the file to add the following simple form between the <h:body> tags.
|
The JSF code completion can help you when you type the code. If the f tag was not recognized, highlight the tag (marked in red) and right click mouse.
Select the library declaration as suggested in the hint.
-------------------------------------------------------------------------------------------------------------------------------------
The tag library declaration should be added and resolving the related undefined element if any.
Save your changes.
The inputText and commandButton components will invoke the methods in the named JSF managed bean MessageView. The postMessage method will return "theend", and the navigation handler will look for a page named theend.xhtml.
In this exercise you will create the JSF page theend.xhtml. The page will be displayed when the user clicks the Post Message button in index.xhtml and invokes the postMessage method in the JSF managed bean.
Right-click the project node and choose New > Other.
Select JSF Page from the JavaServer Faces category. Click Next.
-------------------------------------------------------
Type theend as the File Name.
Make sure that the Facelets option is selected. Click Finish.
Modify the file by typing manually the following between the <h:body> tags.
<h:body>
<h:outputLabel value="Thanks! There are "/>
<h:outputText value="#{MessageView.numberOfMessages}"/>
<h:outputLabel value=" messages!"/>
</h:body>
When you start typing, the IDE automatically adds the xmlns:h="http://java.sun.com/jsf/html tag library definition to the file for the JSF elements.