Panel Container in Flex4


 

Panel Container in Flex4

A Panel container can contain many components. It include a title bar, a title, a border, and a content area for its children components.

A Panel container can contain many components. It include a title bar, a title, a border, and a content area for its children components.

Panel container in Flex4:

A Panel container can contain many components.  It include a title bar, a title, a border, and a content area for its children components. It also contains a sub panel container according to requirement. The tag of Panel container is <s:Panel>. The default size of panel container is large enough to display its all children components. The minimum and maximum size of panel container is 131*127 pixels and 10000*10000  pixels respectively.

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[

import mx.controls.Text;

public var obj:Text=new Text();

public var obj1:Text=new Text();

public var obj2:Text=new Text();

//For Submit ..............

public function sub():void{

obj.text="My name is:"+" "+txtinput.text+" "+txtinput1.text;

from1.addChild(obj);

obj1.text="My Email-id is:"+" "+txtinput2.text;

from1.addChild(obj1);

obj2.text="I live in:"+" "+txtinput3.text;

from1.addChild(obj2);

}

// for Reset ............

public function clr():void{

txtinput.text="";

txtinput1.text="";

txtinput2.text="";

txtinput3.text="";

obj.text="";

obj1.text="";

obj2.text="";

}

0

]]>

</fx:Script>

<s:Panel

1

title="Panel Container Example"

color="#990000"

width="300"

2

height="368">

<mx:Form id="from1" x="28" y="0">

<mx:FormHeading label="Personal Information" color="#0CBD07"/>

3

<mx:FormItem label="First name:" color="#051992">

<s:TextInput id="txtinput"/>

</mx:FormItem>

4

<mx:FormItem label="Last name:" color="#051992">

<s:TextInput id="txtinput1"/>

</mx:FormItem>

5

<mx:FormItem label="Emailid:" color="#051992">

<s:TextInput id="txtinput2"/>

</mx:FormItem>

6

<mx:FormItem label="City:" color="#051992">

<s:TextInput id="txtinput3"/>

</mx:FormItem>

7

<mx:FormItem>

<mx:HRule width="130" height="1"/>

<s:Button id="btn" label="Submit" click="sub()"/>

8

</mx:FormItem>

<mx:FormItem>

<s:Button id="btn1" label="Reset" click="clr()"/>

9

</mx:FormItem>

</mx:Form>

</s:Panel>

0

</s:Application>

Output:

In this example you can see how we can use a Panel container. you can set the lable, width, height and other properties of  it in a Panel container tag.

1

Running Application:

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

Download this code

2

Ads