Flex精华摘要 1:如何开始

原创 2006年05月25日 11:07:00

你至少需要了解两种语言才能开发Flex应用程序:MXMLActionScriptMXML是一种XML标记语言,主要用来设置Flex的用户界面,还包括一些不可见的元素,例如访问数据源、数据绑定等。ActionScript是一种面向对象的编程语言,采用ECMAScript4版的标准,用来完成程序逻辑和响应用户的交互。
HTML的方式一样,MXML定义了相关的标记来表示不同的用户界面,区别的是比HTML更严格和有着更丰富的标记集。例如,MXML既包含了一些可视组件如TreeData Gridaccordionsmenu,也包含了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'/>

 

1.



最简单的Flex应用程序
很多编程语言的第一个例子都是编写HelloWorldMXMLHelloWorld!程序也很简单

<?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>

 

1.


<?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>

 

1.

单击Submit按钮后Textarea中显示内容为:'Hello World'
更加规范化的写法是使用脚本定义函数调用

 

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

2. <mx:Script>
 

3. <![CDATA[
 

4. function hello(){ 
 

5. textarea1.text='Hello World';
 

6.  }
 

7. ]]>
 

8. </mx:Script>
 

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

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

11.  <mx:TextArea id='textarea1'/>

12.  <mx:Button label='Submit' click='hello();'/>

13.  </mx:Panel>

14.  </mx:Application>

 

 


如果希望多个组件之间可以绑定数据的话,在Flex中可以简单的实现,请注意,在属性中使用{ }标记就表示其中包含的是表达式,而不是字符串。下面的例子,如果textinput文本框的内容改变,textarea中的内容也会随之变化。

<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='textinput1' text='Hello'/>

5. <mx:TextArea id='textarea1' text=''/>

6. <mx:Button label='Submit' click='textinput1.text='Goodbye';'/>

7. </mx:Panel>

8. </mx:Application>

 

1.


Flex
可以和本地或者是远程服务器端的逻辑进行交互,其方式可以通过如下方式之一:

: WebService 提供基于SOAPweb服务访问
2 : HTTPService 提供了基于 HTTP访问和数据返回
3 : RemoteObject 基于AMF协议访问Java对象

 

 

1

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

深入理解java虚拟机阅读后精华摘要

最近又认真看了深入理解java虚拟机和Effective java这两本书,这几天花时间把重要部分写上来加深印象。 一、运行时数据区域 Java虚拟机管理的内存包括几个运行时数据内存:方法...

flex中dataGrid的编辑功能 <精华>

from:http://blog.csdn.net/wuyan520/article/details/5469794 也是转载,源头未知。 在flex的dataGrid中,很多情况下列是需要...

SHA1 摘要算法C语言代码

冒号课堂-编程范式与OOP思想-精华摘录-1

学会不如会学,会学不如会用,会用不如被用 对于一个软件开发者来说,这意味着 4 个阶段:  学会(知其所然)——掌握一些具体编程知识的初级程序员。  会学(知所以然)——能快速而深刻地理解技术并...

1-11-4 - 特殊三位数(参考精华版)

问题及代码:   运行结果: 学习小结:

指针——C之精华(续1)

1)、先取*p值,后使p值加1:*p++与*(p++)等价。(++和*同优先级,结合方向自右而左) 2)、先使p值加1,后取*p值:*(++p) 1、用数组名做函数参数 C编译时将形参数...

C/C++语法知识精华整理(1)-左值与右值、变量与常量、 define与const、Printf特点、补码与阶码、位运算等

1.左值与右值的区别 左值可以放在左边赋值的值。右值可以放在右边的值。 左值,没有内存实体的左值不存在的。Int a=3; 右值,可以有内存实体,也可以没有内存实体. A+1,&a,100,右值,都在...

银行系统的开发精华1

银行系统的开发与其它系统有何异同?

【Vim】【精华】:手把手教你把Vim改装成一个IDE编程环境(图文) -- 续1

手把手教你把Vim改装成一个IDE编程环境(图文) By: 吴垠 Date: 2007-12-27 Email: l...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)