1. ® IBM Software Group © 2006 IBM Corporation AJAX-Enabling Your JSF Components and Web Pages This learning module covers the use of AJAX technology to enable better response and performance in your EGL/JSF Web Pages.

2. 2 Last update: 12/04/2007 Course  Course Setup  Web/JSF Overview  JSF Properties Deep Dive  Essential JSF Components  Additional JSF Components  JSF dataTables  Page Flow and State Management AJAX Controls and JavaScript  AJAX Controls and JavaScript  JSF Component Tree and Dynamic Property Setting  Web-Site Design and Template Pages  Appendices  Internationalization  Page Design Best Practices  Additional Use Cases Units: JSF/EGL Web Page and Site Design and Development

3. 3 Last update: 12/04/2007 Unit Objectives  At the end of this unit, you will be able to:  Describe the concepts and functions of AJAX and JavaScript  Use different types of AJAX to make your pages respond faster  Request Refresh  Submit Refresh  External Refresh  Leverage JavaScript to invoke AJAX engine for creating better response web applications  Using JavaScript (*Under Construction*)  Alerts  Client-Side edits  Pop-up pages

4. 4 Last update: 12/04/2007 What are AJAX and JavaScript? JavaScript JavaScript is a programming language used for client-side web development. It is not related to Java, although both JavaScript and Java can trace language roots back to C.  JavaScript statements are interpreted at run-time in your PC’s browser.  Some common examples of JavaScript usage include:  Opening or popping up a new window with programmatic control over the size, position and characteristics of the new window  Client-Side (browser-based) validation of web form input values  Swapping (changing) images as the mouse cursor moves over them AjaxAJAX Ajax, or AJAX, is a web development technology used for creating better responding, dynamic-content web applications.  Instead of refreshing the entire page from the server on each submit, AJAX exchanges small amounts of data with the server asynchronously.  You can target specific controls with this data – so that the entire page is not reloaded (this looks and behaves LOT better to most users)   AJAX also increases the web page's interactivity/speed, and enhances its functionality, and usability – making the page respond more like a Windows client application.  AJAX is an acronym standing for Asynchronous JAvaScript and XML.

5. 5 Last update: 12/04/2007 Web Application Models DB ApplicationServerApplicationServer EGL Application Process data Access database Call legacy systems EGL Application Process data Access database Call legacy systems HTML +CSS + data HTTP Request Browser Pag e HTML +CSS + data DB JavaScript Browser Pag e AJAX Engine Standard The entire page is reloaded from the server on each request AJAX HTTP Request Synchronous Data Transfer Asynchronous Data Transfer Only this much data is sent!

6. 6 Last update: 12/04/2007 AJAX Page Requests  There are three major categories of AJAX page update processing: Refresh 1. Refresh Request  With Refresh Request you define individual parameters to AJAX, and only the values in the specified parameters are sent to your JSFHandler (data transmission is minimized). Data can be returned from your JSFHandler to an area of the page defined under AJAX control (typically inside a JSF PanelGroup Box enabled for AJAX update). Submit 2. Submit Refresh  An AJAX Submit Refresh allows you to define areas of your page under AJAX control (like Refresh Request) but instead of sending only individual parameters to your JSFHandler, the entire form is submitted – so your JSFHandler can reference any user value on any field in the form. See Notes for additional benefits of Submit Refresh. External 3. External Request  Allows a parent page to receive external values from a child page – or, can be used with multiple pages on the same page (example later in this section).

7. 7 Last update: 12/04/2007 EGL/JSF Steps to Implementing AJAX Request Refresh Functionality new Only 2 new steps 1.Create a new page – with a template (been there/done that) 2.Develop the EGL JSFHandler and business logic (been there/done that too)  As you did in the last section, you will call a j2eelib.function to return an AJAX request parameter – specifically: j2eelib.getQueryParameter(…) 3.Design the Page with JSF components bound to EGL data (been there/done that). However, you will use one or more JSF Panel Group controls to organize the AJAX requested data:  JSF Panel Group  JSF Panel Group – if only JSF components are being added…or…  JSF JSP Panel embedded inside the JSF Panel Group  JSF JSP Panel embedded inside the JSF Panel Group – if JSP + HTML tags are to be embedded or used in the design (example later in this section) 4.Create a JavaScript event for a JSF component, that invokes AJAX behavior for a target JSF Panel Group component:  Note that this essentially creates the JavaScript call to the AJAX engine that creates the HTTP request to your JSFHandler 5.Enable the AJAX container for update, and create a Refresh Request on the JSF Panel Group, adding parameters for data to be sent from the AJAX engine to your JSFHandler Perhaps a bit more detail is in order before we dive in with a workshop. AJAXSTEPSAJAXSTEPS

