® ibm software group © 2006 ibm corporation.jsp page flow – and managing state in your web...

®

IBM Software Group

© 2006 IBM Corporation

.JSP Page Flow – and Managing State in your Web Application

This learning module covers the salient features of managing transaction and state in your dynamic content web application. It also covers page flow and forwarding options, request and session page beans.

2Last update: 12/04/2007

Course

Course Setup Web/JSF Overview JSF Properties Deep Dive Essential JSF Components Additional JSF Components JSF dataTables Page Flow and State ManagementPage Flow and State Management AJAX Controls and JavaScript JSF Component Tree and Dynamic Property Setting Web-Site Design and Template Pages Appendices

Internationalization Page Design Best Practices Additional Use Cases

Units:

JSF/EGL Web Page and Site Design JSF/EGL Web Page and Site Design and Developmentand Development


Unit Objectives

At the end of this unit, you will be able to:

State and describe the different state management options: Application Session Request

State the functions and benefits of Forwarding options in EGL/RBD:

JSF Link Command Link Submit

EGL Forward Forward to URL

HTML Links Native HTML anchor tags

Graphically describe page flow using Links view

Create your own JSF pages initializing State and Forwarding features


State Management Options

Web applications are considered “state-less” - because they do not automatically save information about a user's interaction with the application. State management refers to the act of storing transaction data temporarily, and passing it among the various JSFHandlers in your application.

