Flex 4で新たに追加されたSparkコンポーネントは、コンポーネントの見た目を容易に変更出来るようにSparkスキンアーキテクチャを採用しています。このSparkスキンアーキテクチャは、コンポーネントのロジックと見た目を明確に分離する特徴があります。それによって、コンポーネントのロジックを変更することなく見た目をSparkスキンで変更することが出来ます。また、Sparkスキンは、MXMLかFXGで作成でき、ツールによってSparkスキンの編集も容易に行うことが出来ます。

このチュートリアルでは、Sparkコンポーネントの標準SparkスキンとカスタムSparkスキンを紹介します。

このチュートリアルにおいて、「Haloコンポーネント」という用語は、今までのFlexに含まれていたFlexフレームワークコンポーネントを指します。「Sparkコンポーネント」という用語は、Flex 4における新しいコンポーネントを指します。

Sparkスキンの構成

Sparkスキンは、ルートタグをspark.skins.SparkSkinとして作成します。次に、Sparkコンポーネントに定義されているスキンステートとスキンパートを参照して作成します。

スキンステート：コンポーネントのスキンの状態
スキンパート：コンポーネントを形成する部品

Sparkスキンの適用方法

Sparkスキンは、Sparkコンポーネントのスタイルとして定義します。Sparkスキンを適用させるためのスタイル名は、skinClassです。

例) Buttonコンポーネントの場合
CSSに定義する場合は、ClassReferenceを利用してクラスを指定します。

        Button{
    skinClass: ClassReference("spark.skins.spark.ButtonSkin");
}

    

MXMLに定義する場合は、文字列でクラス名を定義します。

<s:Button skinClass=" spark.skins.spark.ButtonSkin "/>

ボタンコンポーネント

<s:Button />
標準スキンクラスは、spark.skins.spark.ButtonSkinです。

スキンステート

ステート名	説明
up	ボタンの領域の上にマウスポインタが無い時のステート
over	ボタンの領域の上にマウスポインタがある時のステート
down	ボタンの領域でマウスの左ボタンが押された時のステート
disabled	コントロールが無効な時のステート

スキンパート

パート名	説明
labelDisplay	Labelプロパティの値を表示するためのTextBaseコンポーネント

カスタム例) BlueButtonSkin
ボタンの色やボーダが青いボタンスキンです。

        <?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             minWidth="30"
             minHeight="30" 
             alpha.disabled="0.1">

    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

    <s:Rect id="fill" left="3" right="3" top="3" bottom="3" radiusX="0">
        <s:fill>
            <s:SolidColor color="0xBBEEFF"
                          color.over="0x6699EE"
                          color.down="0x3366DD"/> 
        </s:fill>
    </s:Rect>

    <s:Rect id="border" left="0" right="0" top="0" bottom="0" radiusX="0">
        <s:stroke>
            <s:SolidColorStroke color="0x0000ff" weight="3"/>
        </s:stroke>
    </s:Rect>

    <s:Label id="labelDisplay"
             textAlign="center"
             erticalAlign="middle"
             maxDisplayedLines="1"
             horizontalCenter="0"
             verticalCenter="1"
             left="10" right="10" top="4" bottom="4">
    </s:Label>

</s:SparkSkin>
    

<s:ToggleButton/>
標準スキンクラスは、spark.skins.spark.ToggleButtonSkinです。

スキンステート

ステート名	説明
up	ボタンの領域の上にマウスポインタが無い時のステート
over	ボタンの領域の上にマウスポインタがある時のステート
down	ボタンの領域でマウスの左ボタンが押された時のステート
disabled	ボタンが有効でない時のステート
upAndSelected	選択状態でかつ、ボタンの領域の上にマウスポインタが無い時のステート
overAndSelected	選択状態でかつ、ボタンの領域の上にマウスポインタがある時のステート
downAndSelected	選択状態でかつ、ボタンの領域でマウスの左ボタンが押された時のステート
disabledAndSelected	選択状態でかつ、コントロールが無効な時のステート

スキンパート

パート名	説明
labelDisplay	Labelプロパティの値を表示するためのTextBaseコンポーネント