8. 8 Last update: 12/04/2007 AJAX-specific Properties in Your JSF Pages  There are three new JSF properties you have to learn, to understand how to implement AJAX 1. AJAX Properties, for a JSF Panel Group PanelGroup  A JSF PanelGroup component contains Ajax properties. In here you can specify which kind of request you want to enable.  And you can edit the request’s properties 2. AJAX Request Properties  For every request, you can define one or more parameters that are made available to your EGL JSFHandler textCustState1menuStates1  Here we are specifying that the: textCustState1 and menuStates1 JSF components can provide a request parameter to AJAX (which will be passed into your JSFHandler through a j2eelib.call 3. JavaScript call to the AJAX engine QuickEdit  For each component you wish to enable for AJAX, use QuickEdit to define an AJAX action for a given target Component. group1  Below we are specifying that whatever JSF component is selected in Page Designer can invoke AJAX on group1 (a JSF panelGroup) control)

9. 9 Last update: 12/04/2007 AJAX-specific Coding in your EGL JSFHandler There are three (somewhat) new considerations for your EGL and the AJAX requests: 1. Use of preRender()  preRender() is called every time a page is requested (see notes on the difference between preRender() and onConstruction(). AJAX logic will go in preRender(). 2. J2eelib.getQueryParameter(“…”)  This EGL Built-in function allows you to access the value sent in via the AJAX parameter request 3. Test for NULL value preRender()  Because preRender() is executed every time a page is requested (including the initial page build) we will need to ensure – programmatically – that we are where we think we are, in the input/output cycle. 1. 2. 3.

10. 10 Last update: 12/04/2007 The Big Picture – Run-Time  For Request Refresh:  User enters “CA” and triggers a JavaScript event in the browser that calls AJAX  AJAX builds an HTTP request – including the parameter value, and invokes your JSFHandler preRender()  Your JSFHandler’s preRender() function is invoked. You obtain the user-entered data ( getQueryParameter referencing JSF control ID) and use the data to look-up information in the database  EGL Data is returned to AJAX which renders the response in the designated area of the page (i.e. the JSF Panel Group) Note that a similar lifecycle exists for Submit Refresh Let’s try a few examples  DB Application Server HTML +CSS + data JavaScript HTTP Request Parameter(“CA”) ordersArray 1. 2. 3. 4. AJAX Engine

11. 11 Last update: 12/04/2007  1. Create a new Page  Here is our target page. Users can search Customer Orders for a specified state   Our page will contain an:  Input field – that fires off an AJAX request and populates the dataTable when the user clicks the Search button  A Combo-Box that does the same, but does so when the user chooses (opens the Combo-Box and selects) a state ajaxRefreshRequest.jsp  Create a new page, named: ajaxRefreshRequest.jsp - For now, just change the Page heading text as shown in the screen capture. Then edit the JSFHandler (next slide)

12. 12 Last update: 12/04/2007  2. JSFHandler Code  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  j2eelib.getQueryParameter() will retrieve the data from the AJAX engine.  You specify the JSF ID of the control for this parameter  The sub-select returns all orders – where the order.customer_ID is equal to any customer_ID where the customer state = the state returned through the AJAX Query Parameter  We will also allow users to invoke the search by selecting a state from a Combo-Box tied to the states array.

13. 13 Last update: 12/04/2007  3. Design the Page – 1 of 2  The screen capture below shows the JSF design. Create it as follows:  Add an HTML table to the page: 1 Row/2 columns/Width: 100%  From Page Data, Drag and drop custState into the left hand column, create an input field, no submit buttons!  From the /images/ directory, drag search_button.gif image into the left column, next to custState ***Notes states  From Page Data, Drag the states array into the right column  From the Palette, HTML Tags drawer, Add an HTML rule below these controls

14. 14 Last update: 12/04/2007  3. Design the Page – 2 of 2  Drag a Panel – Group Box onto the page. Group  Select Type of component: Group  From Page Data, drag ordersArray inside the top-left corner of the Panel Group Box.  Create a read-only dataTable  Ensure that all controls are Output fields  Your dataTable will be nested inside the Panel – Group Box** (notes)

15. 15 Last update: 12/04/2007  4. Create the JavaScript Event to Invoke the AJAX Engine custStateonblur  Select the custState control. From the *Quick Edit view, select the onblur 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) StateAbbrev onchange  Select StateAbbrev. From the *Quick Edit view, select the onchange event - 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)

16. 16 Last update: 12/04/2007  5. Create an AJAX Refresh Request on the Panel Group – 1 of 2 panelGroup  Select the panelGroup – note, to do this, follow these steps : 1. First select the entire dataTable. Then from Properties (the side bar of all the page properties) you will see an: h:panelGroup entry. Click it. Ajax 2. After you select h:panelGroup, you will its see sub-properties. Select: – Ajax  Check:  Allow Ajax updates  Click  Refresh, then click the icon: Click to edit Ajax request properties 1. 2.

