狠狠撸

Flex 使用經驗談
史偉龍
Ticore Shih
shih.weilung@gmail.com
http://ticore.blogspot.com/

Flex 介紹
FlashFlex 之間的比較
分享整合开发经验

第一次看到 Flash UI 组件...

Flash UI 組件的缺點
? 缺乏排版能力，容易變形
? 功能易被破壞
? 效能不好
? 不易客製化

Flex 提供更好的 UI 組件

2004 2005-2011 2012

Flex 是什麼 ?
? Flex = FL + EX
o FL : Flash
o EX : Extensible Markup Language (XML)
http://www.slideshare.net/tosakunmeeting/flex-101-10833118

? 動態的、資料驅動的應用程式

Flex 應用對象
? 對象平台
o Adobe Flash Player Runtime
o Adobe AIR Runtime

? 應用種類
o Web App
o Desktop App
o Mobile App

Flex 組成
? 開發工具 Flash Builder
? Flex SDK 開放原始碼
o 組件框架 Flex UI Framework – mx, spark
o 編譯器 Flex Compiler – mxmlc, compc

? 程式語言 AS3, MXML, CSS
? 開發流程

Flex MXML
? XML 可擴充式標記語言
? 宣告 UI 與排版方式
? 名稱由來
o Magic eXtensible Markup Language
o Macromedia eXtensible Markup Language
o Macromedia Studio MX、Flash MX、
MX Component

http://en.wikipedia.org/wiki/MXML

Flex Application MXML
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">

<s:Panel title="Panel" width="70%" height="70%"
verticalCenter="0" horizontalCenter="0">
<s:Button label="Button"
verticalCenter="0" horizontalCenter="0"/>
</s:Panel>

</s:Application>

Flex 語法的特色
? 資料綁定 Data Binding Expression
? 複合組件 MXML Composite Component
? 狀態語法 Enhanced States Syntax
? 宣告式向量圖 FXG, MXMLG Graphics
? 宣告式外觀 MXML Skinning
? 進階樣式 Advanced CSS

資料綁定語法例子
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" fontSize="14">
<s:layout>
<s:HorizontalLayout
verticalAlign="middle" horizontalAlign="center" />
</s:layout>

<s:TextArea id="txt1" />
<s:TextArea id="txt2" text="@{txt1.text}" />

</s:Application>

加強的狀態語法例子
 
<s:states> <s:Rect id="rect" width="100" height="100"
<s:State name="state01" /> top.state01="10"
</s:states> left.state01="100"
left.state02="250"
left.state03="20">
<s:fill>
<s:SolidColor id="fillColor"
color.state01="#FF0000"
color.state02="#00FF00"
color.state03="#0000FF" />
</s:fill>
</s:Rect>

加強的狀態語法例子

<s:Button verticalCenter="0" horizontalCenter="0"
label.state01="State 01"
click.state01="currentState = 'state02'"
click.state02="currentState = 'state03'"
click.state03="currentState = 'state01'" />

Flex 基礎類別 UIComponent
? Flash API 原本設計目標並非應用程式界面

? 覆寫大量 Flash 基礎類別的屬性方法
o width, height, scaleX, scaleY, x, y, z, rotation, rotationX, rotationY,

? 設定 width, height 不會直接造成內容被縮放

? 從 AS3 實作各種功能介面：
o ILayoutManagerClient, IRepeaterClient, IStateClient, IAdvancedStyleClient ,
IToolTipManagerClient, …

FlexFlash 工具差異
Flex Flash
? 佈景主題 ? 向量畫圖能力
? 多國語言 ? 時間軸、動畫能力
? 專案管理 ? WYSIWYG Editor
? 獨立編譯器 ? 媒體素材管理
? 程式碼除錯

FlashFlex 整合開發
Flex + Flash > 2X
Flex 主要輸出對象是 Flash Player Runtime
Flash 作得到的功能都能整合進 Flex

Flex 開發方式 I

Flex
png, jpg, ttf, svg, ... + as, mxml ─→ swf
[Embed]

所有的圖像、聲音素材與程式碼都由 Flex SDK 編譯

FlashFlex 整合開發方式 II

Flash Flex
fla + as ─→ swc + as, mxml ─→ swf

Flash 負責編譯圖像、聲音素材與少部分 as
Flex 負責最後整合編譯大部分 as

FlashFlex 整合開發方式 III

Flash Flex
fla ─→ swf + as, mxml ─→ swf
[Embed]

程式碼都由 Flex SDK 編譯
圖像、聲音素材都由 Flash IDE 輸出 SWF

SWF 中間檔案的好處
單一素材資源檔案格式
程式碼編譯速度大幅提升
素材資源與程式碼徹底分離

AS3 Class & Flash Symbol
Flash Symbol 元件與 AS3 Class 是一種鍊結關係，並非繼承

e.g. Class02→Class01→MovieClip
Class01, Class02 可以自由決定鏈結的資源

