第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文件

1. 用字母和數字，下劃線且只能字母或下劃線開頭
2. 文件名不能和類名，組件id，應用程序名及fx:,s:,mx:命名空間中的tag重名
3. .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>

組件的屬性爲下面類型之一：

1. 標量值（數字或字符串）
2. 標量值數組，數字數組或者字符串數組
3. AS3對象
4. AS3對象數組
5. AS3屬性
6. xml數據

 

# 轉義符\

\{\}

\\

\n

 

#組件屬性值

• 混合類型 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標籤規則

1. 不是全部的標籤都須要id屬性
2. id屬性不能在根標籤中定義
3. Boolean類型的值只能爲true,false
4. <fx:Binding>標籤須要同時指定source,destination兩個屬性
5. <fx:Binding>不能包含id屬性

 

* 使用ActionScript

1. 添加事件偵聽
2. 添加<fx:Script>標籤，必須爲<s:Application>或者其它頂層標籤的子標籤。

   1. 
      <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">

3. 引入外部as文件
4. 導入as類

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

5. 建立組件

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