• Browse
  • Pages
  • Blog
  • Labels
  • Attachments
  • Bookmarks
  • Mail
  • Advanced

  • Confluence Gadgets
• Log In

1. Dashboard
2. General Interface Docs
3. …
4. Home
5. General Interface Component Guide
6. Chapter 7 System Components
7. Matrix Components

Matrix Components

• Page restrictions apply
• Attachments:2
• Added by Barbara Weinstein, last edited by Jesse Costello-Good on Jul 28, 2009

Comment:

Form Elements Chapter 7 System Components Menus and Toolbars The Matrix component replaces Grid, List, and Column, which are deprecated. Matrix combines the features of a grid, list, and tree in a single component. A matrix, which is similar to a spreadsheet, has a tabular structure with rows that can be selected and cells that can be editable. Matrix components also provide built-in support for scrolling and pagination of large data sets. The Matrix components include jsx3.gui.Matrix and jsx3.gui.Matrix.Column. For more information, see Using Matrix Components. Matrix The Matrix components include these prototypes. Name Icon Description Grid A grid view with editable cells, a 2-pass paging model, and single cell selection. This paging model renders the outer container first, and the entire data set is rendered in a second pass. See Paging Models for more information. List A list view with columns and sample data. List items are XML elements (CDF format) referenced by the XML Cache Id, XML String, or XML URL property. Users can sort data by clicking a column header. This list uses the 2-pass paging model and supports multiple row selection. MultiSelect A matrix that allows one or more items in a list to be selected and is rendered using a 2-pass paging model. To define the list of items, associate it with an XML string, file, or cache document. Paginated List A matrix with a list and a paged paging model. This model renders the outer container first. The first and last panels are rendered during a second pass. As the user scrolls, relevant panels are added and unused panels are collected. During scrolling, information is displayed using the Scroll Info property. Note: The row height must be fixed. This prototype also uses paging tuners to optimize performance, such as number of pooled panels, rows per panel, and number of panels in the paint queue. Tree A tree view that supports drag-and-drop and has a stepped paging model. Data is only painted when the state of the on-screen parent row is toggled to open. Use the Matrix tree for a more robust component and faster rendering. Use the lightweight Tree component (Miscellaneous > Tree) for simpler trees that aren't deeply nested and all data is painted on loading. Matrix Column The Matrix Column components include the following prototypes: Name Icon Description Button A column of buttons. To define button behavior, configure the Execute event in the Events Editor palette. Honors the @jsxdisabled (per-row disabling of mask) and @jsxnomask (per-row hiding of mask) CDF attributes. Button - Delete A column of Delete buttons with a delete icon. When a Delete button is clicked, the CDF record is deleted from the matrix. Note the Execute event assigned to the ImageButtonMask in the Events Editor palette. Honors the @jsxdisabled (per-row disabling of mask) and @jsxnomask (per-row hiding of mask) CDF attributes. Button - ImageButton A column of buttons with icons. Use the Image property to specify the path to an icon file. To define button behavior, configure the Execute event in the Events Editor palette. Honors the @jsxdisabled (per-row disabling of mask) and @jsxnomask (per-row hiding of mask) CDF attributes. Button - ToolbarButton A column of toolbar buttons with icons. Use the Image property to specify the path to an icon file. To define button behavior, configure the Execute event in the Events Editor palette. Honors the @jsxdisabled (per-row disabling of mask) and @jsxnomask (per-row hiding of mask) CDF attributes. Checkbox A column of checkboxes that can be selected or unselected. A checked checkbox updates the CDF checked attribute to 1. An unchecked checkbox evaluates to 0. Honors the @jsxdisabled (per-row disabling of mask) and @jsxnomask (per-row hiding of mask) CDF attributes. Date A column of dates. Renders a date according to a configurable date format. The data model can store the dates as epoch seconds, a string parsable by the column date format, or a format recognized by the JavaScript Date.parse() method. Date Picker Extends the Date column with a DatePicker edit mask, which is a text field that when clicked displays a calendar control for selecting a date value. The date value is automatically specified in the correct format. To select a date format, specify a value for the Date Format property by selecting from the lookup menu. Image A column of HTML images. Use the Path property to specify the image attribute. Mask - Block Example of using a block as an edit mask for a Matrix column. A block with a single child of type jsx3.gui.Form is supported out-of-the-box. For more complex behavior, implement the methods getMaskValue(), setMaskValue(), and getMaskFirstResponder(). See the API documentation for jsx3.gui.Matrix.BlockMask. Mask - Dialog Example of using a dialog as an edit mask for a Matrix column. Menu Displays a column of menus, each menu with a drop-down list of options. Options are XML elements (CDF format) referenced by the XML Cache Id, XML String, or XML URL property. Honors the @jsxdisabled (per-row disabling of mask) and @jsxnomask (per-row hiding of mask) CDF attributes. Radio Button A column of radio buttons. Only one row may be selected at a time. Sets the CDF attribute specified in the Path property to radioed (1) when checked. Honors the @jsxdisabled (per-row disabling of mask) and @jsxnomask (per-row hiding of mask) CDF attributes. Select A column of drop-down lists. Options in the list are XML elements in the CDF document referenced by the Path property. The jsxid attribute of the select is persisted in the CDF data model while the jsxtext attribute is displayed in the matrix cell. Select - Combo A column of combination text fields and drop-down lists. Typing in the text field narrows the list to display only possible matching values. The jsxid attribute of the select is persisted in the CDF data model while the jsxtext attribute is displayed in the matrix cell. Text A column of uneditable text fields. Text - HTML A column of uneditable text fields that renders a CDF attribute as raw HTML. Uses the Format Handler property @unescape for Firefox support and the Value Template property @unescape for Internet Explorer support. Text - Number A column of uneditable text fields that formats a number according to a number format. Supported format handlers include @number, @number,integer, @number,percent, and @number,currency. Text Area A column of multi-line editable text fields with scrollbars. The edit mask can be larger than the data cell. Text Field A column of editable text fields. Data specified in a field updates the CDF attribute referenced by the Path property. Time Renders a time according to a configurable date format. The data model can store the dates as epoch seconds or a string format recognized by the JavaScript Date.parse() method. Time Picker Extends the Time column with a TimePicker edit mask, which renders a clock for selecting the hour, minute, and AM or PM. Seconds, milliseconds, and a 24 hour clock can also be displayed. Form Elements Chapter 7 System Components Menus and Toolbars

Contents Searching General Interface Docs Collapse all Expand all   Collapse all

Labels parameters

Labels

Enter labels to add to this page:

 

Looking for a label? Just start typing.