JSF dataTables – Advanced use of Properties and Development Techniques

1. 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.  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. ComboBoxes RadioButtons

3. 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.  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) Columns To Display

5.  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: • Drag and drop:StatesCB – StateTable[]on top of the control • Specify the Value:#{varsiteUsersUI.State} • RadioButton Group • Specify the Value:#{varsiteUsersUI.SuTypeString} • OPTIONAL (for the dataTable) • Display alternate row colors: rowHighlight/rowClass3 • Add a 1-pixel width border to the dataTable • Run the page on the server

6. 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. Add an action that’s performed when a row is clicked – 1 of 5 • 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: • The selint[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) • 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.  Create the default dataTable – 2 of 5 • After you’ve pressed Ctrl/S (to save your JSFHandler) return to Page Designer • 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. 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: • From: Value: click the Browse… icon • Select the sel – int[]array OPTIONAL • Click: Add selection toolbar • Click: Add selection combo box

10. 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. JSF dataTable Row Actions – OPTIONAL Radio-Button (single-row) Selection – 5 of 5 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. 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.  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: • 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) • The updateDBRow() function updates an individual row at a time

14. 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. Add an Edit Action that brings up a form for in-place editing – 3 of 6 • 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 • 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. Add the Update Function as a Submit Button – 4 of 6 • Drag and drop the updateCustomers() function onto the page, to become a submit button

17. Test Your Work – 5 of 6 • Run the page. Test out the edit feature. • Click updateCustomers – to save your changes to the database.

18.  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: • 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) • 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. • From Properties All Attributes: • Select action • And pick the new function Test your work

19. 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. 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: • 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. • 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 • You will have to customize the SQLRecord (or BasicRecord) and add Persistent=no fields.

21. 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 • Select and delete the {Phone} field (not the column, just the field)

22. Programmatically Changing a Cell Color in a dataTable – 3 of 6 • From the Palette • Drag a Panel – Group Box (type: JSP) into the PHONE column • 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. 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. Programmatically Changing a Cell Color in a dataTable – 5 of 6 • Select the HTML table, and from Properties, specify: • Height: 100% • Color (some custom color) • Select the other HTML table, and repeat, giving it a different color

25. 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 • 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. 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. JSF dataTable – Dynamic Images – 1 of 4 Create a new page, named:itemlist.jsp Right-click over the .JSP page, and from the EGL editor, add the following (USING CONTENT ASSIST): itemArray Item[0]; Status statusRec; ItemLib.GetItemListAll(itemArray, status); Press Ctrl/S (save and generate Java)

28. JSF dataTable – Dynamic Images – 2 of 4 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 From Page Data, expand itemArray. Drag and drop Image onto the Image control.

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

30. JSF dataTable – Dynamic Images – 4 of 4 • 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.  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): • 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.  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) • 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 Language="JavaScript" src="theme/sorttable.js"> </script> Page in Source view mode

33.  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. Unit Summary • 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