Flex 标签和 AS 类

Flex最强大的特性之一就是它在标签和ActionScript类之间创建了一个简单的映射。这是一个
原作者：http://varyall.iteye.com/blog/806279
简单的概念，但是我多次发现不懂Flex的人对这点是如何工作的或者‘它为什么有用’理解起来有困难。

对那些学习Flex的新手，这里有一些规则以及一些简单的例子让你们以此开始学习这个特性。

例子 1 —— 开始的三个规则

规则 1 —— 每个标签相当于一个以标签名为类名的类的一个实例
规则 2—— 标签的每个属性（attribute）转变为对象中的一个property
规则 3—— 每个标签中的id属性转变为相应实例中的一个变量

让我们假设你有一个象这样的类：

public class Contact
{
public var home : Location;
public var work : Location;
public var firstname : String;
public var lastname : String;
public var isFriend : Boolean = false;
}

你可以通过一个MXML文件创建它的一个实例，如下：

<Contact id=”myContact” firstname=”Susan” lastname=”Smith” isfriend=”true” />

粗略地讲，上面的MXML等价于下面的ActionScript：

var myContact : Contact = new Contact();
myContact.firstname = “Susan”;
myContact.lastname=”Smith”;
myContact.isFriend=true;

简单，对吧？注意MXML编译器知道如何处理所有的内建（built-in）类型。String仍然保持为字符串，但是Boolean则转变成真正的布尔值，而不是字符串“true”。

但是如果你的类型比较复杂该怎么办？这就是 规则 4 出现的原因。

例子2 —— 复杂类型

规则 4——（规则 1中的例外）如果一个标签不是和一个类相对应，它将会被处理成所嵌入的标签（译注：即父标签）的一个属性，并且这个标签的内容就是这个属性的值。

再看一下上面的类。它涉及了一个Location类。让我们看一下Location类是这么被定义的：

public class Location
{
public var address : String;
public var state : String;
public var zip : String;
}

我们可以使用下面的MXML来创建一个含有Location的Contact。

<Contact id=”myContact” firstname=”Henry” lastname=”Smith”>
<home>
<Location address=”555 Foo Drive” state=”CA” zip=”94131〃 />
</home>
<work>
<Location address=”111 Bar St” state=”CA” zip=”94102〃 />
</work>
</Contact>

粗略地讲，这个MXML等价于：

var myContact : Contact = new Contact();
myContact.firstname = “Henry”;
myContact.lastname=”Smith”;var temp: Location = new Location();
temp.address = “555 Foo Drive”;
temp.state = “CA”;
temp.zip=”94131〃

myContact.home = temp;

temp = new Location();
temp.address = “111 Bar St”;
temp.state = “CA”;
temp.zip = “94102〃;

myContact.work = temp;

例子 3 —— 数组

规则 5 —— 某些类定义了“默认属性”。这就是说那个属性标签（规则 4）在这些属性中可以被忽略。
规则 6 —— 数组标签几乎总是可以被忽略。

假设我们想要创建一个ContactList如同下面这样的对象（现在忽略这个metadata（元数据））：

[DefaultProperty("contacts")]
public class ContactList
{
public var contacts : Array;
}

如果没有规则 5和6，你象下面那样做（Flex1.5 这样工作）：

<ContactList id=”myList”>
<contacts>
<Array>
<Contact firstname=”Henry” lastname=”Smith” />
<Contact firstname=”Susan” lastname=”Smith” />
</Array>
</contacts>
</ContactList>

因为我们已经添加了metadata来说明cantacts是默认的属性，所以我们可以使用规则 5和6来压缩上面的代码：

<ContactList id=”myList”>
<Contact firstname=”Henry” lastname=”Smith” />
<Contact firstname=”Susan” lastname=”Smith” />
</ContactList>

为什么这样做很好？

这使你可以做三件事情：