17. 17 Last update: 12/04/2007  5. Create an AJAX Refresh Request on the Panel Group – 2 of 2 From the hx:ajaxRefreshRequest property: Add Parameter  Click: Add Parameter  (Under Parameter values sent from the browser) textCustState1  Open the Combo-Box and select: textCustState1 Add Parameter  Again click: Add Parameter menuStates1  Open the Combo-Box again, and select: menuStates1  Note  Note – These will be the parameters AJAX sends to your JSFHandler in each request. You will retrieve each separately using a j2eelib.getQueryParameter(…) function  That’s all there is to it! You’re ready to test your first AJAX page.

18. 18 Last update: 12/04/2007  Run the Page  Type an upper-case state abbreviation: NY …or… NJ …or… CA …or… CT Search  Click Search  Note the speed with which the data is returned, and note that the top part of the page doesn’t “blink” (more specifically, the entire page does not get re-loaded) when the data is returned  When you’re satisfied with this example: Edit the JSFHandler.  Comment out:  Comment out: //custState = j2eelib.getQueryParameter("textCustState1");  Un-comment:  Un-comment: custState = j2eelib.getQueryParameter("menuStates1");  Save your JSFHandler changes, and run the page. Search using the Combo-Box

19. 19 Last update: 12/04/2007 OPTIONAL WORKSHOP – Use Request From a dataTable Row-Click  H ere’s an extension to the page we’ve been working on – passing a parameter as an AJAX request from a clicked-row inside a DataTable. This particular Use Case is a bit “oblique” but this page pattern has lots of practical applications in real-life scenarios If you have time, try the steps starting on the next slide.  Note that this is time-consuming and the steps

20. 20 Last update: 12/04/2007  2. JSFHandler Code - Modifications  We will add three new lines to the JSFHandler for this scenario 1.A new dynamic array of customer records get 2.The EGL get statement to retrieve the data from the database into the array 3.A new j2eelib.getQueryParameter - which accepts an AJAX request parameter named: “StateH” and assigns it to custState (subsequently used in the SQL table look-up)  Add the statement shown below inside the boxes  Ctrl/S 1. 2. 3. Comment out 

21. 21 Last update: 12/04/2007  3. Design the Page – Add a new Column and the dataTable – 1 of 2  You will add the Customers array to the page as a read-only dataTable. To do this you will need to add a column to the existing HTML table, then place the array in the table. As of this release – dragging and dropping an array in an HTML table is a two-step procedure… Add a new column to the HTML table  Click to the left-side of Select a State  Right-click and select:  Table –Add Column to Right Add the Customers array inside the new HTML column (follow these steps): customers – customer[] not 1. From Page Data, select the customers – customer[] array onto the page within any line break but not (yet) inside the HTML table. Example: 1.a Configure the controls as output (read-only) 1.b Select: CustomerId and State 2. Select the entire dataTable - Drag and drop it into the new HTML column 1. 2.

22. 22 Last update: 12/04/2007 Customers array dataTable  3. Design the Page – Add a new Column and the dataTable – 2 of 2  When you are finished, your HTML table containing the dataTable should look like this - New HTML table column

23. 23 Last update: 12/04/2007  3. Design the Page – Add a link and Hidden Variable to the dataTable 1.(From the Palette) Customize the Enhanced Faces Components drawer (Right-click, select Customize)  Find the Input – Hidden component and un -check:  Hide Properties 2. (From the Palette) Drag an Input – Hidden component into the State column of the dataTable (see screen capture). From Properties, ensure that its  StateH  Id is  StateH  Value is  Customers.State  Value is  Browse and from Page Data select Customers.State 3. Select the control (the output field, not the hidden one you just added) and from the Palette Double-Click Link to add a Faces Link to the State field. Do not fill in the URL**

24. 24 Last update: 12/04/2007  4. Create the JavaScript Event to Invoke the AJAX Engine Link next to the State*Quick Editonclick  Select the Link next to the State control. From the *Quick Edit view, select the onclick event, and specify:  Use pre-defined behavior Action: Invoke Ajax behavior on the specified tag Target: group1 (this directs AJAX to render data to JSF components inside the Panel Group Box)

25. 25 Last update: 12/04/2007  5. Update the Panel Group’s AJAX Refresh Request – 1 of 2  Select the panelGroup – note, to do this, follow these steps :  First select the entire dataTable. Then from Properties (the side bar of all the page properties) you will see: h:panelGroup – click this property Ajax  When you do, you will see sub-properties of the h:panelGroup. Select – Ajax  Check:  Allow Ajax updates  Click  Refresh, then click the icon: Click to edit Ajax request properties

26. 26 Last update: 12/04/2007  5. Create an AJAX Refresh Request on the Panel Group – 2 of 2 From the hx:ajaxRefreshRequest property: Add Parameter – this will add a 3 rd row  Click: Add Parameter – this will add a 3 rd row (Under Parameter values sent from the browser) CAREFULLY  Type the following (CAREFULLY) directly into the new empty box:$$AJAXROW$$form1:tableEx2:StateH  Notes  $$AJAXROW$$ -  $$AJAXROW$$ - JSF/AJAX statement prefix, i.e. the “current/clicked row” of a dataTable  form1:tableEx2: -  form1:tableEx2: - The fully-qualified HTML name of the dataTable**  StateH -  StateH - A hidden variable. - - StateH is what the getQueryParameter references: form1:tableEx2:StateH  Note also that colons : separate the three-part field name form1:tableEx2:StateH

27. 27 Last update: 12/04/2007  Run the Page  From the dataTable, Click: NY …or… NJ …or… CA …or… CT

28. 28 Last update: 12/04/2007  Example 2 – Dependent ComboBoxes and AJAX Submit Refresh  Here is our target page. Users can search for customers by State. And for a given customer, and find their Orders   Our page will contain an:  A Combo-Box that is populated by server-side data. The user makes a selection which fires an AJAX Submit Refresh to open:  Another Combo-Box that retrieves customers for the selected state. The users then select a customer that fires off another Submit Refresh to return all Orders for the selected customer. Let’s begin:  Create a new page, named: ajaxSubmitRefresh.jsp - For now, just change the page heading text as shown in the screen capture

29. 29 Last update: 12/04/2007  2. JSFHandler Code  Copy the code in the Notes section of the slide, and replace the boilerplate JSFHandler code.  Note the following: 1. There are two dynamic arrays for the ComboBoxes (note their properties), and a dynamic array of orders 2.A case statement in preRender() tests a hidden variable on the form – which determines the ComboBox that was selected – and calls one of two functions that will return dynamic array rows from different tables. 3. In the CustomersCB array we are inserting a row 1 – if customers are found – this will remind users to select a customer.  The SQL statements search for:  Customers from a selected state  Orders for a selected Customer  Please read all of the //comments in the JSFHandler code Ctrl/S  Don’t forget Ctrl/S 1. 2. 3.

30. 30 Last update: 12/04/2007  3. Design the Page – 1 of 2  The screen capture below shows the JSF design. Create it as follows: 1. (From Page Data) Drag StatesCB onto the page to create the Select a State: ComboBox 2.Drag a Panel - Group Box on the page below Error Messages Group  Select: Type of component: Group 3.Drag another Panel – Group Box on the page, and drop it inside the Panel – Group Box JSP  Select: Type of component: JSP (see Notes on why you’re doing this) 4. (From Page Data) Drag CustomersCB onto the page, and drop it inside the JSP Panel – Group Box to create the Customers from selected state: ComboBox StatesCB  CustomersCB  Inside a JSP Panel Group Box Inside a Group Panel Group box Note: We have modified the default label text for the ComboBoxes

31. 31 Last update: 12/04/2007  3. Design the Page – 2 of 2 1.Drag a third Panel – Group Box (Type Group) onto the page – below the Customers ComboBox 2. (From Page Data) Drag the orders array inside the top-left corner of the Panel Group Box.  Create a read-only dataTable OrderAmount  Ensure that the OrderAmount Control Type is an Output field Your dataTable will be nested inside the Panel – Group Box 3. (From the Palette – if you have not done so already) Customize the Enhanced Faces Components drawer (Right- click, select Customize). Find the Input – Hidden component and un -check:  Hide 4. (From the Palette) Drag an Input – Hidden component onto the page hidden1  From Properties, ensure that its Id is: hidden1 hidden1  ordersArray  Inside a Group Panel Group box

32. 32 Last update: 12/04/2007  5. Create the JavaScript Event to Invoke the AJAX Engine StateAbbrev  Select the StateAbbrev ComboBox. *Quick Editonchange  From the *Quick Edit view, select the onchange event - 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)  Next we have to assign a value to the hidden field on the page  With the ComboBox still selected, add the following line of JavaScript in the Quick Edit view document.getElementById( " form1 : hidden1 " ).value = ' combobox1 ' ;

33. 33 Last update: 12/04/2007  5. Create the JavaScript Event to Invoke the AJAX Engine LastName C  Select the (Customers) LastName ComboBox *Quick Editonchange  From the *Quick Edit view, select the onchange event - specify: -  Use pre-defined behavior - Action: Invoke Ajax behavior on the specified tag - Target: group2 (this directs AJAX to render data in the Panel Group Box)  Next we have to assign a value to the hidden field on the page  With the ComboBox still selected, add the following line of JavaScript in the Quick Edit view :  document.getElementById(“form1 : hidden1”).value = ‘combobox2’;

34. 34 Last update: 12/04/2007  7. Create an AJAX Submit Refresh on the Panel Group  Select the first panelGroup on the page (the part of the page which will be updated through AJAX).  To do this click the LastName comboBox  From the properties view, scroll up until you see h:panelGroup Ajax  When you do, you will see sub-properties of the h:panelGroup. Select – Ajax  Check:  Allow Ajax updates  Click  Submit, then click the icon: Click to edit Ajax request properties  You should see Target: group1