カスタム例) BlueToggleButtonSkin
ボタンの色やボーダが青いボタンスキンです。選択時も青くなるようにステート毎にカラーを変更しています。

        <?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             minWidth="30"
             minHeight="30" 
             alpha.disabledStates="0.1">

    <s:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
        <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
        <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
        <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
    </s:states>

    <s:Rect id="fill" left="3" right="3" top="3" bottom="3" radiusX="0">
        <s:fill>
            <s:SolidColor color="0xBBEEFF"
                          color.over="0x6699EE"
                          color.down="0x3366DD"
                          color.upAndSelected="0x3366DD"
                          color.overAndSelected="0x3366BB"
                          color.downAndSelected="0x336699"
                          color.disabledAndSelected="0x3366DD"/> 
        </s:fill>
    </s:Rect>

    <s:Rect id="border" left="0" right="0" top="0" bottom="0" radiusX="0">
        <s:stroke>
            <s:SolidColorStroke color="0x0000ff" weight="3"/>
        </s:stroke>
    </s:Rect>

    <s:Label id="labelDisplay"
             textAlign="center"
             verticalAlign="middle"
             maxDisplayedLines="1"
             horizontalCenter="0"
             verticalCenter="1"
             left="10" right="10" top="4" bottom="4">
    </s:Label>

</s:SparkSkin>
    

<s:CheckBox/>
標準スキンクラスは、spark.skins.spark.CheckBoxSkinです。
スキンステートとスキン部品は、ToggleButtonSkinと同じです。

カスタム例) BlueCheckButtonSkin
ボタンの色やボーダが青いボタンスキンです。チェック時も青くなるようにステート毎にカラーを変更しています。

        <?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             minWidth="30"
             minHeight="30" 
             alpha.disabledStates="0.1">

    <s:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="upAndSelected" stateGroups="selectedStates" />
        <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
        <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
        <s:State name="disabledAndSelected" stateGroups="disabledStates, selectedStates" />
    <s:states>

    <s:Group verticalCenter="0" width="13" height="13">
        <s:Rect id="fill" left="3" right="3" top="3" bottom="3" radiusX="0">
            <s:fill>
                <s:SolidColor color="0x6666FF"
                              color.over="0x4444FF"
                              color.down="0x2222FF"
                              color.upAndSelected="0x2222FF"
                              color.overAndSelected="0x1111FF"
                              color.downAndSelected="0x0000FF"
                              color.disabledAndSelected="0x2222FF"/> 
            </s:fill>
        </s:Rect>

        <s:Path left="2" top="0" includeIn="selectedStates" id="check" itemCreationPolicy="immediate"
                data="M 9.2 0.1 L 4.05 6.55 L 3.15 5.0 L 0.05 5.0 L 4.6 9.7 L 12.05 0.1 L 9.2 0.1">
            <s:fill>
                <s:SolidColor id="checkMarkFill" color="0" alpha="0.8" />
            </s:fill>
        </s:Path>
    </s:Group>

    <s:Label id="labelDisplay"
             textAlign="center"
             verticalAlign="middle"
             maxDisplayedLines="1"
             horizontalCenter="0"
             verticalCenter="1"
             left="10" right="10" top="4" bottom="4">
    </s:Label>
</s:SparkSkin>
    

<s:RadioButton/>
標準スキンクラスは、spark.skins.spark.CheckBoxSkinです。
スキンステートとスキン部品は、ToggleButtonSkinと同じです。

