Flex 筆記-養成良好習慣之 mxml 的 tag 順序

雖然在順序上面好像是沒有硬性的規定
不過在 Adobe 官方的教學影片 Flex 4 beta in a week 裡面建議了 mxml 的順序應該依照下面順序來放置：

Properties of the parent(屬於本檔案最外層 container 的屬性，如 layout
, states 跟 transitions 標籤)
Metadata (後設標籤，如[Event]等等，可參考這裡)
Styles (css 樣式)
Script (ActionScript)
Declarations (非視覺化的 tag )
UI components (所有看得到的 components)

每一個區塊最好是用註解分隔開來

當然啦
tag 裡面的屬性應該要一行一個，或是相關的屬性放在同一行
這一點透過 Flex Formater 可以做很個人化的設定與排序

以上兩點好習慣養成
這樣對於易讀性會提高很多

Flex 筆記 - 讀取 XML 資料並做 filtering

之前花了很多時間在 Flex in a week 上面
現在把一些 MXML 的基礎整理一下放上來
也算是對於這段時間的學習做個交代(不然 Flex 4 都要出了說...)

<?xml version="1.0" encoding="utf-8"?>
<MX:APPLICATION creationComplete="init()" xmlns:mx="http://www.adobe.com/2006/mxml">
 <MX:SCRIPT>
   <![CDATA[
   import mx.collections.XMLListCollection;
   import mx.controls.Alert;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.events.ResultEvent;
   
   [Bindable]
   private var myData1:XMLListCollection = new XMLListCollection();
   
   protected function init():void{
    httpSer1.send();
   }
   protected function httpSer1_faultHandler(event:FaultEvent):void{
    Alert.show(event.message.toString(),"錯誤訊息：");
   }
   protected function httpSer1_resultHandler(event:ResultEvent):void{
    var list:XMLList = event.result.dataItem;
    myData1.source = list;
   }
   protected function searchBtn_clickHandler(event:MouseEvent):void{
    if (searchText.text != "") myData1.filterFunction = searchMyData;
    else myData1.filterFunction = null;  
    myData1.refresh();
   }
   protected function searchMyData(item:XML):Boolean{
    var searchResult:XMLList = item.(firstname == searchText.text || lastname == searchText.text);
    if (searchResult.length() > 0) return true;
    else return false;
   }
  ]]>
</MX:SCRIPT>
 <MX:HTTPSERVICE id=httpSer1 result="httpSer1_resultHandler(event)" fault="httpSer1_faultHandler(event)" resultFormat="e4x" url="assets/myData.xml" />
 <MX:HBOX>
  <MX:TEXTINPUT id=searchText />
  <MX:BUTTON id=searchBtn click="searchBtn_clickHandler(event)" label="Search" />
 </MX:HBOX>
 <MX:DATAGRID id=myDataGrid dataProvider="{myData1}">
  <MX:COLUMNS>
   <MX:DATAGRIDCOLUMN headerText="First" dataField="firstname" />
   <MX:DATAGRIDCOLUMN headerText="Last" dataField="lastname" />
  </MX:COLUMNS>
 </MX:DATAGRID>
</MX:APPLICATION>

重點說明:
1. 利用 HTTPService 標籤讀取 xml 資料，resultFormat 設為 e4x
2. 將 result 放入 XMLListCollection 實體的 source 中，因為 Collection 這種類別可以進行篩選
3. 篩選功能利用的是 XMLListCollection 的 filterFunction 屬性指定實際進行篩選的 function，再利用 XMLListCollection 的 refresh() 方法更新
4. filterFunction 必須要將合乎篩選規則的資料 回傳 true

在 Flash Builder 裡讓程式碼自動排好的 Flex Formatter

用 Flash Develop 寫 AS3 也好一段時間了
但有些時候還是要用 Flex Builder 比較好做事
(且 Flex Framework 裡的 component 比 Flash IDE 裡的要先進多了)
所以最近開始"認真"要學 MXML 還有 Flex Framework 了
(我承認之前對 Flex 都沒有很認真....Orz )

但是要用 Flex Builder 來開發
首先得先把一些 coding style 給設定一下
這樣用起來才順手
......
.........!!!!(翻桌)
竟然 Flex Builder 3 跟最新的 Flash Builder 裡面都沒有這種設定可以選!!

