® IBM Software Group © 2006 IBM Corporation JSF dataTables – Advanced use of Properties and Development Techniques Part III – of a 3-part section on the use of the rich and complex U.I. structures that are dataTables. This section includes control substitution, graphics in dataTables, JavaScript column sort, cell color, inline frames and input row selection.

2 Last update: 12/04/2007  Substituting Controls in a dataTable  You may wish to substitute comboBoxes and radioButtons (selection controls) in a dataTable for input or output controls. Here’s an example of such a page…  To do this, you will need to:  Delete the existing inputText controls from the dataTable  Substitute (drag and drop) new JSF components  Bind the components to EGL data  In your JSFHandler, you will need to access any database information needed to populate the new controls  We will do an example with both static and dynamic-content control substitution. ComboBoxesRadioButtons

3 Last update: 12/04/2007 Substituting Controls in a dataTable – Steps 1 of 3 – the JSFHandler  We will use a page named: allsiteusers.jsp.  You may have created this (it was optional) for a previous exercise.  If so, please replace the JSFHandler code with the code in the Notes section of this slide.  Note the following:  Database and U.I. record array  In order to take advantage of U.I. controls that require datatypes NOT on the database  An array of states from the database  Everything else should be familiar

4 Last update: 12/04/2007  Substituting Controls in a dataTable – Steps 2 of 3 – Page Design  Create a new allsiteusers.jsp page (or if you have an allsiteusers, delete your existing dataTable)  Drag and drop: siteUsersUI – SiteUserSub[] onto the page  Show (display on the page) only the columns in the screen capture  Delete the existing State field, and substitute a Combo Box  Delete the existing su_type field, and substitute a Radio Button Group.  For this control, add three selection entries. From Properties   Drag and drop a Panel Group-box into the Receive Updates column (At the prompt select JSP style Panel Group box. This will allow you to add HTML and JSF components).  Into this group box drag an HTML table (2 rows/1 column, 0 border) – then into the table add the text and drag the checkboxes into the rows (as shown above) ColumnsToDisplay

5 Last update: 12/04/2007  Substituting Controls in a dataTable – Steps 3 of 3 – Bind EGL Data (From Page Designer) - Using Properties, bind the following controls’ Value: to the following EGL variables  ComboBox: StatesCB – StateTable[]  Drag and drop: StatesCB – StateTable[] on top of the control #{varsiteUsersUI.State}  Specify the Value: #{varsiteUsersUI.State}  RadioButton Group #{varsiteUsersUI.SuTypeString}  Specify the Value: #{varsiteUsersUI.SuTypeString}  OPTIONAL (for the dataTable) rowHighlight/rowClass3  Display alternate row colors: rowHighlight/rowClass3 border  Add a 1-pixel width border to the dataTable  Run the page on the server

6 Last update: 12/04/2007 JSF dataTable Row Actions – Add a Selection Column  The other Row Action, is to add a selection column to the table.  This technique allows users to select multiple rows in a dataTable.  These selected rows then are identified and made available for processing in your JSFHandler through a dynamic array bound to the dataTable’s checkbox (see screen capture). The user Submits the form one time – and all selected rows can be processed together  Let’s see how to implement this common requirement with EGL and JSF.

7 Last update: 12/04/2007 Add an action that’s performed when a row is clicked – 1 of 5  Add an action that’s performed when a row is clicked – 1 of 5 allordersupdate.jsp  Create a new,.JSP web page, named: allordersupdate.jsp  Copy/Paste the code in the Notes section of this slide – and read the comments. Note the following: sel int[0] ordersArray 1.The sel int[0] array is a dynamic array that will (at run- time) contain the index values of the ordersArray – for every row the user checks (checkbox control) ordersArray sel 2.The loop shows how to reference the selected ordersArray row – by using the sel array’s occurrences - note the nested array brackets “shorthand” 1. 2.

