关闭

Flex精华摘要 1:如何开始

标签: flexapplicationactionscriptstringbuttonwebservice
3171人阅读 评论(0) 收藏 举报
分类:

你至少需要了解两种语言才能开发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

 

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

【转载】flex:1;详解

原文地址:https://segmentfault.com/q/1010000004080910/a-1020000004121373 仅供参考! 首先明确一点是, flex 是 flex-grow、flex-shrink、flex-basis的缩写。故其取...
  • SUNyyyB
  • SUNyyyB
  • 2017-03-28 11:17
  • 3484

Flex之旅:第二部分:容器与布局(1)---容器的初始化顺序

容器的初始化顺序 如下代码: <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spa...
  • miqi770
  • miqi770
  • 2015-03-24 13:11
  • 687

flex:1的标签的宽度计算

flex:1的标签的宽度计算,很悲催的是,他的宽度永远是最后计算的。 宽度计算优先级为:width>适应文本内容的宽度>flex:数值  给伸缩项目设置“width”和“height”属性来定义伸缩项目尺寸,而这个伸缩项目是独立于其他伸缩项目。例如,如果我们给主内容(content)...
  • qq_26222859
  • qq_26222859
  • 2016-05-18 13:53
  • 1247

HTML5基础加强css样式篇(伸缩容器的简介和声明:display:flex||inline-flex)(五十一)

1为什么要有伸缩容器:    1. 使用浮动布局,无法实现等高    2.不能很快的调整DOM的顺序    3.不能很好控制子元素的位置 2.如何声明一个伸缩容器:   display:flex; ...
  • u010853130
  • u010853130
  • 2017-04-24 10:44
  • 584

人性的弱点--[精华摘要]

第一篇 待人处世的基本技巧 所谓礼貌,就是彼此调节到适当的距离。 1、如欲采蜜,勿蹴蜂房(不要批评、责怪或抱怨他人)。 人就是这样,做错事的时候只会怨天尤人,就是不去责怪自己。善解人意和宽恕他人,需要有修养自制的功夫。 2、真诚地赞赏他人。 人类本质里最深远的驱动力就是“希望具有重要性”。...
  • GePriniusce
  • GePriniusce
  • 2015-05-07 10:36
  • 432

小程序开发必看!一篇文章让你了解 Flex 布局

第九程序注明: 要想开发小程序,每个人都需要先了解 Flex。小程序的开发框架使用了 Flex 排版布局,它能帮助开发者以最快的速度,构建美观而具有动态调整性质的小程序排版。
  • qq_38125123
  • qq_38125123
  • 2017-04-19 14:45
  • 1595

flexbox 弹性盒布局和布局原理

flexbox 弹性盒布局和布局原理 最近开始做H5,发现flexbox用的超级广泛,找到了这么一篇文章,https://css-tricks.com/snippets/css/a-guide-to-flexbox/,认为讲的还不错,加上自己的一些测试和理解,就有了这一篇笔记。 新版的flexb...
  • lihongxun945
  • lihongxun945
  • 2015-05-03 14:45
  • 20494

Flex布局兼容性写法

flex布局 flex布局目前可使用在移动中,并非所有的语法都全兼容,但以下写法效果良好~ /* ============================================================ flex:定义布局为盒模型 flex-v:盒模型垂直...
  • u011784135
  • u011784135
  • 2016-02-03 17:12
  • 8748

Flex布局,常用的几个属性值;

任何东西都可以Flex布局; 包括行内元素: display:inline-flex; .box{ flex-wrap: nowrap | wrap | wrap-reverse; }它可能取三个值。(1)nowrap(默认):不换行。(2)wrap:换行,第一行在上方。(...
  • liang377122210
  • liang377122210
  • 2017-05-12 17:29
  • 886

flex布局篇(一)

flex布局是一种十分强大的布局方式,使用它可以轻松完成绝大部分的网页布局工作,可以说,只要掌握了flex布局,你就可以在布局中游刃有余了。
  • zhou_xiao_cheng
  • zhou_xiao_cheng
  • 2016-10-22 21:06
  • 747
    个人资料
    • 访问:1084971次
    • 积分:14190
    • 等级:
    • 排名:第1018名
    • 原创:305篇
    • 转载:28篇
    • 译文:0篇
    • 评论:592条
    最新评论
    [╄ 冷枫]简介