1 / 26

Additional AJAX Examples and Workshops

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

xaria
Download Presentation

Additional AJAX Examples and Workshops

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related