35. 35 Last update: 12/04/2007  7. Create an AJAX Submit Refresh on the Panel Group  Select the panelGroup – note, to do this, follow these steps : Properties  First select the entire dataTable. Then from Properties (the side bar of all the page properties) you will see: h:panelGroup – click this property Ajax  When you do, you will see sub-properties of the h:panelGroup. Select – Ajax  Check:  Allow Ajax updates  Click  Submit, then click the icon: Click to edit Ajax request properties  You should see the following:  Repeat the above step for h:panelGroup – group1  You are now ready to test your Submit Refresh

36. 36 Last update: 12/04/2007  Run the Page – Test Submit Refresh  Run the page on the server. To see data, select:  New York  Filibuster  Lundquist  Note that we have not done much with error-handling. For example, what would be appropriate to show users if there were no customers for a selected state? An optional workshop coming up will show you some examples for this.

37. 37 Last update: 12/04/2007 EGL/JSF Steps to Implementing AJAX External Refresh Functionality  The AJAX External Refresh allows you to use the AJAX engine to load additional (child) pages inside PanelGroup boxes in an existing (parent) page. The steps to do this are shown below – and would be used to create new pages from scratch. We’ll be re-purposing existing pages (so some steps will be consolidated) Steps for Submit 1.Create a new page – with a template (been there/done that) 2.Develop the EGL JSFHandler and business logic (been there/done that too) 3.Design the Page with JSF components bound to EGL data (Yep - been there/done that). 4.Create a JavaScript event for a JSF component, that invokes AJAX behavior for a target JSF panelGroup component (been there/done that in the last workshop) 5.Enable AJAX for update, and create an External Request on the JSF Panel Group Wow – less to keep track of than before. Maybe we’ve “caught a break” with this one!

38. 38 Last update: 12/04/2007  1. Create a New Page …and… 2. Add JSFHandler AJAX Logic  What if you want to AJAX-ify an existing web page? Let’s give that a shot. We’ll work with the parent/child pages: allcustomers and updatecustomer – and use AJAX External Refresh to load updatecustomer into the allcustomers page. Since the basic page design is complete, we can proceed directly to step 2. We will not need to modify the JSFHandler for our parent page (we’ll only need to add AJAX support in the JSF controls). But we will need to add the preRender() function and call to AJAX in updatecustomer.jsp.  Load updatecustomer.egl into the Content Area. Add the logic (and modify the existing code) as shown in the three areas here: 1.Add the onPreRender= JSFHandler property 2.Add the onPreRender() function – including the j2eelib. call to AJAX engine 3.Modify the existing onConstruction() logic Ctrl/S  Save your work (Ctrl/S) 1. 2. 3.

39. 39 Last update: 12/04/2007  3. Add a Hidden Variable to the dataTable  Open allcustomers.jsp, and from the palette Drag an Input – Hidden component into the LastName column of the dataTable (see screen capture). Properties From Properties, ensure that its  cid  Id is  cid  Value is  Customers.CustomerID  Value is  Browse, and from Page Data select Customers.CustomerID Browse to Page Data

40. 40 Last update: 12/04/2007  3. Add the PanelGroup Box to the Page 1 of 2  Next, drag an HTML Horizontal Rule onto the page below the Data Table  Then, Drag and drop a JSF PanelGroup Box (Type: Group) onto the page

41. 41 Last update: 12/04/2007  3. Add the PanelGroup Box to the Page – 2 of 2  Here’s what your page should look like: PanelGroup box 

42. 42 Last update: 12/04/2007  4. Create a JavaScript Event for the AJAX Component  Select the group1 PanelGroup box, and from its properties:  Scroll down to the – Ajax sub-property  Check: Allow Ajax updates  Click: the icon to edit the Ajax request properties From the hx:ajaxExternalRequest sub-property, add a new parameter – exactly as shown here  Recall the syntax of this parameter from a previous workshop. $$AJAXROW$$form1:tableEx1:cid

43. 43 Last update: 12/04/2007  4. Create a JavaScript Event for the AJAX Component Link next to the LastName*Quick Editonclick  Select the Link next to the LastName control. From the *Quick Edit view, select the onclick event, and specify:  Use pre-defined behavior Multiple actions Action: Multiple actions – from the popup dialog box, Insert actions as shown below: Action: Invoke Ajax behavior on the specified tag Target: group1 (this directs AJAX to render data in the Panel Group Box) Action: Do nothing and stop the event Target: No Target

44. 44 Last update: 12/04/2007  Run the Page  Click a Customer LastName – note that updatecustomer.faces is loaded below the dataTable (and note the other characteristics of AJAX enabled pages: speed, refresh)  Obviously, in a real application you would design the externally- loaded page without a template – or with an appropriate template for U.I. quality  Finally – recall that External Refresh does NOT permit updates through your web pages (it’s a technique that can only be used for read/only pages in the current release).

