Your SlideShare is downloading. ×
Flex 4 Skinning
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Flex 4 Skinning

2,158
views

Published on

Published in: Self Improvement

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

  • Be the first to like this

No Downloads
Views
Total Views
2,158
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
33
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 4 Skinning史偉龍 Ticore Shihhttp://ticore.blogspot.com/
  • 2. Flex 4 與 Flex 3 App MXMLFlex 3 MX Application:<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"></mx:Application>Flex 4 Spark Application:<?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" xmlns:mx="library://ns.adobe.com/flex/mx"></s:Application>
  • 3. Flex 4 與 Flex 3 NamespacesMXML 2006 舊的 MXML 名稱空間Prefix: mx URI: http://www.adobe.com/2006/mxmlMXML 2009 新的 MXML 純語法名稱空間,不含任何組件標籤Prefix: fx URI: http://ns.adobe.com/mxml/2009Spark 所有 Spark 組件名稱空間Prefix: s URI: library://ns.adobe.com/flex/sparkMX 所有 MX 組件名稱空間Prefix: mx URI: library://ns.adobe.com/flex/mx
  • 4. Spark 與 MX 組件對應關係• 大部分組件都能找到 Spark 對應版本 Button, CheckBox, NumericStepper, …• 容器組件可以用 Spark 組件 + Layout 組合出來 Canvas = Group + BasicLayout TileList = List + TileLayout• 找不到 Spark 對應組件時才延用 MX 組件 Tree, ViewStack, TileWindow, Grid, …
  • 5. Spark 與 MX 組件結構MX (Halo) Spark Behavior Logic Component DataUI Component Graphics CSS Layout States Animation Skin Parts
  • 6. Graphics AS3 Programmatic Embed SWFFlex 3 Embed Image Library SWC Flex 4 FXG Graphic MXML Graphic
  • 7. FXG 與 MXMLG 定義• 圖形與基本文字• 填色, 描邊, 漸層與點陣圖• 支援 Filters, Mask, Alpha, Transform 與 Blend Modes
  • 8. FXG 與 MXMLG 差異 FXG MXMLG 編譯格式 SWF Binary AS3 Bytecode 效能 比較好 比較差動態性、資料繫結 無 有 Namespace http://ns.adobe.com/fxg/2008 無 Flash, Illustrator, Fireworks, 交換性 Flex Flex, Flash Catalyst, … 外層容器 Spark or MX Sparkis DisplayObject? 是 否
  • 9. Spark 文字架構 Spark TextLabel, RichText, RichEditableText TLF - Text Layout Framework (flash.text.engine.*) FTE - Flash Text Engine (flashx.textLayout.*)
  • 10. Spark 文字分類• Label 最輕量 FTE 文字類別,類似 MX Label,沒有互動功能• RichText 中量文字類別,類似 MX Text,可以表現豐富格式化文字、段 落,也無法互動• RichEditableText 重量文字類別,類似 MX TextArea,支援捲動、選擇、編輯等 互動功能
  • 11. Spark 文字功能• 互動: 複製、剪下、貼上、復原、超連結、鍵盤滑鼠事件• 豐富的文字排版控制: 多欄文字、跨欄文字、雙向文字、垂直文字、TCY 文字、圖文並排、 字距、連字、大小寫、Digit Case、Digit Width• 文字影像處理: Transform, Mask, Blend Modes
  • 12. Spark Layout 基本語法• Layout 與 Container 分離 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> </mx:Application> <s:Application xmlns:s="library://ns.adobe.com/flex/spark"> <s:layout> <s:VerticalLayout paddingLeft="10" /> </s:layout> <s:Button top="100" /> </s:Application>
  • 13. Spark Layout 種類• 四種內建排版類別: – BasicLayout – VerticalLayout – HorizontalLayout – TileLayout• 自訂 Layout: – 繼承 spark.layouts.supportClasses.LayoutBase – 複寫 measure(), updateDisplayList() 方法
  • 14. MX 與 Spark 等價容器 MX component Spark equivalent Canvas Group + BasicLayout HBox Group + HorizontalLayout, or HGroup VBox Group + VerticalLayout, or VGroup Tile Group + TileLayout, or TileGroup List List + VerticalLayout TileList List + TileLayout HorizontalList List + HorizontalLayout• Spark Container Scrolling : Container + Scroller
  • 15. Spark 容器混搭組合• Spark Container + MX Control• MX Container + Spark Control• MX Navigator Container + Spark NavigatorContent – Accordion, TabNavigator, ViewStack• MX Control + Spark ItemRenderer
  • 16. Enhanced States Syntax• 定義 States <s:State name="default"/>• 改變目前 State currentState="newState"• 定義 State 的屬性、樣式、事件 propertyOrStyleName.stateName="..."• 添加或是移除某個 State 下的組件 <s:Button includeIn="stateName"/>• 定義 State 群組 <s:State name="stateName" stateGroups="groupName"/>
  • 17. Enhanced States Syntax• 清除 inline 設定的屬性 color.stateName="@Clear()"• 重新加入組件到不同容器 <fx:Reparent target="target" includeIn="stateName">• 控制 State 組件創建時機 itemCreationPolicy="immediate" | "deffered"• 控制 State 組件快取方式 itemDestructionPolicy="auto" | "never"• State 相關事件 State: enterState, exitState UIComponent: currentStateChanging, currentStateChange
  • 18. Spark Effects• Property Effects Animate, Fade, Resize, AnimateColor• Transform Effects Move, Rotate, Scale• 3D Effects Move3D, Rotate3D, Scale3D• Pixel-Shader Effects CrossFade, Wipe• Filter Effects DropShadowFilter, GlowFilter, BlurFilter, …
  • 19. CSS Namespaces<fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; @namespace ti "com.ticore.component.*"; s|Button { color: #FF0000; } mx|Button { color: #0000FF; }</fx:Style>
  • 20. Advanced CSS• ID Selector s|Button#btn { fontSize: 16; }• Descendant Selector s|Group s|Button { fontSize: 16; }• Pseudo Selector s|Button:over { fontSize: 16; }• Style Name Selector s|Button.btnStyle { fontSize: 16; }• Multiple Style Name styleName="style1 style2"
  • 21. Spark Skin Class• 設定 Skin Class 的方式 @namespace s "library://ns.adobe.com/flex/spark"; s|Button { skinClass: ClassReference("MyButtonSkin"); } <s:Button label="Button" skinClass="MyButtonSkin" /> myButton.setStyle("skinClass", Class(MyButtonSkin));
  • 22. 內建的 MXML Skin• MX Components – 繼承 mx.skins.spark.SparkSkinForHalo – mx.skins.spark.* – 路徑 Adobe Flash Builder 4sdks4.1.0 frameworksprojectssparkskinssrcmxskinsspark• Spark Components – 繼承 spark.skins.SparkSkin – spark.skins.spark.* – 路徑 Adobe Flash Builder 4sdks4.1.0 frameworksprojectssparksrcsparkskinsspark
  • 23. Spark Skinning 契約 Skin Class Host Component Host <fx:Metadata> n/acomponent [HostComponent(“xx.Button")] </fx:Metadata>Skin states <s:states> [SkinState("up")]; <s:State name="up"/> public class Button { ... } </s:states> Skin parts <s:Button id="upButton"/> [SkinPart(required="false")] public var upButton:Button; Data text="{hostComponent.title}" [Bindable] public var title:String;
  • 24. Spark MXML Skin 結構– Root Tag– Host Component– Skin States– Skin Parts– Layout– Subcomponents– Script Block

×