8 Last update: 12/04/2007 – 2 of 5  Create the default dataTable – 2 of 5  After you’ve pressed Ctrl/S (to save your JSFHandler) return to Page Designer ordersArray  Drag and drop ordersArray on the page – and create the dataTable shown below:  Display all of the fields  All of the fields should be input controls  Except OrderID which should be an output control

9 Last update: 12/04/2007 Add a selection column to the table – 3 of 5  Add a selection column to the table – 3 of 5 From Page Designer, select the entire dataTable, and from Row actions:  Click: Add selection column to the table  A new column will be added to your dataTable with a small checkbox inside it, representing the selection row action, and your Properties should show:  Value:  From: Value: click the Browse… icon sel – int[]  Select the sel – int[] array OPTIONAL  Click: Add selection toolbar  Click: Add selection combo box

10 Last update: 12/04/2007 Add an action that’s performed when a row is clicked – 4 of 5  Add an action that’s performed when a row is clicked – 4 of 5  From Page Data  Drag and drop the showSelOrders function on the page – it will create a Submit Button  Drag and drop the selectedOrders string onto the page. Create an output text field  From the dataTable properties, display 10 rows at a time, and enable paging Run the page – and select rows (try out the cool-io buttons). Press showSelOrders

11 Last update: 12/04/ of 5 JSF dataTable Row Actions – OPTIONAL Radio-Button (single-row) Selection – 5 of 5 Select only one row By simply changing the hx:inputRowSelect Property to:  Select only one row, you can change the multiple-row selection check- boxes to an exclusive (select only one row in a dataTable) radio- button. This slide contains EGL JSFHandler code to implement this with a new page. Follow the steps in the previous slides to do the JSF work.

12 Last update: 12/04/2007 JSF dataTable Row Actions – Editing a dataTable Row  The final Row Action, Editing a dataTable row – will allow you to easily add U.I. logic for:  Displaying rows as read-only fields  Allowing users to update one or more rows in the JSFHandler that provides the array data to the dataTable in the.JSP  Save your changes to the database  Note: For this technique, the array that is being displayed on the page must be held in session.  Let’s see how to implement this common requirement with EGL and JSF.

13 Last update: 12/04/2007 – 1 of 6  Customize the EGL JSFHandler – 1 of 6  Create a new,.JSP web page, named: allcustomersEditPanel.jsp  Edit the JSFHandler and Copy/Paste the code in the Notes section of this slide – and read the comments. Note the following: 1.The updateCustomers() function tests individual fields for changes between the stored database copy of each row …vs… what the user might have modified in the browser (rendered in the U.I. copy of the row) 2.The updateDBRow() function updates an individual row at a time

14 Last update: 12/04/2007 Add the Array to the Page and Customize its Properties – 2 of 6  Add the Array to the Page and Customize its Properties – 2 of 6  (from Page Data) Drag and drop the customersUI array, and create the dataTable shown here   Use output (read/only) controls for the fields in the dataTable  Feel free to enhance the control, adding:  A border  Alternate Row colors  Paging  Eight rows/per page

15 Last update: 12/04/2007 Add an Edit Action that brings up a form for in-place editing – 3 of 6  Add an Edit Action that brings up a form for in-place editing – 3 of 6 Add an edit column that brings up a form for in-place editing of row content  From Row Actions, click: Add an edit column that brings up a form for in-place editing of row content  This will add a large column to the left of your existing columns, with a panel group box in which to add form fields From Page Data customersUI  Expand the customersUI – array  Select all of the columns except for CustomerID (it’s the primary key field – and you can’t update a primary key column in a relational Database!)  Drag and drop the selected fields into the panel group box  From Configure Data Controls  Make the controls  Updating an existing record  Click Finish

16 Last update: 12/04/2007 Add the Update Function as a Submit Button – 4 of 6  Add the Update Function as a Submit Button – 4 of 6  Drag and drop theupdateCustomers() function onto the page, to become a submit button

