Flex 4 Skinning

史偉龍 Ticore Shihhttp://ticore.blogspot.com/

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>

Flex 4 與 Flex 3 NamespacesMXML 2006 舊的MXML 名稱空間Prefix: mx URI: http://www.adobe.com/2006/mxml

MXML 2009 新的MXML 純語法名稱空間，不含任何組件標籤Prefix: fx URI: http://ns.adobe.com/mxml/2009

Spark 所有 Spark 組件名稱空間Prefix: s URI: library://ns.adobe.com/flex/spark

MX 所有MX 組件名稱空間Prefix: mx URI: library://ns.adobe.com/flex/mx

Spark 與 MX 組件對應關係

• 大部分組件都能找到 Spark 對應版本Button, CheckBox, NumericStepper, …

• 容器組件可以用 Spark 組件 + Layout 組合出來Canvas = Group + BasicLayoutTileList = List + TileLayout

• 找不到 Spark 對應組件時才延用MX 組件Tree, ViewStack, TileWindow, Grid, …

UI Component

Component

Skin

GraphicsLayoutStatesAnimationParts

BehaviorLogicData

MX (Halo) Spark

Spark 與 MX 組件結構

CSS

Graphics

AS3 ProgrammaticEmbed SWFEmbed ImageLibrary SWC

FXG GraphicMXML Graphic

Flex 4Flex 3

FXG 與 MXMLG 定義

• 圖形與基本文字

• 填色, 描邊, 漸層與點陣圖

• 支援 Filters, Mask, Alpha, Transform與 Blend Modes

FXG 與 MXMLG 差異

FXG MXMLG

編譯格式 SWF Binary AS3 Bytecode

效能 比較好 比較差

動態性、資料繫結 無 有

Namespace http://ns.adobe.com/fxg/2008 無

交換性Flash, Illustrator, Fireworks,Flex, Flash Catalyst, … Flex

外層容器 Spark or MX Spark

is DisplayObject? 是 否

Spark 文字架構

FTE - Flash Text Engine(flashx.textLayout.*)

TLF - Text Layout Framework(flash.text.engine.*)

Spark TextLabel, RichText, RichEditableText

Spark 文字分類

• Label最輕量 FTE 文字類別，類似MX Label，沒有互動功能

• RichText中量文字類別，類似MX Text，可以表現豐富格式化文字、段落，也無法互動

• RichEditableText重量文字類別，類似MX TextArea，支援捲動、選擇、編輯等互動功能

Spark 文字功能

• 互動：

複製、剪下、貼上、復原、超連結、鍵盤滑鼠事件

• 豐富的文字排版控制：

多欄文字、跨欄文字、雙向文字、垂直文字、TCY 文字、圖文並排、

字距、連字、大小寫、Digit Case、Digit Width

• 文字影像處理：

Transform, Mask, Blend Modes

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>

Spark Layout 種類

• 四種內建排版類別:– BasicLayout– VerticalLayout– HorizontalLayout– TileLayout

• 自訂 Layout:– 繼承 spark.layouts.supportClasses.LayoutBase– 複寫 measure(), updateDisplayList() 方法

MX 與 Spark 等價容器

• Spark Container Scrolling : Container + Scroller

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 容器混搭組合

• Spark Container + MX Control

• MX Container + Spark Control

• MX Navigator Container + Spark NavigatorContent– Accordion, TabNavigator, ViewStack

• MX Control + Spark ItemRenderer

Enhanced States Syntax

• 定義 States<s:State name="default"/>

• 改變目前 StatecurrentState="newState"

• 定義 State 的屬性、樣式、事件propertyOrStyleName.stateName="..."

• 添加或是移除某個 State 下的組件<s:Button includeIn="stateName"/>

• 定義 State 群組<s:State name="stateName" stateGroups="groupName"/>

Enhanced States Syntax

• 清除 inline 設定的屬性color.stateName="@Clear()"

• 重新加入組件到不同容器<fx:Reparent target="target" includeIn="stateName">

• 控制 State 組件創建時機itemCreationPolicy="immediate" | "deffered"

• 控制 State 組件快取方式itemDestructionPolicy="auto" | "never"

• State 相關事件State: enterState, exitStateUIComponent: currentStateChanging, currentStateChange

Spark Effects

• Property EffectsAnimate, Fade, Resize, AnimateColor

• Transform EffectsMove, Rotate, Scale

• 3D EffectsMove3D, Rotate3D, Scale3D

• Pixel-Shader EffectsCrossFade, Wipe

• Filter EffectsDropShadowFilter, GlowFilter, BlurFilter, …

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>

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"

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));

內建的 MXML Skin• MX Components

– 繼承 mx.skins.spark.SparkSkinForHalo– mx.skins.spark.*– 路徑 \Adobe Flash Builder 4\sdks\4.1.0

\frameworks\projects\sparkskins\src\mx\skins\spark

• Spark Components– 繼承 spark.skins.SparkSkin– spark.skins.spark.*

– 路徑 \Adobe Flash Builder 4\sdks\4.1.0\frameworks\projects\spark\src\spark\skins\spark

Spark Skinning 契約Skin Class Host Component

Host component

<fx:Metadata> [HostComponent(“xx.Button")]

</fx:Metadata>

n/a

Skin states <s:states><s:State name="up"/>

</s:states>

[SkinState("up")];public class Button { ... }

Skin parts <s:Button id="upButton"/> [SkinPart(required="false")]public var upButton:Button;

Data text="{hostComponent.title}" [Bindable]public var title:String;

Spark MXML Skin 結構

– Root Tag

– Host Component

– Skin States

– Skin Parts

– Layout

– Subcomponents

– Script Block