Spark DataGroup Container in Flex4

DataGroup container is Spark container in Flex 4 hold components that implements IVisualElement interface and subclasses of DisplayObject.

DataGroup container is Spark container in Flex 4 hold components that implements IVisualElement interface and subclasses of DisplayObject.

Spark DataGroup Container in Flex 4:

DataGroup container is a Spark container in Flex 4 hold components that implements IVisualElement interface and subclasses of DisplayObject. User uses these containers when take data item as children. These container uses item renderer that provide visual representation of the data item in the container. Item renderer converts data item in the format type which is required by the container. These components also use data provider to provide data for these components. The data provider is the by default property for this component. The tag is <s:DataGroup />. In this example you can see mix data items like String and Objects.

Example:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:mx="library://ns.adobe.com/flex/mx"

xmlns:s="library://ns.adobe.com/flex/spark">

<fx:Script>

<![CDATA[

private function add():void {

var newChild:String = "new child";

dg1.dataProvider.addItem(newChild);

addDG.visible = false;

removeDG.visible = true;

}

private function remove():void {

dg1.dataProvider.removeItemAt(4);

addDG.visible = true;

removeDG.visible = false;

}

]]>

</fx:Script>

<s:Panel title="Data Group Container Example." width="201" height="262" borderColor="0x3081D2">

<mx:VBox>

<s:DataGroup id="dg1" itemRenderer="spark.skins.spark.DefaultItemRenderer">

<s:layout>

<s:VerticalLayout/>

</s:layout>

<mx:ArrayList>

<fx:String>Raj</fx:String>

<fx:String>Hari</fx:String>

<fx:String>Mohan</fx:String>

0
<fx:String>Anil</fx:String>

</mx:ArrayList>

</s:DataGroup>

1
<s:DataGroup id="dg2" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer">

<s:layout>

<s:VerticalLayout/>

2
</s:layout>

<mx:ArrayList>

<s:Button id="addDG" label="Add new child" click="add()"/>

3
<s:Button id="removeDG" label="Remove new child" click="remove()" visible="false"/>

</mx:ArrayList>

</s:DataGroup>

4
</mx:VBox>

</s:Panel>

</s:Application>

5

Add and Remove item in data provider for the DataGroup container in run time. There are two type of item renderer used in this example spark.skins.spark.DefaultItemRenderer and spark.skins.spark.DefaultComplexItemRenderer. spark.skins.spark.DefaultItemRenderer item renderer use to a simple data item like String or Number objects. spark.skins.spark.DefaultComplexItemRenderer use to more complex data item like Objects.

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Ads