Install and Use NetBeans 6.9 part 7

 

 

What do we have in this session 7?

 

  1. Modifying the Index.xhtml Page

  2. Creating the Results Page

 

 

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.

 

<h:body>

    <f:view>

        <h:form>

            <h:outputLabel value="Message:"/><h:inputText value="#{MessageView.message.message}"/>

            <h:commandButton action="#{MessageView.postMessage}" value="Post Message"/>

        </h:form>

    </f:view>

</h:body>

 

 

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.

 

NetBeans IDE: selecting the Java web application project, fixing the tag missing definition of the index.xhtml source code

 

Select the library declaration as suggested in the hint.

 

 

 

 

 

 

 

 

 

 

-------------------------------------------------------------------------------------------------------------------------------------

NetBeans IDE: selecting the Java web application project, selecting the java tag library

 

The tag library declaration should be added and resolving the related undefined element if any.

 

NetBeans IDE: selecting the Java web application project, the added jsf tag library

 

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.

 

Creating the Results Page

 

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.

 

NetBeans IDE: selecting the Java web application project, adding new file to the existing project

 

Select JSF Page from the JavaServer Faces category. Click Next.

 

 

 

 

 

 

 

 

 

 

 

 

-------------------------------------------------------

NetBeans IDE: selecting the Java web application project, selecting new JSF page

 

Type theend as the File Name.

Make sure that the Facelets option is selected. Click Finish.

 

NetBeans IDE: selecting the Java web application project, giving the JSF name  file and setting the file location

 

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.

 

NetBeans IDE: selecting the Java web application project, adding new source code to the JSF file

 

 

 

 

 

< NetBeans and Java Web 6 | Java and Friends | NetBeans and Java Web 8 >


NetBeans and Java Web 1 | NetBeans and Java Web 2 | NetBeans and Java Web 3 | NetBeans and Java Web 4 | NetBeans and Java Web 5 | NetBeans and Java Web 6 | NetBeans and Java Web 7 | NetBeans and Java Web 8 | Java and Friends