首页 > 代码库 > 第2章 开始Flex

第2章 开始Flex

2024-07-13 20:20:53   225人阅读

* 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


联系
我们