カスタム例) BlueRadioButtonSkin
ボタンの色やボーダが青いボタンスキンです。選択時も青くなるようにステート毎にカラーを変更しています。

        <?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             minWidth="30"
             minHeight="30" 
             alpha.disabledStates="0.1">

    <s:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="upAndSelected" stateGroups="selectedStates" />
        <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
        <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
        <s:State name="disabledAndSelected" stateGroups="disabledStates, selectedStates" />
    <s:states>

    <s:Group verticalCenter="0" width="13" height="13">
        <s:Ellipse id="fill" left="1" top="1" right="1" bottom="1">
            <s:fill>
                <s:SolidColor color="0x6666FF"
                              color.over="0x4444FF"
                              color.down="0x2222FF"
                              color.upAndSelected="0x2222FF"
                              color.overAndSelected="0x1111FF"
                              color.downAndSelected="0x0000FF"
                              color.disabledAndSelected="0x2222FF"/> 
            </s:fill>
        </s:Ellipse>

        <s:Path left="4" top="4" includeIn="selectedStates" id="dot" itemCreationPolicy="immediate"
                data="M 2.5 0 Q 4.5 0.5 5 2.5 Q 4.5 4.5 2.5 5 Q 0.5 4.5 0 2.5 Q 0.5 0.5 2.5 0">
            <s:fill>
                <s:SolidColor id="dotFill" color="0" alpha="0.9" />
            </s:fill>
        </s:Path>
        <s:Path left="4" top="7" includeIn="selectedStates" 
                data="M 0 0 Q 0.5 2 2.5 2.0 Q 3.5 2.0 4 0">
            <s:stroke>
                <s:LinearGradientStroke>
                    <s:GradientEntry color="0xFFFFFF" alpha="0.3" />
                    <s:GradientEntry color="0xFFFFFF" alpha="0.7" />
                    <s:GradientEntry color="0xFFFFFF" alpha="0.3" />
                </s:LinearGradientStroke>
            </s:stroke>
        </s:Path>
    </s:Group>

    <s:Label id="labelDisplay"
             textAlign="center"
             verticalAlign="middle"
             maxDisplayedLines="1"
             horizontalCenter="0"
             verticalCenter="1"
            left="10" right="10" top="4" bottom="4">
    </s:Label>
</s:SparkSkin>
    

例)ButtonSkins.mxml

画像をクリックいただくとサンプルSWFファイルが表示されます

リスト表示コンポーネント

<s:List/>
標準スキンクラスは、spark.skins.spark.ListSkinです。

スキンステート

ステート名	説明
normal	通常時のステート
disabled	コントロールが無効な時のステート

スキンパート

パート名	説明
dropIndicator	ドラッグ時に表示されるコンポーネントのクラスファクトリ
scroller	dataGroupをスクロールするためのScrollerコンポーネント
dataGroup	リストデータを表示するためのDataGroupコンポーネント

カスタム例) BlueListSkin
背景色やボーダが青いリストスキンです。

        <?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             minWidth="112"
             minHeight="30" 
             alpha.disabled="0.1"
             blendMode="normal"> 

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

    <fx:Declarations>
        <fx:Component id="dropIndicator">
            <s:Group minWidth="3" minHeight="3" maxWidth="3" maxHeight="3">
                <s:Rect left="0" right="0" top="0" bottom="0">
                    <s:fill>
                        <!--- Defines the color of the background. -->
                        <s:SolidColor color="0xBBBBBB" />
                    </s:fill>
                    <s:stroke>
                        <s:SolidColorStroke color="0x868686" weight="1"/>
                    </s:stroke>
                </s:Rect>
            </s:Group>
        </fx:Component>
    </fx:Declarations>

    <s:Rect id="fill" left="3" right="3" top="3" bottom="3" radiusX="0">
        <s:fill>
            <s:SolidColor color="0xBBEEFF"/>
        </s:fill>
    </s:Rect>

    <s:Rect id="border" left="0" right="0" top="0" bottom="0" radiusX="0">
        <s:stroke>
            <s:SolidColorStroke color="0x0000ff" weight="3"/>
        </s:stroke>
    </s:Rect>

    <s:Scroller left="0" top="0" right="0" bottom="0" id="scroller" minViewportInset="1" hasFocusableChildren="false">
        <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
            <s:layout>
                <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedMinRowCount="5" />
            </s:layout>
        </s:DataGroup>
    </s:Scroller>
</s:SparkSkin>
    

<s:DropDownList/>
標準スキンクラスは、spark.skins.spark.DropDownListSkinです。

スキンステート

ステート名	説明
normal	通常時のステート
open	リストが開いている時のステート
disabled	コントロールが無効な時のステート

スキンパート

パート名	説明
dropDown	ドロップ表示されるコンテンツを保持したPopupAnchorコンポーネント
openButton	dropDownの開閉を行うためのButtonBaseコンポーネント
labelDisplay	選択された値を表示するためのTextBaseコンポーネント

