JSF dataTables – Basic Properties and Development Techniques

1. JSF dataTables – Basic Properties and Development Techniques Part I – of a 3-part section on the use of the rich and complex U.I. structures that are dataTables.

2. JSF/EGL Web Page and Site Design and Development Course Units: • Course Setup • Web/JSF Overview • JSF Properties Deep Dive • Essential JSF Components • HTML and JSF Component Development Techniques • JSF dataTables • Page Flow and State Management • AJAX Controls and JavaScript • JSF Component Tree and Dynamic Property Setting • Web-Site Design and Template Pages • Appendices • Internationalization • Page Design Best Practices • Additional Use Cases

3. Unit Objectives • At the end of this unit, you will be able to: • State the dataTable Concepts and Standard Options • Working with the options in the web tooling • Manipulate 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

4. Topic Objectives – dataTable Basic Properties and Functionality • At the end of this section, you will be able to : • Describe the basic dataTable Concepts and use the Standard Options: • Standard options • Borders • Alternate row colors • JSF Paging • Row categorization • Row selection • Adding, Deleting, Moving columns • Changing column text justification • Changing background colors

5. What is a JSF dataTable? • A JSF dataTable is complex control that is used to present array data in a horizontal (Excel) spreadsheet format • It is a table-like control for displaying data from multiple database records. It consists of one or more columns, each with a header area and a data area. It is the data area of the column that repeats for each record. • The data table offers great flexibility in how it is rendered on the user interface of your application. • You can customize it in a variety of ways: • Add, remove, and change the order of columns • Format text and background, You can also modify the .css classes for the dataTable itself, changing look and feel of the columns, rows, header and footer • Add header, footer, and margins • Add paging for results display • You can perform actions such as Read, Update, and Delete on the data displayed in a data table, and you can also create new data records. • Associate an action with the data table, so that when a user clicks anywhere within a row of a table, the action is applied to the relational record for that row. • Enable row selection for the data table, and then add buttons to perform actions on the selected rows. • Add a Link - Command component to another component already in the data table. When the user clicks the Link - Command component, a different page might open. A Link - Command component is typically used for a transactional operation to manipulate data. • Enable row categorization for the data table so that you can group similar rows together so that the end user clicks a “twisty” to expand or collapse the similar rows.

6.  Workshop – Create this DataTable So let’s test-drive this important U.I. control a bit.. • Using (copy/paste) the code in the notes section, and do the following: • Create the two new Record definitions in CustomerLib from the code (Ctrl/S, Ctrl/G) • Create a new .JSP web page named: dataTableBasics.jsp (see screen capture, below) • Edit the EGL JSFHandler, and replace all of the default code with the JSFHandler code – also found in the Notes section of this slide • Read the comments, so you understand what is being done (db access, and move to a U.I. array) • Save – Ctrl/S • From Page Designer/Page Data, drag the CustOrdersUI – CustOrdersUI[] (array) onto the page - make all of the fields output (read/only). • Delete (un-check/do not display) visAttr and styleAttr in the dataTable

7.  Run the Default Page on the Server • Run on server (see screen capture). Well – what do you think? • If your reaction was, “not exactly ready for prime-time” – well, that’s how we feel. • What to do? • Make it look nicer • Remove some columns • Re-order the columns • Alternate row colors • A border, perhaps? • Better colors? • Mostly we need to learn what we can do with JSF dataTables. (let’s go)

8.  Manipulating JSF dataTable Columns  You can add/delete and move (re-order from left-to-right) the columns in a dataTable • By selecting individual columns with your mouse …or… (preferred) • By using the Properties - Columns: area. And adding/moving/removing columns in the list.  You can combine (move) fields inside of columns into other columns • For example (not shown below) – you could move the FirstName control into the LastName column next to the LastName field to produce a “full name” column that combines both fields in one column Fields/ Controls  Column

9. Manipulating JSF dataTable – Main Properties View Attributes • Background color – of the entire dataTable. Note is over-ridden by Display column and row style classes • Width – of the entire dataTable. Note is over-ridden if individual data widths are > specification • Border – enter an integer to produce a border of a given width around the HTML table • Show header/Show footer/Show caption – allow you to add JSF components (including Verbatim text) that can add to the tables U.I. Try it out: • Set focus to the entire dataTable and set the following properties: • Border: 1 • Check:  Show headerand Show footer • From the Palette drag and drop an Output control into the new header/footer areas • From the Notes section of this slide, select all of the new JSFHandler code and replace all of the existing JSFHandler code for dataTableBasics.egl • From Page Data: • Drag and drop the tableHeader variable on the Output control in the dataTable header • Drag and drop the tableFooter variable on the Output control in the dataTable footer • Run the page on the server 4. 2. 3. 1.

10. Manipulating JSF dataTable – Rearranging the Columns Try it out: • Delete the following columns from the dataTable: • OrderStatus • OrderDetails • Make CustomerId the first (left-most) column in the dataTable • Select and drag the FirstName field into the LastName column • From the palette, add an Enhanced Faces Verbatim component … between First and Last name (see screen capture) • Inside the Verbatim component type a non-break space (Ctrl/Spacebar) • Delete the (empty) FirstName column • Select the LastName column header, from its Properties make it Full Name (as shown) • Run the page on the server Verbatim Component With non-break space

