IBM Software Group: AJAX-Enabling Your JSF Components and Web Pages

®
IBM Software Group
AJAX-Enabling Your JSF Components and Web Pages
This learning module covers the use of AJAX technology to enable better response
and performance in your EGL/JSF Web Pages.
© 2006 IBM Corporation

Course
JSF/EGL Web Page and Site Design and
Development
Units:
 Course Setup
 Web/JSF Overview
 JSF Properties Deep Dive
 Essential JSF Components
 Additional JSF Components
 JSF dataTables
 Page 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
Last update: 12/04/2007 2

Unit Objectives
 At the end of this unit, you will be able to:
 Describe the concepts and functions of AJAX and

JavaScript
 Use different types of AJAX to make your pages

respond faster
Request Refresh
Submit Refresh
External Refresh
 Leverage JavaScript to invoke AJAX engine for creating

better response web applications
 Using JavaScript (*Under Construction*)

 Alerts
 Client-Side edits
 Pop-up pages

What are AJAX and JavaScript?
JavaScript is a programming language used for client-side web development. It is not
related to Java, although both JavaScript and Java can trace language roots back to C.
 JavaScript statements are interpreted at run-time in your PC’s browser.
 Some common examples of JavaScript usage include:
 Opening or popping up a new window with programmatic control over the size, position and
characteristics of the new window
 Client-Side (browser-based) validation of web form input values
 Swapping (changing) images as the mouse cursor moves over them
Ajax, or AJAX, is a web development technology used for creating better

responding, dynamic-content web applications.
 Instead of refreshing the entire page from the server on each submit, AJAX exchanges small
amounts of data with the server asynchronously.
 You can target specific controls with this data – so that the entire page is not reloaded (this
looks and behaves LOT better to most users) 
 AJAX also increases the web page's interactivity/speed, and enhances its functionality, and
usability – making the page respond more like a Windows client application.
 AJAX is an acronym standing for Asynchronous JAvaScript and XML.

Web Application Models
Browser
Pag
Pag
AJAX ee
Only this much
data is sent!
Standard Browser JavaScript
Pag HTML +CSS + data
The entire page
Pag
ee
is reloaded from
the server on each AJAX
AJAXEngine
Engine
request
HTTP Request
HTTP Request
Synchronous Data Transfer
Asynchronous Data Transfer
HTML +CSS + data
Application Application
Server Server
EGL Application EGL Application DB
Process data Process data
DB Access database Access database
Call legacy systems Call legacy systems
AJAX Page Requests
 There are three major categories of AJAX page update processing:
1. Refresh Request
With Refresh Request you define individual parameters to AJAX, and only the
values in the specified parameters are sent to your JSFHandler (data
transmission is minimized). Data can be returned from your JSFHandler to an
area of the page defined under AJAX control (typically inside a JSF PanelGroup
Box enabled for AJAX update).
2. Submit Refresh
An AJAX Submit Refresh allows you to define areas of your page under AJAX
control (like Refresh Request) but instead of sending only individual parameters
to your JSFHandler, the entire form is submitted – so your JSFHandler can
reference any user value on any field in the form. See Notes for additional
benefits of Submit Refresh.
3. External Request
Allows a parent page to receive external values from a child page – or, can be
used with multiple pages on the same page (example later in this section).

EGL/JSF Steps to Implementing AJAX Request Refresh Functionality
Only 2 new steps
1. Create a new page – with a template (been there/done that)
2. Develop the EGL JSFHandler and business logic (been there/done that too)
 As you did in the last section , you will call a j2eelib.function to return an AJAX request
parameter – specifically: j2eelib.getQueryParameter(…)
3. Design the Page with JSF components bound to EGL data (been there/done that). However, you will
use one or more JSF Panel Group controls to organize the AJAX requested data:
 JSF Panel Group – if only JSF components are being added…or…
 JSF JSP Panel embedded inside the JSF Panel Group – if JSP + HTML tags are to be
embedded or used in the design (example later in this section)
4. Create a JavaScript event for a JSF component, that invokes AJAX behavior for a target JSF Panel
A Group component:
J
 Note that this essentially creates the JavaScript call to the AJAX engine that creates the HTTP
A
X request to your JSFHandler
S 5. Enable the AJAX container for update, and create a Refresh Request on the JSF Panel Group,
T adding parameters for data to be sent from the AJAX engine to your JSFHandler
E
P
S
Perhaps a bit more detail is in order before we dive in with a workshop.

AJAX-specific Properties in Your JSF Pages
 There are three new JSF properties you
have to learn, to understand how to
implement AJAX
1. AJAX Properties, for a JSF Panel Group

 A JSF PanelGroup component contains
Ajax properties. In here you can specify
which kind of request you want to enable.
 And you can edit the request’s properties
2. AJAX Request Properties

 For every request, you can define one or
more parameters that are made available
to your EGL JSFHandler
 Here we are specifying that the:
