Flex 2.0中的组件“模板”（翻译）

Flex 2.0中的组件“模板”（翻译）

05月 7th, 2006 — Dreamer

本文的英文版是 Peter Ent 写得，本文所有提供下载的东西均来自他那里，原文地址http://weblogs.macromedia.com/pent/archives/2006/03/component_templ.cfm

我看这个挺实用的，所以翻译过来，权当自己教自己。：）

Flex 2.0中的组件“模板”

首先，我明确声明一下：Flex 2.0 是绝对不支持模板的，但是这篇文章将会告诉你一个方法让它看起来好像支持模板一样。

一个“模板”（Templates）不同于一个自定义组件（custom component）。一个模板会定义一些公开的可以被置换的部分。我所认为的模板是纯粹用MXML写的，但是组件可以100%用ActionScript或者用AS和MXML结合来写。Dreamweaver用regions可以实现模板。（译者注：由于对Dreamweaver不了解，这里regions一词不便翻译。）

 

注：在文章的末尾有一个例子提供下载。

面板（Panel） 模板

假设你想创建一个有固定外观的Panel，并且要在你的应用程序中频繁使用它。可能这个Panel有一个控制栏（ControlBar），控制栏里有两个按钮：“搜索”和“帮助”。你希望这个Panel总是有控制栏和按钮，但是你却想随时改变Panel中的内容。一个叫做SearchPanel.mxml的模板，可以像这样帮你达到目的：

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

你可以这样使用它：

<SearchPanel title=”Employee Search” search=”findEmployees()”>

<mx:Form left=”10″ top=”10″ right=”10″ bottom=”10″>

… form items here …

</mx:Form>

</SearchPanel>
如果你现在这样在Flex中实现，将会得到一个编译错误，它会提示你SearchPanel已经有了子组件。你不能从组件外面为它添加更多的子组件。如果你不在SearchPanel中添加控制栏（ControlBar）的话，它将会运行。但是这样的话每个SearchPanel就不会自动有一个控制栏了。

解决办法之一是把它写成一个用ActionScript创建控制栏和按钮的自定义组件。在这里我不会那样做，因为我有更好的办法去实现它。

创建这个“模板”（Templates）

让我们回到SearchPanel.mxml，保持其它部分不变添加下面的脚本代码块：

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

并更改根标签：

<mx:Panel xmlns:mx=”….” layout=”absolute” creationComplete=”addComponents()”>

现在这样在程序中使用：

<SearchPanel title=”Employee Search” search=”findEmployees()”>

<subComponents>

<mx:Form left=”10″ top=”10″ right=”10″ bottom=”10″>

… form items here

</mx:Form>

</subComponents>

</SearchPanel>

注意这个表单，或者其它你想要添加到面板中的子组件，都是在<subComponents>属性中定义的。在这个SearchPanel的脚本代码中，subComponents是一个接收数组的 set 方法。这个数组可以是在MXML定义的一个或者多个组件。在这个例子中，这个数组是一个<mx:Form>。注意哪个简单的循环（就是脚本中那个addComponents方法。译者注。），它把数组中的每个元素添加到Panel中。

现在你已经有了一个“模板”了！

默认属性（Default Property）

但是请等一下——还有更多。这确实是一个很酷的部分。让我们重新回到SearchPanel.mxml，把下面的一行代码添加到 <mx:Metadata> 中 [Event("help")] 的后面：

[DefaultProperty("subComponents")]

现在轻微改变一下主程序：把<subComponents>去掉：

<SearchPanel title=”Employee Search” search=”findEmployees()”>

<mx:Form left=”10″ top=”10″ right=”10″ bottom=”10″>

… form items here

</mx:Form>

</SearchPanel>
注意把<subComponents>去掉之后它现在看起来像一个真正的容器（Container）了。因为有了DefaultProperty这个元数据（metadata），它也能顺利运行。你把SearchPanel的默认属性设置成了 “subComponents”，它可以自动把<mx:Form>放到子组件数组里。

总结

虽然在Flex中不支持真正的模板，但是你可以很漂亮地做到让它看起来好像支持一样。因为Flex2.0种创建组件的方法（用new 运算符）和DefaultProperty元数据使做到它变为可能。

范例下载

这个例子和上面描述的这个很像。在这个例子中，组件是一个被Canvas封装的Panel。这样做可以使最大化和最小化按钮“浮在”Panel 的标题栏上。

下载文件

分享收藏

本文链接:http://www.zhuoqun.net/html/y2006/37.html 转载请注明出处，谢谢。 

TrackBack引用地址：http://www.zhuoqun.net/html/y2006/37.html/trackba