Available since version 0.9.4.
| Class | Extends | Implements |
|---|---|---|
| org.apache.royale.jewel.DataContainer{:target=‘_blank’} | Jewel ContainerBase{:target=‘_blank’} | Jewel IListWithPresentationModel{:target=‘_blank’} |
Note: This component is currently only available for JavaScript.
The Jewel DataContainer class is a component that displays multiple data items.
This component gets the data through its dataProvider property that receives an ArrayList of data objects. To represent each item the component uses a suitably-configured ItemRenderer class. The component generates dynamically as many instances of its ItemRenderer as there are items in the data provider array, and fills each instance with the appropiate data. By default it uses StringItemRenderer as the item renderer.
By default items are laid out vertically using Jewel VerticalLayout. This component has a Viewport that clips generated items.
In MXML declare a DataContainer like this:
<j:DataContainer width="100%" height="250"> <js:ArrayList localId="avengers" source="[Iron Man, Hulk, Thor, Captain America, Black Widow, Hawkeye]"/> </j:DataContainer>
Note that we can nest the ArrayList directly to the DataContainer tag because “dataProvider” is its DefaultProperty.
In ActionScript we can do the same in the following way:
var dc:DataContainer = new DataContainer(); dc.dataProvider = new ArrayList(["Iron Man", "Hulk", "Thor", "Captain America", "Black Widow", "Hawkeye"]); // add the Container to the parent parent.addElement(dc);
where parent is the container where the control will be added.
Check the Reference of org.apache.royale.jewel.DataContainer{:target=‘_blank’} for a more detailed list of properties and methods.
| PROPERTY | Type | Description |
|---|---|---|
| currentState | String | The name of the current state. |
| itemRenderer | String | The class or factory used to display each item. |
| labelField | String | The name of field within the data used for display. |
| dataProvider | Object | The data being display by the List. Is the DefaultProperty. In Jewel an ArrayList{:target=‘_blank’} |
| numElements | int | The number of element children that can be laid out. |
| states | Array | The array of view states. These should be instances of org.apache.royale.states.State{:target=‘_blank’} |
| strandChildren | IParent{:target=‘_blank’} | An object to access the immediate children of the strand. |
| Method | Parameters | Description |
|---|---|---|
| addElement | c(IChild), dispatchEvent(Boolean=true) | Add a component to the parent. |
| addElementAt | c(IChild), index(int), dispatchEvent(Boolean=true) | Add a component to the parent at the specified index. |
| getElementIndex | c(IChild) | Gets the index of this subcomponent. |
| getElementAt | index(int) | Get a component from the parent at specified index. |
| removeElement | c(IChild), dispatchEvent(Boolean=true) | Remove a component from the parent. |
The most important event is initComplete, which indicates that initialization of the container is complete.
It is needed when some action coded in a callback function needs to be triggered when the data container is ready to use after initialization.
You can attach callback listeners to the initComplete event in MXML as follows:
<j:DataContainer initComplete="initCompleteHandler(event)"/>
the initComplete event will use the initCompleteHandler callback function you provide in ActionScript:
<fx:Script> <![CDATA[ private function initCompleteHandler(event:Event):void { trace("Container is ready!"); } ]]> </fx:Script>
When the data container is initialized the message “Container is ready!” appears in the console log.
In ActionScript we can add an event handler this way:
var dc:DataContainer = new DataContainer(); dc.addEventListener('initComplete', initCompleteHandler); parent.addElement(dc);
| Bead Type | Implementation | Description |
|---|---|---|
| DataProviderModel{:target=‘_blank’} | org.apache.royale.core.IBeadModel{:target=‘_blank’} | This is the default model bead. |
| DataContainerView{:target=‘_blank’} | org.apache.royale.core.IBeadView{:target=‘_blank’} | This is the default view bead. |
| VerticalLayout{:target=‘_blank’} | org.apache.royale.core.IBeadLayout{:target=‘_blank’} | This is the default layout bead. |
| DataItemRendererFactoryForCollectionView{:target=‘_blank’} | IDataProviderItemRendererMapper{:target=‘_blank’} | Map data to itemrenders. |
| ItemRendererClassFactory{:target=‘_blank’} | IItemRendererClassFactory{:target=‘_blank’} | The factory of itemrenders. |
| StringItemRenderer{:target=‘_blank’} | org.apache.royale.core.IItemRenderer{:target=‘_blank’} | The itemrenders class to instantiate. |
| DataContainerItemRendererInitializer{:target=‘_blank’} | IItemRendererInitializer{:target=‘_blank’} | Configuration of itemrenders to instantiate. |
| Viewport{:target=‘_blank’} | org.apache.royale.core.IViewport{:target=‘_blank’} | Define the area that display content. |
Jewel DataContainer can use any of the layout beads available in the Jewel library. Also you can check the Related controls section to see some advanced or preconfigured data containers.
Other useful Jewel containers components are: