JSF dataTables – Advanced use of Properties and Development Techniques

®

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.

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

ComboBoxesComboBoxes RadioButtonsRadioButtons


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


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)

ColumnsColumnsToToDisplayDisplay


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[]StatesCB – StateTable[] on top of the control

Specify the Value: #{varsiteUsersUI.State}#{varsiteUsersUI.State} RadioButton Group

Specify the Value: #{varsiteUsersUI.SuTypeString}#{varsiteUsersUI.SuTypeString}

OPTIONAL (for the dataTable) Display alternate row colors: rowHighlight/rowClass3rowHighlight/rowClass3 Add a 1-pixel width borderborder to the dataTable

Run the page on the server


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.


Add an action that’s performed when a row is clicked – 1 of 5Add an action that’s performed when a row is clicked – 1 of 5

Create a new, .JSP web page, named: allordersupdate.jspallordersupdate.jsp

Copy/Paste the code in the Notes section of this slide – and read the comments.

Note the following:1. The selsel intint[0][0]

array is a dynamic array that will (at run-time) contain the index values of the ordersArrayordersArray – for every row the user checks (checkbox control)

2. The loop shows how to reference the selected ordersArrayordersArray row – by using the selsel array’s occurrences - note the nested array brackets “shorthand”

1.1.

2.2.


Create the default dataTable – 2 of 5– 2 of 5

After you’ve pressed Ctrl/S (to save your JSFHandler) return to Page Designer Drag and drop ordersArrayordersArray 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


Add a selection column to the table – 3 of 5Add 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:Value: click the Browse… icon Select the sel – int[]sel – int[] array

OPTIONAL Click: Add selection toolbar Click: Add selection combo box


Add an action that’s performed when a row is clicked – 4 of 5Add 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


JSF dataTable Row Actions – OPTIONAL Radio-Button (single-row) Selection – 5 of 55 of 5

By simply changing the hx:inputRowSelect Property to: Select Select only one rowonly 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.


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.



Customize the EGL JSFHandler

– 1 of 6– 1 of 6 Create a new, .JSP web

page, named:

allcustomersEditPanel.jspallcustomersEditPanel.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


Add the Array to the Page and Customize its Properties – 2 of 6Add 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 Use output (read/only) controls for the fields in the dataTablefor the fields in the dataTable

Feel free to enhance the Feel free to enhance the control, adding:control, adding: A borderA border Alternate Row colorsAlternate Row colors PagingPaging Eight rows/per pageEight rows/per page


Add an Edit Action that brings up a form Add an Edit Action that brings up a form for in-place editing – 3 of 6for in-place editing – 3 of 6 From Row Actions, click:

Add an edit column that brings up a form Add an edit column that brings up a form for in-place editing of row contentfor 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 DataFrom Page Data Expand the customersUIcustomersUI –

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 ControlsFrom Configure Data Controls Make the controls

Updating an existing record

Click Finish


Add the Update Function as a Submit Button – 4 of 6Add the Update Function as a Submit Button – 4 of 6

Drag and drop the

updateCustomers()updateCustomers()

function onto the page, to become a submit button


Test Your Work – 5 of 6Test Your Work – 5 of 6

Run the page. Test out the edit feature.

Click updateCustomers – to save your changes to the database.


OPTIONAL Update a Row at a Time Through the Edit Form – 6 of 6Update 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 NotesNotes that will do this (and is commented for better understanding)

Select the hx:commandExRowEdit 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 Properties All Attributes: All Attributes: Select actionSelect action And pick the new function

Test your workTest your work


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.


Programmatically Changing a Cell Color in a dataTable – 1 of 6– 1 of 6

Create a new, .JSP web page, named:

allcustomers5.jspallcustomers5.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.



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}{Phone} field (not the column, just the field)


Programmatically Changing a Cell Color in a dataTable – 3 of 6– 3 of 6 From the Palette

Drag a Panel – Group Box (type: JSPJSP) into the PHONE column

SelectSelect (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



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



Select the HTML table, and from Properties, specify: Height: 100%Height: 100% ColorColor (some custom color)

Select the other HTML tableSelect the other HTML table, and repeat, giving it a different color



(For each of the JSP Panel (For each of the JSP Panel Groups)Groups)

Select the component From Properties/All

Attributes Specify the renderedrendered

Attribute Value as: Compute From Page Data

– From the customers array, select either vis1 or vis2

Run the page on the server


OPTIONAL WORKSHOP - JSF dataTable Showing Dynamic Images

You’ve seen pages like this before!!!



JSF dataTable – Dynamic Images – 1 of 4

Create a new page, named: itemlist.jspitemlist.jsp

Right-click over the .JSP page, and from the EGL editor, add the following (USING CONTENT ASSISTUSING CONTENT ASSIST):

itemArray Item[0];itemArray Item[0];

StatusStatus statusRec;statusRec;

ItemLib.GetItemListAll(itemArray, status);ItemLib.GetItemListAll(itemArray, status);

Press Ctrl/S Press Ctrl/S (save and generate Java)



From Page Designer - From Page Data – select itemArrayitemArray, 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 itemArrayitemArray. Drag and drop Image onto the Image control.



Right-click over the Page, and select Run on Server…

NoteNote – if you get an unsightly border around your images and want to remove it:1. Edit \theme\stylesheet.css\theme\stylesheet.css2. Find the: .graphicImageExgraphicImageEx tag, and add the following:



OPTIONALOPTIONAL – 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)


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.jssorttable.js (note, the extension is .js.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



(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: sortablesortable

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 Language="JavaScript" src="theme/sorttable.js"></script> </script>

Page in Source view mode



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:Works with:- Cosmetic enhancements like border/alternate row colors etc.- Cosmetic enhancements like border/alternate row colors etc.- Row Selection- Row Selection- AJAX- AJAX

Does not work with:Does not work with:- Row Categorization- Row Categorization- Using a Scrollable area- Using a Scrollable area- Paging (Paging sorts on the current (displayed) page only)- Paging (Paging sorts on the current (displayed) page only)


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

Documents

JSF dataTables – Advanced use of Properties and Development Techniques