May 25, 2021 Flex
Flex provides two ways to create custom components.
Use ActionScript
Use MXML
You can create components by extending existing ones. /b10> To create a component using Flash Builder, click File and New and ActionScript Class. /b13> Enter the details, as shown below.
Flash Builder creates the following CustomButton.as files.
package com.tutorialspoint.client { import spark.components.Button; public class CustomButton extends Button { public function CustomButton() { super(); } } }
You can create components by extending existing ones. /b10> To create a component using Flash Builder, click File and New and MXML Component. /b13> Enter the details, as shown below.
Flash Builder will create the following CustomLogin.mxml file.
<?xml version="1.0" encoding="utf-8"?> <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"> </s:Group>
Let's test the custom controls in the Flex application by following these steps:
Steps | Describe |
---|---|
1 | As described in the Flex - Create Applications section, create a project called HelloWorld under package com.tutorialspoint.client. |
2 | Modify HelloWorld.mxml, as described below. /b10> Keep the rest of the file unchanged. |
4 | Follow the instructions above to create customLogin.mxml and CustomButton.as components. /b10> Follow these instructions to modify these files. /b11> Keep the rest of the file unchanged. |
3 | Compile and run the application to ensure that the business logic works as required. |
The following is the contents of the modified mxml file src / com.tutorialspoint / client / Custom Login.mxml.
<?xml version="1.0" encoding="utf-8"?> <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"> <s:Form> <s:FormItem label="UserName:"> <s:TextInput width="200" /> </s:FormItem> <s:FormItem label="Password:"> <s:TextInput width="200" displayAsPassword="true" /> </s:FormItem> <s:FormItem> <s:Button label="Login" /> </s:FormItem> </s:Form> </s:Group>
The following is the contents of the modified mxml file src / com.tutorialspoint / client / custom Button.as content.
package com.tutorialspoint.client { import spark.components.Button; public class CustomButton extends Button { public function CustomButton() { super(); this.setStyle("color","green"); this.label = "Submit"; } } }
The following is the contents of the modified mxml file src / com.tutorialspoint / client / HelloWorld.mxml.
<?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" xmlns:client="com.tutorialspoint.client.*" initialize="application_initializeHandler(event)" > <fx:Style source="/com/tutorialspoint/client/Style.css"/> <fx:Script> <![CDATA[ import mx.events.FlexEvent; protected function application_initializeHandler(event:FlexEvent):void { //create a new custom button var customButton: CustomButton = new CustomButton(); asPanel.addElement(customButton); } ]]> </fx:Script> <s:BorderContainer width="630" height="480" id="mainContainer" styleName="container"> <s:VGroup width="100%" height="100%" gap="10" horizontalAlign="center" verticalAlign="middle"> <s:Label id="lblHeader" text="Custom Controls Demonstration" fontSize="40" color="0x777777" styleName="heading"/> <s:Panel title="Using MXML Component" width="400" height="200"> <client:CustomLogin> </client:CustomLogin> </s:Panel> <s:Panel title="Using AS Component" width="400" height="100"> <s:VGroup id="asPanel" width="100%" height="100%" gap="10" horizontalAlign="center" verticalAlign="middle"> </s:VGroup> </s:Panel> </s:VGroup> </s:BorderContainer> </s:Application>
When all the changes are ready, let's compile and run the application in normal mode, as in the Flex - Create Application chapter. If all goes well with your application, this will result in the following results: