® ibm software group © 2006 ibm corporation jsf datatables – advanced use of properties and...
Post on 23-Dec-2015
224 Views
Preview:
TRANSCRIPT
®
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
3Last 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
4Last 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)
ColumnsColumnsToToDisplayDisplay
5Last 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:
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
6Last 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.
7Last update: 12/04/2007
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.
8Last update: 12/04/2007
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
9Last update: 12/04/2007
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
10Last update: 12/04/2007
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
11Last update: 12/04/2007
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.
12Last 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.
13Last update: 12/04/2007
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
14Last update: 12/04/2007
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
15Last update: 12/04/2007
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
16Last update: 12/04/2007
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
17Last update: 12/04/2007
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.
18Last update: 12/04/2007
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
19Last 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.
20Last update: 12/04/2007
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.
21Last update: 12/04/2007
Programmatically Changing a Cell Color in a dataTable – 2 of 6– 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}{Phone} field (not the column, just the field)
22Last update: 12/04/2007
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
23Last update: 12/04/2007
Programmatically Changing a Cell Color in a dataTable – 4 of 6– 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
24Last update: 12/04/2007
Programmatically Changing a Cell Color in a dataTable – 5 of 6– 5 of 6
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
25Last update: 12/04/2007
Programmatically Changing a Cell Color in a dataTable – 6 of 6– 6 of 6
(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
26Last 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.
27Last update: 12/04/2007
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)
28Last update: 12/04/2007
JSF dataTable – Dynamic Images – 2 of 4
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.
29Last update: 12/04/2007
JSF dataTable – Dynamic Images – 3 of 4
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:
30Last update: 12/04/2007
JSF dataTable – Dynamic Images – 4 of 4
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)
31Last 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):
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
32Last 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)
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
33Last 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: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)
34Last 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
top related