Date post: | 20-Dec-2015 |
Category: |
Documents |
View: | 217 times |
Download: | 1 times |
®
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
3Last update: 12/04/2007
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
4Last update: 12/04/2007
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.
5Last update: 12/04/2007
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 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.
6Last update: 12/04/2007
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
7Last update: 12/04/2007
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.
8Last update: 12/04/2007
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)
9Last update: 12/04/2007
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
10Last update: 12/04/2007
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
11Last update: 12/04/2007
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!
12Last update: 12/04/2007
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
13Last update: 12/04/2007
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.
14Last update: 12/04/2007
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 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.
15Last update: 12/04/2007
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***See Notes
16Last update: 12/04/2007
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***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)
17Last update: 12/04/2007
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
18Last update: 12/04/2007
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)
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
19Last update: 12/04/2007
3. Design the Page – 5 of 5
The page is now designed
Your ready to create AJAX support!!
20Last update: 12/04/2007
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
21Last update: 12/04/2007
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:
22Last update: 12/04/2007
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
23Last update: 12/04/2007
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:
24Last update: 12/04/2007
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
25Last update: 12/04/2007
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.
26Last update: 12/04/2007
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