< Jewel Components list

Jewel DataContainer

Reference

Available since version 0.9.4.

^{Note: This component is currently only available for JavaScript.}

Overview

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.

Example of use

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.

Relevant Properties and Methods

Check the Reference of org.apache.royale.jewel.DataContainer for a more detailed list of properties and methods.

Properties

Methods

Relevant Events

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);

Relevant Beads

Common Beads

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.

More examples

• Adding an item to a Jewel List
• Using an Item Renderer with a List
• Using Jewel TileHorizontalLayout

Related controls

Other useful Jewel containers components are:

• List
• DropDownList
• Table