02 Page Navigation

© 2005 Marty Hall
JSF: Controlling
Page Navigation
Core Servlets & JSP book: www.coreservlets.com

More Servlets & JSP book: www.moreservlets.com
Servlet/JSP/Struts/JSF Training: courses.coreservlets.com
http://courses.coreservlets.com/ -- Hands-on, customized training for Java, servlets, JSP, Struts, and JSF.
© 2005 Marty Hall
For live JSF training, please see

JSP/servlet/Struts/JSF training courses at
http://courses.coreservlets.com/.
Taught by the author of Core Servlets and JSP, More
Servlets and JSP, and this tutorial. Available at
public venues, or customized versions can be held
on-site at your organization.
Topics in This Chapter
• JSF flow of control
• The basic steps in using JSF
• Static navigation
– One result mapping
• Dynamic navigation
– Multiple result mappings
4 J2EE training and tutorials: http://www.coreservlets.com
JSF Flow of Control

• A form is built from a palette of GUI
components and displayed to the user
• The form is submitted to itself
– I.e., both original URL and ACTION URL are
http://…/blah.faces
• A bean is created that represents the form
data
• The action designated by the form is
invoked
– This method uses the data from the form bean, invokes
business-logic and data-access logic, and creates/stores
results beans
• The action method returns a condition
• The page corresponding to the condition is
5
displayed J2EE training and tutorials: http://www.coreservlets.com
Steps in Using JSF
1. Create a bean to represent the form data
• Postponed until next section
2. Use f:view and h:form to create an input
form
3. Specify the action controller with the
action attribute of h:commandButton
4. Create an action controller that reads the
form data, invokes business logic, stores
results beans, and returns conditions
5. Use faces-config.xml to declare the form
bean and navigation rules
6. Create JSP pages corresponding to each
return condition
7. Protect raw JSP pages from access
Example 1: Static Navigation

• Started by copying jsf-blank and renaming it
to jsf-test
• Original URL will be
http://hostname/jsf-test/register1.faces
• When form submitted, a static page
(result1.jsp) is displayed
• No business logic, beans, or Java code of
any sort
• Main points
– Format of original form
– Use of the faces-config.xml file

Main Points of This Example
• Input form has following format:
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<f:view>
HTML markup
<h:form>
HTML markup and h: tags
</h:form>
HTML markup
</f:view>
• You use faces-config.xml to declare mappings:
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE faces-config PUBLIC …>
<faces-config>
<navigation-rule>
<from-view-id>/blah.jsp</from-view-id>
<navigation-case>
<from-outcome>some string</from-outcome>
<to-view-id>/WEB-INF/results/something.jsp</to-view-id>
</navigation-case>
</navigation-rule>
8 </faces-config> J2EE training and tutorials: http://www.coreservlets.com
Step 1: Create Form Bean

– This example ignores form data

Step 2: Create Input Form
• Basic format
<f:view>
…
<BODY>
…
<h:form>
…
</h:form>
…
</BODY>
</f:view>
• Invoking page
– Actual file is blah.jsp
– URL is blah.faces

• The h:form element
– ACTION is automatically self (current URL)
– METHOD is automatically POST
• Elements inside h:form
– Use special tags to represent input elements
• h:inputText corresponds to <INPUT TYPE="TEXT">
• h:inputSecret corresponds to <INPUT TYPE="PASSWORD">
• h:commandButton corresponds to <INPUT TYPE="SUBMIT">
– In later sections, we will see that input elements will be
automatically associated with bean properties
– For static navigation, specify arbitrary string as action of
h:commandButton
• String must match navigation rule from faces-config.xml
• More info on h:blah elements
– http://java.sun.com/j2ee/javaserverfaces/1.1/docs/tlddocs/

Step 2: Example Code
<f:view>
<!DOCTYPE …>
<HTML>
<HEAD>…</HEAD>
<BODY>
<CENTER>
<TABLE BORDER=5>
<TR><TH CLASS="TITLE">New Account Registration</TH></TR>
</TABLE>
<P>
<h:form>
Email address: <h:inputText/><BR>
Password: <h:inputSecret/><BR>
<h:commandButton value="Sign Me Up!" action="register"/>
</h:form>
</CENTER></BODY></HTML>
</f:view>
Step 3: Specify Action Controller

