Flex精华摘要.docx
- 文档编号:10032277
- 上传时间:2023-02-08
- 格式:DOCX
- 页数:28
- 大小:26.32KB
Flex精华摘要.docx
《Flex精华摘要.docx》由会员分享,可在线阅读,更多相关《Flex精华摘要.docx(28页珍藏版)》请在冰豆网上搜索。
Flex精华摘要
你至少需要了解两种语言才能开发Flex应用程序:
MXML和ActionScript。
MXML是一种XML标记语言,主要用来设置Flex的用户界面,还包括一些不可见的元素,例如访问数据源、数据绑定等。
ActionScript是一种面向对象的编程语言,采用ECMAScript第4版的标准,用来完成程序逻辑和响应用户的交互。
和HTML的方式一样,MXML定义了相关的标记来表示不同的用户界面,区别的是比HTML更严格和有着更丰富的标记集。
例如,MXML既包含了一些可视组件如Tree、DataGrid、accordions和menu,也包含了WebSerivce连接、数据绑定、动画效果等不可视的组件。
你甚至可以通过定制自己的组件来扩展MXML标记。
MXML和HTML最大的区别之一是MXML页面会被服务器编译成SWF文件,并通过FlashPlayer播放,提供了更强和更丰富的动态用户界面。
你可以在一个或多个文件中编写MXML应用程序,MXML支持定义的组件,这些组件可以是MXML文件、AS文件或者使用FlashMX2004创建的文件。
在一些MXML标记中,可以包含对外部文件的引用。
例如,你可以通过 Script>标记的source属性来包含一个外部的AS脚本文件。 MXML支持多种方式的外部文件引用,如 1.//1. 使用绝对地址 2. Style source=‘ 3.//2. 使用◎ContextRoot 4. HTTPService url=‘@ContextRoot()/directory/myfile.xml‘/> 5.//3. 使用根目录引用方式 6. Script source=‘/myscript.as‘/> 7.//4. 使用相当路径引用 8. Script source=‘../myscript.as‘/> 最简单的Flex应用程序 很多编程语言的第一个例子都是编写Hello,World。 MXML的Hello,World! 程序也很简单 1. xml version=‘1.0‘? > 2. Application xmlns: mx=‘ > 3. Panel title=‘My Application‘ marginTop=‘10‘ marginBottom=‘10‘ 4.marginLeft=‘10‘ marginRight=‘10‘ > 5. Label text=‘Hello World! ‘ color=‘#6601D7‘ fontSize=‘24‘ /> 6. Panel> 7. Application> xmlversion=‘1.0‘? >是MXML的文件申明,必须写在文件的第一行 Application>是MXML文件的根标记 Label>就是MXML的组件标记之一,textcolorfontSize是Label组件的属性。 下面一个例子显示了更为复杂的用户界面 1. Application xmlns: mx=‘ 2. Panel title=‘My Application‘ marginTop=‘10‘ marginBottom=‘10‘ 3.marginLeft=‘10‘ marginRight=‘10‘ > 4. HBox> 5. -- List with three items --> 6. List> 7. dataProvider> 8. Array> 9. String>Item 1 String> 10. String>Item 2 String> 11. String>Item 3 String> 12. Array> 13. dataProvider> 14. List> 15. -- First pane of TabNavigator --> 16. TabNavigator borderStyle=‘solid‘> 17. VBox label=‘Pane1‘ width=‘300‘ height=‘150‘ > 18. TextArea text=‘Hello World‘ /> 19. Button label=‘Submit‘ /> 20. VBox> 21. -- Second pane of TabNavigator --> 22. VBox label=‘Pane2‘ width=‘300‘ height=‘150‘ > 23. -- Stock view goes here --> 24. VBox> 25. TabNavigator> 26. HBox> 27. Panel> 28. Application> 显示效果如下 在Flex应用程序中,也有事件的响应属性。 最简单如鼠标单击事件。 1. Application xmlns: mx=‘ 2. Panel title=‘My Application‘ marginTop=‘10‘ marginBottom=‘10‘ 3.marginLeft=‘10‘ marginRight=‘10‘ > 4. TextArea id=‘textarea1‘/> 5. Button label=‘Submit‘ click=‘textarea1.text=‘Hello World‘;‘/> 6. Panel> 7. Application> 单击Submit按钮后Textarea中显示内容为: ‘HelloWorld‘ 更加规范化的写法是使用脚本定义函数调用 1. Application xmlns: mx=‘ 2. Script> 3. [CDATA[ 4.function hello(){ 5.textarea1.text=‘Hello World‘; 6. } 7.]]> 8. Script> 9. Panel title=‘My Application‘ marginTop=‘10‘ marginBottom=‘10‘ 10.marginLeft=‘10‘ marginRight=‘10‘ > 11. TextArea id=‘textarea1‘/> 12. Button label=‘Submit‘ click=‘hello();‘/> 13. Panel> 14. Application> 如果希望多个组件之间可以绑定数据的话,在Flex中可以简单的实现,请注意,在属性中使用{}标记就表示其中包含的是表达式,而不是字符串。 下面的例子,如果textinput文本框的内容改变,textarea中的内容也会随之变化。 1. Application xmlns: mx=‘ 2. Panel title=‘My Application‘ marginTop=‘10‘ marginBottom=‘10‘ 3.marginLeft=‘10‘ marginRight=‘10‘ > 4. TextInput id=‘textinput1‘ text=‘Hello‘/> 5. TextArea id=‘textarea1‘ text=‘‘/> 6. Button label=‘Submit‘ click=‘textinput1.text=‘Goodbye‘;‘/> 7. Panel> 8. Application> Flex可以和本地或者是远程服务器端的逻辑进行交互,其方式可以通过如下方式之一: 1: WebService提供基于SOAP的web服务访问 2: HTTPService提供了基于HTTP访问和数据返回 3: RemoteObject基于AMF协议访问Java对象 存储和验证数据 你可以使用数据模型来存储特定数据,数据模型是一个可以提供存储数据属性和包含附加方法的AS对象。 申明一个简单的没有任何方法的数据模型可以使用 Model>或 XML>标记,你还可以使用验证组件验证存储数据的有效性。 Flex包含了一套标准的数据验证组件,当然你也可以创建自己的验证组件。 下面的例子显示了一个简单的数据验证。 1. Application xmlns: mx=‘ > 2. Panel title=‘My Application‘ marginTop=‘10‘ marginBottom=‘10‘ 3.marginLeft=‘10‘ marginRight=‘10‘ > 4. TextInput id=‘homePhoneInput‘ text=‘这不是一个有效的电话号码‘/> 5. TextInput id=‘cellPhoneInput‘ text=‘(999)999-999‘/> 6. TextInput id=‘emailInput‘ text=‘me@‘/> 7. Panel> 8. Model id=‘contact‘> 9. 10. 11. 12. Model> 13. PhoneNumberValidator field=‘contact.homePhone‘/> 14. PhoneNumberValidator field=‘contact.cellPhone‘/> 15. EmailValidator field=‘contact.email‘/> 16. Application> 运行效果如图 请注意其中使用了电话号码验证和Email验证组件 要使用验证组件,需要注意几个地方: 首先定义需要验证的字段,如 1. Model id=‘contact‘> 2. 3. 4. 5. Model> 然后使用验证组件验证相关字段,如 1. PhoneNumberValidator field=‘contact.cellPhone‘/> 2. EmailValidator field=‘contact.email‘/> 格式化数据 除了进行数据验证之外,格式化输入的数据也是经常需要用到的。 Flex一样包含了一套用于数据格式化的组件,下面的例子对邮编进行格式化处理: 1. Application xmlns: mx=‘ 2. ZipCodeFormatter id=‘ZipCodeDisplay‘ formatString=‘#####-####‘ /> 3. Script> 4. [CDATA[ 5.var storedZipCode=123456789; 6.]]> 7. Script> 8. Panel title=‘My Application‘ marginTop=‘10‘ marginBottom=‘10‘ marginLeft=‘10‘ marginRight=‘10‘ > 9. TextInput text=‘‘ /> 10. Panel> 11. Application> 常用的数据格式化还有对日期的格式化处理: 1: NumberFormatter数字格式化 2: CurrencyFormatter货币格式化 3: PhoneFormatter电话号码格式化 4: ZipCodeFormatter邮编格式化 5: DateFormatter日期格式化 6: SwitchSymbolFormatter创建自定义格式 使用样式表 还可以使用 Style>标记表来定义Flex组件的样式表。 1. Application xmlns: mx=‘ 2. Style> 3..myclass { color: Red } /* class selector */ 4.Button { font-size: 18pt } /* type selector */ 5. Style> 6. Panel title=‘My Application‘ marginTop=‘10‘ marginBottom=‘10‘ 7.marginLeft=‘10‘ marginRight=‘10‘ > 8. Button styleName=‘myclass‘ label=‘This is red 18 point text.‘/> 9. Panel> 10. Application> 注意该标记不能嵌套在除根标记外的标记中。 运行效果如图 使用效果 可以对组件使用过渡效果,效果往往是在事件触发后产生,如鼠标单击、组件失去焦点和组件消失等。 Flex专门提供了一套内置的效果组件。 下面看一个例子: 1. Application xmlns: mx=‘ 2. Panel title=‘My Application‘ marginTop=‘10‘ marginBottom=‘10‘ marginLeft=‘10‘ marginRight=‘10‘ > 3. Button id=‘myButton‘ mouseOverEffect=‘Zoom‘ /> 4. Panel> 5. Application> 使用MXML组件 可以使用MXML文件定义自己的组件或者定义已有组件的组合,并通过 自定义组件名/>的方式调用。 如 1. -- MyComboBox.mxml --> 2. VBox xmlns: mx=‘ 3. ComboBox > 4. dataProvider> 5. Array> 6. String>Dogs String> 7. String>Cats String> 8. String>Mice String> 9. Array> 10. dataProvider> 11. ComboBox> 12. VBox> 注意,MXML组件文件并不需要 Application>标记,更复杂的自定义组件可以使用JSP或其它语言动态生成。 调用自定义组件的应用程序文件格式如下: 1. -- MyApplication.mxml --> 2. Application xmlns: mx=‘ xmlns: local=‘*‘> 3. Panel title=‘My Application‘ marginTop=‘10‘ marginBottom=‘10‘ marginLeft=‘10‘ marginRight=‘10‘ > 4. -- 调用MyComboBox组件 --> 5. MyComboBox/> 6. Panel> 7. Application> 存储和验证数据 你可以使用数据模型来存储特定数据,数据模型是一个可以提供存储数据属性和包含附加方法的AS对象。 申明一个简单的没有任何方法的数据模型可以使用 Model>或 XML>标记,你还可以使用验证组件验证存储数据的有效性。 Flex包含了一套标准的数据验证组件,当然你也可以创建自己的验证组件。 下面的例子显示了一个简单的数据验证。 1. Application xmlns: mx=‘ > 2. Panel title=‘My Application‘ marginTop=‘10‘ marginBottom=‘10‘ 3.marginLeft=‘10‘ marginRight=‘10‘ > 4. TextInput id=‘homePhoneInput‘ text=‘这不是一个有效的电话号码‘/> 5. TextInput id=‘cellPhoneInput‘ text=‘(999)999-999‘/> 6. TextInput id=‘emailInput‘ text=‘me@‘/> 7. Panel> 8. Model id=‘contact‘> 9. 10. 11. 12. Model> 13. PhoneNumberValidator field=‘contact.homePhone‘/> 14. PhoneNumberValidator field=‘contact.cellPhone‘/> 15. EmailValidator field=‘contact.email‘/> 16. Application> 运行效果如图 请注意其中使用了电话号码验证和Email验证组件 要使用验证组件,需要注意几个地方: 首先定义需要验证的字段,如 1. Model id=‘contact‘> 2. 3. 4. 5. Model> 然后使用验证组件验证相关字段,如 1. PhoneNumberValidator field=‘contact.cellPhone‘/> 2. EmailValidator field=‘contact.email‘/> 格式化数据 除了进行数据验证之外,格式化输入的数据也是经常需要用到的。 Flex一样包含了一套用于数据格式化的组件,下面的例子对邮编进行格式化处理: 1. Application xmlns: mx=‘ 2. ZipCodeFormatter id=‘ZipCodeDisplay‘ formatString=‘#####-####‘ /> 3. Script> 4. [CDATA[ 5.var storedZipCode=123456789; 6.]]> 7. Script> 8. Panel title=‘My Application‘ marginTop=‘10‘ marginBottom=‘10‘ marginLeft=‘10‘ marginRight=‘10‘ > 9. TextInput text=‘‘ /> 10. Panel> 11. Application> 常用的数据格式化还有对日期的格式化处理: 1: NumberFormatter数字格式化 2: CurrencyFormatter货币格式化 3: PhoneFormatter电话号码格式化 4: ZipCodeFormatter邮编格式化 5: DateFormatter日期格式化 6: SwitchSymbolFormatter创建自定义格式 绝大多数MXML标识符合AS2.0规范,MXML文件编译产生的SWF文件包含相应的AS对象。 AS2.0是一种面向对象的语言,符合ECMAScript第4版规范。 MXML文件的命名规范: 1: 必须符合AS的命名规范,以字母或下划线开头; 2: 不得使用AS的类名、组件ID标识和命名空间的MXML标识作为文件名; 3: 文件名必须用小写的.mxml作为后缀名。 在MXML文件中,组件的属性使用和AS类相同的命名约定,以小写字母开头,每个单词的开头字母大写。 你可以有两种方式设置属性的值: 使用标记的属性或者子节点标记。 Macromedia推荐使用标记的属性来设置一般组件属性,
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Flex 精华 摘要
![提示](https://static.bdocx.com/images/bang_tan.gif)