Creating custom flex components using Actionscript

You already know how easy it is to create your own custom component by extending the functionality of other components (both built-in and custom) using MXML alone. You will now see how to do it, using ActionScript.

Lets name our component, BooleanComboBox. You create this custom component, by extending the ComboBox, which is a built-in component. Your component class must be created inside a package for it to be referenced later on. The code is shown below :

package components
{
import mx.controls.ComboBox;
public class BooleanComboBox extends ComboBox
{
    public function CountryComboBox()
    {
        dataProvider = [ "True", "False" ];
    }
}
} 

As you can see, in the constructor of this class, we are loading the values "True" and "False" into the dataprovider. As simple as that !

For you to use it in your MXML, there is nothing new to be done. Use it the way you had when you created the component using MXML alone.

<?xml version="1.0"?>
<mx:application mx="http://www.adobe.com/2006/mxml" cc="components.*">
<!-- Use the filename as the MXML tag name. -->
<cc:BooleanComboBox/>
</mx:Application>

So, you now know how you can create your own custom components. Couldn't get simpler than that.
Will talk about communicating with a server in the next post.

Creating Custom Flex Components Using MXML

Creating custom components allows you to modularize your code, and also make it more reusable. Also, you can extend the functionality of pre-defined components using this concept. So now, lets dive straight into the creation of our own custom component.

Creating custom component involves the use of MXML and some amount of Actionscript too. Now, let us create a ComboBox component that allows the user to choose from True or False. Lets name it BooleanComboBox.

<?xml version="1.0"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:dataProvider>
     <mx:String>TRUE</mx:String>
     <mx:String>FALSE</mx:String>
 </mx:dataProvider>
</mx:ComboBox>

Save this file as BooleanComboBox.mxml. This completes the creation of your custom component using just MXML. As you can see, creating a custom component is not very different from creating an application. The only difference is, the root tag, is not Application, but its ComboBox here. You can change this to the other components to extend them in a similar manner.

Now, to use it in your application, use the following code,

<?xml version="1.0"?>
<mx:application mx="http://www.adobe.com/2006/mxml" cc="*">
 <!-- Use the filename as the MXML tag name. -->
 <cc:BooleanComboBox/>
</mx:Application>

Here, you see that, 'cc' is the namespace to reference your custom component. This is defined in the application tag itself. Then, by using the MXML file's name as the tag name, you are using your custom component in your application.

As simple as that :-)
Next, I will be teaching you, how to create your own custom component using ActionScript. So hang in there !

Mastering Adobe Flex is on Technorati

Technorati Profile

Using a flexbook component

Now that you know the basics of writing Flex applications, you can visit livedocs.adobe.com to learn about the various built-in components.
For custom built components however, there are very few tutorials to aid you. I will be talking about adding a FlexBook component to your application. This allows you to layout your components on a set of pages, in a book, and also gives you a nice page-turning effect. This component has become very popular recently, and you can see it on many online magazines.

Firstly, download the FlexBook component from here.

Create a new project named, say "MyBook" using FlexBuilder. Then, unzip the file you downloaded into the project's main directory. This should create a folder named 'qs' containing all the ActionScript files.

Now, to create your simplest application with FlexBook, use the following code :

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://www.adobe.com/2006/mxml" 
    xmlns:l="*" layout="absolute"
    xmlns:controls="qs.controls.*"
    xmlns:containers="qs.containers.*"
>

<containers:Landscape width="100%" top="30"
           bottom="50" paddingLeft="30" 
           paddingTop="30" paddingBottom="30" 
           paddingRight="30" id="landscape" 
           zoomLimit="none"
           clipContent="false"
           cachePolicy="off" 
>
 <Canvas width="100%" height="100%" 
             horizontalScrollPolicy="off"
 >    
 <controls:FlexBook id="book" 
        y="47" left="40" right="40" top="40"
        height="400"
    animateCurrentPageIndex="true"
    showCornerTease="true"
    activeGrabArea="corner"
    edgeAndCornerSize="60"
    itemSize="halfPage" 
 >  

 <controls:cover>
 <l:LetterPage text="front" 
                   backgroundColor="#000000" 
                   color="#FFFFFF" />
 </controls:cover>

 <controls:backCover>
 <l:LetterPage text="back" 
                  backgroundColor="#000000" 
                  color="#FFFFFF" />
 </controls:backCover>

 </controls:FlexBook>
 </Canvas>
</containers:Landscape>

</Application>

This creates a FlexBook for you with a front and back-cover. Put in any container like a HBox or a list within the FlexBook tags and you should be able to see them inside a book when you build and run your application. I am sure this has given you an insight into how to use custom components, and how to integrate them with your project.

Now that you know how to use a custom component, next time I will be teaching you about how to create your own custom component using MXML and ActionScript.

The MXML format

MXML is an XML based language used to layout the various components in your Flex project. MXML coupled with ActionScript usually constitutes an entire Flex project.

Once you create a New Project in FlexBuilder, and choose to create a new application, the following code is what you start with :

<?xml version="1.0" encoding="utf-8"?>
<mx:application mx="http://www.adobe.com/2006/mxml">

</mx:application>

As you can see, the first line indicates that the XML syntax is to be strictly followed. Then, the Application is created, and all other UI components are to be placed within the Application tag.

Lets have our first, "Hello World" Program,

<?xml version="1.0" encoding="utf-8"?>
<mx:application mx="http://www.adobe.com/2006/mxml">

<mx:script>
    <![CDATA[    
        import mx.controls.Alert;    

        private function sayHello():void{
             Alert.show("Hello World");    
        }   
    ]]>
</mx:script>

<mx:button label="Say Hello" click="sayHello();" />
</mx:application>

The above program, creates a simple application, with a single button. On clicking the button, you get a "Hello World" alert box shown.
The click event handler for the button is the sayHello() function. Much of the code is self-explanative if you know object oriented and event-handling concepts, along with some simple javascript.

Minimal Requirements

For you to be able to develop Flex applications, the following requirements need to be met :

1. Adobe Flex SDK
2. Adobe Flex Builder ( while not absolutely necessary, it is highly recommended that you have this to reduce time and effort )
3. Basic knowledge of XML
4. Basic knowledge of object oriented concepts
5. A computer with atleast 512 MB of RAM

Well, thats all that is needed. The following links should help you get started :

Download Flex Builder

Download Flex SDK

An Introduction to Flex

Adobe Flex is an SDK ( Software Development Kit ) that allows you to build RIAs ( Rich Internet Applications )

In this age of Web 2.0, almost every new site that comes up has elements of RIA in it. So, in such a scenario, it is obvious that you as a web developer, must learn these technologies to have that ‘edge’ in your creations.

You can build RIAs using different technologies, but Adobe Flex is the one-stop shop for almost all of your design needs. From great interactivity, to cool looks, Flex gives it all.

In this blog, I will be posting articles, starting from tutorials for beginners and then moving onto advanced concepts in Flex.