JSF dataTables – Intermediate use of Properties and Development Techniques

1. JSF dataTables – Intermediate use of Properties and Development Techniques Part II – of a 3-part section on the use of the rich and complex U.I. structures that are dataTables. This section includes Mouse-over color, working with columns, including column sorting.

2. Topic Objectives – dataTable Column Properties and Functionality • At the end of this section you will be able to manipulate additional features of dataTable columns for further customization including: • Justification and alignment • Non-breaking text • Dynamic column headings • Column visibility • Column sorting • dataTable .CSS entries • Substituting controls in dataTable

3. dataTable Column Properties  There are a number of things that JSF properties for individual dataTable columns allow you to do: • Modify the column width: In pixels (absolute width) – or specify as % of the entire dataTable’s width • Align the data in the column: Horizontally (a standard enhancement) /Vertically • Control text-wrapping (Do not line wrap cell contents) – useful for phone #s, etc. • Background Color: seldom used, but easy to do

4. dataTable Column Properties – Workshop From Page Designer – Re-open the dataTableBasics.JSP page • Select the CustomerID column and specify the following: • Column width: 30 pixels, Align the data: Center, Background Color:#eeeeee • Select the CustomerID column header – and retype it’s value as: ID • Center the following additional columns: OrderID, OrderDate • Right-justify: OrderAmount • Left-justify: OrderDetails • Do not line wrap: Full Name and OrderDetails • Run the page on the server – and note cause & effect, for all of the above… • Optional – select the CustomerID field (inside the ID column), and change its StyleClass to: outputTextBold Run the page again. This is not shown above – but might be useful in the real world.

5.  OPTIONAL dataTable Column Properties – Dynamically Resize a Column You may need in your application, to dynamically change the column size during run-time. To implement this functionality: 1. From the JSFHandler, add an integer variable that will represent the column size. • Also add a function to change the size • Ctrl/S – save your code. 2. From the Page Designer, select the column, and from its Properties (All Attributes) click the icon that allows you access to Page Data, and select your JSFHandler variable. • Also from Page Designer, drag the function on to the page, to create a Submit Button that can be clicked by the user at run-time, to dynamically re-size the column width. • Test by running your page and clicking the resize button. 2.

6.  dataTable Column Sorting - Workshop  Another common U.I. requirement is to click a column-header and resort the data in that column. As of this writing (7.0.0,3) here is the Best Practice approach to doing this. • Add a sort routine to your JSFHandler • In our case, we will add two simple “bubble sort” functions to our JSFHandler that are invoked when the user clicks the ColumnHeader (see the Notes section of this slide on sorting algorithms) • Add a Link - Command JSF component to the Column Heading text – that fires off the JSFHandler functions Once again in order to see the effect of column sorting easily, you will probably want to change the structure and format of the dataTable. Do the following: 1. Select and delete the State row Categorization column 2. Modify the remaining column widths as follows: - Link column (far left): 5 pixels - ID: 30 pixels - Full Name: 18 % - Postal Code: 11 % - OrderID: 11 % - OrderAmount: 11 % 3. From Properties/Display options, add: Vertical scrolling: 400 px Optionally you may want to rename some column headers (see next slides for options)

7. dataTable Column Sorting – Modify JSFHandler Code • Select and copy the new JSFHandler code from the Notes section of the slides. From your dataTableBasics.egl file, select and completely replace the existing code. Note the following: Two new functions that perform the Bubble Sort There are a few new global variables that support the new functions (i, j, sz, sortDir) Ctrl/S – to save and generate As an OPTIONAL exercise, consider how you would duplicate this functionality to sort on OrderDate? (i.e. After duplicating the EGL functions, what statements in the new functions would have to be changed?)

8. dataTable Column Sorting - Column Header Properties - Workshop From Page Designer – • Drag and drop a Link – Command on top of the OrderAmount Column Heading (Note that we have re-typed the column heading to be “Amount” in the screen capture) • From Properties (in All Properties view) • For action, click the Value icon and from the wizard select the sortByOrderAmount function • Run the page on the server – and click the OrderAmount column heading to sort • See next slide… All Attributes

9. dataTable Column Sorting – Page Run Try out the sort…

10. dataTable .CSS Entries  There are a number of Cascading StyleSheet entries you will use to control the general look & feel of dataTables. • They include: • .headerClass • The table and column heading defaults • .footerClass • The footer (if selected) defaults • .columnClass • dataTable column defaults – overrides… • .rowClass • Row defaults • Various .pageXXX buttons • Allows you to customize elements of the dataTable paging controls, including color, fonts, etc. • You may need to customize your dataTable control U.I. elements. Let’s see an example…

11. Modify the dataTable Header’s .CSS Entries • So – we will try out a few options for working with the .CSS entries. They are not really offered as production-worthy examples. Rather, they are intended to show cause & effect. You are left to work out a (better!) look & feel based on your own graphic design skills.  • Edit stylesheet.css. Modify the entries shown here  .headerClass tag - background-color - border-color - font-family Run the page:

12. Modify the dataTable Column’s .CSS Entries • As we have seen, .columnClass entries over-ride .rowClass entries • Edit stylesheet.css. Modify the entries shown here  .columnClass1 and columnClass2 - background-color - font-family • Select the entire dataTable, and from Properties/Display options enter columnClass1,columnClass2 - Note – no spaces between entries Run the page:

13. Modify the dataTable Header’s rowClass .CSS Entries • To display alternating row colors specify two or more rowClasses for your dataTable. Also, remove the columnClass specification as columnClass over-rides rowClass • Edit stylesheet.css. Modify the entries shown here  .rowClass1 .rowClass2 and .rowClass3 - background-color - font-family - font-weight - font-size • Select the entire dataTable, and from Properties/Display options 1. Delete the columnClass specification 2. enter rowClass1,rowClass2,rowClass3 Run the page:

14. Mouse-Over Color Changes Another dataTable U.I. technique is to change row colors when users’ “mouse-over”  rows • To do this mouse-over technique, you will need to: • Add some JavaScript to your page – in two places • <Body onload> • Add a new JavaScript function to the bottom of your .JSP file • You will also have to remove the columnClass specification for your dataTable (recall that columnClass over-rides U.I. behavior) • You can optionally add a new rowClass for the Mouse-Over color • Let’s try this out. Note that because this mouse-over technique will change the U.I. we’ll create another new page for this, named: allcustomers4.jsp Like this 

15.  Mouse-Over Color Changes – Steps – 1 of 2 1. Create a new, Web Page, named: allcustomers4.jsp 2. Edit the EGL JSFHandler, and add the customers array (using Content Assist) and the get customers; statement. Save your code. 3. From Page Designer: - Drag the customers array on the page - Select the four fields shown here (make them read/only controls) 4. From Properties • Add a border to the dataTable • From – Display • Remove the Column Classes specification • And remove the Row Classes • Show only 8 rows • Add a deluxe pager • From – Row actions • Add an action that is performed when a row is clicked Run the page, and make sure that it renders properly

16.  Mouse-Over Color Changes – Steps – 2 of 2 1. Add a new row class in stylesheet.css  2. (from Project Explorer) Right-click over allcustomers4.jsp, select Page Template > MergeTemplate into Page… 3. From the Source view of your page: 3a. Copy and paste the JavaScript in the Notes section of this slide at the end (bottom) of your .jsp source, after </f:view>as shown here 3b. Find the <body> tag (it’s near the top of the file on the left) and replace the <body> tag with this statement (screen capture here) Source here: • Run the page on the Server  <BODY onload="return onLoad('form1:tableEx1');">

17. (Optional) Setting a Specific Row Color in a dataTable The JSF Row Class property is a string variable, consisting of comma delimited values: rowStyle1,rowStyle3,rowStyle1,rowStyle2, At run-time, each row in your dataTable is assigned a comma delimited style class value, from the string. From the example above, the 1st row in the dataTable would be displayed with the .css tag: rowStyle1, the 2nd row: rowStyle3, the 3rd row: rowStyle1, the 4th row: rowStyle2, etc.) Steps: • Create a string variable in your JSFhandler's global/page data area • In the .JSP – select entire dataTable, and from its All Attributes properties, bind the rowClasses property to your EGL variable 2. Get your data (a dynamic array) 3. Code a for loop that processes each row, and concatenates a string value for the row style (rowClass) you want. ... see this pseudo-code which sets the very last row of the dataTable to a specific color. ..... rClasses String; // Function onConstruction() get custOrders ... setStyle(); End function setStyle() //logic to change the rowStyle for (i int from 1 to size(custOrders) by 1) if(i == size(custOrders)) //condition to change color rClasses += "rowClass2, "; //set specific color else rClasses += "rowClass1, "; //set default color end end end Note: this same technique applies to programmatically altering column colors as well. The JSF Column Class value of a dataTable can be bound to an EGL variable too.