Group Container in Flex4


 

Group Container in Flex4

The Spark Group containers take any components as a child which implement the IVisualElement interface. When you want to manage visual children component (both visual components and graphical components) you can use Group container.

The Spark Group containers take any components as a child which implement the IVisualElement interface. When you want to manage visual children component (both visual components and graphical components) you can use Group container.

Group container in Flex4:

The Spark Group containers take any components as a child which implement the IVisualElement interface. When you want to manage visual children component (both visual components and graphical components) you can use Group container. The Group container is designed for simplicity and it cannot be skinned. The BasicLayout is the default layout class of the Group container. You can use Horizontal and Vertical layout with Group container also. The tag of Group container is <s:Group>.

The following example shows how to implement Group container.

Example:

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

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

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

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

<fx:Script>

<![CDATA[

private function add():void{

txt.text="You have click on Addition Button";

}

private function sub():void{

txt.text="You have click on Subtraction Button";

}

private function mul():void{

txt.text="You have click on Multiplication Button";

}

private function div():void{

txt.text="You have click on Division Button";

}

]]>

</fx:Script>

<s:Panel title="Group Container Example" width="400" height="141" color="#990000">

<s:Group>

<s:Button label="Addition" id="btn1" left="10" top="10" bottom="10" click="add()"/>

<s:Button label="Subtraction" id="btn2" left="95" top="10" bottom="10" click="sub()"/>

<s:Button label="Multiplication" id="btn3" left="196" top="10" bottom="10" click="mul()"/>

<s:Button label="Division" id="btn4" left="306" top="11" bottom="9" right="14" click="div()"/>

</s:Group>

<s:TextInput id="txt" x="68" y="49" width="252" color="Blue">

0

</s:TextInput>

</s:Panel>

</s:Application>

1

Output:

Running Application:

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

Download this code

2

Ads