10 - Planning Navigation and Page Flow

10
Planning Navigation and

Page Flow
Copyright © 2007, Oracle. All rights reserved.

Objectives
After completing this lesson, you should be able to do

the following:
• Use a JavaServer Faces (JSF) Navigation diagram
to plan the pages of an application and the
navigation between them
• Describe JSF Navigation
• Describe the types of JSF Navigation cases
• Create a backing bean for a JSF page
10-2 Copyright © 2007, Oracle. All rights reserved.

Traditional Navigation
In traditional navigation, a button or hyperlink is used

to navigate to a specific page.
<body>
<form action="myNewPage.html">
<button type="button"/>
</form>
<a href="http://myNewPage.html">
Go To My New Page
</a></body>

What Is JSF Navigation?
• JSF Navigation is defined through rules.

• Rules use outcomes to determine which page is
displayed on a User Interface (UI) event.
• Rules can be defined as:
– Static
– Dynamic
• They are defined in faces-config.xml.

JSF Navigation: Example
firstPage
myNewPage
Button success
firstPage.jsp myNewPage.jsp
JSF Navigation Rules

• Navigation rules are stored in faces-config.xml.

• Navigation rules can be defined using:
– The faces-config console
– The Pageflow diagrammer
– The faces-config.xml file directly

Example:
– /login.jsp navigation rule with two cases
– login.jsp managed by the login backing bean
– loginAction() is the method that returns
success or failure:
– If the method returns
success, forward the user to
/successPage.jsp.
– If the method returns
failure, forward the
user to /failurePage.jsp.

faces-config Console

faces-config.xml
…
<navigation-rule>
<from-view-id>/login.jsp</from-view-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/successPage.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>failure</from-outcome>
<to-view-id>/failurePage.jsp</to-view-id>
</navigation-case>
</navigation-rule>
…

JSF Navigation Modeler
You create a JSF Navigation Diagram by dragging and
dropping elements from the Component Palette. The
faces-config.xml diagram is automatically updated.

JSF Navigation Diagram
With the JSF Navigation Diagrammer, you can visually

design your application from a birds-eye view.

Navigation Elements
• <navigation-rule> • <from-action>
• <from-view-id> • <from-outcome>
• <navigation-case> • <to-view-id>
<navigation-rule>
<from-view-id>/SREdit.jspx</from-view-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/SRSearch.jspx</to-view-id>
</navigation-case>
</navigation-rule>

Global Rules
Global rules apply to all pages in an application.

• Examples: Help page, Home page, Contact page
• Define the <from-view-id> with an asterisk (*)
wildcard.
• Define <from-outcome> (help).
• Define <to-view-id> (help.jsp).
• Any page in the application that returns help
displays help.jsp.

Pattern-Based Rules
• Pattern-based rules are similar to global rules.

