Turning Components From MXML To Actionscript – Part 1

This Thursday D-Flex will be holding a Connect meeting showing how to turn an MXML Component to Actionscript in some very easy steps. In preparation for that I am going to start blogging the content I will be using for the presentation. After Thursday you should be able to see the entire presentation and all the accompanying files.

I am assuming in this presentation that you already understand the benefits to components and compartmentalizing your code. On top of that I am working off of the assumption that you agree a component is a snippet of code that can be used from one application to the next without any changes to the component. That means that a component barely has any logic within the component or understanding of it’s parent. Instead, I component handles it’s own state and variables and releases events to the parent view/application.

So let’s begin. First we need to create an MXML Component. To do that we will start by laying out a base component, in this case we are starting with the Panel.

1
2
3
4
5
6

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Panel width="400" height="300">

</mx:Panel>
</mx:Application>

Right now we don’t have much, so let’s add some children components to our main component and see what we are going to make.

1
2
3
4
5
6
7
8
9
10
11
12
13

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Panel width="400" height="300">
<mx:DataGrid width="100%" height="100%"/>
<mx:ControlBar>
<mx:Button label="Button"/>
<mx:Spacer width="100%"/>
<mx:Button label="Button"/>
<mx:Spacer width="100%"/>
<mx:Button label="Button"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>

Which creates:

Our Current MXML Component

As you can tell from the code this component isn’t actually a component yet, so we are going to start “componentizing” our component. So first we will use our “New > Flex MXML Component” option.

And enter in our component options.

Now we just copy and paste the children components into our new panel component and we will be ready to start customizing our component.

1
2
3
4
5
6
7
8
9
10
11

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="100%" height="100%">
<mx:DataGrid width="100%" height="100%"/>
<mx:ControlBar>
<mx:Button label="Button"/>
<mx:Spacer width="100%"/>
<mx:Button label="Button"/>
<mx:Spacer width="100%"/>
<mx:Button label="Button"/>
</mx:ControlBar>
</mx:Panel>

And you can see that we have copied our original “component” perfectly.