®
IBM Software Group
Additional AJAX Examples and Workshops
This learning module provides additional AJAX use cases and examples. It pre-req’s
the AJAX Technology Section.
© 2006 IBM Corporation
Optional AJAX Examples and Workshops
 Because AJAX pages are so much in demand (because they improve the
user’s experience significantly) – and because they are no-doubt a bit more
complex to build than pure drag & drop JSF pages, you might want some extra
practice
 Additional stepped-out AJAX workshops begin on the next slide and continue to the
end of this section. They are:
 AJAX Request Page
 AJAX Submit Page
Last update: 12/04/2007
2
 1. AJAX Practice Workshop 1 – Create a new Page
 Here is our target page. Users
can display stock information
from a comboBox 
 Our page will contain:
 A Combo-Box – that fires off
an AJAX request and
populates a record.
 Output fields – that display the
record specified by the combo
box
 Create a new page, named:
ajaxRefresh.JSP
- For now, just change the
Page heading text as shown
in the screen capture
Last update: 12/04/2007
3
 2. JSFHandler Code 1 of 2
 Before we write our JSFHandler code,
we need to define a record.
 Create a new EGL Source File named
stock in the package common
(You may need to create the common
package as well)
 Copy/Paste the code from the notes
into the stock source file.
Last update: 12/04/2007
4
 2. JSFHandler Code 2 of 2
 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() will
retrieve the data from the AJAX
engine.
 You specify the JSF ID of the
control for this parameter
 The onConstruction function populates
the record/and comboBox. This
happens one time, when the page loads
for the first time only.
Last update: 12/04/2007
5
 3. Design the Page – 1 of 2
 Drag a combo box onto the page (located in the enhanced faces components drawer
in the palette)
 Drag the “stocks” item onto the combo box
 Drag a Panel – Group Box
onto the page
 Select “Gri” in the component box that pops up
 Drag a Panel – Group Box
onto the Grid panel that you just created.
 Select “JSP” in the component box that pops up
Last update: 12/04/2007
6
 3. Design the Page – 2 of 2
 Drag the “currentStock” item onto the
page, into the JSP panel you just
created.
 You’ve finished designing your page!
 Go to the next slide to learn how to add
AJAX functionality.
Last update: 12/04/2007
7
 4. Create the JavaScript Event to Invoke the AJAX Engine
 Select the name control. From the *Quick Edit* view, select the onChange event,
and specify:
 Use pre-defined behavior
Action: Invoke Ajax behavior on the specified tag
Target: grid1 (this directs AJAX to render data in the Panel Group Box)
Last update: 12/04/2007
8
 5. Create an AJAX Refresh Request on the Panel Group – 1 of 2
 Select the panelGroup – you should see h:panelGrid under the properties view
 Select Ajax
 Allow Ajax updates
  Refresh
Select -
Last update: 12/04/2007
Click to edit Ajax request properties
9
 5. Create an AJAX Refresh Request on the Panel Group – 2 of 2
 From the hx:ajaxRefreshRequest property:
 Click: Add Parameter
(Under parameter values sent from the browser)
 Open the Combo-Box and select: menu1
 Note – This will be the parameter AJAX sends to your JSFHandler in each request.
You will retrieve it using a j2eelib.getQueryParameter(…) function
Last update: 12/04/2007
10
 Run the Page
 Change the value of the Combo Box to
something other than select.
 You will see that the output values are
changed almost instantly!
Last update: 12/04/2007
11
 Practice Workshop 2 – Create an AJAX Submit Page Example
 Note – this is a multi-functional workshop
with lots of steps. Worth the time, but it will
take you more than a few minutes to
complete (consider yourself forewarned) 
 Here is our target page. Users can display
different food items from different food
groups and update them. 
 Our page will contain:
 A Combo-Box – that fires off an AJAX
request and populates another combo box.
 Another combo box – that fires off an AJAX
request and populates a table of input and
output fields.
 Create a new page, named:
ajaxSubmit.jsp
- For now, just change the Page heading text
as shown in the screen capture
Last update: 12/04/2007
12
 2. JSFHandler Code 1 of 2
 Before we write our JSFHandler
code, we need to define a
record.
 Create a new EGL Source File
named food in the package
common
 Copy/Paste the code from the
notes into the food source file.
Last update: 12/04/2007
13
 2. JSFHandler Code 2 of 2
 Copy the code in the Notes section
of the slide, and replace the
boilerplate JSFHandler code. Note
the following:
 j2eelib.getQueryParameter() will
retrieve the data from the AJAX
engine.
 You specify the JSF ID of the
control for this parameter
 This is rather complicated code, the
onConstruction function calls
 createGroups()
 createFoodItems()
– Which populate the comboBoxes on
the JSP
 Additional functions exist to update
