第2章开始Flex

* Flex开发中可用两种语言

1.MXML

2.ActionScript

* Flex中使用两个组件集

1.MX (mx.*) 早期的Flex版本用到的组件集

2.Spark (spark.*) Flex4及以后的版本用到的组件集。

Spark比MX组件有更多皮肤外观及其它方面的优点。它们有相同的组件（如按钮，文本框，列表控件等）。官方推荐使用Spark组件集。

* MXML文件

MXML文件是一种普通的xml文件，和html一样是标记语言，不过MXML被编译成.swf文件在FlashPlayer或者AIR中运行。

<?xml version="1.0" encoding="utf-8"?>
<!-- mxml\HellowWorld.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:MyComps="myComponents.boxes.*"> 
<s:layout> <s:VerticalLayout /> </s:layout> 
<s:Panel title="My Application"> 
<s:Label text="Hello World" fontWeight="bold" fontSize="24"/>
    <MyComps:CustomBox/>
</s:Panel>
</s:Application>

xmlns:fx="http://ns.adobe.com/mxml/2009" ActionScript顶级命名空间，如对象，数组等为标签构建MXML 编译器，如<fx:script>，<fx:Declarations>，<fx:Style>，<fx:Model>
xmlns:mx="library://ns.adobe.com/flex/mx" MX组件集命名空间
xmlns:s="library://ns.adobe.com/flex/spark" Spark组件命名空间，包括WebService, HTTPService, RemoteObject组件及支持RPC组件的类
xmlns:MyComps="myComponents.boxes.*"> 自定义组件命名空间

* Application标签

定义应用程序容器，应用程序的根标签。

<s:Appliction> </s:Application>

* 编译运行

1) IDE运行，生成swf，在AIR中或包装在html中运行。

2) 命令行编译：

cd flex_install_dir/bin 
mxmlc --show-actionscript-warnings=true --strict=true c:/app_dir/hello.mxml

* MXML与ActionScript的关系

Flex作为ActionScript的类库，包括组件（容器和控件），管理类，数据服务类及其它特性类。基于这些类库，用MXML和ActionScript语言开发应用程序。MXML标签对应ActionScript类，MXML标签属性Attribute对应类的属性Property，样式或事件。Flex将MXML转换成等价的AS对象。定义MXML标签即为声明一个ActionScript类的实例。

* 应用程序结构

MXML应用程序可以定义一个包含<s:Application>标签的主文件，及引用其它MXML,ActionScript文件或者两种语言混写的文件。MXML文件与AS文件的分离对应不同的模块，可以让开发更容易，提高可重用性，可维护性。

* MXML id属性

id属性在MXML文件中唯一标识元素，在AS代码中通过该id引用对应标签的组件。定义id后，MXML编译器会成该id的公共变量，指向该组件的实例引用。

<?xml version="1.0"?>
<!-- mxml/UseIDProperty.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:mx="library://ns.adobe.com/flex/mx" 
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
private function writeToLog():void {
trace(myText.text);
}
]]>
</fx:Script>
<s:VGroup id="myVGroup">
<s:TextInput id="myText" text="Hello World!" />
<s:Button id="mybutton" label="Get Weather"  click="writeToLog();"/>
</s:VGroup>
</s:Application>

* 触发运行时脚本执行

<s:Button label="Submit" click="textarea1.text='Hello World';"/>

* 绑定数据

用花括号{}来绑定数据源值

<s:Label text="Enter Text:"/>
<s:TextInput id="textinput1" text="Hello"/>
<s:Label text="Bind Text to the TextArea control:"/>
<s:TextArea id="textarea1" text="{textinput1.text}"/>
<s:Button label="Submit" click="textinput1.text='Goodbye';"/>

* 声明RPC服务

支持以下服务

• WebService provides access to SOAP-based web services.
• HTTPService provides access to HTTP URLs that return data.
• RemoteObject provides access to Java objects using the AMF protocol (Adobe LiveCycle Data Services ES only)

<fx:Declarations>
<s:WebService id="WeatherService" 
wsdl="http:/example.com/ws/WeatherService?wsdl" 
useProxy="false">
<s:operation name="GetWeather">
<s:request>
<ZipCode>{zip.text}</ZipCode>
</s:request>
</s:operation>
</s:WebService>
</fx:Declarations>

* 存储数据

<fx:Declarations>
<fx:Model id="contact">
<info>
<homePhone>{homePhoneInput.text}</homePhone>
<cellPhone>{cellPhoneInput.text}</cellPhone>
<email>{emailInput.text}</email>
</info>
</fx:Model>
</fx:Declarations>

* 验证数据

<fx:Declarations>
<mx:PhoneNumberValidator id="pnV" source="{homePhoneInput}" property="text"/>
<mx:EmailValidator id="emV" source="{emailInput}" property="text" />
</fx:Declarations>

* 格式化数据

<fx:Script>
<![CDATA[
[Bindable]
private var storedZipCode:Number=123456789;
]]>
</fx:Script>
<fx:Declarations>
<mx:ZipCodeFormatter id="ZipCodeDisplay" formatString="#####-####"/>
</fx:Declarations>
<s:Panel title="My Application">
<s:TextInput text="{ZipCodeDisplay.format(storedZipCode)}"/> 
</s:Panel>

* 使用CSS