AS3 Symbol 鏈結方式比較
? Flash IDE
o Symbol 為主，鏈結 (linkage) 一個外部 Class
o 同一個 Symbol 無法鏈結到多個 Class

? Flex SDK
o Class 為主，嵌入 (embed) 一個外部資源
o 同一個 Symbol 可以鏈結到多個 Class

FlashFlex 整合開發方式 III 優點

Flash Flex
fla --→ swf + as, mxml --→ swf
[Embed]

? 程式碼編譯快速
? 程式開發環境單純
? 能整合 Flash 所有功能
? 可重複嵌入素材資源到不同類別上

FlashFlex 整合開發技巧
? MovieClip as Spark Skin
http://ticore.blogspot.com/2011/10/movieclip-as-spark-skin.html

? Flash Stateful MovieClip
http://ticore.blogspot.com/2011/08/flash-stateful-movieclip.html

? Flex Compiler 編譯參數嵌入外部資源技巧
http://ticore.blogspot.com/2011/08/mxmlc-define-embed-source.html

? Flex 編譯器快取的問題與開發技巧
http://ticore.blogspot.com/2010/04/flex-compiler-cache-issue-and-trick.html

? Flex Embed SWF 與 Embed Symbol 的差異
http://ticore.blogspot.com/2007/12/flex-embed-swf-embed-symbol.html

? 用 Flash 開發 Flex Skin 才是王道
http://ticore.blogspot.com/2007/10/flash-flex-skin.html

Flex 不是易開罐組件庫
? 每個人需求不同，Flex 內建組件有限

? Flex 提供了極具彈性的組件模型
o 先從既有組件挑選使用
o 嘗試自訂樣式、外觀
o 以 MXML 組合組件
o 以 AS3 繼承組件
o 找別人寫好的
o 最後才是從頭創造自己的組件

非不得已，不要直接修改
Flex 內建類別
必須自行維護相關組件
不能有效使用 RSL SWF, SWZ

如何挑選適合的組件
或是組件原型
最好将每个内建组件都玩过一下

Flex 組件挑選條件
? 是否為資料驅動的集合物件?
? 是否包含其他子物件?
? 子物件能不能被選擇?
? 子物件排版功能?
? 是否需要更換 Skin, Style?
? …

Flex 組件挑選實例

http://ticore.blogspot.com/2008/04/flex-tab-tree.html

組件功能需求
? 不同深度節點有不同的背景色
? 相同深度下的節點同時只能打開一個
? 可以使用鍵盤瀏覽每個節點
? 來源資料是樹狀的，節點數量不固定

候選者 Tree VS Accordion
Tree Accordion

? 支援資料驅動 ? 不支援資料驅動

? 每個節點都可任意開關 ? 永遠都有一個子容器打開

? 支援用鍵盤瀏覽節點 ? 鍵盤瀏覽不能跨子容器

? 能客製化 ItemRenderer ? 本身只能做到第一層分頁

不要過度使用 Flex 組件
組件的開銷不低，每個都是繼承 UIComponent
(Flex 4.x UIComponent 一萬多行)

適時改用低階 Flash 物件
? e.g. 10 * 10 = 100 簡單按鈕陣列
o 不需要測量尺寸與排版功能
o 子物件不需要取得焦點
o 不需要可樣式化
o 不需要動態更換 Skin
o 不需要多國語言

? → 改用 Flash 低階物件實作
→ 實作一個組件取代複合大量組件

滑鼠可圈選的 TileList

http://ticore.blogspot.com/2008/04/flex-3-mouse-selectable-tilelist-v3.html

滑鼠可圈選 TileList 繼承樹
? UIComponent ~13,000 Lines
↑
? ScrollControlBase ~1,500 Lines
↑
? ListBase ~10,000 Lines
↑
? TileBase ~2,800 Lines
↑
? TileList ~100 Lines
↑
? MouseSelectableTileList ~1,000 Lines

Application Frameworks
用過的沒用過的
? Cairngorm ? Mate
? PureMVC ? Swiz
? Spring ActionScript ? Parsley
? RobotLegs

http://www.slideshare.net/RichardLord/application-frameworks-the-good-the-bad-the-ugly
http://www.slideshare.net/RichardLord/application-frameworks-the-new-kids-on-the-block

Reference
? Adobe's view of Flex and its commitments to Flex in the future
http://www.adobe.com/devnet/flex/whitepapers/roadmap.html

? Apache Flex Blog
http://blogs.apache.org/flex/

? Apache Flex Dev Summary
http://blog.teotigraphix.com/

? Falcon JS
http://blogs.adobe.com/bparadie/

? Adobe Flex Doc
http://www.adobe.com/devnet/flex/documentation.html

? Flex Open Source SDK, Doc
http://opensource.adobe.com/

狠狠撸

Flex 使用經驗談

More Related Content

Similar to Flex 使用經驗談 (20)

Flex 使用經驗談