扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条
你至少需要了解两种语言才能开发Flex应用程序：MXML和ActionScript。MXML是一种XML标记语言，主要用来设置Flex的用户界面，还包括一些不可见的元素，例如访问数据源、数据绑定等。ActionScript是一种面向对象的编程语言，采用ECMAScript第4版的标准，用来完成程序逻辑和响应用户的交互。
和HTML的方式一样，MXML定义了相关的标记来表示不同的用户界面，区别的是比HTML更严格和有着更丰富的标记集。例如，MXML既包含了一些可视组件如Tree、Data Grid、accordions和menu，也包含了WebSerivce连接、数据绑定、动画效果等不可视的组件。你甚至可以通过定制自己的组件来扩展MXML标记。
MXML和HTML最大的区别之一是MXML页面会被服务器编译成SWF文件，并通过FlashPlayer播放，提供了更强和更丰富的动态用户界面。
你可以在一个或多个文件中编写MXML应用程序，MXML支持定义的组件，这些组件可以是MXML文件、AS文件或者使用FlashMX2004创建的文件。在一些MXML标记中，可以包含对外部文件的引用。例如，你可以通过<mx:Script>标记的source属性来包含一个外部的AS脚本文件。
MXML支持多种方式的外部文件引用，如
//1. 使用绝对地址
2. <mx:Style source='http://www.somesite.com/mystyles.css'>
3. //2. 使用◎ContextRoot
4. <mx:HTTPService url='@ContextRoot()/directory/myfile.xml'/>
5. //3. 使用根目录引用方式
6. <mx:Script source='/myscript.as'/>
7. //4. 使用相当路径引用
8. <mx:Script source='../myscript.as'/>
最简单的Flex应用程序
很多编程语言的第一个例子都是编写Hello，World。MXML的Hello，World！程序也很简单
<?xml version='1.0'?>
2. <mx:Application xmlns:mx='http://www.macromedia.com/2003/mxml' >
3. <mx:Panel title='My Application' marginTop='10' marginBottom='10'
4. marginLeft='10' marginRight='10' >
5. <mx:Label text='Hello World!' color='#6601D7' fontSize='24' />
6. </mx:Panel>
7. </mx:Application>
<?xml version='1.0'?>是MXML的文件申明，必须写在文件的第一行
<mx:Application>是MXML文件的根标记
<mx:Label>就是MXML的组件标记之一，text color fontSize 是Label组件的属性。
下面一个例子显示了更为复杂的用户界面
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:HBox>
5. <!-- List with three items -->
6. <mx:List>
7. <mx:dataProvider>
8. <mx:Array>
9. <mx:String>Item 1</mx:String>
10. <mx:String>Item 2</mx:String>
11. <mx:String>Item 3</mx:String>
12. </mx:Array>
13. </mx:dataProvider>
14. </mx:List>
15. <!-- First pane of TabNavigator -->
16. <mx:TabNavigator borderStyle='solid'>
17. <mx:VBox label='Pane1' width='300' height='150' >
18. <mx:TextArea text='Hello World' />
19. <mx:Button label='Submit' />
20. </mx:VBox>
21. <!-- Second pane of TabNavigator -->
22. <mx:VBox label='Pane2' width='300' height='150' >
23. <!-- Stock view goes here -->
24. </mx:VBox>
25. </mx:TabNavigator>
26. </mx:HBox>
27. </mx:Panel>
28. </mx:Application>
显示效果如下
在Flex应用程序中，也有事件的响应属性。最简单如鼠标单击事件。
<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:TextArea id='textarea1'/>
5. <mx:Button label='Submit' click='textarea1.text='Hello World';'/>
6. </mx:Panel>
7. </mx:Application>
单击Submit按钮后Textarea中显示内容为：'Hello World'
如果您非常迫切的想了解IT领域最新产品与技术信息，那么订阅至顶网技术邮件将是您的最佳途径之一。
现场直击｜2021世界人工智能大会
直击5G创新地带，就在2021MWC上海
5G已至 转型当时——服务提供商如何把握转型的绝佳时机
寻找自己的Flag
华为开发者大会2020（Cloud）- 科技行者
京公网安备 11010802021500号