Flex那些事儿--设置组件属性(一)
时间:2009-06-02 来源:bxl994
设置组件的属性
在MXML中,组件属性的命名与AcitonScript属性的命名是相同的。属性的名字以小写字母为开头,并且用大写字母来分隔名字中的单词。
你可以以标签属性的形式来设置组件的属性:
<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控件的数据集为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>
用子标签来设置属性有一个限制,就是,mx: ,这个子标签的命名空间的前缀,必须与组件标签的命名空间的前缀相匹配。
组件的属性为下列几种类型之一:
§ 标量属性,比如number或string
§ 标量值的数组,比如number或string 的数组
§ 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>
<!—用静态常量的值设置属性Set the property using the value of the static constant. -->
<mx:HBox width="200" horizontalScrollPolicy="off">
...
</mx:HBox>
HBox容器定义了一个名为horizontalScrollPolicy的属性,这个属性可控制容器的水平滚动条的操作。在这个例子中,很明确的设置了容器的水平滚动条为不可用。
在第一个例子中,通过使用ScrollPolicy类中的一个名为OFF的静态常量来设置horizontalScrollPolicy属性值。在MXML中,当设置一个属性值为静态常量时必须使用数据绑定语法。使用静态常量的好处是Flex编译器可以识别错误的属性值,并且在编译的时候显示出错误信息。
另外,你也可以使用静态常量的值来设置为horizontalScrollPolicy属性的值。OFF静态常量的值为”off”。当你用静态常量的值设置为属性的值的时候,Flex编译器无法决定你使用的是否是正确的值。如果你设置了属性为不正确的值,直到运行后报错你才会知道是设置了错误的值。
在ActionScript中,应该经常使用静态常量来设置属性的值,如下例所示:
var myHBox:HBox = new HBox();
myHBox.horizontalScrollPolicy=ScrollPolicy.OFF;
设置默认属性
部分Flex组件会定义单一的默认属性。默认属性是MXML的标签属性,如果你没有明确的定义的话,那么属性就会隐藏在MXML标签的内容中。例如,参考下面的例子中MXML标签的定义:
<mx:SomeTag>
anything here
</mx:SomeTag>
如果这个标签定义了一个名为default_property的默认属性,那么之前定义的标签就与下面的代码相等:
<mx:SomeTag>
<default_property>
anything here
</default_property>
</mx:SomeTag>
它也与下面的代码相等:
<mx:SomeTag default_property="anything here"/>
默认属性对于设置单一属性提供了速写原理。对于ComboBox来说,默认属性是dataProvider属性。因此,下面的代码中两个ComboBox的定义是相等的:
<?xml version="1.0"?>
<!-- mxml\DefProp.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<!—省略默认属性. -->
<mx:ComboBox>
<mx:ArrayCollection>
<mx:String>AK</mx:String>
<mx:String>AL</mx:String>
<mx:String>AR</mx:String>
</mx:ArrayCollection>
</mx:ComboBox>
<!—明确声明默认属性. -->
<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>
</mx:Application>
不是所有的Flex组件都有默认属性。
当在MXML中设置属性值的时候,你可以通过在前缀加反斜线字符(\)来转义保留字,就像下面的例子显示的一样:
<?xml version="1.0"?>
<!-- mxml\EscapeChar.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Label text="\{\}"/>
</mx:Application>
在这个例子中,我们显示大括号({})在文本字符串中。但是在Flex中已经使用了大括号作为数据绑定操作符。因此,需要在每个大括号前加反斜线来让MXML编译器把它们解释为文本字母。
The MXML compiler automatically escapes the backslash character in MXML when the character is part of the value specified for a property of type String. Therefore, it always converts "\" to "\\".
在MXML中,当反斜线字符是字符串文本的一部分的时候,MXML编译器会自动转义反斜线字符。因此,经常转换”\”为”\\”。
由于AS编译器会将”\\”识别为”\”的字符队列,因此当初始化属性值的时候提出掉开头的反斜线字符还是很有必要的。
注意:不要使用反斜线字符(\)作为应用程序资源的路径分隔符。你应该使用斜线字符(/)作为分隔符。
在字符串中插入换行符有两种方式:
§ 在MXML中将 代码插入到String值中去
§ 通过将”\n”插入到ActionScript的String变量中可用来初始化MXML属性。
下面这个例子展示的是使用 代码插入到MXML的属性值中用来实现换行符。
<mx:TextArea width="100%" text="Display Content"/>
要在ActionScript中的String变量中插入换行符,创建一个ActionScript变量,然后使用数据绑定来设置MXML属性,如下例所示:
<mx:Script>
<![CDATA[
[Bindable]
public var myText:String = "Display" + "\n" + "Content";
]]>
</mx:Script>
<mx:TextArea width="100%" text="{myText}"/>
在这个例子中,将TextArea控件的text属性与包含有换行符的变量值绑定在一起。
注意在这个例子中,属性定义的前面有个[Bindable]元数据标签。这个元数据标签声明了myText属性可以用来数据绑定表达式中的源数据。当源属性改变值的时候,数据绑定机制会在运行时自动拷贝对象的源数据值到另外一个对象的目标属性上。
当类的一个属性要将数组作为它的值的时候,你可以在MXML中使用子标签来指定属性。在下面的例子中,组件有一个包含了number数组的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会自动将三个number定义转换为数组的三个元素。
组件开发者需要指定组件中数组元素的数据类型的信息。例如,在上面的例子中,如果开发人员指定了dataProvider属性仅仅支持String类型,那么编译器就会报错因为传入了number类型。
当组件的一个属性要将object作为它的值的时候,可以在MXML中使用子标签属性来指定。如下例所示:
<mynamespace:MyComponent>
<mynamespace:nameOfProperty>
<mynamespace:typeOfObject prop1="val1" prop2="val2"/>
</mynamespace:nameOfProperty>
</mynamespace:MyComponent>
下面的例子显示的是一个定义了Address对象的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;
}
下面的例子显示的而是一个包含了Address属性的PurchaseOrder类:
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
}
在下面的例子中展示了如何指定一个object类来作为value属性的值。
<mynamespace:ObjectHolder>
<mynamespace:value>
<mx:Object foo='bar'/>
</mynamespace:value>
</mynamespace:ObjectHolder>