還好有人報給我這支外掛
http://sourceforge.net/projects/flexformatter/
下載解壓縮後放到 plugin 資料夾內
重開 Builder 之後就可以在 Preference 裏找到 Flex Formatting 的選項
雖然這外掛沒辦法讓 Flex 自己生成的碼一開始就照我們要的方式去排
但是可以藉由"Format Flex Code"按鈕
去針對部分或全部程式碼進行格式化
算是非常實用的功能

Flash IDE 匯出 SWC 供專案使用

現在 Edward 都是用 Flash Develop 來寫 Actionscript 的 code 了
不過一些牽涉到視覺的元件還是必須透過 Flash IDE 來做發佈
且命名上面也是一個問題
這樣實在是很鳥
雖然知道這要用匯出 SWC 的方式來解決
可是一直沒有用過
剛好今天逛網路看到了關於這方面的分享
趕快記錄下來

其實方法很簡單:
1. 在 Flash IDE 裡開一個檔案, 把要匯出的元件作好放在裡面
2. 元件設定好類別連結(建議可用 package 做個分類)
3. 發布設定中要勾選 "匯出SWC", 並把產生的 SWC 檔放在專案路徑下(建議是 libs 資料夾)
4. 進 Flash Develop 將該 SWC 右鍵點選 "Add To Library", 就可以 import 在 SWC 裡面的類別了
(或是在專案屬性的 SWC Libraries 裡填上 SWC 檔名及路徑)

Flex Builder 的作法也差不多
在Project -> Properties-> ActionScript Build Path -> Library Path -> Add SWC
輸入 SWC 檔名及路徑即可( libs 資料夾內的會自己抓, 不用另外設)

不過 Flex Builder 不可以直接在 MXML 加進 SWC 裡的物件
這要怎麼辦呢!!??
在 CS3 有一個 Flex Component Kit for Flash CS3 的 Extension
安裝後在"命令"選單裡會多出 Make Flex Component 選項
點選後再匯出就可以了

關於 Actionscript 的後設標籤(Metadata Tags)

使用 Flex SDK 編譯時
可以在類別宣告外加上後設標籤(Metadata Tag)
基本上就是給編譯器看的一些設定

根據 Adobe 在 Flex3 的 Live Doc 裡面所描述, 可以在 ActionScript 類別檔使用下面的 Metadata Tags:

[ArrayElementType("elementType")]
// 幫 Array 的 Element 宣告型別

[Bindable(event="eventname")]
//若省略eventname則為"propertyChange"

[DefaultProperty("propertyName")]
//為 component 指定預設值, 詳見Adding properties and methods to a component

[Deprecated]
//"不建議使用"的宣告

[Effect(name="eventNameEffect", event="eventName")]
//效果設定

[Embed(source="filename",mimeType="mimeTypeString")]
//在編譯時內嵌指定的檔案(檔案格式與MimeType可參考這裡)

[Event(name="eventName", type="package.eventType")]
//事件設定

[Exclude(name="label", kind="property")]
//Flex Builder tag inspector 省略檢查該屬性

[ExcludeClass]
//Flex Builder tag inspector 省略檢查該類別

[IconFile("fileName")]
//幫 component 指定 IconFile

[Inspectable(attribute=value[,attribute=value,...])]
//與code hints 還有屬性檢查有關

[InstanceType("package.className")]
//IDeferredInstance 類型的物件設定data type

[NonCommittingChangeEvent("event_name")]
//在設定的Event發生時不要進行檢查

[RemoteClass]
//使用Action Message Format(AMF)時讓 Flex Builder 先保留(不指定)類別資訊

[Style(name="style_name"[,property="value",...])]
//自訂Style屬性資料

[Transient]
//當使用[RemoteClass] 將 AS Object 給 mapping 為 Java object 時, 加了此設定的屬性在送到 server 時會被忽略
-------------------------------
doc上沒寫的:

[SWF]
//例:[SWF(frameRate="30", width="1024", height="576", backgroundColor="#000000", pageTitle="Edward Design")]


目前我比較常用到 [SWF] 跟 [Event] 這兩個
其它的以後有機會再慢慢試嚕

Flex 快速鍵

