NBDemoJSFNavigation

JavaServer Faces Navigation (5 minutes)

Description

This presentation is part of the NetBeans Day World Tour and is used in the session “Introduction to JavaServer Faces and the Woodstock UI Components”. This demo helps solidify the JSF navigation topic.

Product Versions Supported

  • NetBeans 6.0.1 with the Web and Java EE features installed.


Points to Hit

You will be emphasizing how JSF navigation works. This is an introductory demo showing the audience what the JSF technology is about.

  • NetBeans XML Editor recognizes context and allows you to add "Navigation Rules" and "Navigation Cases" in the "faces-config.xml".

Demo Prep

  1. This demo builds off the project created in the JavaServer Faces Components and Backing Beans demo. The project name is "components_backingbeans".

Gotchas

None known.


Demo

1. Open the "components_backingbeans" project if it's not already open.

Explanation Point:
We need to create a second page that we can navigate to.


2. Right-click the "welcomeJSF.jsp" node and choose "Copy".

3. Right-click the "Web Pages" node and choose "Paste".

4. Select "welcomeJSF_1.jsp", right-click and selecte "Rename...". Change the name to "Page2".

5. Open "Page2.jsp".

6. Replace all the code in the "<f:view>" block with the following code:

    <h:form>
        <h:commandButton id="mybutton" value="Home" action="#{MyBean.navigateHome}"></h:commandButton>
    </h:form>
Explanation Point:
So now that we have a method binding in our new page, we need to add this new method to our "MyBean" backing bean.


7. Open "MyBean.java".


8. Add the following methods:


    public String navigateNext() {
        return "page2";
    }

   public String navigateHome() {
        return "home";
    }


Explanation Point:
Now we need to modify our welcome page and add a button to navigate to Page2.


9. Open "welcomeJSF.jsp" and add the following code below the button with the id="mybutton".

                <h:commandButton id="nextButton" value="Page2" action="#{MyBean.navigateNext}">
                </h:commandButton>
}
Explanation Point:
At this point we have the method binding in the JSP and the backing bean methods. Now we need to define the navigation rules.


10. Open "faces-config.xml".

11. Right-click and select "JavaServer Faces->Add Navigation Rule...".

12. Click the "Browse..." button and select "welcomeJSF.jsp" for the "Rule from View:" and click "Add".

13. With the cursor within the navigation rule just entered, right-click and select "JavaServer Faces->Add Navigation Case...".

14. Enter the following:

  • "From Outcome:" - "page2"
  • "To View:" - "/Page2.jsp"
  • Click "Add".


Explanation Point:
We just tied the action method "navigateNext" that returns "page2" in "MyBean" to this navigation rule which will navigate to "Page2.jsp".


15. Right-click and select "JavaServer Faces->Add Navigation Rule...".

16. Click the "Browse..." button and select "Page2.jsp" for the "Rule from View:" and click "Add".

17. With the cursor within the navigation rule just entered, right-click and select "JavaServer Faces->Add Navigation Case...".

18. Enter the following:

  • "From Outcome:" - "home"
  • "To View:" - "/welcomeJSF.jsp"
  • Click "Add".
Explanation Point:
We just tied the action method "navigateHome" that returns "home" in "MyBean" to this navigation rule which will navigate to "welcomeJSF.jsp".


20. Run. Click the "Page2" button to show navigating to Page2.jsp. Once there, press the "Home" button.


Demo Cleanup

None.

Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo