« February 2006 | Main | April 2006 »
March 27, 2006
Component "Templates" in Flex 2.0
First, let me be very clear: Flex 2.0 does NOT support templates. But this article will show you a way to make it look and act as if it does.
A "template" is different from a custom component. A template typically specifies a number of parts with some of the areas left open for substitution. I think of templates as being done exclusively in MXML whereas components can be 100% ActionScript or a combination of AS and MXML. Dreamweaver has the ability to do templates using regions.
Note: An example is available for download at the end of the article.
Panel Template
Suppose you want to create a Panel with a certain look and use it frequently in your application. Perhaps the Panel has a ControlBar with a "Search" and "Help" button. You want to make sure the Panel has the ControlBar and Buttons all of the time, but you want to change the contents of the Panel. A template, called SearchPanel.mxml, to do this might look like:
<mx:Panel xmlns:mx="...." layout="absolute">
<mx:Metadata>
[Event("search")]
[Event("help")]
</mx:Metedata>
<!-- put children here -->
<mx:ControlBar>
<mx:Button label="Search" click="dispatchEvent(new Event('search'))" />
<mx:Button label="Help" click="dispatchEvent(new Event('help'))" />
</mx:ControlBar>
</mx:Panel>
To use this you might do:
<SearchPanel title="Employee Search" search="findEmployees()">
<mx:Form left="10" top="10" right="10" bottom="10">
... form items here ...
</mx:Form>
</SearchPanel>
If you were to write this in Flex today, you would get a compilation error saying that SearchPanel already had children. You cannot add more children from outside of the component. If you had written SearchPanel without the ControlBar, then this would work. But then every SearchPanel would not automatically have a ControlBar.
One solution is to write this as a custom component which creates the ControlBar and Buttons in ActionScript. I won't do that here because I have a much better way to do it.
Making the 'Template'
Let's go back to SearchPanel and keep it the same, except add in this Script block:
<mx:Script>
<[[CDATA
private var _components:Array;
public function set subComponents( a:Array ) : void
{
_components = a;
}
private function addComponents() : void
removeAllChildren();
for(var i:int=0; i < _components.length; i++) {
addChild( _components[i] );
}
}
]]>
</mx:Script>
and modify the root tag: <mx:Panel xmlns:mx="...." layout="absolute" creationComplete="addComponents()">
Now use this in your program:
<SearchPanel title="Employee Search" search="findEmployees()">
<subComponents>
<mx:Form left="10" top="10" right="10" bottom="10">
... form items here
</mx:Form>
</subComponents>
</SearchPanel>
Notice that the Form, and any other children you want to add to the Panel, are defined by the <subComponent> property. In the Script block for the SearchPanel, subComponents is a set method which takes an Array. This Array will be 1 or more components defined in MXML. In this example, that Array is the <mx:Form>. Notice that the simple loop just takes each element of the Array and adds it to the Panel.
Now you have a "template"!
Default Property
But wait - there's more. This is the really cool part. Go back into SearchPanel.mxml and add the following line to the <mx:Metadata> right after [Event("help")]:
[DefaultProperty("subComponents")]
Now change the main program just slightly by removing the <subComponents> tag:
<SearchPanel title="Employee Search" search="findEmployees()">
<mx:Form left="10" top="10" right="10" bottom="10">
... form items here
</mx:Form>
</SearchPanel>
Notice that <subComponents> is gone and this now looks like a real container. This works because of the DefaultProperty metadata. You've set the SearchPanel's default property name to be "subComponents" which automatically places the <mx:Form> into the subComponent array.
Conclusion
While real templates are not available in Flex 2.0 you can come mighty close to making it look as though they are. This is possible because of the way components are now created in Flex 2.0 (using the new operator) and the DefaultProperty metadata.
Download Example
This example is similar to the one described above. Here, the component is a Panel wrapped by a Canvas. This is done so that minimize and maximize buttons can float over the Panel's title bar.
Posted by pent at 11:25 AM | Comments (22)
March 21, 2006
Flex 2 Beta 2
In case you haven't heard... Flex 2 Beta 2 is now publically available from our Adobe Labs site.
If you have been using the Beta 1 version, you MUST read the migration document as quite a few things have changed. The Flex 2 Team has been hard at work, not only making Flex 2 better and incorporating a number of suggestions received during the Alpha and Beta 1 phases, but also making sure Flex 2 was even easier to learn for newcomers.
So when you find that you have to make some spelling changes (eg, Void is now void), keep in mind that we a) want to be in sync with the standard and b) we want to clarify classes and code names to make the easier to remember for everyone.
It's all good, trust me.
Posted by pent at 12:07 PM
March 02, 2006
Update to IE May Affect Flex Application
Microsoft has released an optional update to IE which will cause ALL ActiveX based controls (such as the Flash Player) to require a user to either click on the Flash Player or press Tab or Enter before the Flash Player will become interactive.
Adobe has responded with the hotfix. Please see this technical for the full information: http://www.macromedia.com/go/ace0407
Posted by pent at 07:29 AM