Component "Templates" in Flex 2.0

原文链接：http://weblogs.macromedia.com/pent/archives/2006/03/component_templ.html

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.