A very common user interface element for displaying data is a Table. Next to presenting data in a grid, the xUML UI Table offers a lot of additional functionality which comes out-of-the-box and does not require any further scripting or development. The features are: Table sorting on every column, full text search on the grid data, on the fly definition of the amount of entries to show within the grid and pagination.

See below the UI of the SimpleTableExample.

Service Data Binding setup

A table holds a grid of data columns giving information on what data is displayed and rows which hold the actual data. For the Table widget to be able to render the data coming from e.g. a database query, the data needs to be prepared and bound to the widget in a special way.

The data structure is a complex type holding 0..* rows. For example, the following Customer class is the Data Model of the Table widget for this particular case. Note, Data Models should be kept in a top level package DataModels.

The binding is done on the Table user interface element itself by connecting it to the Customer record element. This alone is not enough, because the table widget does not know which of the Customer objects attributes (id, name, email, comment) are mapped to which column in the Table (ID, Name, E-Mail, Comment). As shown in the figure below, each <<Column>> element is mapped to the corresponding attribute using a <<use>> dependency.

Table Properties

The Table widget does not only show table data but also bears functionality which is practical and does not need additional JavaScript programming or modeling. The typical table functionality is sorting of columns, searching the table content, making column visible or hide them or defining a specific width.

The <<UITableBinding>> stereotype allows to set base table properties. The stereotype is applied on the <<use>> dependency connecting the user interface table element with the data providing class.

The following tagged values can be set on the <<UITableBinding>> dependency.

Column Properties Binding

The <<UIColumnBinding>> stereotype allows to set table column properties. The stereotype is set on the <<use>> dependency connecting the column classes to the data providing class attributes.

The column settings which influence the widgets behavior are set on the <<UIColumnBinding>> stereotype. The column settings are set in the tagged value section of the Usage dependency specification window.

Table Column/Row Order

To set or change the order of the table columns or rows, proceed as follows:

	Select the table in the Containment tree and expand the table node.
	Select a column or row and select Element Numbering from the context menu.
	Select all columns or rows and click Create to insert Column numbering.
	Now, you can use four buttons to change the column or row order: Edit, to directly edit the element number. Remove/Remove Recursively, to remove the element numbering. Info icon false This will not remove the column or row from the table, but only the numbering. Increase/Decrease, to move the column or row down or up. Click OK, to save your changes.

Table Row Binding and Event Context

Data held by a table row can be accessed by the click event of an embedded button or link element as described further below. However, if the whole row is to be selectable, use event=click and eventSource=<TableReference> as shown below:

As result of the above state machine, a modal dialog is opened if the user clicks on a row:

The service being called when clicking on a row is getCustomerDetails. The input of the service is the Customer object in the current example. Thus, one needs a binding between the  Customer class and the table columns:

Besides triggering service calls by table events it is also possible to call JavaScript operations. The following example shows a list of links in the first column. When clicking on one of these links the application is left but before doing so a pop-up prints a warning. The warning shall contain the actual URL of the links. In order to store this information we use a hidden column.

The UI state machine of this model is shown below. Basically, it calls the JavaScript operation clickedOnLink for the event=click on the eventSource=IDlink:
Figure: Calling a JavaScript Operation in a Table
If a JavaScript operation is called within the table context, the signature of the operation contains three parameters:

• event: the W3C event having triggered the transition
• row: the HTML row (<tr>) on which the event has been triggered. This row contains only the visible elements.
• data: the data of the row on which the event has been triggered. This row contains all elements including the hidden columns.

In the current example, the hidden column contains the actual URL of the link display in the first column. A table column is hidden

In order to access the hidden column data in JavaScript operation, the data parameter has to be used as depicted below:

At runtime, the Firebug debugger can be used to show the content of the data parameter:

UI Elements Nested in Table Cells

It is possible to nest user interface elements in a table cell. This is commonly used to provide the user with an option to view more detailed information within a dialog window. This nested element is mostly a button or a link object.

The button in the above figure is modeled within a table column called Options. The button element needs to be nested within the column element. This is important for the element to get the rows context.

An example of a link nested in table can be found in Table Row Binding and Event Context above.