Friday, July 8, 2011

Creating custom components in Flex: Part 2

In this tutorial we will learn how to create a component that lets us set its attributes values.

Today I will create a simple list-based component, which basically consists out of a title (a Label object) and the List itself. I intend on making it so when I am creating an instance of this control, I can pass the title value and the data provider as the attributes of the component. Additionally, I will be able to set such thing as width and height of this component and the font size of the title, although these values will be optional and have pre-defined values by default.

I assume you have read and followed my previous tutorial, because this time we will be adding another mxml file to our myComponents file. I call it CustomList.mxml.

It is going to consist out of a Label and a List, so let's make it a base of a Group object. Let's give it a vertical layout.

<?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">

<s:layout>
<s:VerticalLayout />
</s:layout>

</s:Group>

Now let's add the necessary variables. They all have to be public and bindable, to be accessible as attributes of the component. We will need to add title, titleSize, dataProvider, listWidth and listHeight variables.

<fx:Script>
<![CDATA[
[Bindable]
public var title:String;
[Bindable]
public var titleSize:int = 18;
[Bindable]
public var dataProvider:Object;
[Bindable]
public var listWidth:int = 200;
[Bindable]
public var listHeight:int = 200;
]]>
</fx:Script>

And now we are just setting these variables as the properties of the Label and List components, which we add to the group.

<s:Label fontSize="{titleSize}" text="{title}" width="{listWidth}" />

<s:List dataProvider="{dataProvider}" width="{listWidth}" height="{listHeight}"/>

So the full code for CustomList.mxml is:

<?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">

<fx:Script>
<![CDATA[
[Bindable]
public var title:String;
[Bindable]
public var titleSize:int = 18;
[Bindable]
public var dataProvider:Object;
[Bindable]
public var listWidth:int = 200;
[Bindable]
public var listHeight:int = 200;
]]>
</fx:Script>

<s:layout>
<s:VerticalLayout />
</s:layout>

<s:Label fontSize="{titleSize}" text="{title}" width="{listWidth}" />

<s:List dataProvider="{dataProvider}" width="{listWidth}" height="{listHeight}"/>

</s:Group>

Now, in the main file, let's create a new ArrayCollection object to store some data.

<fx:Declarations>
<mx:ArrayCollection id="myData">
<fx:String>John</fx:String>
<fx:String>Tom</fx:String>
<fx:String>Bob</fx:String>
<fx:String>Walter</fx:String>
<fx:String>Steve</fx:String>
</mx:ArrayCollection>
</fx:Declarations>

Now we can create our custom list component and pass whatever properties we need. We pass the ArrayCollection we just created as the dataProvider for the control.

<?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.*">
   
<fx:Declarations>
<mx:ArrayCollection id="myData">
<fx:String>John</fx:String>
<fx:String>Tom</fx:String>
<fx:String>Bob</fx:String>
<fx:String>Walter</fx:String>
<fx:String>Steve</fx:String>
</mx:ArrayCollection>
</fx:Declarations>

<custom:CustomList title="This is a custom list!" dataProvider="{myData}" listWidth="170" listHeight="100" />

</s:Application>

The results:


Thanks for reading!

Related:

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

No comments:

Post a Comment