• Use the action attribute of h:commandButton
• For most real cases, you specify a method to be
called when form is submitted
– The method returns various strings, and faces-config.xml maps the
strings to output pages
– See upcoming example for details
• For static navigation, you specify a simple string
– faces-config.xml maps the string to an output page
• Example
<h:form>
Email address: <h:inputText/><BR>
Password: <h:inputSecret/><BR>
<h:commandButton value="Sign Me Up!" action="register"/>
</h:form>

Steps 2 & 3: Example Results
• File is tomcat_dir/webapps/jsf-test/register1.jsp
• URL is http://localhost/jsf-test/register1.faces
Step 4: Create an Action

Controller
– This example ignores form data and invokes no logic or
Java code of any sort

Step 5: Update faces-config.xml
• General format
<faces-config>
…
</faces-config>
• Specifying the navigation rule
…
<faces-config>
<navigation-rule>
<from-view-id>/the-input-form.jsp</from-view-id>
<navigation-case>
<from-outcome>string-from-action</from-outcome>
<to-view-id>/WEB-INF/…/something.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>

<faces-config>
<navigation-rule>
<from-view-id>/register1.jsp</from-view-id>
<navigation-case>
<from-outcome>register</from-outcome>
<to-view-id>/WEB-INF/results/result1.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>

Step 6: Create Output JSP Page
• Note that RequestDispatcher.forward is
used behind the scenes
– So page can be in WEB-INF
• Example code:
– …/jsf-test/WEB-INF/results/result1.jsp
<!DOCTYPE …>
<HTML>
<HEAD>…</HEAD>
<BODY>
<CENTER>
<TABLE BORDER=5>
<TR><TH CLASS="TITLE">Success</TH></TR>
</TABLE>
<H2>You have registered successfully.<BR>
(Version 1)</H2>
</CENTER>
</BODY></HTML>
Step 6: Example Result

• Note that URL is unchanged

Step 7: Protect Raw JSP Pages
• Filename/URL correspondence
– Actual files are of the form blah.jsp
– URLs used are of the form blah.faces
– You must prevent clients from directly accessing JSP
pages
• Since they would give erroneous results
• Strategies
– You cannot put JSP pages in WEB-INF
• Because URL must correspond directly to file location
– So, use security-constraint entries in web.xml. But:
• Clumsy
• Easy to forget
• Results in confusing error messages
• This is a major drawback to JSF design

…
<web-app>
…
<security-constraint>
<display-name>
Prevent access to raw JSP pages that are for JSF pages.
</display-name>
<web-resource-collection>
<web-resource-name>Raw-JSF-JSP-Pages</web-resource-name>

<url-pattern>/welcome.jsp</url-pattern>
<url-pattern>/register1.jsp</url-pattern>
…
</web-resource-collection>
<auth-constraint>
<description>No roles, so no direct access</description>
</auth-constraint>
</security-constraint>
</web-app>

Step 7: Example Results
• In Tomcat, results in confusing error message
• Cannot easily use error-page and error-code to
make a better error page
– Since 500 status code used for many other Tomcat errors
Example 2: Dynamic Navigation

http://hostname/jsf-test/signup.faces
– Collects info to see if user qualifies for health plan
• When form submitted, one of two possible
results will be displayed
– User is accepted into health plan
– User is rejected from health plan
• Main points
– Specifying an action controller
– Creating an action controller
– Using faces-config.xml to
• Declare controller
• Map results to output pages
• Specify the controller with #{controllerName.methodName}
<h:commandButton
value="Sign Me Up!"
action="#{healthPlanController.register}"/>
• Controller method returns strings corresponding to conditions
– If null is returned, the form is redisplayed
– Unlike with Struts, the controller need not extend a special class
• Use faces-config.xml to declare the controller as follows
<faces-config>
<managed-bean>
<managed-bean-name>controller name</managed-bean-name>
<managed-bean-class>controller class</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
</faces-config>
• Add multiple navigation-rule entries to faces-config.xml
– One for each possible string returned by the controller
– If no string matches, the form is redisplayed

• Step 1: Create Form Bean
– Postponed until next section
• In this example, we ignore all input data
– Modeled accurately after real health insurance practices

• Same general syntax as in previous example
– Except for action of commandButton
<f:view>
…
<h:form>
First name: <h:inputText/><BR>
Last name: <h:inputText/><BR>
...
<h:commandButton
value="Sign Me Up!"
action="#{healthPlanController.signup}"/>
</h:form>…
</f:view>
Step 3: Specify Action

