Advanced and Custom Controls

In Adobe Flex, there are the two distinct methods to create and use the advanced controls and custom controls. They differ in terms of implementing libraries and functionalities. The two methods are,

Method 1 – With the help of using ActionScript class

Methods 2 – With the help of using MXML

With the help of ActionScript class

By extending the ActionScript class as the super class, the user can create custom controls in the Adobe Flex environment.  In order to create a component using Flash Builder, Click on File > New > ActionScript Class. Enter the details as shown below.

 Flex ActionScript Component

Flash Builder will create the following CustomButton.as file.

 package com.tutorialspoint.client

{

   import spark.components.Button;

   public class CustomButton extends Button

   {

      public function CustomButton()

      {

         super();

      }

   }

}

With the help of using MXML class

By extending the MXML class available in the resource library as the super class, the user can create custom controls in the Adobe Flex environment.  To create a component using Flash Builder, Click on File > New > MXML Component. Enter the details as shown below.

Flex MXML Component

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 us follow the following steps to test custom controls in a Flex application:

• Create a project with a name HelloWorld under a package com.tutorialspoint.client as explained in the Flex - Create Application chapter.
• 
  
• Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged.
• 
  
• Create CustomLogin.mxml and CustomButton.as component as explained above. Modify these files as explained below. Keep rest of the files unchanged.
• 
  
• Compile and run the application to make sure business logic is working as per the requirements.

Following is the content of the modified mxml file src/com.tutorialspoint/client/CustomLogin.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>

Following is the content of the modified mxml file src/com.tutorialspoint/client/CustomButton.as.

package com.tutorialspoint.client

{

   import spark.components.Button;

   public class CustomButton extends Button

   {

      public function CustomButton()

      {

         super();

         this.setStyle("color","green");

         this.label = "Submit";

      }

   }

}

Following is the content 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>