45. 45 Last update: 12/04/2007 Optional Topic – Create AJAX dataTable Paging Functionality  You may have noticed that the JSF pager controls invoke your EGL JSFHandler through a Form/Submit. This may be okay for some functionality, but you also might want: 1. A better (AJAX-matized) user experience, and 2. more programmatic control over your paging. Let’s try creating our own AJAX-controls paging for a dataTable, and see if you think this approach has merit. Here’s what we’re going to build (at run-time). The AJAX techniques we’ll use have already been covered in this Unit, so this should be fairly simple and straightforward to put together.

46. 46 Last update: 12/04/2007  Create AJAX dataTable Paging Functionality – 1 of 6 Create a new page, named (exactly): ajaxPaging.jsp Edit the EGL Page Code, and from the Notes section of the slide copy the code you see here  over the boiler-plate Read the comments in the code. Note the following:  firstRow  firstRow will be used to control which row the dataTable starts displaying from in the EGL dynamic array  pagingSize  pagingSize is set to 8 – but it could be user-specified (!) We leave this up to consider as an Optional /Advanced workshop.  Fwd/bkwdDisable  Fwd/bkwdDisable are boolean variables used to control the button click options for paging

47. 47 Last update: 12/04/2007  Create AJAX dataTable Paging Functionality – 2 of 6 From Page Designer:  Change the boiler-plate page heading text  Add a JSF Panel - Group (type Group) to the page  (From Page Data) Drag the customers array into the Panel Group box  Select output (read/only) fields and the some sub-set of the columns as fields in the dataTable  Add another Panel Group (type Group) to the page  (From Page Data) Select both forwarding functions under the Actions folder, and drag them into the 2 nd Panel Group  Add a JSF Input – Hidden control to the page  Optional – Select each of the submit buttons, and from their – Display options properties, select  Image and browse for their Normal image to find a graphic for each. Example: images/next.jpg and images/prev.jpg Customers array as a dataTable JSF Panel Group group1 Functions as submit buttons – with images JSF Panel Group group2 Hidden Input Control

48. 48 Last update: 12/04/2007  Create AJAX dataTable Paging Functionality – 3 of 6 For each of the Panel Groups:  Select the Panel Group, and from Properties -Ajax  Specify:  Allow Ajax updates  Submit

49. 49 Last update: 12/04/2007  Create AJAX dataTable Paging Functionality – 4 of 6 For each of the Submit Buttons:  Select the button, and from Quick Edit/onclick event, specify:  Use pre-defined behavior Action: Multiple actions (see screen capture below) according to which button is clicked: An additional JavaScript statement to value the hidden input field according to which button is clicked: document.getElementById("form1:hidden1").value = 'fwd';

50. 50 Last update: 12/04/2007  Create AJAX dataTable Paging Functionality – 5 of 6 Also (for each of the Submit Buttons):  Select the button, and from Properties/All Attributes specify:  The disabled Attribute  Value:  Compute  Bind it to the appropriate EGL boolean variable

51. 51 Last update: 12/04/2007  Create AJAX dataTable Paging Functionality – 6 of 6 For the dataTable - Select the entire dataTable, and from Properties/All Attributes: 1  Give the dataTable a border: 1 columnClasses  Delete the columnClasses value first firstRow  Bind first to the EGL variable: firstRow rows pagingSize  Bind rows to the EGL variable: pagingSize  Run the page on the server

52. 52 Last update: 12/04/2007 Optional Topic – Combining Mouse-Over Color With AJAX Pages  The approach used to showing which row is “current” via a JavaScript mouse-over (see prior workshop in the dataTable section of this course), is valid when the table is populated at the time the onload event is fired. This approach does not work when AJAX is used to update the content of the table as the is fired only once: when the page is loaded. AJAX requests do not trigger the body onload event.  To work-around this, we need to trigger the onLoad javascript function (on slide 257 notes section) method every time a payload is received from an AJAX request and the request has completed. The following steps assume you have added the JavaScript for mouse-over row/color (this code has been added to this slides: ***Notes for your convenience) to a.JSP page with a dataTable under AJAX control.  Steps:  Remove the onload=... from the body tag.  Locate the h:panelGroup for the table tableEx1  Click on the Ajax tab under h:panelGroup  Click on “edit the Ajax request properties” icon on the bottom of the page.  This will bring up the “hx:ajaxRefreshRequest” tab.  Click on “Quick Edit” tab.  This will bring up methods that can be used during the lifecycle of an Ajax request.  Click on “ oncomplete ” and type: onLoad(‘form1:tableEx1’);  Run the page on the server – and test the combined Mouse-over color + AJAX

