How to use custom components in Flex 2.0

One of the biggest challenges in programming, is code reuse.

In flex i have been challenged, coming from a coldfusion background, and using the ever so popular “cfinclude” tag.

I was wondering similar ways to do so in flex.

You do this using things called “Components”.

Create a new Project in flex:

File > New > Flex Project

(I hope your familiar with that, because unfortunately I’m not going to explain it here)

Once you have done that, you can create an ArrayCollection in Flex with the following code.



<mx:arraycollection id="concern"> <mx:source> <mx:object> rowID="1" ClientID="12344" Email="" Created="11/08/06" /&gt; <mx:object> rowID="2" ClientID="12345" Email="" Created="11/08/06" /&gt; <mx:object> rowID="3" ClientID="12346" Email="" Created="11/08/06" /&gt;</mx:object></mx:object></mx:object></mx:source></mx:arraycollection>

View Example

Download Example

In that file, after you declare your array collection, you are probably wondering… “Say I want a Datagrid, but i want that datagrid to be reused in several different places.

Do the Following…

In your NewProject.mxml

<mx:application xmlns:mx="" layout="absolute" xmlns="*"> </mx:application>

Add the attribute (xmlns=”*”) I haven’t done all my research on this, but I know that when you do it, you can create components in your current project directory, and use them in your current project… I still have some more research to do with code reuse but this is what i started with.

Now in flexbuilder 2, Click: File > New > MXML Component, and make click okay on through the creation process, while giving it a name of (newComponent.mxml)

Here is the part that might confuse you… but it’s kind of, just “How it works”.

<font size="1"><font size="2"> <mx:script> var concern:Object = null; ]]&gt; </mx:script></font></font>



There are many ways to customize the datagrid, and displaying certain columns and not, but this is just a beginner lesson.


By setting a variable “concern” to Bindable, and declaring it, this custom component is now ready to be called.

After You declare you (ArrayCollection) that we did earlier, call your custom component.



<newcomponent concern="{concern}"> </newcomponent>

concern=”{concern}” binds this to the Array collection that we created Earlier…

You call it now with a custom tag, much like you would call a cf_customTag in coldfusion. it now accepts parameters, but also remember the custom tag has to be ready to accept those parameters, or flex will yell at you, and NOT compile your code.

Leave a comment