Note |
---|
Under Construction |
The FlexJS DataGrid demonstrates the composition direction of FlexJS. The DataGrid is composed of a ButtonBar component (to act as the header row) and a set of List components for the columns. The lists are kept in a Container with a ScrollableViewport so they scroll together. The DataGrid keeps selections synchronized between the lists.
A typical DataGrid declaration in an application would be:
Code Block |
---|
<js:DataGrid id="dataGrid" width="100%" height="100%" className="MyDataGrid" rowHeight="60"> <js:beads> <js:ConstantBinding sourceID="applicationModel" sourcePropertyName="productList" destinationPropertyName="dataProvider" /> </js:beads> <js:columns> <js:DataGridColumn label="First" dataField="image" itemRenderer="products.ImageItemRenderer"/> <js:DataGridColumn label="Second" dataField="title" /> <js:DataGridColumn label="Third" dataField="sales"/> </js:columns> </js:DataGrid> |
The ConstantBinding bead associates the application model's productList data with the dataProvider property of the DataGridModel. Each column of the DataGrid is defined by the DataGridColumn element, giving a title to the column and identifying the field within the dataProvider to use for the column. Optionally, a DataGridColumn can specify a custom itemRenderer (the one here displays an image) and set a specific width (not shown) for the column.
In addition to the ConstantBinding bead, the DataGrid uses other beads internally, as identified by the DataGrid style declaration in the defaults.css file:
Code Block |
---|
DataGrid { IDataGridPresentationModel { IDataGridPresentationModel: ClassReference("org.apache.flex.html.beads.models.DataGridPresentationModel"); IBeadView: ClassReference("org.apache.flex.html.beads.DataGridViewmodels.DataGridPresentationModel"); IBeadModelIBeadView: ClassReference("org.apache.flex.html.beads.models.DataGridModelDataGridView"); IBeadLayoutIBeadModel: ClassReference("org.apache.flex.html.beads.layoutsmodels.DataGridLayoutDataGridModel"); IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory"); IItemRenderer: ClassReference("org.apache.flex.html.supportClasses.StringItemRenderer"); background-color: #FFFFFF; } |
The FlexJS DataGrid demonstrates the composition direction of FlexJS. The DataGrid is composed of a ButtonBar component (to act as the header row) and a set of List components for the columns. The DataGrid keeps selections synchronized between the lists.
The DataGrid uses several beads:
|
IDataGridPresentationModel. DataGridPresentationModel. This is not an actual "model" bead but does describe the data needed to present the DataGrid. This includes the labels for each column and the height of each row. Other presentation models could include column widths, sort order, or anything else you might need.
DataGridViewIBeadView: This bead assembles the user interface out of a ButtonBar and Lists (one per column). The DataGridPresentationModel's array of column labels is the dataProvider for the ButtonBar. A List is created for each of those labels and all of the Lists share the same dataProvider as the DataGrid.
DataGridModelIBeadModel: This bead contains the dataProvider used by the lists as well as the names of the properties within the dataProvider to use to display the values in each column.. Applications use a binding bead (e.g., ConstantBinding) to map the application's data model to the DataGridModel.
IItemRendererClassFactory: This bead is used to generated instances of the itemRenderer for each list.
IItemRenderer: This bead names the default class to use for itemRenderers in the list. This can be overridden by the itemRenderer property of the DataGridColumn.
Adding DataGrid Beads
- The Constructor is called first. You can create additional elements here, but do not add them to the display list. You can also set default property values.
- Properties set. Any properties that appear in MXML will be set at this point.
- The strand setter is called. After a bead has been created and its properties set, the strand is given to the bead. You can also create UI elements here and add the elements created here (or in the Constructor) to the strand as its children. If your bead needs to respond to changes in the strand, such as changes to its size, set up event listeners for those events in the strand setter.
- "beadsAdded" dispatched. Once a strand's beads have all been added and their strand setters called, the FlexJS framework dispatches the "beadsAdded" event on the strand. If you are writing a bead that needs to find or use other beads, set up an event listener for this event in the strand setter. When this event is called, you can continue setting up your bead and seek out other beads using the strand's getBeadByType() function.
- Size change events. As the UI is built and layouts are run, the strand will be sized and dispatch events: "sizeChanged", "widthChanged", "heightChanged". One or more of these events may be sent and they may be sent at any time during the life of the strand and application.