textCustState1 and menuStates1 JSF
components can provide a request
parameter to AJAX (which will be passed
into your JSFHandler through a j2eelib.call
3. JavaScript call to the AJAX engine

 For each component you wish to enable for
AJAX, use QuickEdit to define an AJAX
action for a given target Component.
 Below we are specifying that whatever JSF
component is selected in Page Designer
can invoke AJAX on group1 (a JSF
panelGroup) control)

AJAX-specific Coding in your EGL JSFHandler
There are three (somewhat) new considerations for your EGL and the AJAX requests:
1. Use of preRender()
 preRender() is called every time a page is requested (see notes on the difference between preRender() and
onConstruction(). AJAX logic will go in preRender().
2. J2eelib.getQueryParameter(“…”)
 This EGL Built-in function allows you to access the value sent in via the AJAX parameter request
3. Test for NULL value

 Because preRender() is executed every time a page is requested (including the initial page build) we will need
to ensure – programmatically – that we are where we think we are, in the input/output cycle.
1.
2.
3.

The Big Picture – Run-Time 
For Request Refresh:
1.
 User enters “CA” and triggers a JavaScript
event in the browser that calls AJAX
 AJAX builds an HTTP request – including

the parameter value, and invokes your
JSFHandler
JavaScript HTML +CSS + data
 Your JSFHandler’s preRender() function
is invoked. You obtain the user-entered
data (getQueryParameter referencing JSF AJAX
AJAXEngine
Engine
control ID) and use the data to look-up
information in the database
2. HTTP Request
Parameter(“CA”) ordersArray 4.
 EGL Data is returned to AJAX which
renders the response in the designated Application Server
area of the page (i.e. the JSF Panel Group)
3.
Note that a similar lifecycle exists for Submit Refresh
DB
Let’s try a few examples  10

Last update: 12/04/2007
 1. Create a new Page
 Here is our target page. Users
can search Customer Orders
for a specified state 
 Our page will contain an:

 Input field – that fires off an
AJAX request and populates
the dataTable when the user
clicks the Search button
 A Combo-Box that does the
same, but does so when the
user chooses (opens the
Combo-Box and selects) a
state
 Create a new page, named:

ajaxRefreshRequest.jsp
- For now, just change the
Page heading text as shown
in the screen capture. Then
edit the JSFHandler (next slide)
Last update: 12/04/2007 11
 2. JSFHandler Code
 Copy the code in the Notes
section of the slide, and
replace the boilerplate
JSFHandler code. Note
the following:
 The preRender() function
is executed every time the
page is requested (and recall
that AJAX will request the
page)
 Because of this, we need to
differentiate a user action
from the initial request
 Thus if(custState != null)
 j2eelib.getQueryParameter()
j2eelib.getQueryParameter
will retrieve the data from the
AJAX engine.
 You specify the JSF ID
of the control for this
parameter
 The sub-select returns all
orders – where the
order.customer_ID is
equal to any customer_ID
where the customer state =
the state returned through
the AJAX Query Parameter
 We will also allow users to
invoke the search by
selecting a state from a
Combo-Box tied to the states
array.
Last update: 12/04/2007 12

 3. Design the Page – 1 of 2
 The screen capture below shows the JSF design. Create it as follows:
 Add an HTML table to the page: 1 Row/2 columns/Width: 100%
 From Page Data, Drag and drop custState into the left hand column, create an input field,
no submit buttons!
 From the /images/ directory, drag search_button.gif image into the left column, next to
custState ***Notes
 From Page Data, Drag the states array into the right column
 From the Palette, HTML Tags drawer, Add an HTML rule below these controls
Last update: 12/04/2007 13

 Drag a Panel – Group Box
onto the page.
 Select Type of component: Group
 From Page Data, drag ordersArray

inside the top-left corner of the Panel
Group Box.
 Create a read-only dataTable
 Ensure that all controls are

Output fields
 Your dataTable will be nested inside

the Panel – Group Box**(notes)
Last update: 12/04/2007 14

 4. Create the JavaScript Event to Invoke the AJAX Engine
 Select the custState control. From the *Quick Edit view, select the onblur event, and specify:
 Use pre-defined behavior
Action: Invoke Ajax behavior on the specified tag
Target: group1 (this directs AJAX to render data in the Panel Group Box)
StateAbbrev From the *Quick Edit view, select the onchange event - specify:
 Select StateAbbrev.
Last update: 12/04/2007 15

 5. Create an AJAX Refresh Request on the Panel Group – 1 of 2
 Select the panelGroup – note, to do this, follow these steps:
1. First select the entire dataTable. Then from Properties (the side bar of all the page
properties) you will see an: h:panelGroup entry. Click it.
2. After you select h:panelGroup, you will its see sub-properties. Select: – Ajax
 Check:  Allow Ajax updates
 Click  Refresh, then click the icon: Click to edit Ajax request properties
1.
2.
Last update: 12/04/2007 16
From the hx:ajaxRefreshRequest property:
 Click: Add Parameter
 (Under Parameter values sent from the browser)
 Open the Combo-Box and select: textCustState1
 Again click: Add Parameter
 Open the Combo-Box again, and select: menuStates1
 Note – These will be the parameters AJAX sends to your JSFHandler in each request. You
will retrieve each separately using a j2eelib.getQueryParameter(…) function
 That’s all there is to it! You’re ready to test your first AJAX page.
Last update: 12/04/2007 17
 Run the Page
 Type an upper-case state abbreviation: NY …or… NJ …or… CA …or… CT
 Click Search
 Note the speed with which the data is returned, and note that the top part of the page doesn’t “blink” (more
specifically, the entire page does not get re-loaded) when the data is returned
 When you’re satisfied with this example: Edit the JSFHandler.
 Comment out: // custState = j2eelib.getQueryParameter("textCustState1");
 Un-comment:
Un-comment: custState = j2eelib.getQueryParameter("menuStates1");
 Save your JSFHandler changes, and run the page.

18
Search using the Combo-Box
Last update: 12/04/2007
OPTIONAL WORKSHOP – Use Request From a dataTable Row-Click
Here’s an
extension to the
page we’ve been
working on –
passing a
parameter as an
AJAX request
from a clicked-row
inside a
DataTable.
This particular
Use Case is a bit
“oblique” but this
page pattern has
lots of practical
applications in
real-life scenarios
If you have time,

try the steps
starting on the
next slide.
 Note that this is

time-consuming
and the steps
Last update: 12/04/2007 19

 2. JSFHandler Code - Modifications
 We will add three new lines to the JSFHandler for this scenario
1. A new dynamic array of customer records
2. The EGL get statement to retrieve the data from the database into the array
3. A new j2eelib.getQueryParameter - which accepts an AJAX request parameter named:
“StateH” and assigns it to custState (subsequently used in the SQL table look-up)
 Add the statement shown below inside the boxes
1.
2.
Comment out 
3.
 Ctrl/S
Last update: 12/04/2007 20
 3. Design the Page – Add a new Column and the dataTable – 1 of 2
 You will add the Customers array to the page as a read-only dataTable. To do this you will need to add a
column to the existing HTML table, then place the array in the table. As of this release – dragging and
dropping an array in an HTML table is a two-step procedure…
Add a new column to the HTML table

 Click to the left-side of Select a State
 Right-click and select:
 Table
– Add Column to Right
Add the Customers array inside the new HTML column (follow these steps):
1. From Page Data, select the customers – customer[] array onto the page within any line break but not
(yet) inside the HTML table. Example:
1.a Configure the controls as output (read-only)
1.b Select: CustomerId and State
2. Select the entire dataTable
- Drag and drop it into the new HTML column
2.
1.
Last update: 12/04/2007 21

 3. Design the Page – Add a new Column and the dataTable – 2 of 2
 When you are finished, your HTML table containing the dataTable should look like
this -
Customers array
dataTable
New HTML table column
Last update: 12/04/2007 22

 3. Design the Page – Add a link and Hidden Variable to the dataTable
1. (From the Palette) Customize the Enhanced Faces Components drawer (Right-click, select Customize)
 Find the Input – Hidden component and un-check:  Hide
2. (From the Palette) Drag an Input – Hidden component into the State column of the dataTable (see
screen capture). From Properties,
Properties ensure that its
 Id is  StateH
 Value is  Browse and from Page Data select Customers.State
3. Select the control (the output field, not the hidden one you just added) and from the Palette Double-Click Link
to add a Faces Link to the State field. Do not fill in the URL**
Last update: 12/04/2007 23

 Select the Link next to the State control. From the *Quick Edit view, select the onclick event,
and specify:
Target: group1 (this directs AJAX to render data to JSF components inside the Panel Group Box)
Last update: 12/04/2007 24

 5. Update the Panel Group’s AJAX Refresh Request – 1 of 2
 First select the entire dataTable. Then from Properties (the side bar of all the page
properties) you will see: h:panelGroup – click this property
 When you do, you will see sub-properties of the h:panelGroup. Select – Ajax
 Click  Refresh, then click the icon: Click to edit Ajax request properties
Last update: 12/04/2007 25

From the hx:ajaxRefreshRequest property:

Click: Add Parameter – this will add a 3rd row
(Under Parameter values sent from the browser)
 Type the following (CAREFULLY)
CAREFULLY directly into the new empty box:
$$AJAXROW$$form1:tableEx2:StateH
 Notes
 $$AJAXROW$$ - JSF/AJAX statement prefix, i.e. the “current/clicked row” of a dataTable
 form1:tableEx2: - The fully-qualified HTML name of the dataTable**
 StateH - A hidden variable.
- StateH is what the getQueryParameter references:
 Note also that colons : separate the three-part field name form1:tableEx2:StateH
Last update: 12/04/2007 26

 Run the Page
 From the dataTable, Click: NY …or… NJ …or… CA …or… CT
Last update: 12/04/2007 27

 Example 2 – Dependent ComboBoxes and AJAX Submit Refresh
 Here is our target page. Users
can search for customers by
State. And for a given customer,
and find their Orders 
 Our page will contain an:

 A Combo-Box that is
populated by server-side
data. The user makes a
selection which fires an
AJAX Submit Refresh to
open:
 Another Combo-Box that
retrieves customers for the
selected state. The users
then select a customer that
fires off another Submit
Refresh to return all Orders
for the selected customer.
Let’s begin:
 Create a new page, named:
ajaxSubmitRefresh.jsp
- For now, just change the
page heading text as
shown in the screen
capture
Last update: 12/04/2007 28
 2. JSFHandler Code
 Copy the code in the Notes section of
the slide, and replace the boilerplate 1.
JSFHandler code.
 Note the following:
1. There are two dynamic arrays for
the ComboBoxes (note their
properties), and a dynamic array
of orders
2.A case statement in
preRender() tests a hidden
variable on the form – which
determines the ComboBox that
was selected – and calls one of
two functions that will return 2.
dynamic array rows from different
tables.
3. In the CustomersCB array we
are inserting a row 1 – if
customers are found – this will
remind users to select a
customer.
 The SQL statements search for:

 Customers from a selected state
 Orders for a selected Customer 3.
 Please read all of the

//comments in the JSFHandler
code
 Don’t forget Ctrl/S

Last update: 12/04/2007 29
 The screen capture below shows the JSF design. Create it as follows:
1. (From Page Data) Drag StatesCB onto the page to create the Select a State: ComboBox
2. Drag a Panel - Group Box on the page below Error Messages
 Select: Type of component: Group
3. Drag another Panel – Group Box on the page, and drop it inside the Panel – Group Box
 Select: Type of component: JSP (see Notes on why you’re doing this)
4. (From Page Data) Drag
CustomersCB onto the page, and drop it inside the JSP Panel – Group
Box to create the Customers from selected state: ComboBox
StatesCB 
CustomersCB 
Inside a JSP Panel Group Box
Inside a Group Panel Group box
Note: We have modified the default label

text for the ComboBoxes
Last update: 12/04/2007 30
1. Drag a third Panel – Group Box (Type Group) onto the page – below the Customers
ComboBox
2. (From Page Data) Drag the orders array inside the top-left corner of the Panel Group Box.
 Create a read-only dataTable
 Ensure that the OrderAmount Control Type is an Output field
Your dataTable will be nested inside the Panel – Group Box
3. (From the Palette – if you have not done so already) Customize the Enhanced Faces Components drawer (Right-
click, select Customize). Find the Input – Hidden component and un-check:  Hide
4. (From the Palette) Drag an Input – Hidden component onto the page
 From Properties, ensure that its Id is: hidden1
ordersArray 
Inside a Group Panel Group box
hidden1 
Last update: 12/04/2007 31
 Select the StateAbbrev ComboBox.
 From the *Quick Edit view, select the onchange event - specify:
-  Use pre-defined behavior
- Action: Invoke Ajax behavior on the specified tag
- Target: group1 (this directs AJAX to render data in the Panel Group Box)
 Next we have to assign a value to the hidden field on the page
 With the ComboBox still selected, add the following line of JavaScript in the Quick Edit view
document.getElementById("form1:hidden1").value = 'combobox1';
Last update: 12/04/2007 32

 Select the (Customers) LastName ComboBox
 From the *Quick Edit view, select the onchange event - specify:
-  Use pre-defined behavior
- Action: Invoke Ajax behavior on the specified tag
- Target: group2 (this directs AJAX to render data in the Panel Group Box)
 Next we have to assign a value to the hidden field on the page
 With the ComboBox still selected, add the following line of JavaScript in the Quick Edit view
 document.getElementById(“form1:hidden1”).value = ‘combobox2’;
Last update: 12/04/2007 33

 7. Create an AJAX Submit Refresh on the Panel Group
 Select the first panelGroup on the page (the part of the page which will be updated
through AJAX).
 To do this click the LastName comboBox
 From the properties view, scroll up until you see h:panelGroup
 Click  Submit, then click the icon: Click to edit Ajax request properties
 You should see Target: group1
Last update: 12/04/2007 34

 7. Create an AJAX Submit Refresh on the Panel Group
 First select the entire dataTable. Then from Properties (the side bar of all the page
properties) you will see: h:panelGroup – click this property
 Click  Submit, then click the icon: Click to edit Ajax request properties
 You should see the following:
 Repeat the above step for h:panelGroup – group1
 You are now ready to test your Submit Refresh
Last update: 12/04/2007 35

 Run the Page – Test Submit Refresh
 Run the page on the server. To see data, select:
 New York
 Filibuster
 Lundquist
 Note that we have not done much with error-handling. For example, what would be
appropriate to show users if there were no customers for a selected state? An
optional workshop coming up will show you some examples for this.
Last update: 12/04/2007 36
EGL/JSF Steps to Implementing AJAX External Refresh Functionality
 The AJAX External Refresh allows you to use the AJAX engine to load additional
(child) pages inside PanelGroup boxes in an existing (parent) page. The steps to
do this are shown below – and would be used to create new pages from scratch.
We’ll be re-purposing existing pages (so some steps will be consolidated)
Steps for Submit

1. Create a new page – with a template (been there/done that)
2. Develop the EGL JSFHandler and business logic (been there/done that too)
3. Design the Page with JSF components bound to EGL data (Yep - been there/done that).
4. Create a JavaScript event for a JSF component, that invokes AJAX behavior for a target
JSF panelGroup component (been there/done that in the last workshop)
5. Enable AJAX for update, and create an External Request on the JSF Panel Group
Wow – less to keep track of than before. Maybe we’ve “caught a break” with this one!
Last update: 12/04/2007 37

 1. Create a New Page …and… 2. Add JSFHandler AJAX Logic
 What if you want to AJAX-ify an existing web page? Let’s give that a shot. We’ll work with the
parent/child pages: allcustomers and updatecustomer – and use AJAX External Refresh to
load updatecustomer into the allcustomers page.
Since the basic page design is complete, we can

proceed directly to step 2.
We will not need to modify the JSFHandler for our

parent page (we’ll only need to add AJAX support 1.
in the JSF controls). But we will need to add the
preRender() function and call to AJAX in
updatecustomer.jsp.
2.
 Load updatecustomer.egl into the Content Area.

Add the logic (and modify the existing code) as
shown in the three areas here:
1. Add the onPreRender= JSFHandler property
2. Add the onPreRender() function – including the
j2eelib. call to AJAX engine
3. Modify the existing onConstruction() logic 3.
 Save your work (Ctrl/S)

Ctrl/S
Last update: 12/04/2007 38

 3. Add a Hidden Variable to the dataTable
 Open allcustomers.jsp, and from the palette Drag an Input – Hidden
component into the LastName column of the dataTable (see screen capture).
From Properties,
Properties ensure that its
 Id is  cid
 Value is  Browse, and from Page Data select Customers.CustomerID
Browse to Page Data
Last update: 12/04/2007 39

 3. Add the PanelGroup Box to the Page 1 of 2
 Next, drag an HTML Horizontal Rule onto the page below the Data Table
 Then, Drag and drop a JSF PanelGroup Box (Type: Group) onto the page
Last update: 12/04/2007 40

 3. Add the PanelGroup Box to the Page – 2 of 2
 Here’s what your page should look like:
PanelGroup box 
Last update: 12/04/2007 41

 4. Create a JavaScript Event for the AJAX Component
 Select the group1
PanelGroup box, and
from its properties:
 Scroll down to the – Ajax
sub-property
 Check: Allow Ajax updates
 Click: the icon to edit the
Ajax request properties
From the
hx:ajaxExternalRequest $$AJAXROW$$form1:tableEx1:cid
sub-property, add a new
parameter – exactly as
shown here 
Recall the syntax of this

parameter from a previous
workshop.
Last update: 12/04/2007 42

 4. Create a JavaScript Event for the AJAX Component
 Select the Link next to the LastName control. From the *Quick Edit view, select the onclick event, and
specify:
Action: Multiple actions – from the popup dialog box, Insert actions as shown below:

Action: Do nothing and stop the event

Target: No Target
Last update: 12/04/2007 43

 Run the Page
 Click a Customer LastName – note that updatecustomer.faces is
loaded below the dataTable (and note the other characteristics
of AJAX enabled pages: speed, refresh)
 Obviously, in a real application you would design the externally-

loaded page without a template – or with an appropriate
template for U.I. quality
 Finally – recall that External Refresh does NOT permit updates

through your web pages (it’s a technique that can only be used
for read/only pages in the current release).
Last update: 12/04/2007 44

Optional Topic – Create AJAX dataTable Paging Functionality
 You may have noticed that the JSF pager controls invoke your EGL JSFHandler through a
Form/Submit. This may be okay for some functionality, but you also might want: 1. A better
(AJAX-matized) user experience, and 2. more programmatic control over your paging.
Let’s try creating our own AJAX-controls paging for a dataTable, and see if you think this approach
has merit. Here’s what we’re going to build (at run-time). The AJAX techniques we’ll use have
already been covered in this Unit, so this should be fairly simple and straightforward to put
together.
Last update: 12/04/2007 45

 Create AJAX dataTable Paging Functionality
– 1 of 6
Create a new page, named (exactly):
ajaxPaging.jsp
Edit the EGL Page Code, and from the

Notes section of the slide copy the
code you see here 
over the boiler-plate
Read the comments in the code. Note

the following:
 firstRow will be used to control
which row the dataTable starts
displaying from in the EGL dynamic
array
 pagingSize is set to 8 – but it could

be user-specified (!) We leave this up
to consider as an Optional
/Advanced workshop. 
 Fwd/bkwdDisable are boolean

variables used to control the button
click options for paging
Last update: 12/04/2007 46

 Create AJAX dataTable Paging Functionality – 2 of 6
From Page Designer:
 Change the boiler-plate page heading text
 Add a JSF Panel - Group (type Group) to the page
 (From Page Data) Drag the customers array into the Panel Group box
 Select output (read/only) fields and the some sub-set of the columns as fields in the dataTable
 Add another Panel Group (type Group) to the page
 (From Page Data) Select both forwarding functions under the Actions folder, and drag them into the 2 nd
Panel Group
 Add a JSF Input – Hidden control to the page
 Optional – Select each of the submit buttons, and from their – Display options properties, select  Image and
browse for their Normal image to find a graphic for each. Example: images/next.jpg and images/prev.jpg
Customers
JSF array
Panel as a
Group dataTable
group1
JSF
Panel
Group Functions as submit buttons – with images
group2
Hidden Input Control
Last update: 12/04/2007 47

For each of the Panel Groups:
 Select the Panel Group,
and from
Properties
-Ajax
Specify:
 Allow Ajax updates
 Submit
Last update: 12/04/2007 48

For each of the Submit Buttons:
 Select the button, and from Quick Edit/onclick event, specify:
Action: Multiple actions (see screen capture below)
An additional JavaScript statement to value the hidden input field

according to which button is clicked:
document.getElementById("form1:hidden1").value = 'fwd';
Last update: 12/04/2007 49

Also (for each of the Submit Buttons):
 Select the button, and from
Properties/All Attributes specify:
 The disabled Attribute
 Value:
 Compute
 Bind it to the appropriate EGL boolean
variable
Last update: 12/04/2007 50

 Create AJAX dataTable Paging Functionality
– 6 of 6
For the dataTable - Select the entire
dataTable, and from
Properties/All Attributes:
 Give the dataTable a border: 1
 Delete the columnClasses value
 Bind first to the EGL variable:

firstRow
 Bind rows to the EGL variable:

pagingSize
 Run the page on the server
Last update: 12/04/2007 51

Optional Topic – Combining Mouse-Over Color With AJAX Pages
 The approach used to showing which row is “current” via a JavaScript mouse-over (see prior workshop in
the dataTable section of this course), is valid when the table is populated at the time the onload event is fired.
This approach does not work when AJAX is used to update the content of the table as the <body onload=…
> is fired only once: when the page is loaded. AJAX requests do not trigger the body onload event.
 To work-around this, we need to trigger the onLoad javascript function (on slide 257 notes section) method
every time a payload is received from an AJAX request and the request has completed. The following steps
assume you have added the JavaScript for mouse-over row/color (this code has been added to this slides:
***Notes for your convenience) to a .JSP page with a dataTable under AJAX control.
 Steps:
 Remove the onload= ... from the body tag.
 Locate the h:panelGroup for the table tableEx1
 Click on the Ajax tab under h:panelGroup
 Click on “edit the Ajax request properties” icon on the bottom of the page.
 This will bring up the “hx:ajaxRefreshRequest” tab.

 Click on “Quick Edit” tab.
 This will bring up methods that can be used during the lifecycle of an Ajax request.
 Click on “oncomplete” and type: onLoad(‘form1:tableEx1’);
 Run the page on the server – and test the combined Mouse-over color + AJAX
Last update: 12/04/2007 52

 Optional Workshop – Combining AJAX With JavaScript Events (and Mouse-Over)
You may also wish to provide dynamic AJAX-enabled server-side database access in your
pages, similar to type-ahead. Here’s a working page that shows how to do the following:
 Users type in (case-sensitive) search arguments (one keystroke at a time), and the
page’s server-side EGL functionality does a database lookup, filtering rows dynamically.
 Note also the mouse-over alternate colors. And by clicking a row in the dataTable, you fill
in the Customer’s Address directions (again, using AJAX)
Last update: 12/04/2007 53

 Optional Workshop – Combining AJAX With JavaScript Events – 1 of 3
 Unusual steps:
1. Create a new page, named (precisely): ajax_customer_search.jsp
2. Enter source view mode,

in Page Designer
3. From the Notes section of the

slide copy all of the .jsp source
4. Completely replace the new

page boiler-plate with your
copied source from the Notes
Notes:
 The AJAX functionality is fired
off by onKeyUp from the
first input field
 The 2nd Submit Button will not
render (it uses a hidden .css tag)
Last update: 12/04/2007 54

 Edit the EGL JSFHandler: ajax_customer_search.egl
1. From the Notes section of the

slide copy all of the .egl source
2. Completely replace the new

JSFHandler’s boiler-plate with your
copied source from the Notes
 Note the AJAX coding technique in

onPreRender() – following the
model discussed in this section
Last update: 12/04/2007 55

 From Project Explorer, open: stylesheet.css
 Using Content Assist, add the two new entries shown here 
 The source for these is in the Slide Notes
 Run ajax_customer_search.jsp on the server

 Type valid state abbreviations in the input field (letter by letter)
 Click a row in the dataTable (and AJAX will return the Directions to the multi-line input text)
Last update: 12/04/2007 56

 Optional Workshop – Combining AJAX With Tab Pages (To Control JSF Component Rendering)
 In some large and complex pages, where you have multiple tab panels, each of which
contains one or more dataTables, you may wish improve the overall page’s loading speed
and performance, by using AJAX and hiding/rendering selected panel components. This
workshop will show you how to create a tab page, with panels that:
 Hide and render dataTables programmatically (events fired when users click a panel tab)
 Use AJAX to improve dataTable and page U.I. performance
Last update: 12/04/2007 57

Optional Workshop – Combining AJAX With Tab Pages – 1 of 6
 Create a new page, named (precisely): ajaxTabPage.jsp. Using the screen capture and
notes, add the following JSF components to the page:
 Customize the page’s boiler-plate heading text
 Add a Panels – Tabbed control. For this component,
 Customize the size to be 100% of the page’s width, and 250 pixels high
 From Panel List, add a third bfpanel as shown below – named Tab3
 Inside each panel, drag and drop a Panel – Group Box (they will be named: group1, group2, and group
3 successively)
 Below the tab control, add:
 Two Button – Command components. From the Properties view, make them: Type: Plain
 A hidden input control
Panel – Group Box
Plain Command Buttons and

Hidden Input control
Last update: 12/04/2007 58

 Edit the your EGL page code, and
replace the boiler-plate text with the
code from the slide notes.
 Read the comments – note that

there is little new in this logic
 Ctrl/S – save your code
Populate the dynamic arrays

From the database
Inspect a variable (that will be bound to the Hidden Input control)

And use Render/Hide to programmatically
Display the dataTable for the clicked tab panel
Last update: 12/04/2007 59

(From Page Designer) do the following:
 Select a (set focus inside a ) bfpanel – (Tab1, Tab2, Tab3 – you will do one tab at a time)
 (From Page Data) – drag and drop one of the customers array variables on top of the Panel Group Box
inside the tab panel
 For each dataTable – (Select the entire dataTable, and from All Attributes), specify a rendered property
bound to one of the boolean variables (vis1, vis2, vis3).
 (From Page Data) drag and drop the whichTab variable on top of the hidden input control
Last update: 12/04/2007 60

(From Page Designer) do the following:
 Select a (set focus inside a ) bfpanel – (Tab2, Tab3 – you will do one tab at a time)
 (From Quick Edit)
Edit – in the onenter event add the statements shown in the screen capture below:
document.getElementById('form1:hidden1').value = "tab2";
 Tab2: document.getElementById('form1:button1').click();
document.getElementById('form1:hidden1').value = "tab3";
 Tab3: document.getElementById('form1:button2').click();
See ***Notes
Last update: 12/04/2007 61
 Select a (Command Button ) – (you will do one button at a time)

 (From Quick Edit):
– Check Use pre-defined behavior.
– From Action: select Invoke Ajax behavior on the specified tag
– For button1 – specify: Target: group2
– For button2 – specify: Target: group3
Last update: 12/04/2007 62

 Run the page on the server

 Only the first dataTable will render (you can do a View Source in the HTML and see for yourself)
 Click Tab2 or Tab3
 There will be a slight pause – as AJAX invokes your server side logic to render the
dataTable in the clicked tab – through the onenter event
Last update: 12/04/2007 63

Tab Controls – Programmatically Opening a Specific Tab With JavaScript
 You may have a particular U.I. requirement where you need to use JavaScript to open to a particular tab. In
the example we’ll be showing a user clicks a link, that opens to a specific tab. This is a rather advanced
use case, that also involves using AJAX to load areas of the page – which is why we placed it in this section
of the course. The techniques involved here are:
1. AJAX-controlled dataTables within the tabs
2. Invoking JavaScript to select a specific panel within the tab control
3. Other JavaScript options (not really necessary for this particular example, but you might find a use for them in
the future)
Finished Page:
• Search for customers, with LastNames > :hostVar
• Select a customer from a list, and:
• Load the data dynamically for that customer
• Go to a specific panel within the tab using JavaScript
Last update: 12/04/2007 64

 Tab Controls – Programmatically Opening a Specific Tab With JavaScript – 1 of 4
As we did in a previous workshop, we will be giving you

the complete code for the page solution (and
pointers to the salient AJAX and JavaScript
techniques used):
1. Create a new page named: danPage2.jsp
2. Select and copy all of the finished page source in
the Notes section of this slide
3. From Page Designer, enter Source mode – then

Select all of the source, and replace it with the
source from the Notes
4. Save your changes
5. Edit the EGL source code for this page
Last update: 12/04/2007 65

From your EGL JSFHandler:

1. Select and copy all of the
finished page source in the
Notes section of this slide
2. Select all of the source, and

replace it with the source
from the Notes
3. Save your changes
4. Note the following:

1. Variables for page’s
functionality
2. AJAX getQueryParameter(“$
$axjaxmode”) == null …
which allows you to detect if
no selection was made (and
your EGL was invoked), or if
this is the first time into the
page’s lifecycle
3. Other – standard:
1. AJAX logic
2. SQL logic
Return to Page Designer

(working with danPage2.jsp)
Last update: 12/04/2007 66

The AJAX-specific properties of this Workshop are similar to previous ones: (use of panelGroup, etc. use of a
hidden-input field in the dataTable column, use of a clicked Link, etc.). However, for this clicked link, note:
1. The onclick event contains JavaScript statements to return the address of the tab control in the browser and manipulate
individual panel actions (hiding/showing/and switching).
2. There are multiple AJAX Action/Targets – which is how data is loaded into two separate AJAX-controlled zones in this
page with one user-event. Note also the that panelGroup JSF IDs are fully qualified: form1:groupx
Last update: 12/04/2007 67

Run the page, and watch the JavaScript and AJAX operations and events. Note that the JavaScript will open
tabs, before the server-side AJAX data operations, etc.
Last update: 12/04/2007 68

 When to use AJAX Pages
 Because of the significant improvements in response time and overall user
experience, there are only a few situations where AJAX should NOT be the used:
 Do not use AJAX for Page Design, when:
 Users may (or may not) have JavaScript enabled
 Users need to utilize the back button
 Users want to be able to book-mark pages
 A page is Read-Only – and has no interaction with the user except forward to another page
 A page is displayed once – and all the data is returned one time
– Login
– Registration (unless there are several parts to the registration page/process)
 Consider using AJAX for:

 All pages where the workflow dictates user/page interaction – in other words, any page where the
user interacts with the JSFHandler more than once
 All pages where a large amount of data is going to the page from the JSFHandler
– Ex. Over 20 rows in a dataTable
 Large complex pages
– Ex. A master/detail tab page, where you can load records into different tabs depending on the workflow process
 In addition to the above, there are two incredibly well-written technical articles in DeveloperWorks that
should be considered “required reading” before making the decision for/against AJAX**
 http://www-128.ibm.com/developerworks/xml/library/wa-ajaxtop1/
 http://www-128.ibm.com/developerworks/xml/library/wa-ajaxtop2/
Last update: 12/04/2007 69

IBM Software Group: AJAX-Enabling Your JSF Components and Web Pages

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

IBM Software Group: AJAX-Enabling Your JSF Components and Web Pages

Transféré par

Droits d'auteur :

Formats disponibles

®

IBM Software Group

AJAX-Enabling Your JSF Components and Web Pages

© 2006 IBM Corporation

Last update: 12/04/2007 2

 Describe the concepts and functions of AJAX and

 Use different types of AJAX to make your pages

 Leverage JavaScript to invoke AJAX engine for creating

 Using JavaScript (*Under Construction*)

Last update: 12/04/2007 3

Ajax, or AJAX, is a web development technology used for creating better

 AJAX is an acronym standing for Asynchronous JAvaScript and XML.

Last update: 12/04/2007 4

Last update: 12/04/2007 6

1. Create a new page – with a template (been there/done that)

Last update: 12/04/2007 7

1. AJAX Properties, for a JSF Panel Group

2. AJAX Request Properties

3. JavaScript call to the AJAX engine

Last update: 12/04/2007 8

3. Test for NULL value

Last update: 12/04/2007 9

 AJAX builds an HTTP request – including

Note that a similar lifecycle exists for Submit Refresh

Let’s try a few examples  10

 Our page will contain an:

 Create a new page, named:

Last update: 12/04/2007 12

Last update: 12/04/2007 13

 From Page Data, drag ordersArray

 Create a read-only dataTable

 Ensure that all controls are

 Your dataTable will be nested inside

Last update: 12/04/2007 14

Last update: 12/04/2007 15

 Save your JSFHandler changes, and run the page.

If you have time,

 Note that this is

Last update: 12/04/2007 19

 Add the statement shown below inside the boxes

Add a new column to the HTML table

Last update: 12/04/2007 21

New HTML table column

Last update: 12/04/2007 22

Last update: 12/04/2007 23

Last update: 12/04/2007 24

Last update: 12/04/2007 25

From the hx:ajaxRefreshRequest property:

Last update: 12/04/2007 26

Last update: 12/04/2007 27

 Our page will contain an:

 The SQL statements search for:

 Please read all of the

 Don’t forget Ctrl/S

Note: We have modified the default label

 Next we have to assign a value to the hidden field on the page

Last update: 12/04/2007 32

 Next we have to assign a value to the hidden field on the page

Last update: 12/04/2007 33

Last update: 12/04/2007 34

 Repeat the above step for h:panelGroup – group1

 You are now ready to test your Submit Refresh

Last update: 12/04/2007 35

 Using JavaScript (Under Construction)