Thursday, July 7, 2011

Creating custom components in Flex: Part 1

In this tutorial we will start learning how to create our own components in Flex.

You have used a lot of components in Flex by now - labels, datagrids, buttons, lists, groups, etc. Flex is considered a component-based model, and a lot of pre-made components are already there for us, all ready to use. However, sometimes it might be better to create your own components.

For example, if you are working on a big complex application and intend to write it all in one file, you will soon get lost in your own code. That's why you can split your application into modules, and develop each in its own file. Moreover, by making custom components, you will be able to re-use them in your other applications later with ease.

Now, let's create a really simple component. Each component you will create will be based on another component, because it is either a modification of an existing control, or a group of such controls. In this tutorial I will make a simple component called SubmitButton, which has a pre-defined width and label.

Firstly, you'll need to create the mxml file for the component. In my case, I created a myComponents folder in the same directory as my Main.mxml file, and I will use that folder to store the components I make. I create a new mxml file in that myComponents folder and call it SubmitButton.mxml. Because this is a class, you should capitalize the first letter of the name.

The first line is the same in the main file and all the components, we define the version of the XML and set the encoding:

<?xml version="1.0" encoding="utf-8"?>

Now, as I said, my component is a modification of the Button component. So, where I would normally have the <s:Application> tags, I am now going to put the <s:Button> tags. Remember to include fx, s and mx namespaces:

<?xml version="1.0" encoding="utf-8"?>
<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx">

</s:Button>

Now, I want to pre-define the width and the label for this component. I'll do that using the <s:width> and <s:label> tags. Those are properties, not classes, so write them with a lowercase first letter.

<?xml version="1.0" encoding="utf-8"?>
<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx">

<s:width>100</s:width>

<s:label>Submit!</s:label>

</s:Button>

Now that this is done, I can return to my Main.mxml file and proceed to create a namespace for this component, because all components need namespaces.

I'm going to call the namespace 'custom', and because my component is located in the myComponents directory, the line where I declare this namespace will look like this:

xmlns:custom="myComponents.*"

Now all that's left is create an instance of this component and put it on screen:

<?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:custom="myComponents.*">

<custom:SubmitButton />

</s:Application>

And there you go!


Thanks for reading!

Related:

Creating custom components in Flex: Part 2
Creating custom components in Flex: Part 3

No comments:

Post a Comment