Your SlideShare is downloading. ×
Flex 使用經驗談
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Flex 使用經驗談

4,274
views

Published on

介紹 Flex 與 Flash 比較 …

介紹 Flex 與 Flash 比較
分享整合開發經驗

Published in: Self Improvement, Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
4,274
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Flex 使用經驗談史偉龍Ticore Shihshih.weilung@gmail.comhttp://ticore.blogspot.com/
  • 2. Flex 介紹FlashFlex 之間的比較 分享整合開發經驗
  • 3. 第一次看到 Flash UI 組件...
  • 4. Flash UI 組件的缺點• 缺乏排版能力,容易變形• 功能易被破壞• 效能不好• 不易客製化
  • 5. 正常的 Flash 組件
  • 6. 變形的 Flash 組件
  • 7. Flex 提供更好的 UI 組件2004 2005-2011 2012
  • 8. Flex 是什麼 ?• Flex = FL + EX o FL : Flash o EX : Extensible Markup Language (XML) http://www.slideshare.net/tosakunmeeting/flex-101-10833118• 動態的、資料驅動的應用程式
  • 9. Flex 應用對象• 對象平台 o Adobe Flash Player Runtime o Adobe AIR Runtime• 應用種類 o Web App o Desktop App o Mobile App
  • 10. Flex 組成• 開發工具 Flash Builder• Flex SDK 開放原始碼 o 組件框架 Flex UI Framework – mx, spark o 編譯器 Flex Compiler – mxmlc, compc• 程式語言 AS3, MXML, CSS• 開發流程
  • 11. 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
  • 12. 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>
  • 13. Flex 3 案例 - Photo VA
  • 14. Flex 2 案例 – Triumph
  • 15. Flex 2 案例 – Triumph
  • 16. Flex 2 案例 – Triumph
  • 17. Flex 語法的特色• 資料綁定 Data Binding Expression• 複合組件 MXML Composite Component• 狀態語法 Enhanced States Syntax• 宣告式向量圖 FXG, MXMLG Graphics• 宣告式外觀 MXML Skinning• 進階樣式 Advanced CSS
  • 18. 資料綁定語法例子<?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>
  • 19. 加強的狀態語法例子<!-- 宣告三種狀態 --> <!-- 宣告一矩形,三種狀態下有不同顏色與位置 --><s:states> <s:Rect id="rect" width="100" height="100" <s:State name="state01" /> top.state01="10" <s:State name="state02" /> top.state02="150" <s:State name="state03" /> top.state03="200"</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>
  • 20. 加強的狀態語法例子<!-- 宣告一按鈕,在三種狀態下有不同點擊行為 --><s:Button verticalCenter="0" horizontalCenter="0" label.state01="State 01" label.state02="State 02" label.state03="State 03" click.state01="currentState = state02" click.state02="currentState = state03" click.state03="currentState = state01" />
  • 21. 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, …
  • 22. FlexFlash 工具差異 Flex Flash• 佈景主題 • 向量畫圖能力• 多國語言 • 時間軸、動畫能力• 專案管理 • WYSIWYG Editor• 獨立編譯器 • 媒體素材管理• 程式碼除錯
  • 23. FlashFlex 整合開發 Flex + Flash > 2XFlex 主要輸出對象是 Flash Player Runtime Flash 作得到的功能都能整合進 Flex
  • 24. Flex 開發方式 I Flexpng, jpg, ttf, svg, ... + as, mxml ─→ swf [Embed] 所有的圖像、聲音素材與程式碼都由 Flex SDK 編譯
  • 25. FlashFlex 整合開發方式 II Flash Flexfla + as ─→ swc + as, mxml ─→ swf Flash 負責編譯圖像、聲音素材與少部分 as Flex 負責最後整合編譯大部分 as
  • 26. FlashFlex 整合開發方式 III Flash Flex fla ─→ swf + as, mxml ─→ swf [Embed] 程式碼都由 Flex SDK 編譯 圖像、聲音素材都由 Flash IDE 輸出 SWF
  • 27. SWF 中間檔案的好處 單一素材資源檔案格式 程式碼編譯速度大幅提升 素材資源 與 程式碼 徹底分離
  • 28. AS3 Class & Flash SymbolFlash Symbol 元件與 AS3 Class 是一種鍊結關係,並非繼承 e.g. Class02→Class01→MovieClip Class01, Class02 可以自由決定鏈結的資源
  • 29. AS3 Symbol 鏈結方式比較• Flash IDE o Symbol 為主,鏈結 (linkage) 一個外部 Class o 同一個 Symbol 無法鏈結到多個 Class• Flex SDK o Class 為主,嵌入 (embed) 一個外部資源 o 同一個 Symbol 可以鏈結到多個 Class
  • 30. FlashFlex 整合開發方式 III 優點 Flash Flex fla --→ swf + as, mxml --→ swf [Embed]• 程式碼編譯快速• 程式開發環境單純• 能整合 Flash 所有功能• 可重複嵌入素材資源到不同類別上
  • 31. 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
  • 32. Flex App 開發經驗
  • 33. Flex 不是易開罐組件庫• 每個人需求不同,Flex 內建組件有限• Flex 提供了極具彈性的組件模型 o 先從既有組件挑選使用 o 嘗試自訂樣式、外觀 o 以 MXML 組合組件 o 以 AS3 繼承組件 o 找別人寫好的 o 最後才是從頭創造自己的組件
  • 34. 非不得已,不要直接修改 Flex 內建類別 必須自行維護相關組件 不能有效使用 RSL SWF, SWZ
  • 35. 如何挑選適合的組件 或是組件原型 最好將每個內建組件都玩過一下
  • 36. Flex 組件挑選條件• 是否為資料驅動的集合物件?• 是否包含其他子物件?• 子物件能不能被選擇?• 子物件排版功能?• 是否需要更換 Skin, Style?• …
  • 37. http://flex.org/tour/
  • 38. Flex 組件挑選實例http://ticore.blogspot.com/2008/04/flex-tab-tree.html
  • 39. 組件功能需求• 不同深度節點有不同的背景色• 相同深度下的節點同時只能打開一個• 可以使用鍵盤瀏覽每個節點• 來源資料是樹狀的,節點數量不固定
  • 40. 候選者 Tree VS Accordion Tree Accordion• 支援資料驅動 • 不支援資料驅動• 每個節點都可任意開關 • 永遠都有一個子容器打開• 支援用鍵盤瀏覽節點 • 鍵盤瀏覽不能跨子容器• 能客製化 ItemRenderer • 本身只能做到第一層分頁
  • 41. 不要過度使用 Flex 組件組件的開銷不低,每個都是繼承 UIComponent (Flex 4.x UIComponent 一萬多行)
  • 42. 適時改用低階 Flash 物件• e.g. 10 * 10 = 100 簡單按鈕陣列 o 不需要測量尺寸與排版功能 o 子物件不需要取得焦點 o 不需要可樣式化 o 不需要動態更換 Skin o 不需要多國語言• → 改用 Flash 低階物件實作 → 實作一個組件 取代 複合大量組件
  • 43. 進階 Flex 組件客製化
  • 44. 滑鼠可圈選的 TileListhttp://ticore.blogspot.com/2008/04/flex-3-mouse-selectable-tilelist-v3.html
  • 45. 滑鼠可圈選 TileList 繼承樹• UIComponent ~13,000 Lines ↑• ScrollControlBase ~1,500 Lines ↑• ListBase ~10,000 Lines ↑• TileBase ~2,800 Lines ↑• TileList ~100 Lines ↑• MouseSelectableTileList ~1,000 Lines
  • 46. 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
  • 47. Reference• Adobes 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/