Loading in 2 Seconds...
Loading in 2 Seconds...
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.
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
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
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.
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
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)
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
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.
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
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.
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
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.
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
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.
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…
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
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.
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.
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
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