Flex 的快速鍵...
跟 Flash Develop 的快速鍵
在共通性上並不好

不過 Flex 是 Eclipse Base 的 Tool
應該是比較多使用者在用吧....

Ctrl + Shift + T //檢視專案中的類別原始碼(這個太讚了!!我喜歡!)
Ctrl + O //檢視檔案 Outline
Alt + / //程式碼屬性提示
Ctrl + Shift + Space //程式碼參數提示
Ctrl + Alt + R //Rename功能(自動更新專案所有檔案中被更名的成員)
Ctrl + Alt + ↑ //複製游標所在行並貼上在新行
Ctrl + Alt + ↓ //複製游標所在行
Ctrl + D //刪除游標所在行
Ctrl + Shift + p //尋找成對大括弧

Alt + ↑ //游標所在行向上移動
Alt + ↓ //游標所在行向下移動
Ctrl + K //尋找(游標反白的字串)
F3 //尋找宣告(如在call function的地方按, 可以跳到該function)
Ctrl + / //註解單行
Ctrl + Shift + c //註解區塊

Ctrl + M //編輯視窗放到最大
Alt + ← //切換到左頁籤檔案
Alt + → //切換到右頁籤檔案

F11 //Debug
Ctrl + F11 //Run
Ctrl + B //Build All Projects

mxmlc 的 compile 參數

flex-config.xml 跟 mxml-manifest.xml 的路徑:
installdirectory\Adobe\Flex Builder 2\Flex SDK 2\frameworks\


-file-specs 檔名 (指定程式進入點, 即最主要的mxml檔案Application)

-output 路徑 (指定輸出路徑)

-source-path 路徑(指定一個或多個原始碼路徑)

-incremental=true (設定為incremental build, 即有更新的檔案才重新編譯, flex會自動產生一個cache 檔案記錄哪些檔案從上次build之後被編輯過)

-load-config=xxxxx.xml (將xxxxx.xml 做為編譯組態設定檔, 預設為 flex-config.xml, 若更動要小心library路徑的指定, 如<external-library-path>及<library-path>還有自訂的library)

-default-background-color=0xFFFFFF (指定Application背景色)

-default-size 寬 高 (指定Application的寬與高)

-default-frame-rate (指定fps, 預設為24)

-default-script-limits 1000 60 (設定遞迴最大次數與script執行最大秒數(不可超過60), 預設值1000 60)



其他可用參數 –help list 查詢

C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0\bin>mxmlc.exe -help list
Adobe Flex Compiler (mxmlc)
Version 3.0 build 183453
Copyright (c) 2004-2006 Adobe Systems, Inc. All rights reserved.

-benchmark
-compiler.accessible
-compiler.actionscript-file-encoding <string>
-compiler.context-root <context-path>
-compiler.debug
-compiler.external-library-path [path-element] [...]
-compiler.fonts.advanced-anti-aliasing
-compiler.fonts.flash-type
-compiler.fonts.max-glyphs-per-face <string>
-compiler.include-libraries [library] [...]
-compiler.incremental
-compiler.library-path [path-element] [...]
-compiler.locale [locale-element] [...]
-compiler.mxml.compatibility-version <version>
-compiler.namespaces.namespace <uri> <manifest>
-compiler.optimize
-compiler.services <filename>
-compiler.show-actionscript-warnings
-compiler.show-binding-warnings
-compiler.show-deprecation-warnings
-compiler.show-unused-type-selector-warnings
-compiler.source-path [path-element] [...]
-compiler.strict
-compiler.theme [filename] [...]
-compiler.use-resource-bundle-metadata
-help [keyword] [...]
-include-resource-bundles [bundle] [...]
-licenses.license <product> <serial-number>
-load-config <filename>
-metadata.contributor <name>
-metadata.creator <name>
-metadata.date <text>
-metadata.description <text>
-metadata.language <code>
-metadata.localized-description <text> <lang>
<title> </title>-metadata.localized-title <lang>
-metadata.publisher <name>
-metadata.title <text>
-output <filename>
-runtime-shared-libraries [url] [...]
-runtime-shared-library-path [path-element] [rsl-url] [policy-file-url] [rsl-url
] [policy-file-url]
-static-link-runtime-shared-libraries
-target-player <version>
-use-network
-version
-warnings