11.  Manipulating JSF dataTable – Display Tab – 1 of 3 • Column Classes – a .CSS style applied at the column level • Row Classes – a .CSS style applied to individual rows – Note Column Classes over-rides Row Classes • Paging – Click a paging widget into the footer – and set: Rows per page to a number > 0 • Vertical Scrolling – boxes off vertical area of the dataTable. Typically use either Paging or Scrolling (not both) Try it out(make these changes to the dataTable properties then run the page) • Select the entire dataTable and specify the following properties (also shown in the screen capture) • Column Classes (delete the columnClass1 entry) • Add a deluxe pager that shows 12 rows per/page • Add Vertical scrolling (200 px) 4. 3. 1. 2. See slide notes for important additional information on the behavior of these elements.

12.  Manipulating JSF dataTable – Display Tab – 2 of 3 Here’s the page running. Do you see why you either use: Vertical scrolling…or…Paging but not both? There’s more to be done with this dataTable – let’s see what other tools we can discover. OPTIONAL – add columnClass1, columnClass2 in to the Column classes: Display properties (this is not shown above – we just want you to see it). Run the page on the server. After you’ve seen the result, remove the column classes and continue Vertical scrolling Pager Control

13.  OPTIONAL Workshop – Manipulating JSF dataTable – Display Tab – 3 of 3 When using JSF Paging, you may want to set the first row to be displayed to specific row, within a specific page. To implement this: • Create an integer variable in your JSFHandler • Select the entire dataTable, and from All Attributes • Specify the first attribute, and bind it to your integer variable (see below) • In your program code, assign the integer variable a value, based on which row you want to be first in the display. The pager will automatically forward to the proper page.

14. OPTIONAL Workshop – Aligning the Pager Control When using JSF Paging controls, you may want to align the Pager center, or right, or to a specific pixel position – or you may want to add additional JSF or text components to the Pager area. To do this: From Page Designer: • Add an Enhanced Faces Component JSP-Panel / type JSP to the hx:panelBox that holds the pager control Note this is important – after you’ve dragged a JSP-Panel component onto your page, you will be prompted to select which type of Panel – select JSP) • From the HTML tags, add an HTML table, 100% width/1 row/1 column to the JSP-panel, and align the TD as per your requirements (see screen capture below) • Drag the Pager control (or Cut/Paste it) into the HTML table Note: Nested JSP Panel and HTML table controls

15.  Column Categorization – 1 of 2 • You can roll-up and summarize (categorize) individual rows into groups, that expand and contract with twisty controls. As follows… • With the entire dataTable selected, go to Properties • And from Display options click: Add column to categorize table rows • This will create a new column on the far-left side of the dataTable • From this new column’s Value: • Click browse • Expand custOrdersUI • Select State • To make a really cool-looking twisty – for both Collapsed and Expanded image: • Click the folder icon • Browse to, and select the files shown here: • Categorization changes the display quite a bit, so do the following in addition to the above - • Select and delete: • The State column – from the dataTable • The Pager control – from the Footer • From Display options – remove the Number of rows per page entry • Run the page on the server… hmmmm… still more to do I think.

16.  Column Categorization – 2 of 2 • Categorization depends on the dynamic array rows bound to the dataTable to be sorted on the Categorization column. Let’s do that now. From the JSFHandler, add the following order by clause to your SQL statement • Run the page again…

17.  Adding Columns to an Existing dataTable • Sometimes you will need to add a column from an array to an existing dataTable: • It may happen that you inadvertently delete a column from a dataTable, and can’t undo the change • Or that you (or your users) decided they wanted to see more data • Here are the three steps to do this: • Select the entire dataTable, and from Properties (in the Columns: are) click Add • This adds a new column to the far right-hand side of the dataTable • You can change the column header by typing over the tooling default • From the Enhanced Faces Components palette drag the control you want into the new column • From Page Data, drag and drop an EGL variable on top of the Faces Component to bind its value • Easy! Workshop – following the above steps, add OrderDetails back in to the dataTable

18. JSF dataTable Row Actions • There are two powerful options that provide a mechanism for your dataTable to interact with your server-side JSFHandler. • Add an action that’s performed when a row is clicked • Typically to call a function in a JSFHandler • Add selection column to the table • Allow 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. The user Submits the form one time. • Let’s check them out! 2. 1.

19. Add an action that’s performed when a row is clicked – 1 of 3 Two steps: • Add the function to your JSFHandler that responds to the clicked row event • Add the clicked row event to your dataTable, and bind it to the JSFHandler function From the notes section of this slide, copy/paste a new JSFHandler for this page – and completely replace the code in your existing JSFHandler. Read the comments, note the following: • These two statements were created using the EGL Source Assistant – a wizard you will learn how to use in an upcoming section to produce JSF Component Tree calls that allow you to respond to user/browser events with server-side logic • This statement declares a new, local integer field, and initializes it with the value of the table’s clicked row index (+1 – because in JSF/Java arrays are “zero-based” while in EGL they are “one-based”) • This statement uses the new integer index to look-up the clicked row in the custOrdersUI array 1. 2. 3.

20. Add an action that’s performed when a row is clicked – 2 of 3 Steps: • From Page Designer, select the entire dataTable, and from Row actions: • Click: Add an action that’s performed when a row is clicked • You will be prompted to select the type of row action • Select:  Clicking the row submits the form… • A new column will be added to your dataTable with a small link inside it, representing the row action, and your Properties should show: • View in All Attributes mode • From the Attribute Name/Value list, click the icon for action • Select the getClickedCustomer function

21. Add an action that’s performed when a row is clicked – 3 of 3 Still from within Page Designer Two steps:  From Page Data, drag the clickedCustomer – string field onto the page, and place it as a read/only output field below the table (see screen capture) Run the page – and click a row