Posted on

Custom component chart

The following example shows how you can create a column chart as a component and invoke in application and access component variable.
dynamic values by calling the getDefintionByName() method.


ChartDef.mxml

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”
creationComplete=”createComplete(event)”>
<mx:Script>
<![CDATA[
import MyComps.*;
import flash.utils.getDefinitionByName;
import mx.controls.*;
private var CC:PanelComp;ColumnCompChart // Initiate ColumnCompChart component.
private var MData:ArrayCollection = new ArrayCollection( [
{ Country: “USA”, Gold: 35, Silver:39, Bronze: 29 },
{ Country: “China”, Gold: 32, Silver:17, Bronze: 14 },
{ Country: “Russia”, Gold: 27, Silver:27, Bronze: 38 } ]);

private function createComplete(e:Event):void
{
var cls:Class = getDefinitionByName(“MyComps.ColumnCompChart”) as Class;
var instance:Object = new cls();
instance.medalsAC=MData; // Assigning MData arrayCollection to medalAC [Component Variable]
addChild(DisplayObject(instance) );
}
]]>
</mx:Script>
</mx:Application>

ColumnCompChart.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Panel xmlns:mx=”http://www.adobe.com/2006/mxml” width=”400″ height=”300″title=”My Chart”>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
public var medalsAC:ArrayCollection;
]]>
</mx:Script>
<mx:ColumnChart id=”Column1″ height=”100%” width=”100%”
dataProvider=”{medalsAC}”>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField=”Country”/>
</mx:horizontalAxis>

<mx:series>
<mx:ColumnSeries xField=”Country” yField=”Gold” displayName=”Country” />
<mx:ColumnSeries xField=”Country” yField=”Silver” displayName=”Country” />
<mx:ColumnSeries xField=”Country” yField=”Bronze” displayName=”Country” />
</mx:series>

</mx:ColumnChart>
<mx:Legend dataProvider=”{Column1}” />
</mx:Panel>
Posted on

Create component by class Name

The following example shows how you can create a new Flex component instance by using its class name by calling the getDefintionByName() method.

GetDefinition.mxml

getDefinitionByName will retrieve the class name for any components / User Defined Components.

<?xml version=”1.0″ encoding=”utf-8″?> 

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”createComplete(event)”>
<mx:Script>
<![CDATA[
import flash.utils.getDefinitionByName;
import mx.controls.*;
private function createComplete(e:Event):void
{
var cls:Class = getDefinitionByName(“mx.controls.Button“) as Class;  //This will get the class name for Button [Class Button]
var instance:Object = new cls();  //Creating an instance based on the class definition.
instance.label=”My Button” //Accessing Label property for Button
addChild(instance as DisplayObject);  // Add instance to the stage and parse the object as DisplayObject in order to consider the Object as UI COmponent
}
]]>
</mx:Script>
</mx:Application>

For User Defined Component

var Temp:PanelComp // It needs to be added to initiate the Component to the application
var cls:Class = getDefinitionByName(“MyComp.PanelComp“) as Class; //MyComp is the folder and PanelComp is the user defined component
var instance:Object = new cls();
instance.label=”My Button”
addChild(instance as DisplayObject);
Posted on

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