Additional AJAX Examples and Workshops

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

2. 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.  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.  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.  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.  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.  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.  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.  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.  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

11.  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.  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.  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.  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.  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.  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)

17.  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.  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

19.  3. Design the Page – 5 of 5 • The page is now designed  • Your ready to create AJAX support!!

20.  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.  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:

22.  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.  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.  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.  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. 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