Trees and Tables
- Xiaoyan Kong (Unlicensed)
This document provides brief descriptions of the table and tree components available for developing Nexawb Java Application UIs. This document also provides brief descriptions of the table and tree component specific attributes.
table
A collection of data arranged in columns and rows.
Nexaweb Studio makes this widget available in the Palette view from which you can drag and drop it onto a UI file in the Visual Editor.
Example XAL for using this widget in a freePane:
<table height="200px" width="300px" x="10px" y="50px"> <column> <header text="Column #1"/> </column> <column> <header text="Column #2"/> </column> <row> <cell text="Row 1 Cell 1"/> <cell text="Row 1 Cell 2"/> </row> <row> <cell text="Row 2 Cell 1"/> <cell text="Row 2 Cell 2"/> </row> <row> <cell text="Row 3 Cell 1"/> <cell text="Row 3 Cell 2"/> </row> </table>
tree
Displays data in a hierarchical format.
Nexaweb Studio makes this widget available in the Palette view from which you can drag and drop it onto a UI file in the Visual Editor.
Example XAL for using this widget in a freePane:
<tree height="100px" width="180px" x="10px" y="20px">
<column/>
<row>
<cell text="Tree Item 1"/>
<row>
<cell text="Sub Tree Item 1"/>
</row>
<row>
<cell text="Sub Tree Item 2"/>
</row>
</row>
<row>
<cell text="Tree Item 2"/>
</row>
</tree>
treeTable
Combines a tree and table to display hierarchical data in a tabular format.
Nexaweb Studio makes this widget available in the Palette view from which you can drag and drop it onto a UI file in the Visual Editor.
Example XAL for using this widget in a freePane:
<treeTable height="120px" width="280px" x="10px" y="170px">
<column>
<header text="Column #1"/>
</column>
<column>
<header text="Column #2"/>
</column>
<row>
<cell text="Tree Item 1"/>
<cell text="Tree Item 1"/>
<row>
<cell text="Sub Tree Item 1"/>
<cell text="Sub Tree Item 1"/>
</row>
<row>
<cell text="Sub Tree Item 2"/>
<cell text="Sub Tree Item 2"/>
</row>
</row>
<row>
<cell text="Tree Item 2"/>
<cell text="Tree Item 2"/>
</row>
</treeTable>
Table and Tree Attributes
The following table lists and provides brief descriptions of table and tree component specific attributes:
| Attribute | Description |
| altBackgroundColor | By default, the table component provides a different background color for alternating rows in the table. Use this attribute to specify the background color for alternating rows in the table. |
| altColor | Specifies the font color of text that appears in alternating rows in the table. |
| collapsedImage | Specifies an image to visually represent a collapsed row. |
| expandedImage | Specifies an image to visually represent an expanded row. |
| highlightBackgroundColor | Specifies the background color to appear when a row is selected. |
| highlightColor | Specifies the font color of text when a row is selected. |
| horizontalLineColor | Specifies the color of the horizontal border lines that separate rows. By default, the horizontal border lines are opaque. |
| keyMatchReset | Specifies the time in seconds after which a user stops typing that the pattern matching functionality resets. |
| leafImage | Specifies the icon to use for a row with no children. |
| quickEdit | Use in conjunction with: The Table selectionMode attribute set to singleCell The Column editable attribute set to true Then, set this attribute to true and when a user clicks on an editable cell, the user can immediately begin editing that cell. In addition, when the user presses the up/down/left/right arrows, focus transfers to adjacent cells, which, if in columns with the editable attribute set to true, the user can also immediately begin editing. Pressing the enter key commits text and proceeds to the next cell in the column. When a table with the quickEdit attribute set to true receives focus, the last edited cell will be placed in quick edit mode if possible. To return a cell from quckEdit mode to editable mode, where a user edits using the arrow keys, click on the cell. Right-click on the cell to again return to quick edit mode. Or use the F2 key to toggle between edit modes of the cell. |
| resizableColumns | Specifies whether a user can resize columns by resizing the column headers. True=yes; false=no. True by default. |
| rowHeight | Specifies the row height for all rows in the table. |
| rowImageVerticalAlignment | Specifies the vertical alignment of images in a row as top or center. Center by default. |
| selectionMode | Specifies what can be selected in the table at a given time. For example, only a single row or a single cell, or multiple rows (using Shift or Ctrl keys). singleRow by default. |
| sortType | Specifies the column sorting method as stable or unstable. stable: Use for multi-column sorting; preserves the order of equal elements. Combine with the columns sortPriority attribute. unstable: Does not make ties between columns; the sort action for each column sorts that entire column and does not provide any special handling for adjacent columns. |
| swappableColumns | Specifies whether a user can rearrange the column order by dragging the column headers. True=yes; False=no. True by default. |
| treeLineColor | Specifies the color of the lines connecting nodes in tree rows. |
| verticalLineColor | Specifies the color of the vertical border lines that separate columns. By default, the vertical border lines are opaque. |
Cell
A table cell is one cell in a table row. Cells are optimized for use in tables. Although rows can hold any type of component, using cells is more efficient.
The following table lists and provides brief descriptions of cell specific attributes:
| Attribute | Description |
| editable | Specifies whether a user can edit this cell. If specified, the value of this attribute overrides the value of the editable attribute set for the column in which the cell resides. |
| editing | Indicates when a cell with the editable attribute set to true is being edited. Set this attribute to true to place an editable cell into edit mode. Only one cell can be in editing mode at any given time. |
| selected | Use in conjunction with the table\tree\treeTable selctionMode attribute set to singleCell or multiCell. Then, this attribute specifies whether the cell is selected. True=yes; false=no. |
| sortValue | Specifies a value to use for sorting the cell rather than the text contained in the cell. Specify a sortValue that matches the type of data specified by the column dataType attribute, as the dataType attribute controls how the table sorts data. |
| text | Specifies the text content of the cell. |
| value | Specifies a logical value for the cell/listItem rather than the displayed text. This value is sent back to the server when a selection is made in a listBox or treeTable that is the selection component of a comboBox that is part of a form. It is also reported as part of the event parameter string in the ClientEvent or server URL. |
Column
Defines the properties of a single column in a table.
The following table lists and provides brief descriptions of column specific attributes:
| Attribute | Description |
| dataType | Specifies the dataType (number, string, bigDecimal, and so forth) for the cells in this column. The table uses different methods to sort different datatypes. |
| editable | Specifies whether a user can edit cells in this column. True=yes; false=no. |
| editor | Specifies a custom editor for the column. This should be a reference to a textField or comboBox that was declared in the defs section of the UI document. The default editor for an editable column is a simple textBox. |
| selected | Specifies the status of the column as selected or unselected. True=selected; false=unselected. |
| sort | Specifies the order by which to sort the column: ascending or descending. The value of this attribute in the DOM always reflects the current sort state of the column. |
| sortable | Specifies whether a column can be sorted by clicking on the column header. True=yes; false=no. |
| sortPriority | Specifies the priority to give the column in table sorting. Priority should have a minimum of 1, which is the highest priority. When multiple columns in a table have priorities set, the table sorts such that the column with the highest priority (lowest number) is sorted, while the secondary column is sorted relative to the higher priority column. This means the values in the secondary column are not fully sorted, only sorted where elements in the first column are tied. Use this attribute in conjuction with the Table sortType attribute set to stable as unstable sorts do not preserve ties while reordering. |
| visualIndex | The visual index of the column, this will be updated as columns are repositioned by the user. The index is 0-based. This is similar to DisplayService.getVisualColumnIndex(). This attribute is intended to be read-only, setting it will have no effect on the UI. |
| width | Specifies a fixed width for the column. By default, if you do not specify this attribute, Nexaweb autosizes column to fit the components in it. The value of this attribute in the DOM always reflects the current width of the column. |
Row
Defines a horizontal collection of cells and other components in a table
The following table lists and provides brief descriptions of row specific attributes:
| Attribute | Description |
| collapsedImage | Specifies an image to visually represent a collapsed row. Setting this attribute overrides the Table collapsedImage attribute. |
| expanded | Specifies whether the row is expanded or contracted. True=expanded; false=contracted. The value of this attribute in the DOM always reflects the current expansion state in the UI. |
| expandedImage | Specifies an image to visually represent an expanded row. Setting this attribute overrides the Table expandedImage attribute. |
| height | Specifies a fixed height for the row. By default, if you do not specify this attribute, Nexaweb autosizes the row to fit the components in it. |
| leafImage | Specifies the icon to use for a row with no children. Setting this attribute overrides the Table leafImage attribute. |
| selected | Specifies the status of the row as selected or unselected. True=selected; false=unselected. |