<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
/* class selector */
.myClass { 
color: Red 
} 
/* type selector */
s|Button { 
font-size: 18pt
}
</fx:Style>
<s:Panel title="My Application">
<s:Button styleName="myClass" label="This is red 18 point text."/>
</s:Panel>

* 皮肤风格

Skinning

* 特效

<fx:Declarations>
<s:Resize id="myResize" heightBy="25" widthBy="50" target="{myButton}"/> 
</fx:Declarations>
<s:Button id="myButton" label="Resize target" click="myResize.end();myResize.play();"/>

* 自定义MXML组件

<?xml version="1.0"?>
<!-- mxml/CustomMXMLComponent.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:mx="library://ns.adobe.com/flex/mx" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:MyComps="myComponents.boxes.*">
<s:Panel title="My Application" height="150">
<MyComps:MyComboBox/>
</s:Panel>
</s:Application>

* MXML语法

MXML的大部分标签与AS3类及属性一一对应，Flex将标签编译成相应的AS3对象生成到swf文件中。

#AS3语言特性：

• 类形式的语法定义
• 包结构形式
• 类型变量，参数，返回值
• get/set显示定义存取值
• 继承
• 公共及私有成员
• 静态成员
• 转换操作符

#命名MXML文件

用字母和数字，下划线且只能字母或下划线开头
文件名不能和类名，组件id，应用程序名及fx:,s:,mx:命名空间中的tag重名
.mxml扩展名要小写

#用tag代表AS3类，类名首字母大写

#设置组件属性，属性名小写开头，大写分隔属性名称(驼峰标识)

<s:Label width="50" height="25" text="Hello World"/>

或者用子标签的方式。

<s:Label> 
<s:width>50</s:width> 
<s:height>25</s:height> 
<s:text>Hello World</s:text> 
</s:Label>

子标签方式可指定更复杂的对象值

<s:List> 
<s:dataProvider> 
<s:ArrayCollection> 
<fx:String>AK</fx:String> 
<fx:String>AL</fx:String> 
<fx:String>AR</fx:String> 
</s:ArrayCollection> 
</s:dataProvider> 
</s:List>

组件的属性为下面类型之一：

标量值（数字或字符串）
标量值数组，数字数组或者字符串数组
AS3对象
AS3对象数组
AS3属性
xml数据

# 转义符\

\{\}

#组件属性值

混合类型 p25
标量值数组
对象 p26
对象数组
矢量Vector p29
xml
样式属性 p30
事件属性
指定URL

<fx:Style source="http://www.somesite.com/mystyles.css">
<fx:Script source="/myscript.as"/>
<fx:Script source="../myscript.as"/>
<mx:HTTPService url="@ContextRoot()/directory/myfile.xml"/>

@ContextRoot() web层根目录

正则表达式
编译器标签

• <fx:Binding>
• <fx:Component>
• <fx:Declarations>
• <fx:Definition>
• <fx:DesignLayer>
• <fx:Library>
• <fx:Metadata>
• <fx:Model>
• <fx:Private>
• <fx:Reparent>
• <fx:Script>
• <fx:Style>

# MXML标签规则

不是所有的标签都需要id属性
id属性不能在根标签中定义
Boolean类型的值只能为true,false
<fx:Binding>标签需要同时指定source,destination两个属性
<fx:Binding>不能包含id属性

* 使用ActionScript

添加事件侦听

添加<fx:Script>标签，必须为<s:Application>或者其它顶层标签的子标签。


<s:TextArea id="textarea1" width="155" x="0" y="0"/>
<s:Button label="Click Me" click="textarea1.text='Hello World';" width="92" x="31.5" y="56"/>

<fx:Script>
<![CDATA[
public var s:Boolean;
public function doSomething():void {
// The following statements must be inside a function. 
s = label1.visible; 
label1.text = "label1.visible = " + String(s);
}
]]>
</fx:Script>

<fx:Script source="includes/IncludedFile.as">

引入外部as文件

导入as类

<fx:Script>
<![CDATA[
/* The myfunctions.as file defines two methods that 
return Strings. */
include "includes/myfunctions.as";
]]>
</fx:Script>

创建组件

Spark容器用addElement(),addElementAt()方法添加可视化组件（实现IVisualElement接口），setItemIndex()改变层级， removeElement(), removeElementAt()，removeAllElements()移除组件

MX容器用addChild(),addChildAt()方法添加，setChildIndex()改变层级。removeChild()，removeChildAt()，removeAllElements()

添加到容器后，应用程序的可视化层级树中即添加该组件。移除后，实际上不从内存移除，该对象无任何引用之后，内存管理器在未来某个时间回收。

* 程序范围 Scope

p42

* 事件

p56

spark.events.*
mx.events.*
flash.events.*

* SDK 配置

p97

sdk_install_dir/
bin/jvm.config
bin/mxmlc
bin/mxmlc.exe
bin/compc
bin/compc.exe
bin/fdb
bin/fdb.exe
frameworks/flex-config.xml

posted @ 2014-07-24 17:31 全栈深入阅读(1098) 评论(0) 编辑收藏举报

刷新页面返回顶部

全栈深入

专注于机器学习、前端相关邻域。关注 "全栈深入" 公众号查看更多硬核文章。

第2章开始Flex

公告

全栈深入

专注于机器学习、前端相关邻域。关注 "全栈深入" 公众号查看更多硬核文章。

第2章 开始Flex

公告

第2章开始Flex