]]>
?nbsp;MXML 中，除了 Application标签外，q提供了大量的标{供我们使用?/font>
例如上面代码中出现的Button?/font>Label标签Q处理界面结构的Canvas?/font>Box标签Q网中常见的下拉框、多选框、单选框、复选框Q用来显C数据的DataGrid?/font>Tree{等。每个标{N对应一个类文g?/font>
3.2.1 插入lg
?font face="Times New Roman">MXML中组件用v来非常简单，比如插入一个按钮，~写代码Q?/font>
<mx:Button></mx:Button>
q一寚w合的标签在界面上绘制出一?font face="Times New Roman">Buttonlg。在XML中，所有标{ֿ闭合。和正常标签相比Q闭合标{֏是在前面d了一?#8220;/”。也是用另一UŞ式：
<mx:Button />
“/”W号是闭合标{写Ş式，通常用于单行的节点，描述一个单独的元素。如果标{含子节点Q则不能采用写?/font>
MXML中，lg的属性（如长、宽、位|等Q是作ؓ节点的属性出现的Q比如：
<mx:Button width="200" hieight="200"></mx:Button>
lg按照功能大致可分Zc：
l 布局c，包括所有的容器cdlgQ比?nbsp;HBox?/font>Panel{?/font>Spacer?/font>HRule ?nbsp;VRule不是容器cdQ但主要用于布局Q因此也归于此类?/font>
l Dc，包括菜单条、按钮条{各U导航功能的lg?/span>
l 交互c，包括内容展示、数据交互相关组Ӟ如按钮、下拉框、图片、视频等{?/span>
Flex Builder的组仉板中列出了所有的可视化组件。在设计模式试图下，可以直接从组仉板将lg拖入到编辑区Q同时自动生成程序代码?/font>
如果要用非可视化组Ӟ则需要输入代码。在代码试图中输?font face="Times New Roman"><mx: q时候跟q的代码提示H口列?/font>mx I间下所有的对象Q如?nbsp;3.1 所C?/font>
3.2.2自定?/font>MXMLlg
在实际开发中Q尤其是一个大型应用中Q我们不会把所有的代码都塞q一个文件中。可以想象，修改一个几千行的文件是件痛苦的事。因此，对程序进行功能分割是非常必要的。这带来的好处很多，明显的一Ҏ让开发者能够分工合作，提高E序的重用性，降低了维护的隑ֺ?/span>
Zl徏的开发模式是Flex的一个特艌Ӏ一?/font>FlexE序是由若干个组件构成的。程序中所有的MXML文g?/font>ActionScriptcLӞ都被当作用户自定义的lg。用戯定义的组件和Flex本n的组件在用法上完全一P它们的区别在于：Flexlgl过装Q可以被LE序使用Q而用L件在特定的程序中才可以用?/font>
一般我们将E序中功能能够独立或者需要返复用的部分定义成一个用L件。编写程序时Q应当尽量减组件与lg之间的直接联p，降低块与块之间的依赖性?/span>
在程?font face="Times New Roman">Example_1中，我们来新Z?/font>MXMLlg。在D区，在空白区域单击鼠标右键，在弹出的菜单中选择 New ----> MXML ComponentQ见?/font>3.2?/font>
然后会弹出如?nbsp;3.3 所C的对话框?/font>
q里要给创徏lg的文件名Qƈ选择是扩展来自哪一U组Ӟ包括所有可视化lg和用户已l自定义的组Ӟ也就是说可以在已l扩展的基础上就l箋扩展?/span>
选择Image对象Q单?/font>Finish按钮Q一个新?/font>MXML文g被创ZQ切换到设计视图Q点?/font>ImagelgQ在属性面板会看到他的常见属性，见图3.4。其?/font>Source属性即囄的\径。选择好图片后Q这个组建就完成了，见图3.5?/font>
myImage.mxml的文件内容如下：
2 <mx:Image xmlns:mx="http://www.adobe.com/2006/mxml" source="pic/animal.png">
3 </mx:Image>
再次切换到设计模式视图。这Ӟ在组仉板上Q?font face="Times New Roman">Custom分类中出C新添加的lg名。想使用Flex自带的组件一P?/font>myImagelg从组仉板拖攑ֈȝ序中Q图片显C正常。切换到代码模式视图Q?/font>Example_1.mxml文g的内容变化了Q?/p>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">
3 <ns1:myImage x="30" y="30"/>
4 </mx:Application>
<nsl:myImage x="30" y="30" />
在实际开发中Qؓ了更好地规划E序的结构，我们一般根据功能来划分命名I间。新建文件夹“view”Q将myImage攑֜其中?#8220;view”有视图、视界的意思，我们把所有和界面相关的组仉攑֜q里面，q样看文件夹的名字就知道里面的大致内容了。修改后Q?/font>Exaple_1.mxml文g的代码如下：
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:view="wiew.*">
3 <view:myImage x="30" y="30"/>
4 </mx:Application>
q行E序Q效果如?font face="Times New Roman">3.6所C：
说明Q由于在|上相关资源太少所以本文是按照《FlexW一步》编写，׃旉比较短所以第三章内容没有全部出来同时~写q程中有错别字，请大家担待。^_^
]]>
3.1 MXML语法
通常情况下，FlexE序׃下三U文件组成：
l ?nbsp;mxml为后~的程序文?/font>
l ?nbsp;as 为后~?nbsp;ActionScript 文g
l ?font face="Times New Roman">css
为后~的样式表文gMXML文g好比大脑，as文g?/font>css文g是他的手和脚Q主E序MXML文g项目中的所有文件组合在一P形成一个有机的整体?/font>
本章要说?font face="Times New Roman">MXML的语法，q结合实力分?/font>MXML文g的内容结构?/font>
在上一章的实例中，创徏了一个简单的FlexE序Q主E序文g是一?#8220;mxml”为后~名的文gQ这个文件所采用的便是我们这里要讲的MXML语言?/font>
MXML语言Q是专门用于FlexE序中，描述界面表现的一U?/font>XML标记语言。我们可以用它来理E序的整体布局Q控制组建的央视和外观，也可以构建非可视化的对象Q比?/font>XML数据、与服务器端通信?/font>WebService、组件的数据源等{?/font>
3.1.1 命名规范
cM|页中实用的HTML语言Q?/font>MXML提供了一pd的标{供用户使用Q到?/font>MXML的语法更严格的多Q他提供的内|标{也更丰富?/font>
MXML区分大小写，且文件名和变量标识名都区分大写。字母大写错误是编E中常见的错误，隐蔽性较高，有时很难排错。在~写代码Ӟ应采用合理的命名规范Q避免出现这c错误?/font>
?font face="Times New Roman">FlexE序中，每个MXML文g必须以小写的“mxml”作ؓ后缀Q文件名要遵?/font>ActionScript中变量的命名规则。因为在E序中，所有的MXML文g名可以直接被ActionScript当作一U用户定的数据类型来使用。因此，MXML文g名不能和ActionScriptcL件同名，否则׃造成cd冲突。在ActionScript中，变量名必M字母或下划线开始，且只能包含字母、数字和下划Uѝ?/font>
需要注意的是，MXML文g不能名ؓ“application” ,“application”是住E序文g所采用的默认标讎ͼ不可以在被用。也不能和程序中Llg?/font>id值同名?/font>
例如Q下面是HelloWorld.mxml文g的源代码Q?/font>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3 <mx:Button id="btn" x="51" y="107" label="Click me" click="trace('q是点击后的文字')"/>
4 <mx:Label id="tip_txt" x="182" y="109" text="q是点击前的文字" fontSize="12" width="136"/>
5 </mx:Application>
试作如下修改：
<mx:Label id="HelloWorld" x="182" y="109" text="q是点击前的文字" fontSize="12" width="136"/>
再次~译Q将无法通过~译Q得到如下错误信息：identifier and class may not have the same nameQ意思是说组件的唯一标识?#8220;id”不可以和对象重名?/font>
q有一点说明：E序不可以?#8220;mx”作ؓ目录名?#8220;mx”?/font>Flex Framework的官方组件库的命名空_受到Flex~译器的保护。假如在E序目录中创Z名ؓ“mx”的目录，q个目录中存攄MXML文g?/font>ActionScriptcL仉无法用，会被~译器忽略?/font>
Z避免文g名冲H，同时也ؓ了增强程序的可读性，文g和变量一般采用有意义的单词、名词简写或字符l合来命名。下面介l一些习惯用法：
(1) 用类型的写作后缀Q比如：LoginPanel表示登陆面板Q?/font>SendBtn表示发送按钮；UserTxt表示文本lg?/font>
(2) 使用下划U组合单词，比如Q?font face="Times New Roman">User_Name?/font>User_Email表示用户的信息；Move_Speed表示速度?/font>
(3) 帔R全部使用大写Q比如：PI表示圆周率；CLICK_EVENT表示点击事g名?/font>
不管时用哪U方式，目的都是Z提高E序的代码质量，q对开发和日后的维护都很有帮助?/span>
3.1.2 MXML文gl构
一?font face="Times New Roman">MXML文g由哪些元素构成？我们已经知道MXML文g其实是一个标准的mxl文gQ因此可以参?/font>XML语法来分?/font>MXML文g的内宏V?/font>
q里仍然以上一章实例的代码ZQ?/span>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3 <mx:Button id="btn" x="51" y="107" label="Click me" click="trace('q是点击后的文字')"/>
4 <mx:Label id="tip_txt" x="182" y="109" text="q是点击前的文字" fontSize="12" width="136"/>
5 </mx:Application>
?font face="Times New Roman">MXL文g中，需要在W一行声?/font>XML文g采用的语法版本号和文仉用的~码格式。从上面的代码中可以看到q两个属性：version?/font>encodingQ其?/font>encoding~码格式q个属性是可选的。选定的编码格式必ȝ合文仉用的~码格式Q默认ؓutf-8格式。在中文操作pȝ中，一般都使用utf-8q个~码格式Q他兼容采用双字节编码的语言(包括中文、韩文、日文等)和其他常见的西方语言Q而且跨^収ͼ是用最q发的编码格式。另外也可以使用体中文专用编?/font>gb2312.
mx:Application标签是一个特D的标签。在每个Flex目中，可能有多?/font>MXML文gQ但作ؓE序入口的运行文件只有一个，L件的标示是根节点?/font>mxQ?/font>ApplicationQ一个程序中只能出现一?/font>mxQ?/font>Application节点?/font>
在根节点中，q看C一个属性：xmlns:mx=http://www.adobe.com/2006/mxmlQ表C将mx定义?/font>MXL的命名空间?/font>xmlns标签专门用来定义XML的命名空_XML命名I间可以用来定义一套独立的XML标签Qƈ且ؓq些标签制定Ҏ的解析方式。比?/font>XML中默认的标签格式为：<Button>node</Button>Q这里的Button节点被作Z个普通的文本节点Q没有什么特D的意义。定义命名空间后Q在节点上就׃I间前缀Q?/font><mx:Button></mx:Button>Q这时?/font>mx:Button ׃?/font>mxI间下的Button对象?/font>
mx命名I间对应的\径是“http://www.adobe.com/2006/mxml”,Flex的配|文件中这个\径定义ؓ一个全局资源标识W，q对应了一?/font>MXL文g。在q个文g中，列出?/font>mx命oI间下的所有标{。在Flex Builder2的安装\径下Q进?/font>Flex SDK2\frameworks目录中，扑ֈflex-config.xml 文gq用记事本或其他编辑工h开Q找C面的内容Q?/font>
2 <!—Specify a URI to associate with a manifest of components for use as MXML-->
3 <!—elements.
4 <namespace>
5 <uri>http://www.adobe.com/2006/mxml</uri>
6 <manifest>mxml-manifest.xml</manifest>
7 </namespace>
8 </namespaces>
从上面的配置中发玎ͼhttp://www.adobe.com/2006/mxml q个URI?/font>mxml-manifest.xml文g对应。下面打开同目录下?/font>mxml-manifest.xml 文gQ里面列ZMXML中的所有标{֒与标{关的cL件\径?/font>
2 <componentPackage>
3 <component id="Accordion" class="mx.containers.Accordion"/>
4 <component id="AddChildAction" class="mx.effects.AddChildAction"/>
5 <component id="AnimateProperty" class="mx.effects.AnimateProperty"/>
6 <component id="Application" class="mx.core.Application"/>
7 <component id="ApplicationControlBar" class="mx.containers.ApplicationControlBar"/>
8 <component id="ArrayCollection" class="mx.collections.ArrayCollection"/>
9 <component id="Blur" class="mx.effects.Blur"/>
10
..11
.12 <component id="SecureHTTPChannel" class="mx.messaging.channels.SecureHTTPChannel"/>
13 <component id="SecureRTMPChannel" class="mx.messaging.channels.SecureRTMPChannel"/>
14 </componentPackage>
在这份列表中Q节点的id代表标签名，class表示cL件的路径。比?/font>mx:Application标签Q也是对应?/font>mx.core.ApplicationcR?/font>
在开发中Q当E序中有很多?font face="Times New Roman">MXML文g?/font>AS文gӞZ方便调用Q我们可以将功能cM的文件放在一个文件夹中，定义一个命名空_q样会节省很多时间。在自定义命名空间时Qؓ了方便，一般直接指定命名空间包括的标签路径。比如：
xmlnsQ?/font>myComp="components.*"
因ؓ使用了通配W?#8220;*”Q?/font>components目录下的所?/font>MXML文g?/font>ActionScriptcL?/font>(不包括目录和目录中的文g)都被包括?/font>myComp命名I间下。假?/font>components中有一?/font>LoginPanelmxml文gQ则在程序中调用者个文gӞ代码如下Q?/font>
<myCompQ?/font>LoginPanel></myCompQ?/font>LoginPanel>
myComp下的标签被自动指?/font>components中的文g?/font>
当标{数量较多且分布在不同文件夹Ӟ可以模仿Flex配置文g的做法，使用XML文g来描q标{路径。在后面的内容中Q我们会l常看到命名I间的用?/font>
Application标签中还有一个属?/font>layoutQ这个属性定义了Application节点下元素的布局方式。由?/font>Application是根节点Q因此他的布局方式军_了程序的M布局方式?#8220;absolute”表示军_定位Q所有子元素按照各自的x?/font>y坐标来定位?/font>
Application节点中有两个子节点，分别?/font>mx:Button?/font>mx:Label节点Q代表了两个lgQ节点中的属性定义了lg初始化后的一些状态，比如坐标、标C名、文字等{?/font>
说明Q由于在|上相关资源太少所以本文是按照《FlexW一步》编写，׃旉比较短所以第三章内容没有全部出来同时~写q程中有错别字，请大家担待。^_^
]]>