• Include a pattern for the <from-view-id> element:
<from-view-id>/staffPages/*
• This rule is used by all pages in the /staffPages
path.
<navigation-rule>
<from-view-id>/staffPages/*</from-view-id>
<navigation-case>
<from-outcome>help</from-outcome>
<to-view-id>/menu/staffHelp.jsp</to-view-id>
</navigation-case>
</navigation-rule>

JSF: Example
Sample JSF login application:

JSF: Example
A simple example of a JSF Login Application:
loginAction Success
success.jsp
login.jsp
Failure
failure.jsp

UI components and value binding to a managed bean:
<h:InputText value="#{Login.userId}"/>
<h:InputSecret value="#{Login.password}"/>
Submit <h:commandButton action="#{Login.login}"/>
login.jsp
Login: A managed bean with the userId and

password fields and the login()method

A command UI component bound to an action:

<h:commandButton action="#{Login.loginAction}"/>
login.jsp
Login: A managed bean (Login.java) with an action

method called loginAction()
Returns string: failure or success

public String loginAction() {

String userId =
(String)this.getUserId().getValue();
String password =
(String)this.getPassword().getValue();
if (userId.equalsIgnoreCase("gary") &
password.equalsIgnoreCase("test")) {
return "success"; }
return "failure";
}

Using the JSF Configuration Editor

Managed Beans
• Managed beans can:

– Store state
– Execute a Java routine
– Define a handler for event listeners
• They have no-argument constructors.
• Lazy initialization is performed by JavaServer
Faces.
• Access scope: None, Request, Application, or
Session
• Backing beans:
– Are special types of managed beans
– Contain getter and setter methods for UI
components

Creating Managed Beans
Entry in faces-config.xml:
<managed-bean>
<managed-bean-name> UserInfo </managed-bean-name>
<managed-bean-class> org.srdemo.view.backing.UserInfo
</managed-bean-class>
<managed-bean-scope> session </managed-bean-scope>
</managed-bean>

Managed Bean: Example
• Definition:
<managed-bean>
<managed-bean-name>userbean</managed-bean-name>
<managed-bean-class>com.oracle.sample.User</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
• Usage on a page:
<h:inputText value="#{userbean.name}"/>
• Usage in code:
Application app =
FacesContext.getCurrentInstance().getApplication();
ValueBinding bind = app.createValueBinding("#{userbean}");
User user = (User)bind.getValue(ctx);

Setting Managed Bean Scope
Each managed bean has a

scope:
• Application
• Session
• Request
• None

Relationships Between Managed Beans
Managed beans can access other beans:

Beans in Access beans in scope
scope
none application session request
none Yes No No No
application Yes Yes No No
session Yes Yes Yes No
request Yes Yes Yes Yes

Managed Properties
• Managed bean variables that are exposed through

getter and setter methods
• Configured in faces-config.xml
<!ELEMENT managed-property (description*, display-
name*, icon*, property-name, property-class?,
(map-entries|null-value|value|list-entries))>
• Possible values:
– Null
– Literal string
– Lists and maps
– Value binding expression (EL)

Managed Properties: Examples
Literal string:
<managed-bean> …
<managed-property>
<property-name>label</property-name>
<value>Hello World</value>
</managed-property>
EL accessing a managed bean:

<managed-bean> …
<managed-property>
<property-name>label</property-name>
<value>#{UserInfo['firstname']}</value>
</managed-property>

Managed Properties: Examples
Populating a list:
<managed-bean>
…
<managed-property>
<property-name>bookmarks</property-name>
<list-entries>
<value>http://otn.oracle.com/products/jev</value>
<value>http://otn.oracle.com/products/ias</value>
</list-entries>
</managed-property>
…
Use <map-entries> to specify managed properties

that are of the Map type.

Using the Managed Bean in the JSF Page
Access UI components and values
Login.java managed bean:

…
Getter for userId
Setter for userId
…
successPage.jsp:
…
<h:outputText value="#{Login.userId.value}"
binding="#{SuccessPage.outputText1}"
id="outputText1"
/> …

Summary
In this lesson, you should have learned how to:

• Use a JSF Navigation Diagram to plan the pages of
an application and the navigation between them
• Describe JSF Navigation
• Define types of JSF Navigation cases
• Create a backing bean for a JSF page

Practice Overview:
Developing JSF Applications
This practice covers the following topics:

• Using a JSF Navigation Diagram to model page
flow in an application
• Creating the JSF pages of the application
• Adding a managed bean to the project


10 - Planning Navigation and Page Flow

Uploaded by

Copyright:

Available Formats

10 - Planning Navigation and Page Flow

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

10 - Planning Navigation and Page Flow

Uploaded by

Copyright:

Available Formats

10

Planning Navigation and

Copyright © 2007, Oracle. All rights reserved.

After completing this lesson, you should be able to do

10-2 Copyright © 2007, Oracle. All rights reserved.

In traditional navigation, a button or hyperlink is used

10-3 Copyright © 2007, Oracle. All rights reserved.

• JSF Navigation is defined through rules.

10-4 Copyright © 2007, Oracle. All rights reserved.

JSF Navigation Rules

10-5 Copyright © 2007, Oracle. All rights reserved.

• Navigation rules are stored in faces-config.xml.

10-6 Copyright © 2007, Oracle. All rights reserved.

10-7 Copyright © 2007, Oracle. All rights reserved.

10-8 Copyright © 2007, Oracle. All rights reserved.

10-9 Copyright © 2007, Oracle. All rights reserved.

10-10 Copyright © 2007, Oracle. All rights reserved.

With the JSF Navigation Diagrammer, you can visually

10-11 Copyright © 2007, Oracle. All rights reserved.

10-12 Copyright © 2007, Oracle. All rights reserved.

Global rules apply to all pages in an application.

10-14 Copyright © 2007, Oracle. All rights reserved.

• Pattern-based rules are similar to global rules.

10-15 Copyright © 2007, Oracle. All rights reserved.

Sample JSF login application:

10-16 Copyright © 2007, Oracle. All rights reserved.

A simple example of a JSF Login Application:

10-17 Copyright © 2007, Oracle. All rights reserved.

UI components and value binding to a managed bean:

Submit <h:commandButton action="#{Login.login}"/>

Login: A managed bean with the userId and

10-18 Copyright © 2007, Oracle. All rights reserved.

A command UI component bound to an action:

Login: A managed bean (Login.java) with an action

Returns string: failure or success

10-19 Copyright © 2007, Oracle. All rights reserved.

public String loginAction() {

10-20 Copyright © 2007, Oracle. All rights reserved.

10-21 Copyright © 2007, Oracle. All rights reserved.

• Managed beans can:

10-22 Copyright © 2007, Oracle. All rights reserved.

10-24 Copyright © 2007, Oracle. All rights reserved.

10-25 Copyright © 2007, Oracle. All rights reserved.

Each managed bean has a

10-26 Copyright © 2007, Oracle. All rights reserved.

Managed beans can access other beans:

application Yes Yes No No

session Yes Yes Yes No

request Yes Yes Yes Yes

10-27 Copyright © 2007, Oracle. All rights reserved.

• Managed bean variables that are exposed through

10-28 Copyright © 2007, Oracle. All rights reserved.

EL accessing a managed bean:

10-29 Copyright © 2007, Oracle. All rights reserved.

Use <map-entries> to specify managed properties

10-30 Copyright © 2007, Oracle. All rights reserved.

Access UI components and values

Login.java managed bean:

10-31 Copyright © 2007, Oracle. All rights reserved.