17 Last update: 12/04/2007 Test Your Work – 5 of 6  Test Your Work – 5 of 6  Run the page. Test out the edit feature.  Click updateCustomers – to save your changes to the database.

18 Last update: 12/04/2007 Update a Row at a Time Through the Edit Form – 6 of 6  OPTIONAL Update a Row at a Time Through the Edit Form – 6 of 6  You might want to update the row on the database (or at least launch a DB update request) once for each row clicked – as opposed to doing them all at once at the end of the input / edit cycle. To do this: Notes  Create a new function in the JSFHandler that responds to a JSF component tree – clicked row event (more on this in an upcoming section). There is a sample function in the slide Notes that will do this (and is commented for better understanding) hx:commandExRowEdit  Select the hx:commandExRowEdit component of the dataTable – which is the row edit form. You may need to place your cursor in the FirstName field, and scroll to access this property. Properties All Attributes:  From Properties All Attributes:  Select action  And pick the new function Test your work

19 Last update: 12/04/2007 JSF dataTable Row Actions – Programmatically Changing a Cell Color in a dataTable  Another common requirement is to programmatically (that is, within your EGL JSFHandler) color a given cell of a dataTable, for the purpose of drawing the user’s attention to it.  Let’s see how to implement this with EGL and JSF.

20 Last update: 12/04/2007 – 1 of 6  Programmatically Changing a Cell Color in a dataTable – 1 of 6  Create a new,.JSP web page, named: allcustomers5.jsp  Edit the JSFHandler and Copy/Paste the code in the Notes section of this slide – Save your changes, and read the comments. Notes: 1.Essentially, in this technique you will create two panel- groups inside the column (cell) with a different colored HTML table in each. You will duplicate the JSF output field in each panel, and then hide/show the appropriate panel as per your logic requirements. 2.So, after reading the database, you will iterate over the rows returned to the dynamic array and value the vis1/vis2 boolean fields (which are used to render the JSF panel groups) appropriately 3.You will have to customize the SQLRecord (or BasicRecord) and add Persistent=no fields.

21 Last update: 12/04/2007 – 2 of 6  Programmatically Changing a Cell Color in a dataTable – 2 of 6  From Page Designer/Page Data – drag the customers array on to the page.  Output (read/only) fields – although that is just for this workshop, you could just as well have selected input fields  But, don’t select the vis1 or vis2 boolean fields {Phone}  Select and delete the {Phone} field (not the column, just the field)

22 Last update: 12/04/2007 – 3 of 6  Programmatically Changing a Cell Color in a dataTable – 3 of 6  From the Palette JSP  Drag a Panel – Group Box (type: JSP) into the PHONE column  Select  Select (set focus to) the Panel – Group Box, and from HTML Tags, double-click: Table  1 row/1 column  100% Table width  0 pixel Border width 

23 Last update: 12/04/2007 – 4 of 6  Programmatically Changing a Cell Color in a dataTable – 4 of 6  From Enhanced Faces Components, drag an Output field into the table (inside the Panel – Group)  From Page Data, select PHONE and drag & drop on top of the new Output field  Repeat the above series of steps to create another Panel – Group (type: JSP) with another HTML table and new Output field bound (also) to PHONE

24 Last update: 12/04/2007 – 5 of 6  Programmatically Changing a Cell Color in a dataTable – 5 of 6  Select the HTML table, and from Properties, specify:  Height: 100%  Color  Color (some custom color)  Select the other HTML table  Select the other HTML table, and repeat, giving it a different color

25 Last update: 12/04/2007 – 6 of 6  Programmatically Changing a Cell Color in a dataTable – 6 of 6 (For each of the JSP Panel Groups)  Select the component  From Properties/All Attributes rendered  Specify the rendered Attribute Value as:  Compute  From Page Data –From the customers array, select either vis1 or vis2  Run the page on the server

26 Last update: 12/04/2007 OPTIONAL WORKSHOP - JSF dataTable Showing Dynamic Images  You’ve seen pages like this before!!!  Let’s see how to implement this common requirement with EGL and JSF.

