® IBM Software Group © 2006 IBM Corporation Additional AJAX Examples and Workshops This learning module provides additional AJAX use cases and examples

®

IBM Software Group

© 2006 IBM Corporation

Additional AJAX Examples and Workshops

This learning module provides additional AJAX use cases and examples. It pre-req’s the AJAX Technology Section.

2Last update: 12/04/2007

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


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


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.



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 You specify the JSF IDJSF ID of the of the

control for this parametercontrol for this parameter The onConstruction function populates

the record/and comboBox. This happens one time, when the page loads for the first time only.


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



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.


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)


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 - Click to edit Ajax request properties


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

NoteNote – This will be the parameter AJAX sends to your JSFHandler in each request. You will retrieve it using a j2eelib.getQueryParameter(…) function


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!


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



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.



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 You specify the JSF IDJSF ID of the of the

control for this parametercontrol 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.



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***See Notes



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***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)



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



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)

OPTIONALLYOPTIONALLY 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



The page is now designed

Your ready to create AJAX support!!


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


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=oncomplete="return setHidden('');return setHidden('');"

The source should now look as follows:


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


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:


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 tagTarget: 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 tagTarget: 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


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.


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

AJAX Topic Summary

Documents

® IBM Software Group © 2006 IBM Corporation Additional AJAX Examples and Workshops This learning module provides additional AJAX use cases and examples