关闭

Flex精华摘要 2:基本MXML功能

标签: flexapplicationstringemailbutton存储
2556人阅读 评论(0) 收藏 举报
分类:

存储和验证数据
你可以使用数据模型来存储特定数据,数据模型是一个可以提供存储数据属性和包含附加方法的AS对象。申明一个简单的没有任何方法的数据模型可以使用<mx:Model> <mx:XML>标记,你还可以使用验证组件验证存储数据的有效性。Flex包含了一套标准的数据验证组件,当然你也可以创建自己的验证组件。
下面的例子显示了一个简单的数据验证。

 

1. <mx:Application xmlns:mx='http://www.macromedia.com/2003/mxml' >
 

2. <mx:Panel title='My Application' marginTop='10' marginBottom='10'
 

3. marginLeft='10' marginRight='10' >
 

4. <mx:TextInput id='homePhoneInput' text='这不是一个有效的电话号码'/>
 

5. <mx:TextInput id='cellPhoneInput' text='(999)999-999'/>
 

6. <mx:TextInput id='emailInput' text='me@somewhere.net'/>
 

7. </mx:Panel>
 

8. <mx:Model id='contact'>
 

9. <homePhone>{ homePhoneInput.text }</homePhone>

10.  <cellPhone>{ cellPhoneInput.text }</cellPhone>

11.  <email>{ emailInput.text }</email>

12.  </mx:Model>

13.  <mx:PhoneNumberValidator field='contact.homePhone'/>

14.  <mx:PhoneNumberValidator field='contact.cellPhone'/>

15.  <mx:EmailValidator field='contact.email'/>

16.  </mx:Application>

 


运行效果如图

请注意其中使用了电话号码验证和Email验证组件
要使用验证组件,需要注意几个地方:
首先定义需要验证的字段,如

<mx:Model id='contact'>

 

2. <homePhone>{ homePhoneInput.text }</homePhone>

3. <cellPhone>{ cellPhoneInput.text }</cellPhone>

4. <email>{ emailInput.text }</email>

5. </mx:Model>

1.


然后使用验证组件验证相关字段,如

<mx:PhoneNumberValidator field='contact.cellPhone'/>

 

2. <mx:EmailValidator field='contact.email'/>

1.



格式化数据
除了进行数据验证之外,格式化输入的数据也是经常需要用到的。Flex一样包含了一套用于数据格式化的组件,下面的例子对邮编进行格式化处理:

 

1. <mx:Application xmlns:mx='http://www.macromedia.com/2003/mxml'>
 

2. <mx:ZipCodeFormatter id='ZipCodeDisplay' formatString='#####-####' />
 

3. <mx:Script>
 

4. <![CDATA[
 

5. var storedZipCode=123456789;
 

6. ]]>
 

7. </mx:Script>
 

8. <mx:Panel title='My Application' marginTop='10' marginBottom='10' marginLeft='10' marginRight='10' >
 

9. <mx:TextInput text='' />

10.  </mx:Panel>

11.  </mx:Application>

 


常用的数据格式化还有对日期的格式化处理:

: NumberFormatter 数字格式化
2 : CurrencyFormatter 货币格式化
3 : PhoneFormatter 电话号码格式化
4 : ZipCodeFormatter 邮编格式化
5 : DateFormatter 日期格式化
6 : SwitchSymbolFormatter 创建自定义格式

 

1



使用样式表
还可以使用<mx:Style>标记表来定义Flex组件的样式表。

 

1. <mx:Application xmlns:mx='http://www.macromedia.com/2003/mxml'>
 

2. <mx:Style>
 

3. .myclass {  color: Red  } /* class selector */
 

4. Button {  font-size: 18pt } /* type selector */
 

5. </mx:Style>
 

6. <mx:Panel title='My Application' marginTop='10' marginBottom='10'
 

7. marginLeft='10' marginRight='10' >
 

8. <mx:Button styleName='myclass' label='This is red 18 point text.'/>
 

9. </mx:Panel>

10.  </mx:Application>

 

注意该标记不能嵌套在除根标记外的标记中。
运行效果如图


使用效果
可以对组件使用过渡效果,效果往往是在事件触发后产生,如鼠标单击、组件失去焦点和组件消失等。Flex专门提供了一套内置的效果组件。下面看一个例子:

<mx:Application xmlns:mx='http://www.macromedia.com/2003/mxml'>

 

2. <mx:Panel title='My Application' marginTop='10' marginBottom='10' marginLeft='10' marginRight='10' >

3. <mx:Button id='myButton' mouseOverEffect='Zoom' />

4. </mx:Panel>

5. </mx:Application>

1.



使用MXML组件
可以使用MXML文件定义自己的组件或者定义已有组件的组合,并通过<local:自定义组件名/>的方式调用。

 

1. <!-- MyComboBox.mxml -->
 

2. <mx:VBox xmlns:mx='http://www.macromedia.com/2003/mxml'>
 

3. <mx:ComboBox >
 

4. <mx:dataProvider>
 

5. <mx:Array>
 

6. <mx:String>Dogs</mx:String>
 

7. <mx:String>Cats</mx:String>
 

8. <mx:String>Mice</mx:String>
 

9. </mx:Array>

