* 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语法
p21
第2章 开始Flex