Search Flex Components Free

Custom Search

December 27, 2007

Creating components in Flex

ActionScript Components
You create reusable components using ActionScript, and reference these components in your Flex applications as MXML tags. Components created in ActionScript can contain graphical elements, define custom business logic, or extend existing Flex components. They can inherit from any components available in Flex.
Benefits:
Components let you divide your applications into individual modules that you can develop and maintain separately. By implementing commonly used logic within custom components, you can build a suite of reusable components that you can share among multiple Flex applications.

For example, you can define a custom button, derived from the Flex Button control, as the following example shows:


package myControls
{
public class MyButton extends Button {
public function MyButton() {

}

}
}

In this example, you write your MyButton control to the MyButton.as file, and you store the file in the myControls subdirectory of the root directory of your Flex application. The package name of your component reflects its location. In this example, the component's package name is myControls.
You can reference your custom Button control from a Flex application file, such as MyApp.mxml, as the following example shows:

<mx:Application xmlns:mx=” http://www.adobe.com/2006/mxml ” xmlns:cmp=”myControls.*” >
<cmp:MyButton label=”Jack”/>
</mx:Application>

In this example, you first define the cmp namespace that defines the location of your custom component in the application's directory structure. You then reference the component as an MXML tag using the namespace prefix.

MXML Components


main.mxml


<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”
http://www.adobe.com/2006/mxml
layout=”absolute” xmlns:ns1=”myComponents.*”>
<mx:Panel x=”20″ y=”20″ width=”375″ height=”300″ layout=”absolute”
title=”Main Application Window”/>
<ns1:LoginBox x=”20″ y=”400″/>
</mx:Application>

LoginBox.mxml


<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Panel xmlns:mx=”
http://www.adobe.com/2006/mxml ” layout=”absolute” width=”275″ height=”150″ title=”Member Login”>
<mx:Script>
<![CDATA[
private function handleLoginEvent():void {
lblTest.text = “logging in…”;
//login logic
}
]]>
</mx:Script>
<mx:Label x=”10″ y=”12″ text=”Username”/>
<mx:Label x=”10″ y=”42″ text=”Password”/>
<mx:TextInput x=”74″ y=”10″ id=”txtUID”/>
<mx:TextInput x=”74″ y=”40″ id=”txtPwd” displayAsPassword=”true”/>
<mx:Button x=”178″ y=”70″ label=”Login” click=”handleLoginEvent()”/>
<mx:Label x=”74″ y=”72″ id=”lblTest”/>
</mx:Panel>

Related Flex Tutorials