53. 53 Last update: 12/04/2007  Optional Workshop – Combining AJAX With JavaScript Events (and Mouse-Over)  You may also wish to provide dynamic AJAX-enabled server-side database access in your pages, similar to type-ahead. Here’s a working page that shows how to do the following:  Users type in (case-sensitive) search arguments (one keystroke at a time), and the page’s server-side EGL functionality does a database lookup, filtering rows dynamically.  Note also the mouse-over alternate colors. And by clicking a row in the dataTable, you fill in the Customer’s Address directions (again, using AJAX)

54. 54 Last update: 12/04/2007  Optional Workshop – Combining AJAX With JavaScript Events – 1 of 3  Unusual steps: ajax_customer_search.jsp 1.Create a new page, named (precisely): ajax_customer_search.jsp 2.Enter source view mode, in Page Designer 3.From the Notes section of the slide copy all of the.jsp source 4.Completely replace the new page boiler-plate with your copied source from the Notes Notes:  The AJAX functionality is fired off by onKeyUp from the first input field  The 2 nd Submit Button will not render (it uses a hidden.css tag)

55. 55 Last update: 12/04/2007  Optional Workshop – Combining AJAX With JavaScript Events – 2 of 3 ajax_customer_search.egl  Edit the EGL JSFHandler: ajax_customer_search.egl 1.From the Notes section of the slide copy all of the.egl source 2.Completely replace the new JSFHandler’s boiler-plate with your copied source from the Notes onPreRender()  Note the AJAX coding technique in onPreRender() – following the model discussed in this section

56. 56 Last update: 12/04/2007  Optional Workshop – Combining AJAX With JavaScript Events – 3 of 3  From Project Explorer, open: stylesheet.css  Using Content Assist, add the two new entries shown here   The source for these is in the Slide Notes  Run ajax_customer_search.jsp on the server  Type valid state abbreviations in the input field (letter by letter)  Click a row in the dataTable (and AJAX will return the Directions to the multi-line input text)

57. 57 Last update: 12/04/2007  Optional Workshop – Combining AJAX With Tab Pages (To Control JSF Component Rendering)  In some large and complex pages, where you have multiple tab panels, each of which contains one or more dataTables, you may wish improve the overall page’s loading speed and performance, by using AJAX and hiding/rendering selected panel components. This workshop will show you how to create a tab page, with panels that:  Hide and render dataTables programmatically (events fired when users click a panel tab)  Use AJAX to improve dataTable and page U.I. performance

58. 58 Last update: 12/04/2007 Optional Workshop – Combining AJAX With Tab Pages – 1 of 6 ajaxTabPage.jsp.  Create a new page, named (precisely): ajaxTabPage.jsp. Using the screen capture and notes, add the following JSF components to the page:  Customize the page’s boiler-plate heading text Panels – Tabbed  Add a Panels – Tabbed control. For this component,  Customize the size to be 100% of the page’s width, and 250 pixels high  From Panel List, add a third bfpanel as shown below – named Tab3 Panel – Group Box  Inside each panel, drag and drop a Panel – Group Box (they will be named: group1, group2, and group 3 successively)  Below the tab control, add: Button – Command  Two Button – Command components. From the Properties view, make them: Type: Plain  A hidden input control Panel – Group Box Plain Command Buttons and Hidden Input control

59. 59 Last update: 12/04/2007 Optional Workshop – Combining AJAX With Tab Pages – 2 of 6  Edit the your EGL page code, and replace the boiler-plate text with the code from the slide notes.  Read the comments – note that there is little new in this logic  Ctrl/S  Ctrl/S – save your code Populate the dynamic arrays From the database Inspect a variable (that will be bound to the Hidden Input control) And use Render/Hide to programmatically Display the dataTable for the clicked tab panel

60. 60 Last update: 12/04/2007 Optional Workshop – Combining AJAX With Tab Pages – 3 of 6 (From Page Designer) do the following: set focus inside  Select a (set focus inside a ) bfpanel – (Tab1, Tab2, Tab3 – you will do one tab at a time)  (From Page Data) – drag and drop one of the customers array variables on top of the Panel Group Box inside the tab panel  For each dataTable – (Select the entire dataTable, and from All Attributes), specify a rendered property bound to one of the boolean variables (vis1, vis2, vis3).  (From Page Data) drag and drop the whichTab variable on top of the hidden input control

61. 61 Last update: 12/04/2007 Optional Workshop – Combining AJAX With Tab Pages – 4 of 6 (From Page Designer) do the following: set focus inside  Select a (set focus inside a ) bfpanel – (Tab2, Tab3 – you will do one tab at a time) Quick Edit  (From Quick Edit ) – in the onenter event add the statements shown in the screen capture below:  Tab2:  Tab3: document.getElementById('form1:hidden1').value = "tab2"; document.getElementById('form1:button1').click(); document.getElementById('form1:hidden1').value = "tab3"; document.getElementById('form1:button2').click(); See ***Notes