10.  </mx:dataProvider>

11.  </mx:ComboBox>

12.  </mx:VBox>

 


注意,MXML组件文件并不需要<mx:Application>标记,更复杂的自定义组件可以使用JSP或其它语言动态生成。
调用自定义组件的应用程序文件格式如下:

<!-- MyApplication.mxml -->

 

2. <mx:Application xmlns:mx='http://www.macromedia.com/2003/mxml' xmlns:local='*'>

3. <mx:Panel title='My Application' marginTop='10' marginBottom='10' marginLeft='10' marginRight='10' >

4. <!-- 调用MyComboBox组件 -->

5. <local:MyComboBox/>

6. </mx:Panel>

7. </mx:Application>

1.

 

0
0
查看评论

Flex精华摘要--基本MXML功能

存储和验证数据你可以使用数据模型来存储特定数据,数据模型是一个可以提供存储数据属性和包含附加方法的AS对象。申明一个简单的没有任何方法的数据模型可以使用 或 标记,你还可以使用验证组件验证存储数据的有效性。Flex包含了一套标准的数据验证组件,当然你也可以创建自己的验证组件。下面的例子显示了一个简单...
  • terryzero
  • terryzero
  • 2009-08-10 19:41
  • 666

Flex 之几个常用MXML标签

mx:Binding: 可以使用 标签将某个对象的数据绑定到另一个对象。在使用 标签时,需要提供源属性和目标属性。可以使用 标签将视图或用户界面与模型完全分离。通过 标签还可将不同的源属性绑定到同一目标属性。 MXML 语法 标签的语法如下: <m
  • mhl29
  • mhl29
  • 2011-09-29 15:31
  • 4278

Flex中视图(mxml)和代码(as)的完全分离

用类似 js 脚本的方法,可以在两个文件之间相互调用,非常方便。而它的本质其实是 在编译的时候,把两个文件的代码合并在一起,就像本文开头未分离时一样。这些代码 最终是定义在同一个类里面的,只是在我们写代码的时候人为的分离出来,方便管理而已。
  • cceevv
  • cceevv
  • 2015-06-14 15:55
  • 2021

Flex学习 ActionScript & mxml

刚刚接触Flex。 先谈谈Flex的什么什么 动手写过的只有两种文件: .mxml文件和.as文件。 接触到的代码也只有两种: 带 Flex应用中最终将会生成一个个.swf文件。我们通过浏览器浏览到的某个.html页面,其实真正运行的是那个.swf文件。而这个.swf文件是用Ac...
  • linghao00
  • linghao00
  • 2012-10-10 09:10
  • 1381

Flex 开发:MXML 学习

你可以使用两种语言来开发Flex 程序:MXML 和 ActionScript。MXML是一种xml标记语言,你可以用它来设计用户界面。(You also use MXML to declaratively define nonvisual aspects of an application不知道如...
  • moon66sun
  • moon66sun
  • 2014-04-17 10:01
  • 788

flex---->MXML语法

1. MXML语法 MXML语言是专门用于Flex程序中,描述界面表现的一中XML标记语言。我们可以用它来管理程序的整体布局,控制组件的样式和外观,也可以构建非可视化的对象,比如XML数据、与服务器端通信的WebService、组件的数据源等。 1.1 命名规范 MXML区分大小写,且文件名和...
  • ncepustrong
  • ncepustrong
  • 2012-08-27 16:05
  • 1591

flex mxml调用as文件

myFunctions.as文件 public function textMerge(input1:String, input2:String):String{ var res:String = input1 + input2; return res; } mxml文件 <s:Ap...
  • u014470581
  • u014470581
  • 2016-04-24 19:32
  • 1024

FLEX MXML字体大小设置

因为myeclipse的bug问题,一时竟然没有找到能修改的地方,其实很简单,步骤如下:myeclipse-->window-->Preference-->General-->Appearence-->Colors and Fonts-->Basic-->T...
  • Arthur0088
  • Arthur0088
  • 2010-01-29 16:40
  • 1937

flex的mxml 文件在eclipse下不能自动编译的问题

今天将自己的程序从cvs服务器上down下来,发现好多mxml文件不能编译了。但是在上传之前的时候mxml这些文件是可以编译的。当时,我以为是eclipse的bug,没有深究,但是总不是个办法,需要解决一下。于是乎,我就发现,问题不是我想的那么简单,这也不是eclipse的bug,而是我没有深入的了...
  • kenchow126
  • kenchow126
  • 2012-09-11 13:34
  • 5762

Flex中的mxml类实现(继承)接口的方法

可以把mxml文件看作一个类,这个类可以实现某一接口,可以继承某一类 示例1,mxml实现接口。在这里示例中,A包含在B中,A是B的一个控件,同时,在设计的时候,让A保存B的一个引用,这样的话,就可在A中调用B的方法等操作 接口文件: /* Modularity - A PureMVC...
  • chenscmail
  • chenscmail
  • 2013-04-03 10:36
  • 3039
    个人资料
    • 访问:1098830次
    • 积分:14303
    • 等级:
    • 排名:第1025名
    • 原创:305篇
    • 转载:28篇
    • 译文:0篇
    • 评论:592条
    最新评论
    [╄ 冷枫]简介