There are three options (in descending order of scope (the variable’s lifetime): Application variablesApplication variables – which allow you to store data in application server “application”

objects, such that any JSFHandler can access the variable data while the server is “up”

Session variablesSession variables – which allow you to store data in application server session objects

Request variablesRequest variables – which allow you to store and forward data to pages in the URLs

The differences between these approaches is as follows: Application variablesApplication variables are set and maintained in and by the application server for data that is meant

to be “globally available” to all JSFHandlers throughout an application– The are not view-able– Once they are set, unless they are unset by an EGL system library call, their values are extant until the server is

brought down

Session variablesSession variables are stored in the application server’s memory– Variables are not view-able (in the URL)Variables are not view-able (in the URL)

Request variablesRequest variables are passed as value-pair strings in the URL.– They are viewable – and can be seen by hackers (although they can be encrypted)– Their lifecycle (scope) ends when the launched page is rendered

Let’s look at the EGL statements to invoke these options.


State Management Options – j2eeLib Statement Structure

From this screen shot (of Content Assist) you can see the three basic categories of statements (and note that these apply to all three types of variables): clearclear – remove the variable from application server’s memory setset – initialize the value of an variable in server memory to a JSFHandler variable value getget – return the value of an variable from the server to the JSFHandler

A few notes on the two exceptions to the above syntax structure: clearEGLSessionAttrs()clearEGLSessionAttrs() – removes all Session attributes set in your JSFHandler getQueryParameter()getQueryParameter() – is used with AJAX controls – a topic we will cover later in this

course


State Management Options – “Application” Variables

Application variables are “set”

And written to the application server’s memory

“get” And retrieved from the

application server’s memory

Their scope lifetime is: Your application

removes the variableclearApplicationAttr()

Until the server is brought down (stopped)

Notes: Application attributes

are “global” to all JSFHandlers

As such, they should contain only information that should be made available at that level of scope

As a best practice, one JSFHandler sets – and the rest get

Application Server (WebSphere)Application Server (WebSphere)

ApplicationApplicationVariableVariable

DataData

ApplicationApplicationVariableVariable

DataData

JSFHandler1JSFHandler1setApplicationAttr(…)setApplicationAttr(…)

JSFHandler2JSFHandler2getApplicationAttr(…)getApplicationAttr(…)



JSFHandler…nJSFHandler…ngetApplicationAttr(…)getApplicationAttr(…)


State Management Options – Session Variables

Session variables are “setset”

And written to the And written to the application server’s application server’s memorymemory

““getget”” And retrieved from And retrieved from

the application the application server’s memoryserver’s memory

Their scope (lifetime) is: Your application Your application

removes the variableremoves the variableclearSessionAttr(…)

clearEGLSessionAttrs()

The user redirects his The user redirects his browser to another browser to another server – from a server – from a forward statement forward statement within EGL.within EGL.

Until an internal Until an internal session time-out session time-out occurs (typically 10 occurs (typically 10 minutes)minutes)

***Notes***Notes


State Management Options – Request Variables

Request variables are “setset”

And written to the And written to the application server’s application server’s memory using:memory using:setRequestAttrsetRequestAttr

Forward <var> Forward <var>

““getget”” And retrieved from And retrieved from

the application the application server’s memoryserver’s memory

Their scope (lifetime) is: Your application Your application

removes the variableremoves the variableclearRequestAttr()clearRequestAttr()

The user redirects his The user redirects his browser to another browser to another PAGEPAGE

Application ServerApplication Server

RequestRequestVariableVariable

DataData


DataData

JSFHandler1JSFHandler1setRequestAttr(…)setRequestAttr(…)

JSFHandler2JSFHandler2getRequestAttr(…)getRequestAttr(…)

JSFHandler3JSFHandler3Forward var1 to “…”Forward var1 to “…”

JSFHandler4JSFHandler4

onConstruction(var1…)onConstruction(var1…)


DataData


DataData


Page Forwarding Options

There are three types of page forwarding (launch this new page) options in EGL/RBD

HTML Links Using native HTML anchor tags, you can launch any valid URL

<A href="http://localhost:9081/EGLWeb/allsiteusers.faces">Site Users</A>. See also this <A ref="../images/ibm.gif"> link on top of an image</A>

JSF Links Using the JSF Link component, you can add one of the above HTML anchor tags to

dynamic data content – including passing values as parameters

Form Submit (and EGL forward) Using Submit Buttons and Link-Command tags, you invoke an EGL Function. From which

you may FORWARD (to any page in a project in your workspace), or FORWARD TO URL to any page on the Internet

There are many variations on these options, and the options can be combined. The next slide explains and categorizes this.


Options (Details)Link Link

CategoryCategorySteps/Tools/OptionsSteps/Tools/Options DetailsDetails

HTML LinkHTML Link From HTML Tags, drag a link onto the page, or select a static HTML element, right-click and specify Insert Link. Options:

HTTP link, or link to pageE-Mail link, FTP, anchor, etcHTML links also include Image Maps

When to use: When you all you need is a static link address – to any page inside or external to your application

When not to use: Cannot combine with JSF (dynamic data) components Must hard-code any parameter values Does not return control to your JSFHandler, before redirecting

JSF Links JSF Links

and and

Command Command ButtonButton

From Enhanced Faces Components, drag one of the following link components onto the page – or, drag and drop on top of a JSF component, to make that component a hyper-link.

All of these controls can be combined with JSF form data – and can pick up values as parameters

Link – to redirect to another page, from a hyper-linkRequest Link – to invoke your JSFHandler, then redirect to another pageCommand Link to submit your form to your JSFHandler

Use JSF Link When you want to redirect to another page, using form data as a parameter in the URL – without invoking your JSFHandler (before redirecting)

Use Command Link or Command Button When you want to submit your form, and invoke an EGL function in your JSFHandler. Your function can issue a forward, but the target will be specified on the form

Use Request Link When you want to invoke an EGL function in your JSFHandler, then redirect to another page. Note that this option allows you to specify a target= dynamically (see upcoming workshop)

EGL EGL Forward Forward StatementsStatements

Two options: Forward <parameter1>, <parameter2> to “pageInProject”; Example:

Forward field1 to “hello2”;

Forward to url “literal” … or string variable with URL and parameter data. Example:

Forward to url “http://www.ibm.com?p1=Val1,p2=Val2”;

Use forward to “page” When the target page is in your project When not in the onConstruction, onPreRender or onPostRender functions

Use forward to URLWhen the target page or URL is not in your projectWhen you need to redirect from EGL logic in onConstruction, onPreRender or onPostRender.Example: Someone is not authorized to view a page


JSFHandler Pages and State ManagementJSFHandler Pages and State Management

Your pages are defined in faces-config.xmlfaces-config.xml with a “scope” which controls how long the JSFHandlers (JavaBeans – aka “managed beans”) exist in the application server’s storage at run-time. The default scope for new EGL JSFHandlers is: “sessionsession” – which means the JavaBeans persist while

the user is logged into the application, or until some pre-set server timeout is reached (typically 10 minutes).

An additional scope is “requestrequest” – which forces the server to remove the JavaBean as soon as the page is rendered.

This is important!Let’s dig into it a bit…

WebSphereWebSphereApplication ServerApplication Server

JSFHandler-1JSFHandler-1


Forward to… What happens to the JSFHandler-1 JavaBean in server storage?


JSFHandlers in session ScopeJSFHandlers in session Scope

When you create a new web (.jsp) page in an EGL/Web project, the tooling enters a default scope of “session” in faces-config.xmlfaces-config.xml. This means the following happens at run-time with each JavaBean that is instantiated (loaded from disk into server memory):

WebSphereApplication Server

JSPPage-JSPPage-11

JSPPage-JSPPage-11



1. onConstruction() The JSFHandler-1 JavaBean remains memory for ~10 minutes, or until the user leaves the application

2. Forward or Link

JSPPage-JSPPage-22

JSPPage-JSPPage-22

3. onConstruction() The JSFHandler-1 JavaBean remains memory for ~10 minutes, or until the user leaves the application


JSFHandlers in session Scope + JSFHandlers in session Scope + cancelOnPageTransition=yescancelOnPageTransition=yes

Forcing the Application Server to maintain each instance of a JavaBean for up to 10 minutes or conceivably longer may not be the ideal situation for your server’s memory allocation. If you add cancelOnPageTransition=yes to your JSFHandler properties, your page’s JavaBean will be

removed from server memory – when the user launches the next pagewhen the user launches the next page


JSPPage-JSPPage-11

JSPPage-JSPPage-11



JSPPage-JSPPage-22

JSPPage-JSPPage-22

1. onConstruction()

2. Forward or Link

4. onConstruction()

3. IF cancelOnPageTransition=yesJSFHandler-1 removed fromApplication Server memory.


JSFHandlers in JSFHandlers in requestrequest Scope Scope

For the optimal server memorymemory performance, you should design your pages to save and return minimal data to/from the Application Server’s Session variables, and define your pages to be request scope. For page’s in request scope, the JSFHandler bean is removed from the server at then end of the

onConstruction() function. As you can imagine, this can save considerable memory. However, you will have to design your logic to support selective variable state management - especially if your page’s lifecycle involves multiple round-trips from the user’s browser to the server.


After onConstruction() the JavaBean is removed from server memory. Use setSessionAttr/getSessionAttr

to persist data values temporarilyForward or Link

After onConstruction() the JavaBean is removed from server memory. Use settSessionAttr/getSessionAttr to persist data values temporarily

JSPPagJSPPage-1e-1

JSPPagJSPPage-1e-1

SessionSessionVariableVariable

DataData

SessionSessionVariableVariable

DataData JSPPagJSPPage-2e-2

JSPPagJSPPage-2e-2

JSFHandler-2JSFHandler-2getSessionAttrgetSessionAttrsetSessionAttrsetSessionAttr

JSFHandler-1JSFHandler-1getSessionAttrgetSessionAttrsetSessionAttrsetSessionAttr


Maintaining State With Request Pages – 1 of 2When initially loaded (if called from another page) request pages are no different than session scoped pages.

However, when they are loaded because of a Form Submit, there are three things that you must understand when designing your request-scoped pages:1. The JSFHandler function order2. How to code logic that determines and handles onConstruction()onConstruction() logic when the page:

Is called from another page Is called from a Form Submit

3. How to save and return selective variable values stored in Session ***Notes***Notes

JSFHandler function order for request pages JSFHandler function order for request pages (upon form submit) For pages that interact iteratively with users (like a data entry form), when a page is in sessionsession scope,

the function that is bound to a Submit button is executed in the JSFHandler. And that is all. One click / submit? That function is invoked (and any other functions called from it)

In a page that is defined as requestrequest scope: When a user clicks a function:1. The page is loaded into the server “from scratch” – as if the page was called by some other page’s link or

forward to statement. All data variables have initial values (i.e. they do NOT maintain the values that existed before the page was rendered)

2. onConstruction() is executed

3. Then the function that is bound to the submit button is executed***see Notes***

JSPPagJSPPagee

JSPPagJSPPagee

SubmitSubmitSubmitSubmit

Form Submit Form Submit WebSphere WebSphere Application Application

ServerServer

JSFHandlerJSFHandler


onConstruction()onConstruction()……

Function (bound to clicked Submit Button)Function (bound to clicked Submit Button)……

1.

3.

2.


Maintaining State With Request Pages – 2 of 2

How to code EGL that determines and handles onConstruction() logic when the page: is called from another page …vs… is called from a Form Submit1. Retrieve a session variable into an EGL variable. This variable will act as a flag for the lifecycle path 2. Code conditional logic that tests the EGL variable and takes appropriate action based on whether this

is: Initial load (setup page variables) …or… Form Submit (interact with user)

Session Session Variable Variable

PoolPool

(saveVar == 0)(saveVar == 0)

JSPPagJSPPagee

JSPPagJSPPagee

SubmitSubmit

Link or Forward.Link or Forward.URL contains parmURL contains parm

Initial Page Load Initial Page Load Set key to parmSet key to parmFirst-time-in Business LogicFirst-time-in Business LogicSave values to SessionSave values to Session

Subsequent Page Load (Form Submit)Subsequent Page Load (Form Submit)Return keys from SessionReturn keys from SessionSubmitted-Form onConstruction LogicSubmitted-Form onConstruction Logic

Function onConstruction(parm int)Function onConstruction(parm int)……getsessionAttr(“saveKey”, saveVar);getsessionAttr(“saveKey”, saveVar);

WebSphere Application ServerWebSphere Application Server


Form SubmitForm SubmitPage values Page values return return

TRUETRUEFALSEFALSE…or…


Workshop – Request Page Form

You will Create a new version of updatecustomer (updatecustomer3.jspupdatecustomer3.jsp) You will define it as requestrequest in scope Copy/Paste standard request page business logic Create the fields for the new page Run and test and note from the console, the sequence/order of function

execution Modify two lines of code in the JSFHandler’s onConstruction function, that will

demonstrate the interaction between page data and saved values, for pages in request scope

Re-test and validate your understanding of this technique

Note – this is a multi-step and non-trivial workshop, but very important for your complete understanding of this critical process


Create updatecustomer3.jsp

From Project Explorer Create a new Web Page: updatecustomer3.jspupdatecustomer3.jsp Use a template from the MyTemplates folder Change the header text as shown Save (press Ctrl/S)


Updatecustomer3.egl

Replace the boiler-plate EGL statements with the code in the Notes section of this slide.

Press Ctrl/S Read the comments

carefully, and for understanding.

Especially of the: getSessionAttr()getSessionAttr() If test to determine which

lifecycle phase setSessionAttr()setSessionAttr() clearSessionAttr()clearSessionAttr()


Add EGL Page Data to the .JSP Page

From Page Data: Drag and Drop customer

onto the Content Area: Create Customer_ID as

an output text control Create the remainder of

the fields as Input Text controls

Drag and Drop updateCustomerFunc() on the Content Area

Drag and Drop returnToAllCustomers2() on the Content Area

Drag and drop outputVar on the page as shown


From the new Link’s Properties Add a Parameter To customerArray.CustomerIDcustomerArray.CustomerID

From the new Link’s Properties Add a Parameter To customerArray.CustomerIDcustomerArray.CustomerID

Add a New Link From allcustomers2.jsp

From Enhanced Faces Components Add a link to CustomerIDCustomerID URL: updatecustomer3.facesupdatecustomer3.faces

From Enhanced Faces Components Add a link to CustomerIDCustomerID URL: updatecustomer3.facesupdatecustomer3.faces


Run On Server – Verify Results – 1 of 2

1. Run and test allcustomers2

2. From updatecustomer3 Note the value of OutputVar Change some data and press updateCustomerFunc Your data should be saved – BUT NOTE – OutputVar

no longer has data…why?

(Because it is an output field and unlike CustID – is not saved to session between lifecycle phases)

Press returnToAllCustomers2

3. Open the Console view Read the ** writeStdOut(“messages”) and note the

sequence/order of function execution in a request page


Run On Server – Verify Results – 2 of 2

From updatecustomer3.egl – onConstruction() function: Un-comment the statement that assigns

outputVar on the Form Submit lifecycle phase (else path)

Comment out the statement that assigns customer.CustomerID to the saveKey;

Press Ctrl/S to save your edits

Run allcustomers2.jsp and re-test the pages

Note that the database update failed… why?

Because the row’s primary key – which is not returned from the page because it is an output field – is missing in the record to be updated

One other use case scenario to solve. If you run from allcustomers2 twice – within the same session, your updatecustomer3 page will not work correctly. Can you figure out why? (Read the Notes if you need help). To fix this, from allcustomers3.egl’s onConstruction() function, add: clearSessionAttr(“cidSession”);clearSessionAttr(“cidSession”);


Workshop to Explore the use of JSF Request Links – 1 of 5

It can be crucial for your application to provide conditional forwarding of a page to different target browser – after the page invokes an EGL function (ex. Write to a database, perform some calculations, etc.).

You can accomplish this requirement using the JSF Request Link.

From Project Explorer Create a new Web Page: requestLinkPage.jsprequestLinkPage.jsp Use a template from the MyTemplates folder Change the header text as shown Save (press Ctrl/S)

Edit the EGL code. Replace the entire JSFHandler for the page, with the contents in the Notes section of

this slide (ensure that the page names match)

Save: Ctrl/SCtrl/S



Read for understanding, the comments in the JSFHandler

Function that will open a page in a new browser frame

Passing a parameter

Function that will open a page in a browser frame named: “frame2”

Also passing a parameter



From Page Designer – add the following: Two JSF Request links. For each link:

Type representative label text From All Attributes

– Specify a target that accesses the

associated EGL function:

An HTML Horizontal Rule

An HTML inline frame, named: frame2frame2



Select each request link, and from the Properties/All Attributes view specify their respective action.



Run the page, and test out the Request links. Look in the console to see the messages written that confirm the EGL JSFHandler was invoked, before redirecting


OPTIONALOPTIONAL Workshop – Working with State and Forwarding Features

You will create several pages that demonstrate the language and tooling features just discussed.

Specifically: state1.jspstate1.jsp – will demonstrate the linking and forwarding features, as well as initializing

application/session/request attributes and forwarding to state2.jspstate2.jsp state2.jsp state2.jsp – will receive and display the initialized application, session and request

variables - and forward to state3.jspstate3.jsp state3.jspstate3.jsp – will receive and display the same initialized application, session and request

variables – and allow you to clear them, and forward back to state1.jspstate1.jsp

state1.jsstate1.jspp

state1.jsstate1.jspp state2.jsstate2.js

pp




Forward/Links to other URLsForward/Links to other URLs

Application VariableApplication VariableSession Variable(s)Session Variable(s)Request VariableRequest Variable

setset

ForwardForward ForwardForward

ForwardForward

getget getget

ApplicationApplicationServerServer


Create state1.jsp

Create a new page, named: state1.jspstate1.jsp

- Replace the default code with the JSFHandler code in the slide Notes

- Check out the following!

- j2eelib.get functions

- j2eelib.set functions

- Several different forward options

Note also that the JSFHandler has the

cancelOnPageTransitioncancelOnPageTransition property


State1.jsp Page – Server Attributes Section – 1 of 3

Change the page header text Add an HTML table to the page:

16 Rows/2 columns/100% width

Combine cells in the top row, and add the text shown

Rows 2 4 Add the text that is shown in the

left column Drag JSF output

controls in the right column (From Page Data) Bind the

variables as shown in the screen capture to the output controls

Combine cells in rows 5 and 6 In the left column, rows 6 - 16

add the text as shown here

In the right hand column:Row 7Row 7 – add an HTML link Type: File Browse and select

dataGraph.jspdataGraph.jsp Change the .jsp extension

to .faces.faces

Row 8Row 8 – add the ibm.gif graphic from \images\

Right-click over the graphic and add an HTTP link to: http://www.ibm.com

Note: To add an HTML link to a graphic.Note: To add an HTML link to a graphic.1.1. SelectSelect (set focus to) (set focus to) the graphicthe graphic2.2. Right-clickRight-click - and from the context menu - and from the context menu3.3. Select: Select: Insert Link…Insert Link…

Note: To add an HTML link to a graphic.Note: To add an HTML link to a graphic.1.1. SelectSelect (set focus to) (set focus to) the graphicthe graphic2.2. Right-clickRight-click - and from the context menu - and from the context menu3.3. Select: Select: Insert Link…Insert Link…



In the right hand column:Row 9Row 9 - add a JSF link It’s URL should be:

allorders.faces Type the label as shown

Row 10Row 10 – add a JSF Image From the Images Properties/File:

Browse to: /images/ibm.gif Drag and drop a JSF LinkLink on

top of the JSF Image control It’s URL should be:

http://www.ibm.comhttp://www.ibm.com

Row 11Row 11 – add a Link-CommandFrom Properties/All Attributes

specify an actionaction that invokes: commandLinkFunc()

Select (click) the text portion of the Link and type the ValueValue as shown

Add a JSF outputoutput control next to the Link-Command

From Page Data, drag and drop cmdLinkcmdLink on top of the output control

Row 12Row 12 – From Page Data, drag & drop submitButtonFunc()

Add a JSF output control next to the Submit Button created

From Page Data, drag and drop subButton on top of the output control



In the right hand column:Row 13Row 13 - From Page Data, drag

and drop EGLForward()

Row 14Row 14 - From Page Data, drag and drop EGLForwardRequest()

Row 15Row 15 - From Page Data, drag and drop EGLForwardToURL()

Add a JSF input control next to the button

From Page Data, drag and drop city on top of the input control

Row 15Row 15 - From Page Data, drag and drop setAttrsAndFwd()

Run the page on the server

Try out all of the options EXCEPT – setAttrsAndFwd()

We need to create a new page for that.


Create state2.jsp Page

Create a new page, named: state2.jspstate2.jsp Replace the default code with the JSFHandler code in the slide Notes.

Read through the EGL statements – note the: J2eelib.get – statements New U.I. record EGL forward to “state3” after setting a new session attribute value


Design the state2.jsp Page

As you can see, this is a much simpler page than state1.jsp

Drag the rec - uiRecSession variable on the page.

Create output fields

Optionally Customize the labels Select the entire HTML table

and give it a border: 1

Drag the forwardToState3() function on the page


Create state3.jsp Page

Create a new page, named: state3.jspstate3.jsp. . Replace the default code with the JSFHandler code in the slide Notes.

Read through the EGL statements

Note the: J2eelib.get – statements J2eelib.clear – statements Forward to state1.jsp


Design the state3.jsp Page

As you can see, this is also a much simpler page than state1.jsp

Drag the rec - UIRecSession variable on the page.

Create output fields. Optionally customize the labels

Add an HTML Horizontal Rule

Drag clearApplicationAttr()clearApplicationAttr() clearSingleSessionAttr()clearSingleSessionAttr() forwardToState1()forwardToState1() …functions on the page, to create the submit

buttons shown


Run the Pages (starting from state1.jsp)

Run state1.jsp. Click setAttrsAndFwdsetAttrsAndFwd. Check out the values in the state variables. Launch state3.jsp. Try out the clear functions. Go back to state1.jsp (Note that (unless you cleared them) the Application and Session attributes are still available and will show up on state1.jsp – why?)


Page Links View – state1.jsp

The web tooling can show you all of your JSF page links (notably, not the EGL forward), including:

Templates .CSS files Graphics # of references HTML links JSF links Navigation links

Website-navigator See next slide

Try it out!From the Window menu…select Show View

Links


Page Links View – menu.jsp

Try looking at menu.jsp, or allcustomers2.jsp in the Links view (with the Links view open, just click the page name in Project Explorer)


Now that you have completed this unit, you should have:

Stated and described the different state management options: Application Session Request

Listed the functions and benefits of Forwarding options in EGL/RBD:

JSF Link Command Link Submit

EGL Forward Forward to URL

HTML Links Native HTML anchor tags

Used Links View to graphically describe page flow

Created your own JSF pages, and initialized State and Forwarding features

Unit Summary

® ibm software group © 2006 ibm corporation.jsp page flow – and managing state in your web...

Documents