Flex 4 Skinning

Flex 4 Skinning

史偉龍 Ticore Shih
http://ticore.blogspot.com/

Flex 4 與 Flex 3 App MXML
Flex 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 Namespaces
MXML 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 + BasicLayout
TileList = List + TileLayout

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

Spark 與 MX 組件結構
MX (Halo) Spark
Behavior
Logic Component
Data

UI Component
Graphics CSS
Layout
States
Animation Skin
Parts

Graphics

AS3 Programmatic
Embed SWF
Flex 3 Embed Image
Library SWC Flex 4
FXG Graphic
MXML Graphic

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
Flex, Flash Catalyst, …

外層容器 Spark or MX Spark
is DisplayObject? 是否

Spark 文字架構

Spark Text
Label, RichText, RichEditableText

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

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

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 等價容器
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

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"/>

• 改變目前 State
currentState="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, exitState
UIComponent: currentStateChanging, currentStateChange

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, …

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 4sdks4.1.0
frameworksprojectssparkskinssrcmxskinsspark

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

– 路徑 Adobe Flash Builder 4sdks4.1.0
frameworksprojectssparksrcsparkskinsspark

Spark Skinning 契約
Skin Class Host Component

Host <fx:Metadata> n/a
component [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;

Spark MXML Skin 結構
– Root Tag

– Host Component

– Skin States

– Skin Parts

– Layout

– Subcomponents

– Script Block

Flex 4 Skinning

Recommandé

Recommandé

Contenu connexe

Similaire à Flex 4 Skinning

Similaire à Flex 4 Skinning (20)

Flex 4 Skinning