Controller
• Use action attribute of h:commandButton
• Specify #{controllerName.methodName}
– The designated method takes no args and returns various
strings. faces-config.xml maps the strings to output pages
– The controller must be declared with a managed-beans
entry in faces-config.xml
• Example
<h:form>
First name: <h:inputText/><BR>
Last name: <h:inputText/><BR>...
<h:commandButton
value="Sign Me Up!"
action="#{healthPlanController.signup}"/>
</h:form>

• File is tomcat_dir/webapps/jsf-test/signup.jsp
• URL is http://localhost/jsf-test/signup.faces
Step 4: Create an Action Controller

• Does not need to extend any particular
class
– Unlike Struts
• The designated method takes no arguments
and returns a String
– Each string should correspond to navigation rule in
faces-config.xml
– Returning null indicates that the original form should be
redisplayed
• Most controllers access request parameters
via beans
– Covered in next section
– Now, our business logic will be independent of input data
package coreservlets;
public class HealthPlanController {

public String signup() {
if (Math.random() < 0.2) {
return("accepted");
} else {
return("rejected");
}
}
}

• Declaring action controller
…
<faces-config>
<managed-bean>
<managed-bean-name>
healthPlanController
</managed-bean-name>
<managed-bean-class>
coreservlets.HealthPlanController
</managed-bean-class>
</managed-bean>
…
</faces-config>

• Specifying navigation rules
– Outcomes should match return values of controller
…
<faces-config>
…
<navigation-rule>
<from-view-id>/signup.jsp</from-view-id>
<navigation-case>
<from-outcome>accepted</from-outcome>
<to-view-id>/WEB-INF/results/accepted.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>rejected</from-outcome>
<to-view-id>/WEB-INF/results/rejected.jsp</to-view-id>
</navigation-case>
</navigation-rule>
…
</faces-config>
Step 6: Create Output JSP

Pages
• …/jsf-test/WEB-INF/results/accepted.jsp
<!DOCTYPE …>
<HTML>
<HEAD>…</HEAD>
<BODY>
<CENTER>
<TABLE BORDER=5>
<TR><TH CLASS="TITLE">Accepted!</TH></TR>
</TABLE>
<H2>You are accepted into our health plan.</H2>
Congratulations.
</CENTER>
</BODY></HTML>

Pages
• …/jsf-test/WEB-INF/results/rejected.jsp
<!DOCTYPE …>
<HTML>
<HEAD>…</HEAD>
<BODY>
<CENTER>
<TABLE BORDER=5>
<TR><TH CLASS="TITLE">Rejected!</TH></TR>
</TABLE>
<H2>You are rejected from our health plan.</H2>
Get lost.
</CENTER>
</BODY></HTML>
Step 6: Results

…
<web-app>
…
<display-name>
</display-name>
<url-pattern>/signup.jsp</url-pattern>
<auth-constraint>
</auth-constraint>
</web-app>
Example 3:
Reading Request Data Manually
http://hostname/jsf-test/register2.faces
• When form submitted, one of three possible
results will be displayed
– Error message re illegal email address
– Error message re illegal password
– Success
• Main points
– Reading request data "by hand" in action controller

• Most real JSF apps use form beans
– Java classes that are created automatically and
automatically populated based on incoming request
parameters
• See next section
• This example reads by hand
– Requires slightly obscure code
• See next slide
– Done moderately frequently in real apps
• To read request headers or to access scoped variables that
are not related to form bean

– This example reads form data the old fashioned way:
by directly calling request.getParameter.
– To do so, you first look up the ExternalContext, which
gives you access to the standard servlet and JSP objects
(request, response, ServletContext, session, etc.) Eg:
ExternalContext context =
FacesContext.getCurrentInstance().getExternalContext();
HttpServletRequest request =
(HttpServletRequest)context.getRequest();
String param1 = request.getParameter("name1");
– The ExternalContext also has methods to access params
and other data out hash tables.
• Request data
– getRequestParameterMap, getRequestCookieMap,
getRequestHeaderMap, etc
• Scoped variables
39 – getRequestMap, getSessionMap, getApplicationMap
J2EE training and tutorials: http://www.coreservlets.com
• Same as previous example, except
– h:form is given an id attribute
– h:inputText and h:inputSecret are also given an id
– The actual request param name is formID:elementID
• Only needed if you read request params manually!
• Example code
<f:view>
…
<h:form id="form2">
Email address: <h:inputText id="email"/><BR>
Password: <h:inputSecret id="password"/><BR>
<h:commandButton value="Sign Me Up!"
action="#{registrationController.register}"/>
</h:form>…
</f:view>
Step 3: Specify Action