62. 62 Last update: 12/04/2007 Optional Workshop – Combining AJAX With Tab Pages – 5 of 6 Command Button  Select a (Command Button ) – (you will do one button at a time)  (From Quick Edit): –Check Use pre-defined behavior. –From Action: select Invoke Ajax behavior on the specified tag –For button1 – specify: Target: group2 –For button2 – specify: Target: group3

63. 63 Last update: 12/04/2007 Optional Workshop – Combining AJAX With Tab Pages – 6 of 6  Run the page on the server  Only the first dataTable will render (you can do a View Source in the HTML and see for yourself)  Click Tab2 or Tab3  There will be a slight pause – as AJAX invokes your server side logic to render the dataTable in the clicked tab – through the onenter event

64. 64 Last update: 12/04/2007 Tab Controls – Programmatically Opening a Specific Tab With JavaScript  You may have a particular U.I. requirement where you need to use JavaScript to open to a particular tab. In the example we’ll be showing a user clicks a link, that opens to a specific tab. This is a rather advanced use case, that also involves using AJAX to load areas of the page – which is why we placed it in this section of the course. The techniques involved here are: 1.AJAX-controlled dataTables within the tabs 2.Invoking JavaScript to select a specific panel within the tab control 3.Other JavaScript options (not really necessary for this particular example, but you might find a use for them in the future) Finished Page: Search for customers, with LastNames > :hostVar Select a customer from a list, and: Load the data dynamically for that customer Go to a specific panel within the tab using JavaScript

65. 65 Last update: 12/04/2007  Tab Controls – Programmatically Opening a Specific Tab With JavaScript – 1 of 4 As we did in a previous workshop, we will be giving you the complete code for the page solution (and pointers to the salient AJAX and JavaScript techniques used): 1.Create a new page named: danPage2.jsp 2.Select and copy all of the finished page source in the Notes section of this slide 3.From Page Designer, enter Source mode – then Select all of the source, and replace it with the source from the Notes 4.Save your changes 5.Edit the EGL source code for this page

66. 66 Last update: 12/04/2007  Tab Controls – Programmatically Opening a Specific Tab With JavaScript – 2 of 4 From your EGL JSFHandler: 1.Select and copy all of the finished page source in the Notes section of this slide 2.Select all of the source, and replace it with the source from the Notes 3.Save your changes 4.Note the following: 1.Variables for page’s functionality 2.AJAX getQueryParameter(“$$axjaxm ode”) == null … which allows you to detect if no selection was made (and your EGL was invoked), or if this is the first time into the page’s lifecycle 3.Other – standard: 1.AJAX logic 2.SQL logic Return to Page Designer (working with danPage2.jsp)

67. 67 Last update: 12/04/2007  Tab Controls – Programmatically Opening a Specific Tab With JavaScript – 3 of 4 The AJAX-specific properties of this Workshop are similar to previous ones: (use of panelGroup, etc. use of a hidden-input field in the dataTable column, use of a clicked Link, etc.). However, for this clicked link, note: 1.The onclick event contains JavaScript statements to return the address of the tab control in the browser and manipulate individual panel actions (hiding/showing/and switching). form1:groupx 2.There are multiple AJAX Action/Targets – which is how data is loaded into two separate AJAX-controlled zones in this page with one user-event. Note also the that panelGroup JSF IDs are fully qualified: form1:groupx

68. 68 Last update: 12/04/2007  Tab Controls – Programmatically Opening a Specific Tab With JavaScript – 4 of 4 Run the page, and watch the JavaScript and AJAX operations and events. Note that the JavaScript will open tabs, before the server-side AJAX data operations, etc.

69. 69 Last update: 12/04/2007  When to use AJAX Pages  Because of the significant improvements in response time and overall user experience, there are only a few situations where AJAX should NOT be the used:  Do not use AJAX for Page Design, when:  Users may (or may not) have JavaScript enabled  Users need to utilize the back button  Users want to be able to book-mark pages  A page is Read-Only – and has no interaction with the user except forward to another page  A page is displayed once – and all the data is returned one time –Login –Registration (unless there are several parts to the registration page/process)  Consider using AJAX for:  All pages where the workflow dictates user/page interaction – in other words, any page where the user interacts with the JSFHandler more than once  All pages where a large amount of data is going to the page from the JSFHandler –Ex. Over 20 rows in a dataTable  Large complex pages –Ex. A master/detail tab page, where you can load records into different tabs depending on the workflow process  In addition to the above, there are two incredibly well-written technical articles in DeveloperWorks that should be considered “required reading” before making the decision for/against AJAX**  http://www-128.ibm.com/developerworks/xml/library/wa-ajaxtop1/ http://www-128.ibm.com/developerworks/xml/library/wa-ajaxtop1/  http://www-128.ibm.com/developerworks/xml/library/wa-ajaxtop2/ http://www-128.ibm.com/developerworks/xml/library/wa-ajaxtop2/