Home Tutorial Flex Flex4 Components Panel Container in Flex4

 
 

Share on Google+Share on Google+
Panel Container in Flex4
Posted on: May 11, 2010 at 12:00 AM
Advertisement
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="";

}

]]>

</fx:Script>

<s:Panel

title="Panel Container Example"

color="#990000"

width="300"

height="368">

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

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

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

<s:TextInput id="txtinput"/>

</mx:FormItem>

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

<s:TextInput id="txtinput1"/>

</mx:FormItem>

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

<s:TextInput id="txtinput2"/>

</mx:FormItem>

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

<s:TextInput id="txtinput3"/>

</mx:FormItem>

<mx:FormItem>

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

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

</mx:FormItem>

<mx:FormItem>

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

</mx:FormItem>

</mx:Form>

</s:Panel>

</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.

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 Panel 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: May 11, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com