Controller
• Use the action attribute of
h:commandButton
• Specify #{controllerName.methodName}
– Same as last example
• The designated method takes no args and returns various
strings. faces-config.xml maps the strings to output pages
• The controller must be declared with a managed-beans
entry in faces-config.xml
• Example
<h:form id="form2">
Email address: <h:inputText id="email"/><BR>
Password: <h:inputSecret id="password"/><BR>
<h:commandButton value="Sign Me Up!"
action="#{registrationController.register}"/>
</h:form>

• File is tomcat_dir/webapps/jsf-test/register2.jsp
• URL is http://localhost/jsf-test/register2.faces
Step 4: Create an Action Controller

• Does not need to extend any particular
class
– Unlike Struts
• The designated method takes no arguments
and returns a String
– Each string should correspond to navigation rule in
faces-config.xml
– Returning null indicates that the original form should be
redisplayed
• Most controllers access request parameters
via beans
– We have not covered this yet
– We will use the manual approach via the ExternalContext
– ExternalContext useful in real life anyhow
• Cookies, session data, request headers, etc.
package coreservlets;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.faces.context.*;
public class RegistrationController {

public String register() {
ExternalContext context =
FacesContext.getCurrentInstance().getExternalContext();
HttpServletRequest request =
(HttpServletRequest)context.getRequest();
String email = request.getParameter("form2:email");
String password = request.getParameter("form2:password");
if ((email == null) ||
(email.trim().length() < 3) ||
(email.indexOf("@") == -1)) {
return("bad-address");
} else if ((password == null) ||
(password.trim().length() < 6)) {
return("bad-password");
} else {
return("success");
44 }}} J2EE training and tutorials: http://www.coreservlets.com

• Declaring action controller
…
<faces-config>
<managed-bean>
<managed-bean-name>
registrationController
</managed-bean-name>
<managed-bean-class>
coreservlets.RegistrationController
</managed-bean-class>
</managed-bean>
…
</faces-config>

• Specifying navigation rules
– Outcomes should match return values of action
…
<faces-config>
…
<navigation-rule>
<from-view-id>/register2.jsp</from-view-id>
<navigation-case>
<from-outcome>bad-address</from-outcome>
<to-view-id>/WEB-INF/results/bad-address2.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>bad-password</from-outcome>
<to-view-id>/WEB-INF/results/bad-password2.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/WEB-INF/results/result2.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>

Pages
• …/jsf-test/WEB-INF/results/bad-address2.jsp
<!DOCTYPE …>
<HTML>
<HEAD>…</HEAD>
<BODY>
<CENTER>
<TABLE BORDER=5>
<TR><TH CLASS="TITLE">Illegal Email Address</TH></TR>
</TABLE>
<P>
Address must be of the form username@host.
Please <A HREF="register2.faces">try again</A>.
</CENTER>
</BODY></HTML>

Step 6: Example Result for Bad
Email Address
• Input

Email Address
• Output

Pages
• …/jsf-test/WEB-INF/results/bad-
password2.jsp
<!DOCTYPE …>
<HTML>
<HEAD>…</HEAD>
<BODY>
<CENTER>
<TABLE BORDER=5>
<TR><TH CLASS="TITLE">Illegal Password</TH></TR>
</TABLE>
<P>
Password must contain at least six characters.
Please <A HREF="register2.faces">try again</A>.
</CENTER>
</BODY></HTML>

Password
• Input

Password
• Output

Pages
• …/jsf-test/WEB-INF/results/result2.jsp
<!DOCTYPE …>
<HTML>
<HEAD>…</HEAD>
<BODY>
<CENTER>
<TABLE BORDER=5>
<TR><TH CLASS="TITLE">Success</TH></TR>
</TABLE>
<H2>You have registered successfully.<BR>
(Version 2)</H2>
</CENTER>
</BODY></HTML>

Step 6: Example Result for
Good Input
• Input
Step 6: Example Result for

Good Input
• Output