カスタム例) BlueDropDownListSkin
リストを表示するボタンとリストの背景色やボーダが青いスキンです。

        <?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             minWidth="112"
             minHeight="30" 
             alpha.disabled="0.1"
             blendMode="normal"> 

    <s:states>
        <s:State name="normal" />
        <s:State name="open" />
        <s:State name="disabled" />
    </s:states>

    <s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
                   left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
                   popUpPosition="below" popUpWidthMatchesAnchorWidth="true">

        <s:Group id="dropDown" maxHeight="134" minHeight="22" >

            <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.45" distance="7" 
                                     angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>

            <s:Rect id="fill" left="3" right="3" top="3" bottom="3" radiusX="0">
                <s:fill>
                    <s:SolidColor color="0xBBEEFF"/> 
                </s:fill>
            </s:Rect>

            <s:Rect id="border" left="0" right="0" top="0" bottom="0" radiusX="0">
                <s:stroke>
                    <s:SolidColorStroke color="0x0000ff" weight="3"/>
                </s:stroke>
            </s:Rect> 

            <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1">
                <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
                    <s:layout>
                        <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
                    </s:layout>
                </s:DataGroup> 
            </s:Scroller>
        </s:Group>
    </s:PopUpAnchor>

    <s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false"
              skinClass="skins.buttons.BlueButtonSkin"/> 

    <s:Label id="labelDisplay" verticalAlign="middle" maxDisplayedLines="1" 
             mouseEnabled="false" mouseChildren="false"
             left="7" right="30" top="2" bottom="2" width="75" verticalCenter="1" /> 

</s:SparkSkin>
    

例) ListSkins.mxml

画像をクリックいただくとサンプルSWFファイルが表示されます

数値入力コンポーネント

<s:VSlider/>
標準スキンクラスは、spark.skins.spark.VSliderSkinです。

スキンステート

ステート名	説明
normal	通常時のステート
disabled	コントロールが無効な時のステート

スキンパート

パート名	説明
dataTip	データをポップアップ表示するコンポーネントのクラスファクトリ
thum	サムネイル用のButtonBaseコンポーネント
track	トラック用のButtonBaseコンポーネント

カスタム例) BlueVSliderSkin
スライダーのサムネイルや軸が青いスキンです。

        <?xml version="1.0"encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             minHeight="11"
             alpha.disabled="0.1"> 

    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
    </s:states>

    <s:Button id="track"left="0"right="0"top="0"bottom="0"minHeight="33"height="100"
              skinClass="skins.buttons.BlueButtonSkin"/>

    <s:Button id="thumb"left="0"right="0"width="11"height="11"
              skinClass="skins.buttons.BlueButtonSkin"/>

</s:SparkSkin>
    

<s:HSlider/>
標準スキンクラスは、spark.skins.spark.HSliderSkinです。
スキンステートとスキン部品は、VSlideと同じです。

カスタム例) BlueHSliderSkin
スライダーのサムネイルや軸が青いスキンです。

        <?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             minHeight="11" 
             alpha.disabled="0.1"> 

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

    <s:Button id="track" left="0" right="0" top="0" bottom="0" minWidth="33" width="100"
              skinClass="skins.buttons.BlueButtonSkin" />

    <s:Button id="thumb" top="0" bottom="0" width="11" height="11" 
              skinClass="skins.buttons.BlueButtonSkin" />
</s:SparkSkin>
    

<s:NumericStepper/>
標準スキンクラスは、spark.skins.spark.NumericStepperSkinです。

スキンステート

ステート名	説明
normal	通常時のステート
disabled	コントロールが無効な時のステート

スキンパート

パート名	説明
incrementButton	値を増やすためのButtonBaseコンポーネント
decrementButton	値を減らすためのButtonBaseコンポーネント
textDisplay	値を表示するためのTextBaseコンポーネント

カスタム例) BlueNumericStepperSkin
加減するボタンが青いスキンです。

        <?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             minHeight="23"
             minWidth="40"
             alpha.disabled="0.1">

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

    <s:Button id="incrementButton" right="0" top="0" height="13" width="20"
              skinClass="skins.buttons.BlueButtonSkin" label="up"/>

    <s:Button id="decrementButton" right="0" bottom="0" height="13" width="20" 
              skinClass="skins.buttons.BlueButtonSkin" label="down"/>

    <s:TextInput id="textDisplay" left="0" top="0" right="18" bottom="0"
              skinClass="spark.skins.spark.NumericStepperTextInputSkin" />

</s:SparkSkin>
    

例) NumericInputSkins.mxml