1.如果你有某些一系列标签想要往MXML中添加，这相对来说很简单。只是通过正确的属性添加相应的类就可以了。
2.反过来说，如果你已经有了类并且你发现你需要在XML中表现它们，映射已经为你做好了。
3.保持健全。在你做了这些之后，一些不可思议的事情在你脑海中发生了，你凝视MXML代码块的时候将可以“看到”你将要编写的用来传输一些属性的 ActionScript代码。这使得代码变得非常容易保持灵活。当然，既然我说的是它让你脑海中发生了一些不可思议的事情，我不知道“保持健全”是否能够正确描述它……。

总之，一旦你熟悉了它的用法，MXML和ActionScript类之间的等价关系将会非常有用并且非常简单易懂。

//====================================================
实例变量和范围

从一个高度来说，你所需要知道的关于带有id的MXML标签的一切就是他们会成为变量。靠近一点，你就开始关心他们变成了什么类型的变量。

举个例子，看下面的代码：

MyApp.mxml

<Application>
<HBox>
<Image id=”theImage” src=”foo.gif” />
<Button id=”theButton” label=”hide image” click=”theImage.visible = false” />
</HBox>
</Application>

这个theImage是什么类型的变量？嗯，它看起来有几份像全局变量，毕竟你传输它的时候没有用任何限定。但是如果你考虑多一点，你会意识到真正的全局变量在你程序的任何地方都是可见的，不论是在哪个文件中。这些变量只是在这个文件中可见，对吗？

当它出现的时候，每个MXML文件对应一个新的ActionScript类，并且其中带有id的标签变成那个类的实例变量。上面的代码大概等价于下面的代码：

class MyApp extends Application
{
public var theImage : Image;
public var theButton : Button; // In the real world, this initialization code is much
// more complex and doesn’t go in the constructor,
// but you get the idea…
public function MyApp()
{
var hbox = new HBox();

theImage = new Image();
theImage.src = foo.gif;

hbox.addChild(theImage);

theButton = new Button;
theButton.label = “hide image”;
theButton.addEventListener(”click”, temp1);

hbox.addChild(theButton);
this.addChild(hbox);
}

private function temp1(event: MouseEvent) : void
{
theImage.visible = false;
}
}

你可以看到，theImage 和 theButton是MyApp类的成员变量。注意这些标签在文件什么地方定义的并不重要。在这个例子中，虽然image和button在一个hbox中，但是他们对应的变量还是在类和程序的最外面定义的。

MXML中的ActionScript

看一下上面的例子代码，你会发现事件触发器变成了函数。这些函数是外部类的成员并且他们有强类型标识。这种情况下，一个有正确类型的 “event”参数传送给click触发器。如果你想通过别的方式，你可以在你的inline事件触发器中定义本地变量而且所有工作都会顺利进行（虽然这种方法明显不被推荐）。

在script块中的ActionScript代码会变成什么呢？让我们看一下下面的代码：

<Application>
<Script>
<![CDATA[
[Bindable]
var foo : String; public function bar() : void
{
}
]]>
</Script>
</Application>

在script块中的代码只是插入到类的定义中，所以它变成：

class MyApp extends Application
{
[Bindable]
var foo : String; public function bar() : void
{
}
}

任何你可以放到类定义中的代码在Script块中都是合法的。这允许你做类似为取值何设值函数附上metadata的事情。现在你知道MXML中定义的函数同类之间的关系，还知道了如何从其它地方访问这些方法。例如，如果一个MXML组件像这样定义函数：

PasswordEntry.mxml

<VBox>
<Script>
public function get username() : String
{
return usernameField.text;
} public function get password() : String;
{
return passwordField.text;
}

public function reset() : void
{
usernameField.text = passwordField.text = “”;
}
</Script>
<HBox>
<Label text=”username” />
<TextInput id=”usernameField” />
</HBox>
<HBox>
<Label text=”password” />
<TextInput id=”passwordField” />
</HBox>
</VBox>

你可以从另外一个文件中调用他们：

<Application>
<Script>
public function foo() : void
{
Alert.show(”username: ” + pw.username + ” password: ” + pw.password);
pw.reset();
}
</Script>
<PasswordEntry id=”pw” />
<Button label=”foo” click=”foo()” />
</Application>