…
<web-app>
…
<display-name>
</display-name>
<url-pattern>/signup.jsp</url-pattern>
<auth-constraint>
</auth-constraint>
</web-app>
Value-Change Listeners
• All our examples used action attribute of
h:commandButton
– Specifies code to run when form is submitted
• How to respond to finer-grained events?
– Textfield value has changed
• E.g., fill in state automatically when ZIP code is entered
– New list entry has been selected
• Necessary ingredients
– Specify code that should run
• <h:inputText valueChangeListener="#{bean.method}"…/>
• Note that code runs before action controller
– Force form to be submitted when events occur
• <h:inputText valueChangeListener="#{bean.method}"
onclick="submit()" …/>
Summary
• Basic steps to using JSF
– Create a bean to represent the form data
– Use f:view and h:form to create an input form
– Specify action controller with action of h:commandButton
– Create an action controller
– Use faces-config.xml to declare form bean and navigation rules
– Create JSP pages corresponding to each return condition
– Protect raw JSP pages from access
• Static navigation
– Specify outcome as action of button
• Outcome mapped by faces-config.xml to output page
• Dynamic navigation
– Specify method as action of button
– Method returns outcomes
• Outcomes mapped by faces-config.xml to output pages
© 2005 Marty Hall
Questions?
Core Servlets & JSP book: www.coreservlets.com

More Servlets & JSP book: www.moreservlets.com
Servlet/JSP/Struts/JSF Training: courses.coreservlets.com

02 Page Navigation

Uploaded by

Document Informationclick to expand document information

Copyright:

Available Formats

02 Page Navigation

Uploaded by

Document Information

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

02 Page Navigation

Uploaded by

Copyright:

Available Formats

© 2005 Marty Hall

Core Servlets & JSP book: www.coreservlets.com

© 2005 Marty Hall

For live JSF training, please see

4 J2EE training and tutorials: http://www.coreservlets.com

JSF Flow of Control

Example 1: Static Navigation

7 J2EE training and tutorials: http://www.coreservlets.com

Step 1: Create Form Bean

9 J2EE training and tutorials: http://www.coreservlets.com

10 J2EE training and tutorials: http://www.coreservlets.com

Step 2: Create Input Form

11 J2EE training and tutorials: http://www.coreservlets.com

12 J2EE training and tutorials: http://www.coreservlets.com

Step 3: Specify Action Controller

13 J2EE training and tutorials: http://www.coreservlets.com

14 J2EE training and tutorials: http://www.coreservlets.com

Step 4: Create an Action

15 J2EE training and tutorials: http://www.coreservlets.com

Step 5: Example Code

17 J2EE training and tutorials: http://www.coreservlets.com

Step 6: Example Result

19 J2EE training and tutorials: http://www.coreservlets.com

Step 7: Example Code

21 J2EE training and tutorials: http://www.coreservlets.com

22 J2EE training and tutorials: http://www.coreservlets.com

Example 2: Dynamic Navigation

24 J2EE training and tutorials: http://www.coreservlets.com

Step 1: Create Form Bean

25 J2EE training and tutorials: http://www.coreservlets.com

26 J2EE training and tutorials: http://www.coreservlets.com

Step 3: Specify Action

27 J2EE training and tutorials: http://www.coreservlets.com

28 J2EE training and tutorials: http://www.coreservlets.com

Step 4: Create an Action Controller

public class HealthPlanController {

30 J2EE training and tutorials: http://www.coreservlets.com

Step 5: Update faces-config.xml

31 J2EE training and tutorials: http://www.coreservlets.com

32 J2EE training and tutorials: http://www.coreservlets.com

Step 6: Create Output JSP

33 J2EE training and tutorials: http://www.coreservlets.com

34 J2EE training and tutorials: http://www.coreservlets.com

35 J2EE training and tutorials: http://www.coreservlets.com

36 J2EE training and tutorials: http://www.coreservlets.com

37 J2EE training and tutorials: http://www.coreservlets.com

38 J2EE training and tutorials: http://www.coreservlets.com

Step 1: Create Form Bean

40 J2EE training and tutorials: http://www.coreservlets.com

Step 3: Specify Action

41 J2EE training and tutorials: http://www.coreservlets.com

42 J2EE training and tutorials: http://www.coreservlets.com

Step 4: Create an Action Controller

public class RegistrationController {

Step 5: Update faces-config.xml

45 J2EE training and tutorials: http://www.coreservlets.com

46 J2EE training and tutorials: http://www.coreservlets.com

Step 6: Create Output JSP

47 J2EE training and tutorials: http://www.coreservlets.com