Home Tutorial Flex Flex4 Components Spark DataGroup Container in Flex4

 
 

Share on Google+Share on Google+
Spark DataGroup Container in Flex4
Posted on: April 24, 2010 at 12:00 AM
Advertisement
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>

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

</mx:ArrayList>

</s:DataGroup>

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

<s:layout>

<s:VerticalLayout/>

</s:layout>

<mx:ArrayList>

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

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

</mx:ArrayList>

</s:DataGroup>

</mx:VBox>

</s:Panel>

</s:Application>

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

Advertisement

Related Tags for Spark DataGroup Container in Flex4:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: April 24, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com