画像をクリックいただくとサンプルSWFファイルが表示されます

テキストコンポーネント

<s:TextInput/>
標準スキンクラスは、spark.skins.spark.TextInputSkinです。

スキンステート

ステート名	説明
normal	通常時のステート
disabled	コントロールが無効な時のステート

スキンパート

パート名	説明
textDisplay	テキスト文字列を表示するためのTextBaseコンポーネント

カスタム例) BlueTextInputSkin
背景とボーダが青いスキンです。

        <?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             alpha.disabled="0.5"
             blendMode="normal">

    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
    </s:states>

    <s:Rect left="0" right="0" top="0" bottom="0" id="border">
        <s:stroke>
            <s:SolidColorStroke id="borderStroke" weight="1" color="0x3366FF"/>
        </s:stroke>
    </s:Rect>

    <s:Rect id="background" left="1" right="1" top="1" bottom="1">
        <s:fill>
            <s:SolidColor id="bgFill" color="0xBBDDFF" />
        </s:fill>
    </s:Rect>

    <s:RichEditableText id="textDisplay"
            verticalAlign="middle"
            widthInChars="10"
            left="1" right="1" top="1" bottom="1" />

</s:SparkSkin>
    

<s:TextArea/>
標準スキンクラスは、spark.skins.spark.TextAreaSkinです。

スキンステート

ステート名	説明
normal	通常時のステート
disabled	コントロールが無効な時のステート

スキンパート

パート名	説明
scroller	textDisplayのスクロールするためのScrollコンポーネント
textDisplay	テキスト文字列を表示するためのTextBaseコンポーネント

カスタム例) BlueTextAreaSkin
背景とボーダが青いスキンです。

        <?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             alpha.disabled="0.5"
             blendMode="normal">

    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
    </s:states>
    <s:Rect id="border" left="0" right="0" top="0" bottom="0">
        <s:stroke>
            <s:SolidColorStroke id="borderStroke" weight="1" color="0x3366FF"/>
        </s:stroke>
    </s:Rect>
    <s:Rect id="background" left="1" right="1" top="1" bottom="1">
        <s:fill>
            <s:SolidColor id="bgFill" color="0xBBDDFF" />
        </s:fill>
    </s:Rect>

    <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" minViewportInset="1" measuredSizeIncludesScrollBars="false" hasFocusableChildren="false">
        <s:RichEditableText id="textDisplay"
                heightInLines="10"
                widthInChars="15" />
    </s:Scroller>

</s:SparkSkin>
    

例) TextSkins.mxml

画像をクリックいただくとサンプルSWFファイルが表示されます

おわりに

今回のチュートリアルでは、Sparkコンポーネントの見た目を変更する為のSparkスキンについて紹介しました。チュートリアルサンプルでは、Sparkコンポーネントのスキンをカスタマイズすることで理解を深めることができたと思います。また、Flex 4には、ここでは紹介できなかったスキンが提供されているので、他のコンポーネントもスキンをカスタマイズしてみて下さい。

次のチュートリアルでは、SparkコンポーネントとSparkスキンアーキテクチャをより詳しく説明します。

ご購入方法

ダウンロード

会社情報

国・地域および言語の選択

当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー（2011年9月30日更新）にご同意いただいたものとみなされます。

Flex 4 マスターシリーズ #07 Spark Skining part 1

著者有川榮一氏

Content

作成日

ページツール

Tags

必要条件

ユーザーレベル

必要な製品

その他の要件

Flex 4 マスターシリーズ連載記事一覧

はじめに

Sparkスキンの構成

Sparkスキンの適用方法

ボタンコンポーネント

リスト表示コンポーネント

数値入力コンポーネント

テキストコンポーネント

おわりに

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

Flex 4 マスターシリーズ #07 Spark Skining part 1

著者 有川 榮一氏

Content

作成日

ページ ツール

Tags

必要条件

ユーザーレベル

必要な製品

その他の要件

Flex 4 マスターシリーズ 連載記事一覧

はじめに

Sparkスキンの構成

Sparkスキンの適用方法

ボタンコンポーネント

リスト表示コンポーネント

数値入力コンポーネント

テキストコンポーネント

おわりに

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

著者有川榮一氏

ページツール

Flex 4 マスターシリーズ連載記事一覧