JSF dataTables – Basic Properties and Development Techniques

®

IBM Software Group

© 2006 IBM Corporation

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.

2Last update: 12/04/2007

Course

Course Setup Web/JSF Overview JSF Properties Deep Dive Essential JSF Components HTML and JSF Component Development Techniques JSF dataTablesJSF 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

Units:

JSF/EGL Web Page and Site Design JSF/EGL Web Page and Site Design and Developmentand Development


Unit ObjectivesUnit 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 FunctionalityTopic 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?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)(Ctrl/S, Ctrl/G) Create a new .JSP web page named: dataTableBasics.jspdataTableBasics.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/SCtrl/S

From Page Designer/Page Data, drag the CustOrdersUI – CustOrdersUI[]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/Fields/Controls Controls

ColumnColumn


Manipulating JSF dataTable – Main Properties View Attributes

1.1. Background colorBackground color – of the entire dataTable. Note is over-ridden by Display column and row style classes

2.2. WidthWidth – of the entire dataTable. Note is over-ridden if individual data widths are > specification

3.3. BorderBorder – enter an integer to produce a border of a given width around the HTML table

4.4. Show header/Show footer/Show captionShow 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: 11 Check: Show header and 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

1.1.

2.2.

3.3.

4.4.


Manipulating JSF dataTable – Rearranging the Columns

Try it out: Delete the following columns from the dataTable:

OrderStatusOrderStatus OrderDetailsOrderDetails

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 VerbatimVerbatim 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 ComponentVerbatim ComponentWith non-break spaceWith non-break space


Manipulating JSF dataTable – Display Tab – 1 of 31.1. Column ClassesColumn Classes – a .CSS style applied at the column level

2.2. Row ClassesRow Classes – a .CSS style applied to individual rows – Note Column Classes over-rides Row Classes

3.3. PagingPaging – Click a paging widget into the footer – and set: Rows per pageRows per page to a number > 04.4. Vertical ScrollingVertical Scrolling – boxes off vertical area of the dataTable. Typically use either Paging or Scrolling (not both)

Try it outTry it out (make these changes to the dataTable properties then run the pagerun 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)

1.1.2.2.

3.3. 4.4.


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.

OPTIONALOPTIONAL – add columnClass1, columnClass2columnClass1, 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

Pager ControlPager Control

Ver

tica

l scr

olli

ngV

erti

cal s

crol

ling


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:

1. Create an integer variable in your JSFHandler 2. Select the entire dataTableentire dataTable, and from All Attributes

Specify the firstfirst attribute, and bind it to your integer variable (see below)

3. 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.


OPTIONALOPTIONAL 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:1. Add an Enhanced Faces Component JSP-PanelJSP-Panel / type JSPJSP to the hx:panelBox that holds

the pager controlNote 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)

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

3. 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 sortedsorted on the Categorization column. Let’s do that now.

From the JSFHandler, add the following order byorder 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:1. 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

2. From the Enhanced Faces Components palette drag the control you want into the new column3. 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.

1. Add an action that’s performed when a row is clicked Typically to call a function in a JSFHandler

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

1. 2.


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

Two steps:1.1. Add the function to your JSFHandler that responds to the clicked row eventAdd the function to your JSFHandler that responds to the clicked row event

2.2. Add the clicked row event to your dataTable, and bind it to the JSFHandler functionAdd 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:

1. 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

2. 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”)

3. This statement uses the new integer index to look-up the clicked row in the custOrdersUI array

1.1.

2.2.

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 getClickedCustomergetClickedCustomer function



Still from within Page Designer Two steps:

From Page Data, drag the clickedCustomer – stringclickedCustomer – 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

Date post:	04-Jan-2016
Category:	Documents
Upload:	myra-chaney
View:	28 times
Download:	1 times

JSF dataTables – Basic Properties and Development Techniques

Documents