//=========================================================


还在跟随我？很好。下面是那些规则（译注：前两篇文章）中的一些例外：

UIComponent是特殊的

例外 1—UIComponent的子标签不能通过defaultProperty来触发。

读了前两篇文章之后，你可能会认为：“我知道了。UIComponent一定有一个叫children的属性，这就是UIComponent添加子标签的方法”。很好的猜测，但是很不幸，UIComponent是一个特殊情况。

其中有一个历史原因。Flex 1.0和Flex 1.5没有 default property的概念。另外，关于为什么像其它标签一样处理UIComponent的子标签很困难是有其它真正原因的。对于初学者来说，UIComponent的初始化代码非常复杂。如果想对它有一个大致的了解，把在编译器中将-keep标记打开并观察它产生的 ActionScript代码。另外一个原因是那些无名（faceless）的组件，它们并不是UIComponent标签的真正子集，把我带领到……。

无界面（faceless）组件是特殊的

例外 2——MXML文件的根标签必须从UIComponent继承而来。
例外 3——无界面（faceless）组件只能在一个文档的最根部使用

我所能说得就是，此处的两个例外只是因为历史原因。对于纯语言理论者它们非常讨厌，但是它们并不影响人们做实际的工作，所以我们不能依靠它同语言中其它部分的一致性来给它下定义。下面我说明一下。

一个所谓的无界面（faceless）组件就是指不从UIComponent继承而来的组件。Parallel、HTTPService以及一些其它标签就是例子。

总之，创建一个无界面（faceless）组件的唯一方法就是使用纯ActionScript为现有的类写一个子类。通常来说，这样可以。例如，你不必使用MXML来创建一个HTTPService的子类。使用MXML编写一个ActionScript类的子类没有什么意义。比如，你可能想通过在MXML中把一串effect放到parallel标签中来定义一个新的effect类。不幸的是，你不能那样做。这在例外2中有定义。

<!–这个文件将不会被编译 –>
<mx:Parallel xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Fade alphaFrom=”0〃 alphaTo=”1〃/>
<mx:Move xBy=”50〃 />
</mx:Parallel>

例外3是关于如何在MXML文件中使用无界面（faceless）组件的。你只能把无界面（faceless）组件放到MXML文件的根部。对此没有很好的原因，但是同样地，把无界面（faceless）组件放到除根部之外的任何地方也没有好的理由。

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:HBox >
<!– 这不会被编译–>
<mx:HTTPService id=”foo” />
<mx:/HBox/>
</mx:Application >

一些标签更特殊

例外4—— 一些标签不是同ActionScript类对应的，而是有特殊的规则。

一些标签根本不是组件（比如Script标签，注意没有一个叫Script的ActionScript类）而是直接被硬编码进编译器的。这些标签的列表可以在这里找到。不幸是的，每一个都有一些不同的规则。

在UIComponent被允许的地方都可以出现：
．<Script>（令人惊讶，但这是事实）

只在根部被允许：
．<Binding>
．<Metadata>
．<Model>
．<Style>
．<XML>
．<XMLList>

只在factory属性中被允许（象itemRenderer）：
．<Component>

只在WebService标签内部被允许
．<mx:operation>

只在RemoteObject标签中被允许：
．<mx:method>

只在method标签中被允许：
．<mx:arguments>（注意这是整个语言中唯一一个小写字母标签在另外一个小写字母标签内部的情况）

只在HTTPService和operation标签中被允许：
．<mx:request>

还有一些其他的情况，但是通常来说，这些规则并不像我这里写的那样难以使用。之前你也从未想过把一个arguments标签放到一个method标签外，并且你从来没有把method放到RemoteObject标签之外的地方。

有时候，你可以使用一些不存在的标签

例外5——某些标签，就像Model和XML，他们允许你在里面放置你想要放置的任何标签。

上面的这个例外不需要说明。它就是那样。

总结

你可能不需要知道上面的这些例外就能进行你的学习，但是有时候它可以帮助你理解你所使用的技术背后的细节。希望你会觉得它很有趣。

//=====================================================