27 Last update: 12/04/2007 JSF dataTable – Dynamic Images – 1 of 4 itemlist.jsp  Create a new page, named: itemlist.jsp USING CONTENT ASSIST Right-click over the.JSP page, and from the EGL editor, add the following (USING CONTENT ASSIST): itemArray Item[0]; StatusstatusRec; ItemLib.GetItemListAll(itemArray, status); Press Ctrl/S Press Ctrl/S (save and generate Java)

28 Last update: 12/04/2007 JSF dataTable – Dynamic Images – 2 of 4 itemArray  From Page Designer - From Page Data – select itemArray, drag and drop it onto the page. Select:  Displaying an existing record (Read/only) – for the fields  Select and delete the output field for image.  From Enhanced Faces Components, select an Image control Drag and drop it into the empty Image column itemArray  From Page Data, expand itemArray. Drag and drop Image onto the Image control.

29 Last update: 12/04/2007 JSF dataTable – Dynamic Images – 3 of 4  Right-click over the Page, and select Run on Server… Note  Note – if you get an unsightly border around your images and want to remove it: \theme\stylesheet.css 1. Edit \theme\stylesheet.css graphicImageEx 2. Find the:.graphicImageEx tag, and add the following:

30 Last update: 12/04/2007 JSF dataTable – Dynamic Images – 4 of 4 OPTIONAL  OPTIONAL – Drag and Drop a link on the image in the dataTable. Set the properties (URL) as shown below: And add a parameter to pass the itemArray.itemid value to the itemdetail.jsp page (which you will have to create)

31 Last update: 12/04/2007  OPTIONAL WORKSHOP - JSF dataTable Column Sort Using JavaScript – 1 of 3  While somewhat limited, in the interaction with other JSF features and techniques, this JavaScript sort – provided by Monuranjan Borgohain can be useful, and is extremely simple to implement. Steps (from Project Explorer): sorttable.js.js  Right-click over the \theme\ folder under \WebContent\ and create a new file, named: sorttable.js (note, the extension is.js … not.jsp)  Copy the large JavaScript in the slide Notes below into the new file.  Save and close the file  Create a new.JSP page, named: javaScriptDataTableSort.jsp  Edit the EGL  Add the code shown here to :  Declare an array of customer records  Return the array data from the database  Save (Ctrl/S) and return to Page Designer

32 Last update: 12/04/2007  OPTIONAL WORKSHOP - JSF dataTable Column Sort Using JavaScript – 2 of 3 (From Page Designer/Page Data):  Drag and drop the customers array. Select some (not all) columns to become your dataTable (see next slide for an example) sortable  With the entire dataTable selected, change its Style class to: sortable  From Page Designer (source) mode  Add the following line near the top of the file as shown </script> Page in Source view mode

33 Last update: 12/04/2007  OPTIONAL WORKSHOP - JSF dataTable Column Sort Using JavaScript – 3 of 3 Run the Page and click on any column heading text Optionally – go back to Page Designer and try different U.I. features. Some will work, and others will not – with this JavaScript approach Works with: - Cosmetic enhancements like border/alternate row colors etc. - Row Selection - AJAX Does not work with: - Row Categorization - Using a Scrollable area - Paging (Paging sorts on the current (displayed) page only)

34 Last update: 12/04/2007  Now that you have completed this unit, you should have:  Stated the basic dataTable Concepts and Standard Options  Working with the options in the web tooling  Manipulated JSF dataTable as per U.I. requirements by enabling:  dataTable Columns  Centering/Aligning  Programmatic heading text  Sorting  Adding/Substituting controls in rows  Selection controls  Submit buttons  Dynamic behavior  Rendering columns, fields and the dataTable visible or invisible  Programmatically changing row U.I. properties  Changing row color on mouse-over  Summary dataTables  Nested dataTables Unit Summary