`
yao_2110
  • 浏览: 23786 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

看flex3开发手册心得(二)——mxml语法

    博客分类:
  • flex
阅读更多

命名mxml文件

mxml文件名必须符合以下的命名规则:

•文件名必须是一个actionscript的标识符,也就是说必须以字母或者下划线开头,后面接字母,数字,下划线。

•文件名不能和actionscript类名,组件的id值,或者应用的名称相同。不要使用与mx命名空间下的mxml标签名称相同的文件名。
•文件名必须要以小写的.mxml为扩展名。

一个mxml标签与其对应的actionscript类使用相同的命名规则。类名以大写字母开头,使用大写字母分割每一个单词。当一个标签与一个actionscript类对应,标签的属性就和这个类的属性和事件相对应。
设置组件的属性

在一个mxml中,你可以这样设置大部分组件的属性:

<mx:Label width="50" height="25" text="Hello World"/>

 

你可以用子标签设置组建的属性:

<mx:Label>
<mx:width>50</mx:width>
<mx:height>25</mx:height>
<mx:text>Hello World</mx:text>
</mx:Label>

 

建议在设置一个复合对象的属性的时候使用子标签,因为很难指定一个复合对象作为某个标签的属性。在下面的例子中,使用子标签来设置一个combobox控件的data provider为一个ArrayCollection对象。

<mx:ComboBox>
<mx:dataProvider>
<mx:ArrayCollection>
<mx:String>AK</mx:String>
<mx:String>AL</mx:String>
<mx:String>AR</mx:String>
</mx:ArrayCollection>
<mx:dataProvider>
</mx:ComboBox>

 

使用子标签的唯一限制就是子标签的命名空间的前缀需要和所属组件的命名空间前缀保持一致。

组件的属性是以下这些类型的一种:

•标量属性,如number,string

•标量值的数组,如number的数组,string的数组

•actionscript对象
•actionscript对象的数组

•ActionScript的属性
•XML

adobe推荐使用标量类型作为标签的属性,因为一旦使用复合对象做标签值,如actionscript对象,将会使用到子标签。

设置标量属性
<mx:Label width="50" height="25" text="Hello World"/>

使用常量来设置属性

许多组件的有效的属性值被定义为静态常量,这些静态常量被定义在actionscript类中。在mxml中,你既可以使用静态常量来设置属性的值,也可以使用静态常量的值来设置属性的值。就象下面这个例子:

<!-- 使用静态常量来设置属性的值. -->
<mx:HBox width="200" horizontalScrollPolicy="{ScrollPolicy.OFF}">
...
</mx:HBox>
<!-- 使用静态常量的值来设置属性的值. -->
<mx:HBox width="200" horizontalScrollPolicy="off">
...
</mx:HBox>

 

HBox容器定义了一个horizontalScrollPolicy 的属性,这个属性定义了容器水平滚动条的操作类型。在这个例子中,指定这个horizontalScrollPolicy为off,禁用了水平滚动条。

在第一个例子中,使用一个名为OFF的静态常量来设置horizontalScrollPolicy属性。这个属性定义在ScrollPolicy类中。在mxml中,需要使用数据绑定的语法来设置这个属性的值。(就是那个{}).这样做的好处是flex编译器可以识别不正确的属性值,并且在变异时报错。
此外,你可以用这个静态常量的值来设置horizontalScrollPolicy 属性值。OFF的值是“off”。当使用静态常量的值来设置属性值,此时flex编译器不能确定你是不是使用了这个属性不支持的值。如果不正确的设置了这个属性,你只有到代码运行到这里的时候,你才会得到一个运行时错误。

在actionscript中,应该总是使用静态常量来设置属性值,就象下面这个例子:

var myHBox:HBox = new HBox();
myHBox.horizontalScrollPolicy=ScrollPolicy.OFF;

 

在设置属性的时候可以使用\对字符进行转义

如,

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Label text="\{\}"/>
</mx:Application>

 

将label的text设置为{}.

mxml编译器自动将mxml文件中作为某个字符串类型的属性的"\"替换为'\\'.

在字符串中使用换行符

在字符串类型的属性中插入一个换行符有两种方法:

•在mxml文件中使用&#13;来替换换行符。

•在一个actionscript变量中使用"\n"来替代换行符,在用这个变量来初始化mxml的属性。
使用&#13;编码来插入换行符

<mx:TextArea width="100%" text="Display&#13;Content"/>
使用"\n"来替代换行符,在用这个变量来初始化mxml的属性,

<mx:Script>

<![CDATA[
[Bindable]
public var myText:String = "Display" + "\n" + "Content";
]]>
</mx:Script>

<mx:TextArea width="100%" text="{myText}"/>

 

注意,在这个例子中在属性定义以前,包含了[Bindable]这个元数据标签,这个元数据标签指定了mytext属性可以用来作为数据绑定的表达式。在运行时,当数据源属性发生变化的时候,数据绑定会自动的copy一个对象的属性源的值,放入目标对象的属性。

如果你指定了这个元数据标签,但是这个属性实际上并没有在数据绑定中使用,在编译时,编译器就会给你一个警告信息。

设置一个标量数组的值

当一个类的一个属性是一个数组的时候,你可以使用子标签来设置这个属性。在下面这个例子中,组件有一个dataprovider属性需要一个数组类型的值:

<mx:List width="150">
<mx:dataProvider>
<mx:Array>
<mx:Number>94062</mx:Number>
<mx:Number>14850</mx:Number>
<mx:Number>53402</mx:Number>
</mx:Array>
</mx:dataProvider>
</mx:List>

 

包裹着数组元素的<mx:Array> 和</mx:Array>标签是可选的。因此,你也可以这样写:

<mx:List width="150">
<mx:dataProvider>
<mx:Number>94062</mx:Number>
<mx:Number>14850</mx:Number>
<mx:Number>53402</mx:Number>
</mx:dataProvider>
</mx:List>

 

在这个例子中,dataprovider属性的类型是一个数组,flex会自动的转换3个nubmer为一个含有三个元素的数组。

组件的开发者在定义这个组件的属性为数组的时候还需要添加一些说明信息,在上面的例子中,因为我们指定的是一个number的数组,如果一个开发者指定dataprovider属性只能是string类型的元素,这个例子将会引起一个编译错误。

如果你想定义一个只有一个元素数组,那么<mx:Array> 和</mx:Array>就不能省略:

<mynamespace:MyComponent>
<mynamespace:nameOfObjectProperty>
<mx:Array>
<mx:Number>94062</mx:Number>
</mx:Array>
</mynamespace:nameOfObjectProperty>
</mynamespace:MyComponent>

设置对象的属性

当一个组件的属性的值的类型是某一个对象的时候,可以使用子标签去表示这个属性,就象下面这个例子:

<mynamespace:MyComponent>
<mynamespace:nameOfProperty>
<mynamespace:typeOfObject prop1="val1" prop2="val2"/>
</mynamespace:nameOfProperty>
</mynamespace:MyComponent>

 在下面这个例子中,我们用actionscript定义了一个address对象的类。PurchaseOrder组件将使用这个类作为它的一个属性

class Address
{
public var name:String;
public var street:String;
public var city:String;
public var state:String;
public var zip:Number;
}
import example.Address;
class PurchaseOrder {
public var shippingAddress:Address;
public var quantity:Number;
...
}

 在mxml中,需要这样定义PurchaseOrder组件:

<mynamespace:PurchaseOrder quantity="3" xmlns:e="example">
<mynamespace:shippingAddress>
<mynamespace:Address name="Fred" street="123 Elm St."/>
</mynamespace:shippingAddress>
</mynamespace:PurchaseOrder>

如果shippingAddress属性的类型是Address的子类(比如DomesticAddress),可以象下面这个例子一样,去声明属性值:

<mynamespace:PurchaseOrder quantity="3" xmlns:e="example">
   <mynamespace:shippingAddress>
       <mynamespace:DomesticAddress name="Fred" street="123 Elm St."/>
   </mynamespace:shippingAddress>
</mynamespace:PurchaseOrder>

如果对象的属性是object类型的,你还可以使用<mx:Object>标签指定一个匿名的对象:

class ObjectHolder {
public var value:Object
}
<mynamespace:ObjectHolder>
<mynamespace:value>
<mx:Object foo='bar'/>
</mynamespace:value>
</mynamespace:ObjectHolder>

 设置对象数组类型的属性

当一个组件的属性的类型是一个对象的数组,应该在mxml中这样设置这个属性:

<mynamespace:MyComponent>
<mynamespace:nameOfProperty>
<mx:Array>
<mynamespace:objectType prop1="val1" prop2="val2"/>
<mynamespace:objectType prop1="val1" prop2="val2"/>
<mynamespace:objectType prop1="val1" prop2="val2"/>
</mx:Array>
</mynamespace:nameOfProperty>
</mynamespace:MyComponent>

 在下面这个例子中,属性的类型是一个ListItem 对象的数组,每一个ListItem对象有label和data两个属性。

<mynamespace:MyComponent>
<mynamespace:dataProvider>
<mx:Array>
<mynamespace:ListItem label="One" data="1"/>
<mynamespace:ListItem label="Two" data="2"/>
</mx:Array>
</mynamespace:dataProvider>
</mynamespace:MyComponent>

 你还可以指定一个匿名对象:

<mynamespace:MyComponent>
<mynamespace:dataProvider>
<mx:Array>
<mx:Object label="One" data="1"/>
<mx:Object label="Two" data="2"/>
</mx:Array>
</mynamespace:dataProvider>
</mynamespace:MyComponent>

 在这里<mx:Array>和</mx:Array>也是可以选的:

<mynamespace:MyComponent>
<mynamespace:dataProvider>
<mx:Object label="One" data="1"/>
<mx:Object label="Two" data="2"/>
</mynamespace:dataProvider>
</mynamespace:MyComponent>

设置包含xml数据的属性

如果一个组件的属性的类型是一个xml数据,或者是一个xml文档的片段,可以这样设置这个属性:

<mynamespace:MyComponent>
<mynamespace:value xmlns:a="http://www.example.com/myschema">
<mx:XML>
<a:purchaseorder>
<a:billingaddress>
...
</a:billingaddress>
...
</a:purchaseorder>
</mx:XML>
</mynamespace:value>
</mynamespace:MyComponent>

 在MyComponent 对象中,value属性的类型是一个xml类型的。
在mxml中设置风格和效果的属性

在mxml标签中,一个风格或效果的属性不同于其他的属性,因为一个风格或效果的属性与一个actionscript的风格或效果对应,而不是同一个actionscript类的属性对应。在actionscript中,你可以使用setStyle(stylename, value)方法来设置风格的属性,而不是使用object.property=value 这样的格式来设置。在actionscript中,你可以使用[Style]或者[Effect]元数据标签来定义一个风格或者效果的属性,而不是当风格或效果的属性是一个actionscript变量,使用setter/getter方法去定义。可以象下面这个例子一样,在mxml中去设置fontFamily风格的属性:

<mx:TextArea id="myText" text="hello world" fontFamily="Tahoma"/>

 这段mxml代码等价于这段actionscript代码:

myText.setStyle("fontFamily", "Tahoma");

在mxml中设置事件的属性

可以通过设置一个mxml标签的事件属性来指定一个事件的事件监听器,设置这个属性就相当于在actionscript代码中使用addEventListener() 方法去设置一个事件监听器。你可以使用[Event]元数据标签在actionScript类中定义一个事件属性,而不是把事件属性当作一个变量使用setter/getter方法去定义事件。在mxml中,可以这样设置creationComplete 事件属性:

<mx:TextArea id="myText" creationComplete="creationCompleteHandler()"/>

 与这段mxml代码等价的actionscript代码是:

myText.addEventListener("creationComplete", creationCompleteHandler);

 指定一个url值

有些mxml标签需要一个url或者外部文件作为这个标签的一个属性值,如<mx:Script>。可以使用<mx:Script>标签的source属性来引用一个外部文件,或者在<mx:Script>标签体里面直接书写actionscript代码。

注意:在使用source属性引用外部文件的时候,这个外部文件中,不能有类的声明在里面,只能是一段面向过程的代码。
mxml支持下面这几种url格式:
•绝对的url,

<mx:Style source="http://www.somesite.com/mystyles.css">

•一个运行时相对于java web应用的上下文根的路径,

<mx:HTTPService url="@ContextRoot()/directory/myfile.xml"/>

•一个在编译时相对于java web应用的上下文根的路径,

<mx:Script source="/myscript.as"/>

 •相对于当前文件位置的路径,

<mx:Script source="../myscript.as"/>

指定一个正则表达式的值

在mxml中可以这样指定一个属性类型为regexp(正则表达式)类型的值:
"/pattern/flags"

在'/'之中的pattern 指定了这个正则表达式,两个'/'都是必须的。flags (可选的)指定了这个正则表达式的一些标志。
例如,一个mxml组件的regExpression属性是一个正则表达式类型,你可以这样设置它的值:

<mynamespace:MyComponent regExpression="/\Wcat/gi"/>

还可以使用子标签来设置: 

<mynamespace:MyComponent>
<mynamespace:regExpression>/\Wcat/gi</mynamespace:regExpression>
</mynamespace:MyComponent>

 正则表达式中的flags部分是可选的,所以你也可以这样设置:

<mynamespace:MyComponent regExpression="/\Wcat/"/>

使用编译器标签 

不直接与actionscript对象或对象的属性对应的标签就是编译器标签,以首字母大写开头的编译器标签有:
•<mx:Binding>
•<mx:Component>
•<mx:Metadata>
•<mx:Model>
•<mx:Script>
•<mx:Style>
•<mx:XML>
•<mx:XMLList>

全部字母小写的编译器标签有:
•<mx:operation>
•<mx:request>
•<mx:method>
•<mx:arguments>

mxml标签的规则

mxml有以下语法要求:
•id属性在任何标签中都不是必须要设置的。

•在根标签上不允许设置id属性。

•Boolean类型的属性只能接受true和false为合法的值。

•<mx:Binding>标签同时需要设置source和destination属性。

•<mx:Binding>不能设置id属性。

•<mx:WebService>标签需要设置wsdl属性或者的destination属性,但不能两个属性都设置。

•<mx:RemoteObject>标签需要设置source 属性或者的named 属性,但不能两个属性都设置。

•<mx:HTTPService>标签需要设置url 属性或者的destination 属性,但不能两个属性都设置。

•<mx:operation>标签需要一个name属性,而且不允许一个name对应多个对象。

•<mx:operation>标签不能设置id属性。

•<mx:method>标签需要一个name属性,而且不允许一个name对应多个对象。

•<mx:method>标签不能设置id属性。

分享到:
评论
2 楼 Sev7en_jun 2011-11-22  
lz我有个问题想请教你
比如说 从java哪里获取了一个List对象,那么怎么用下面红色部分标签显示(我已经获取到了List)
<mx:DataGrid>
  <mx:dataProvider>
    <mx:ArrayCollection id="list" list="{userColls}">
     </mx:ArrayCollection>
   </mx:dataProvider>
</mx:DataGrid>

不使用下面这种方式,就只使用上面那种怎么可以实现?
<mx:DataGrid id="list" dataProvider="{userColls}">
1 楼 stonehee 2009-01-10  
不错,学习了

相关推荐

    flex中的mxml语法

    pdf格式的flex的mxml语法,适合想学习flex的新手

    flex-MXML语法

    flex -MXML语法,介绍flex 的 mxml的基本语法构成,适合一般学习者使用

    MXML语法关于flexview

    【MXML语法详解及其在FlexView中的应用】 MXML(Markup for the MX User Interface)是一种基于XML的标记语言,主要用于Flex应用程序中构建用户界面。它允许开发者以声明式的方式描述UI组件、布局、样式和数据绑定...

    flex入门教程,主要介绍了mxml和ActionScript的简单应用

    Flex是Adobe公司开发的一种用于构建富互联网应用程序(RIA)的技术框架,它主要基于ActionScript和MXML两种语言。本教程是针对Flex初学者设计的,旨在帮助他们理解并掌握Flex的基础知识,包括MXML和ActionScript的...

    FLEX3完全参考手册

    《FLEX3完全参考手册》是一本专门为自学者设计的全面教程,旨在帮助读者深入理解和掌握Adobe Flex 3这一强大的富互联网应用程序(RIA)开发框架。Flex 3是Adobe AIR平台的一部分,允许开发者构建功能丰富的、交互性...

    Flex 3开发指南

    ### Flex 3 开发指南知识点概述 #### 一、Flex 3 概念与特性 - **Flex**:由Adobe Systems开发的一种开源框架,用于构建跨浏览器和跨平台的RIA(Rich Internet Applications)应用程序。 - **Flex 3**:Flex 3作为...

    Flex中文参考手册

    Flex中文参考手册是一份极其宝贵的资源,尤其对于那些致力于 Rich Internet Application(RIA)开发的IT专业人士而言。Flex是由Adobe公司推出的用于构建富交互式应用程序的开源框架,它基于ActionScript编程语言和...

    flex完全自学手册

    - 《Flex完全自学手册》这本书可能涵盖了Flex的基础知识、组件使用、数据绑定、网络通信、动画效果、AIR应用开发等内容,是学习Flex的全面指南。 - 光盘内容可能包含书中示例代码、额外的练习项目和可能的Flex SDK...

    flex完全自学手册-电子教程

    1. **Flex基础**:Flex的基础知识包括了Flex SDK的介绍、Flex Builder(现在称为Flash Builder)的使用以及AS3(ActionScript 3.0)编程语言的基本语法。AS3是Flex的主要编程语言,它提供了面向对象的特性,如类、...

    flex 3 基本操作帮助手册

    这份“Flex 3 基本操作帮助手册”是初学者入门Flex开发的重要参考资料,包含了丰富的实例和详细的操作指南。 第一章:Flex 3基础 在这一章节中,你会学习到Flex 3的基础概念,包括Flex SDK的安装与配置,以及如何...

    Flex完全自学手册24 Flex完全自学手册24

    学习者应熟悉AS3的基本语法、类库和面向对象编程原则,以便更好地利用Flex SDK编写高效的应用程序。 移动开发也是Flex的一个重要方向,Flex可以利用Adobe AIR框架开发跨平台的桌面和移动应用。通过AIR,开发者可以...

    Flex第一步——基于ActionScript 3

    本篇内容将深入探讨“Flex第一步——基于ActionScript 3”,这对于初学者来说是一份极具价值的学习资料。 首先,我们需要了解ActionScript 3。ActionScript是Flash平台的核心语言,而ActionScript 3是其最新版本,...

    flex中文帮助手册大全

    Flex是Adobe公司开发的一种用于创建富互联网应用程序(RIA)的框架,主要基于ActionScript和MXML。本资源“Flex中文帮助手册大全”是一份全面的文档集合,旨在为开发者提供在使用Flex进行软件开发时所需的指导和参考...

    as3 flex mxml调用.as文件例子

    Flex是Adobe开发的一个开源框架,用于构建富互联网应用程序(RIA),它结合了MXML和AS3,提供了声明式和编程式的开发方式。 首先,让我们理解MXML和AS3的关系。MXML是一种标记语言,主要用于描述用户界面布局和组件...

    Flex完全自学手册

    3. **Flex SDK**:Flex软件开发工具包包含了编译Flex应用所需的所有工具,包括Flex Builder(集成开发环境IDE)、编译器和Flex框架库。理解如何安装和使用Flex SDK是学习Flex的第一步。 4. **Flex Component ...

    至理.精通Flex网络开发技术——源代码

    精通Flex网络开发技术》,初学者能够全面了解Flex的开发环境,掌握MXML和ActionScript编程,学习如何与JavaScript和AJAX协同工作,以及创建和发布桌面应用。这为他们进入富互联网应用开发领域打下了坚实的基础。

    Flex开发环境配置手册

    Flex开发环境配置涉及两个主要的开发工具,即Micromedia Flex Builder 1.5和FlexBuilder 2.0作为Eclipse插件。配置过程主要包括安装、新建Flex站点、站点配置、复制核心文件以及测试环境。 首先,安装Micromedia ...

    flex3语言参考手册

    通过深入阅读Flex3语言参考手册,你将能够熟练掌握Flex3开发所需的所有核心概念和技术,从而构建出功能丰富、用户体验优秀的RIA应用。这份文档不仅适合初学者入门,也是经验丰富的开发者的重要参考资料。

Global site tag (gtag.js) - Google Analytics