Create Customized component in Flex

The easiest way to create a component is using MXML. First, to create a new application: from the Flex Builder menu, choose File > New > Flex Project, and fill out the rest of the wizard queries. Next, within Flex builder again, select File > New > MXML Component.

Step 1: Create a Separate folder to dump up all customized components
– Create a folder “MyComps” under src folder

Folder-Screen

Step2: Creating Component
Create MXML Component (PanelComp.mxml) and Follow the wizard and select Panel as your user Defined component(Likewise component can be Canvas, Checkbox, etc..,)
Screen-Component

Step3: Code for Component
Create two public variables to pickup dynamic values from the application. Below shows “Title and MainText” are two public variables.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Panel xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”400″ height=”300″ title=”{Title}”>  //{Title} is the public  variable, {} refers its a variable not the string
<mx:Script>
<![CDATA[
public var Title; //Define public variable , so the scope will be applied to all applications once imported.
public var MainText;  //Another Public variable
]]>
</
mx:Script>
<mx:Text>
<mx:text>{MainText}</mx:text> //{MainText} is the public variable
</mx:Text>
</mx:Panel>

Step 4: Main Application that invokes User Defined Component


<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”onCreate(event)”>
<mx:Script>
<![CDATA[
import MyComps.*  //Importing all components from the folder MyComps
private function onCreate(e:Event):void
{
var TT:PanelComp=new PanelComp()  //PanelComp is the userDefined component been created to show Panel
TT.Title=”From Main”  // Assign Title as ‘From Main’ ,so it applies {title} to <mx:panel> in PanelComp Component
TT.MainText=”Main Text from Application”  // Assign MainText , So it applies {MainText} to <mx:text> in PanelComp component
addChild(TT)
}
]]>
</mx:Script>
</mx:Application>

Output

Create Component in Flex

The easiest way to create a component is using MXML. First, to create a new application: from the Flex Builder menu, choose File > New > Flex Project, and fill out the rest of the wizard queries. Next, within Flex builder again, select File > New > MXML Component.

Step 1: Create a Separate folder to dump up all customized components
– Create a folder “MyComps” under src folder

Folder-Screen

Step2: Creating Component
Create MXML Component (PanelComp.mxml) and Follow the wizard and select Panel as your user Defined component(Likewise component can be Canvas, Checkbox, etc..,)
Screen-Component

Step3: Code for Component

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Panel xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”400″ height=”300″ title=”Hello”>
<mx:Text>
<mx:text>
Hello, this is my Component
</mx:text>
</mx:Text>
</mx:Panel>
Step 4: Main Application that invokes User Defined Component


<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”onCreate(event)”>
<mx:Script>
<![CDATA[
import MyComps.*  //Importing all components from the folder MyComps
private function onCreate(e:Event):void
{
var TT:PanelComp=new PanelComp()  //PanelComp is the userDefined component been created to show Panel
addChild(TT)
}
]]>
</mx:Script>
</mx:Application>

Output