® 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.

2 Last 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

3 Last 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

4 Last 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.

5 Last 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 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.

6 Last 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

7 Last 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.

8 Last 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)

9 Last 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

10 Last 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  Note  Note – This will be the parameter AJAX sends to your JSFHandler in each request. You will retrieve it using a j2eelib.getQueryParameter(…) function

11 Last 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!

12 Last 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

13 Last 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.

14 Last 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 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.

15 Last 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

16 Last 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) ***Notes  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)

17 Last 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

18 Last 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)OPTIONALLY  Add the following code snippet located in the notes to the “ ” 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 section

19 Last update: 12/04/2007  3. Design the Page – 5 of 5  The page is now designed  Your ready to create AJAX support!!

20 Last 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

21 Last 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=return setHidden(''); oncomplete= " return setHidden(''); "  The source should now look as follows:

22 Last 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

23 Last 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:

24 Last 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 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

25 Last 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.

26 Last 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