food items, control output text, and
perform several other tasks.
Last update: 12/04/2007
14
 3. Design the Page – 1 of 5
1. Drag the Groups item onto the page
2. Drag a Panel – Group Box
onto the page
below the
Groups comboBox
 Select “Group” in the component box
that pops up
3. Drag a Panel – Group Box
onto the Group panel that you just
created.
 Select “JSP” in the component box that
pops up
4. Drag the foodItems item onto the JSP
Panel you just created
***See Notes
Last update: 12/04/2007
15
 3. Design the Page – 2 of 5
 Select the table that contains the
FoodItems comboBox and press
the right arrow key
 Press enter a few times (you
should be expanding the panel
and HTML table)
 Add text “Detailed Info:” as shown
***Notes
 Keeping the cursor inside of the
Panel, press Enter a few times,
but move the cursor up so that
there is space below it.
 Drag the currentItem - FoodItem
onto the JSP above the space
you created.
  Update an existing record
 Change itemId to an output field
 Click options, do not create a
Delete button (but do create a
Submit button)
Last update: 12/04/2007
16
 3. Design the Page – 3 of 5
 Select the itemName input control
 Go to Properties
 Click the Validation tab
 Display validation error
messages in an error message
control
 Do this for the rest of the text input
controls
 fatGrams
 calories
Last update: 12/04/2007
17
 3. Design the Page – 4 of 5
 Drag an Output control from Enhanced
Faces Components onto the page,
next to the submit button.
 Drag the updateText item onto the
Output control you just dragged onto
the page. (This will contain a user-message
from the Handler)
OPTIONALLY
 Add the following code snippet located in
the notes to the “<head>” section of the JSP
Source
 With UpdateText selected, click Properties
and change the class from outputText to
updateText
 Note that from Project Explorer, Page
Template… option, you will have to
merge the template into the .JSP page
to access the <head> section
Last update: 12/04/2007
18
 3. Design the Page – 5 of 5
 The page is now designed 
 Your ready to create AJAX support!!
Last update: 12/04/2007
19
 5. Create the Ajax support for the page 1 of 3
 Since we will have various user-actions
perform different Ajax behaviors, we will
need some way in the JSF Handler to
decipher which event triggered the
request.
 To do this we create a hidden field
within the form, and update its value
with the type of event to process.
 Drag an Input – Hidden control
onto the page, inside of the panel
(You may have to customize the Palette and
unhide this control in the Enhanced Faces
Components drawer)
 Under HTML Tags drag a Script
control next to the Input - Hidden
(you may have to unhide this also)
 With the script selected, select the
properties tab
 Add the code in the notes to the
Script input area
Last update: 12/04/2007
20
 5. Create the Ajax support for the page 2 of 3
 Select the panelGroup From within the properties view
 Select the “Ajax” tab
 Allow Ajax updates
  Submit
 Go to the .JSP page’s Source view. Scroll down in the file, and add the following
attribute to the hx:ajaxRefreshSubmit tag
oncomplete="return setHidden('');"
 The source should now look as follows:
Last update: 12/04/2007
21
 5. Create the Ajax support for the page 3 of n
 Finally, we do not wish to display the contents of the JSP panel when no food group
is selected. To enable such behavior, we will add a “rendered” attribute to the
jspPanel.
 Copy/Paste code can be found in the notes
 Still from within Source view, scroll up in the file, and change the opening jspPanel tag so
that it looks as follows
 The page is now ready for AJAX enabling
Last update: 12/04/2007
22
 6. Add trigger behaviors to the JSF controls 1 of 3
 Select the foodGroups comboBox. From the *Quick Edit view, select the onchange
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)
 Go to the Source view of the JSP, find the hx:behavior that was created for the
comboBox
 Copy/Paste the code in the Notes to the tag - so it looks as follows:
Last update: 12/04/2007
23
 6. Add trigger behaviors to the JSF controls 2 of n
1. Select the foodItems comboBox. From the *Quick Edit* view select onchange
 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)
2. Go to the source view of the JSP. Find the hx:behavior that was created for the comboBox
 Add the code in the notes to the tag so it looks as follows
3. Select the submit button. From the *Quick Edit* view, select onclick
 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)
4. Go to the source view of the JSP. Find the hx:behavior that was created for the
submit button
 Add the code in the notes to the tag so it looks as follows
Last update: 12/04/2007
24
 Run the Page
 Run the Page
 Try changing the food
group and updating food
items.
 Note the effect the AJAX
engine has on the page’s
response time and user
experience.
Last update: 12/04/2007
25
AJAX Topic Summary
 Now that you have completed this unit, you should have:
 Described the concepts and functions of AJAX
 Used different types of AJAX to make your pages respond faster
 Request Refresh
 Submit Refresh
 External Refresh
 Used JavaScript to invoke the Ajax engine for
creating better response web applications
Last update: 12/04/2007
26