今までのFlexでは、Flexフレームワークコンポーネントが使われていました。Flex 4からは、Sparkコンポーネントが追加されます。Sparkコンポーネントには、Flexフレームワークコンポーネントをベースに新しいコンポーネントとスキンアーキテクチャが導入されました。また、Flex 3との後方互換性があります。

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

ネームスペース

次に、Sparkコンポーネント用のネームスペースの紹介です。Flex4では、MXML 2009が採用されているので、以前のFlexのように一つのネームスペースではありません。Sparkコンポーネントのネームスペースは、library://ns.adobe.com/flex/sparkです。このネームスペースに新しいSparkコンポーネントが含まれています。また、MXML 2009にために、Haloコンポーネントのネームスペースも変更されて、library://ns.adobe.com/flex/mxになります。

Flex 4の基本的に使用するネームスペース

MXML 2009 (言語タグとビルドインクラスタグを含む)	http://ns.adobe.com/mxml/2009
Haloコンポーネント	library://ns.adobe.com/flex/mx
Sparkコンポーネント	library://ns.adobe.com/flex/spark

        <?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>
    

コントロールとコンテナ

次に、Sparkコンポーネントの新しいコントロールとコンテナをHaloコンポーネントと比較しながら紹介します。

まず、HaloコンポーネントとSparkコンポーネントの対応表を以下に示します。

Halo コンポーネント	Spark コンポーネント
mx.controls.Button	spark.components.Button
mx.controls.ButtonBar	spark.components.ButtonBar
mx.controls.CheckBox	spark.components.CheckBox
mx.controls.ComboBox	spark.components.DropDownList
mx.controls.HorizontalList	spark.components.List + HorizontalLayout
mx.controls.HRule	spark.primitives.Line
mx.controls.HScrollBar	spark.components.HScrollBar
mx.controls.HSlider	spark.components.HSlider
mx.controls.Image	spark.primitives.BitmapImage
mx.controls.LinkBar	spark.components.ButtonBar
mx.controls.LinkButton	spark.components.Button
mx.controls.List	spark.components.List
mx.controls.NumericStepper	spark.components.NumericStepper
mx.controls.RadioButton	spark.components.RadioButton
mx.controls.RadioButtonGroup	spark.components.RadioButtonGroup
mx.controls.TextArea	spark.components.TextArea
mx.controls.TextInput	spark.components.TextInput
mx.controls.TileList	spark.components.List+TileLayout
mx.controls.ToggleButtonBar	spark.components.ButtonBar
mx.controls.VideoDisplay	spark.components.VideoPlayer
mx.controls.VRule	spark.primitives.Line
mx.controls.VScrollBar	spark.components.VScrollBar
mx.controls.VSlider	spark.components.VSlider
mx.core.Application	spark.components.Application
mx.core.Window	spark.components.Window
mx.core.WindowedApplication	Spark.components.WindowedApplication
mx.containers.ApplicationControlBar	spark.components.Application+controlBarContent
mx.containers.Canvas	spark.components.Group
mx.containers.ControlBar	spark.components.Panel+controlBarContent
mx.containers.HBox	spark.components.HGroup
mx.containers.Panel	spark.components.Panel
mx.containers.Tile	spark.components.TileGroup
mx.containers.VBox	spark.components.VGroup

下記表は、Sparkコンポーネントには対応するクラスがないHaloコンポーネント一覧です。これらコンポーネントは、Sparkコンポーネントと混在させて使用することになります。

mx.controls.Alert
mx.controls.ColorPicker
mx.controls.DataGrid
mx.controls.DateChooser
mx.controls.DateField
mx.controls.Menu
mx.controls.MenuBar
mx.controls.PopUpButton
mx.controls.PopUpMenuButton
mx.controls.ProgressBar
mx.controls.RichTextEditor
mx.controls.TabBar
mx.controls.Tree
mx.containers.Accordion
mx.containers.ApplicationControlBar
mx.containers.ControlBar
mx.containers.DividedBox
mx.containers.Form
mx.containers.Grid
mx.containers.TabNavigator
mx.containers.TitleWindow
mx.containers.ViewStack

ボタンコンポーネント

<s:Button label="" emphasized="false"/>
ラベルがついた矩形のボタンです。

プロパティ	説明
label	ボタンのラベル
emphasized	強調するかどうか

http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/Button.html

<s:ToggleButton label="" selected="false"/>
状態を保持するボタンです。一度クリックすると押下状態になり、もう一度クリックすると選択状態が解除されます。

プロパティ	説明
label	ボタンのラベル
selected	選択状態かどうか

http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/ToggleButton.html

<s:CheckBox label="" selected="false"/>
ラベルとチェックマークのボタンです。ラベルの部分もクリックするとチェックのオンオフが切り替わります。

プロパティ	説明
label	チェックの右に表示するラベル
selected	選択状態かどうか

http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/CheckBox.html

<s:RadioButton label="" groupName="" value=""/>
複数の値から1つの値を選択します。groupName を指定することによって、グループ内での排他的に選択を行えるようになります。

プロパティ	説明
label	チェックの右に表示するラベル
groupName	ラジオボタンのグループ名グループ名の定義は、<s:RadioButtonGroup>を用います
value	ラジオボタンの値

http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/RadioButton.html

<s:RadioButtonGroup id="" selectedValue=""/>
ラジオボタングループを定義します。デフォルト値など初期選択値など指定できます。

プロパティ	説明
id	ラジオボタングループ名
selectedValue	グループ内で選択されている値

http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/RadioButtonGroup.html

<s:ButtonBar requireSelection="false" selectedIndex="" dataProvider=""　labelField="">
ボタンを横に並べて、排他的に選択することができます。

プロパティ	説明
requireSelection	選択必須かどうか
selectedIndex	選択されているインデックス
dataProvider	ボタンを生成するデータリスト

http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/ButtonBar.html

例

        <s:Button label="Button"/>
<s:Button label="Button" emphasized="true" id="defaultButton"/>

<s:ToggleButton selected="true" label="ToggleButton Selected"/>
<s:ToggleButton selected="false" label="ToggleButton"/>

<s:CheckBox selected="true" label="CheckBox Selected"/>
<s:CheckBox selected="false" label="CheckBox"/>

<s:RadioButton label="RadioButton1" groupName="group1" value="0"/>
<s:RadioButton label="RadioButton2" groupName="group1" value="1"/>
<s:RadioButton label="RadioButton3" groupName="group1" value="2"/>

<s:ButtonBar requireSelection="true" selectedIndex="2">
    <s:dataProvider>
        <s:ArrayCollection source="['ButtonBar1', 'ButtonBar2', 'ButtonBar3']" />
    </s:dataProvider>
</s:ButtonBar>
    

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

リスト表示

<s:List dataProvider="" allowMultipleSelection="false">
<s:itemRenderer/>
<s:layout>
</s:List>
リストデータをリスト表示します。レイアウトを変えることでデータの並びをカスタマイズできます。

プロパティ	説明
dataProvider	表示するデータのリスト
allowMultipleSelection	複数選択可能にするかどうか
itemRenderer	データを表示するコンポーネント
layout	データを表示するレイアウトを指定
selectedIndex	選択しているインデックスを指定

http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/List.html

<s:DropDownList dataProvider="" prompt="">
<s:itemRenderer/>
</s:DropDownList>
リストデータから1つの値を選択することを可能にする。選択された値だけを表示する。

プロパティ	説明
dataProvider	表示するデータのリスト
prompt	リストが選択されていない時にラベルに表示する文字列
itemRenderer	データを表示するコンポーネント
selectedIndex	選択しているインデックを指定

http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/DropDownList.html

例)

        <s:DropDownList dataProvider="{dataSource}"
                    width="250"
                    prompt="single selection"
                    >
    <s:itemRenderer>
        <fx:Component>
            <s:ItemRenderer height="30" width="200">
                <s:Label text="{data}"/>
            </s:ItemRenderer>
        </fx:Component>
    </s:itemRenderer>
</s:DropDownList>

<s:List selectedIndex="2"
         dataProvider="{dataSource}" 
         allowMultipleSelection="false"
         height="150" width="200"
         >
    <s:itemRenderer>
        <fx:Component>
            <s:ItemRenderer height="30" width="180">
                <s:Label text="{data}"/>
            </s:ItemRenderer>
        </fx:Component>
    </s:itemRenderer>
</s:List>

<s:List dataProvider="{dataSource}"
          allowMultipleSelection="true"
          height="150" width="200"
          >
    <s:itemRenderer>
        <fx:Component>
            <s:ItemRenderer height="30" width="180">
                <s:Label text="{data}"/>
            </s:ItemRenderer>
        </fx:Component>
    </s:itemRenderer>
</s:List>

<s:List dataProvider="{dataSource}"
          allowMultipleSelection="true"
          height="30" width="400"
          >
    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>
    <s:itemRenderer>
        <fx:Component>
            <s:ItemRenderer height="30">
                <s:Label text="{data}"/>
            </s:ItemRenderer>
        </fx:Component>
    </s:itemRenderer>
</s:List>
    

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

数値入力コンポーネント

<s:VSlider minimum="" maximum="" stepSize="" value="" liveDragging=""/>
縦方向のスライダーです。軸をクリックするかつまみをドラッグして値を変更します。

プロパティ	説明
minimum	最小値
maximum	最大値
stepSize	軸の目盛の間の値
value	現在の値
liveDragging	ドラッグしながら値を変更できるかどうか

http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/HSlider.html

<s:HSlider minimum="" maximum="" stepSize="" value="" liveDragging=""/>
横方向のスライダーです。軸をクリックするかつまみをドラッグして値を変更します。

プロパティ	説明
minimum	最小値
maximum	最大値
stepSize	軸の目盛の間の値
value	現在の値
liveDragging	ドラッグしながら値を変更できるかどうか

http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/HSlider.html

<s:Spinner minimum="" maximum="" stepSize="" value=""/>
上下ボタンで数値をstepSizeの値で加減することが可能なコンポーネントです。

プロパティ	説明
minimum	最小値
maximum	最大値
stepSize	加減する値
value	現在の値

http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/Spinner.html

<s:NumericStepper minimum="0" maximum="" stepSize="" value=""/>
Spinnerの機能と数値入力可能エリアを合わせたコンポーネントです。

プロパティ	説明
minimum	最小値
maximum	最大値
stepSize	加減する値
value	現在の値

http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/NumericStepper.html

例) NumericInputs.mxml

        <s:VSlider minimum="0" maximum="100" stepSize="10" value="50" liveDragging="true"/>
			
<s:HSlider minimum="0" maximum="100" stepSize="10" value="50" liveDragging="true"/>

<s:Label text="{spinner1.value}"/>
<s:Spinner id="spinner1" minimum="0" maximum="100" stepSize="10" value="50"/>

<s:NumericStepper minimum="0" maximum="100" stepSize="10" value="50"/>

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

テキストコンポーネント

新しいテキストコンポーネントは、FTE(Flash Text Engine)とTLF(Text Layout Framework)をベースとしているため、柔軟なテキスト表現を可能にしています。次に基本的なテキストコンポーネントであるLabel、RichText、RichEditableTextの機能一覧を表で示します。詳しくは、オンラインドキュメントをご覧ください。http://opensource.adobe.com/wiki/display/flexsdk/Spark+Text+Primitives

機能	Label	RichText	RichEditableText
ベース機能	FTE	TLF	TLF
高度なタイポグラフィー	Y	Y	Y
透明度	Y	Y	Y
回転	Y	Y	Y
二方向テキスト	Y	Y	Y
複数行	Y	Y	Y
CSSによる書式	Y	Y	Y
複数書式	N	Y	Y
複数段落	N	Y	Y
テキストオブジェクトモデル	N	Y	Y
マークアップ言語	N	Y	Y
インライングラフィック	N	Y	Y
ハイパーリンク	N	N	Y
スクロール	N	N	Y
選択	N	N	Y
編集	N	N	Y

<s:Label text="" direction=""/>
FTEをベースとした一行のテキストを表示します。文字の方向を変更できます。

プロパティ	説明
text	テキスト
direction	テキストを表示する横方向 ltr：左から右 rtl：右から左

http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/Label.html

<s:RichText direction="" textRotation="" blockProgression="" >
<s:textFlow/>
</s:RichText>
TLFをベースとしたテキスト複数表示ができます。

プロパティ	説明
textFlow	表示されるリッチテキストを表すTextFlow
direction	テキスト入力する方向 ltr：左から右 rtl：右から左
textRotation	文字の回転 auto, rotate0, rotate90, rotate180, rotate270
blockProgression	テキスト領域を追加する方向 rl：右から左 tb：上から下

http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/TextInput.html

<s:RichEditableText direction="" textRotation=" " blockProgression=""/>
TLFをベースとしたテキスト複数行入力ができます。
http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/TextArea.html

<s:TextInput text="" direction="" displayAsPassword=""/>
RichEditableTextをベースとしたテキスト一行入力ができます。パスワード表示も可能です。
http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/TextInput.html

<s:TextArea text="" direction="" textRotation=" " blockProgression=""/>
RichEditableTextをベースとしたテキスト複数行入力ができます。
http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/TextArea.html

例) Texts.mxml

        <s:Label text="Label" width="200" backgroundColor="#EEEEEE"/>
<s:Label text="Label" direction="rtl" width="200" backgroundColor="#EEEEEE"/>

<s:RichText width="200" textAlign="justify">
    <s:textFlow>
        <s:TextFlow>Hello World! This is a justified paragraph of ...</s:TextFlow>
    </s:textFlow>
</s:RichText>
<s:RichText width="200" height="120" columnCount="2" columnGap="10">
    <s:textFlow>
        <s:TextFlow><s:span fontWeight="bold">Hello World!</s:span>...</s:TextFlow>
    </s:textFlow>
</s:RichText>

<s:RichEditableText id="richTxt1" textAlign="justify" backgroundColor="#EEEEEE"
                        width="400" height="80">
    <s:textFlow>
        <s:TextFlow>
            <s:p fontSize="24">Inline TextFlow</s:p>
            <s:p>1) Test</s:p>
            <s:p>2) 日本語</s:p>
        </s:TextFlow>
    </s:textFlow>
</s:RichEditableText>

<s:TextInput text="TextInput"/>
<s:TextInput text="TextInput" direction="rtl"/>
<s:TextInput text="TextInput" displayAsPassword="true"/>

<s:TextArea text="TextArea" width="100"/>
<s:TextArea direction="rtl" width="100">
    Text <s:span fontWeight="bold" fontSize="20">Area</s:span>
</s:TextArea>
<s:TextArea textRotation="rotate270" width="100">
    Text <s:span fontWeight="bold">Area</s:span>
</s:TextArea>
    

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

コンテナコンポーネント

<s:Group/>
子エレメントを配置することができます。レイアウトは、座標指定で行います。またレイアウトを変更することで、子エレメントの配置を変更することができます。
http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/Group.html

<s:VGroup/>
子エレメントを配置することができます。レイアウトは、子エレメントが定義された順番で縦方向に配置します。
http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/VGroup.html

<s:HGroup/>
子エレメントを配置することができます。レイアウトは、子エレメントが定義された順番で横方向に配置します。
http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/HGroup.html

<s:TileGroup rowHeight="" columnWidth =""/>
子エレメントを配置することができます。レイアウトは、子エレメントが定義された順番でタイル状に配置します。

プロパティ	説明
rowHeight	行の高さ
columnWidth	列の幅

http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/TileGroup.html

<s:DataGroup dataProvider="">
<s:itemRenderer/>
</s:DataGroup>
データプロバイダのデータと同じ数だけデータ表示用コンポーネントを生成し縦方向に配置します。

プロパティ	説明
dataProvider	表示するデータのリスト
itemRenderer	データを表示するコンポーネント

http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/DataGroup.html

<s:BorderContainer borderColor="" borderAlpha="" borderWeight=""/>
コンテナの領域の枠を描画できるコンテナです。レイアウトは座標指定です。

プロパティ	説明
borderColor	枠の色
borderAlpha	枠の透明度
borderWeight	枠の太さ

<s:Panel title ="">
<s:controlBarContent/>
</s:Panel>
タイトル表示とコントロールバー領域があるコンテナです。レイアウトは座標指定です。

プロパティ	説明
title	コンテナのタイトル
controlBarContent	コントロールバーのコンテンツ

http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/Panel.html

<s:NavigatorContent label=" ">
mx.containers. ViewStack、 mx.containers.TabNavigator、mx.containers.Accordion等の子コンテナとして使用できます。

プロパティ	説明
label	コンテナのラベル

http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/NavigatorContent.html

spark.components.Scroller
子エレメントの大きさによってスクロールバーを表示するコンテナです。
http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/Scroller.html

spark.components.PopUpAnchor
ポップアップするコンテンツを定義するコンテナです。

プロパティ	説明
popUpPosition	コンテナの位置からポップアップする位置を決定
displayPopUp	ポップアップを表示するかどうか

http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/PopUpAnchor.html

<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>
Flex4アプリケーションのルートとなるコンテナです。コントロールバーを表示することもできます。

プロパティ	説明
controlBarVisible	コントロールバーを表示するかどうか
controlBarContent	コントロールバーのコンテンツ

http://help.adobe.com/en_US/Flex/4.0/langref/spark/components/Application.html

例) Containers.mxml

        <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"
                minWidth="500" minHeight="500"
                controlBarVisible="true"
                >

    <s:controlBarContent>
        <s:HGroup height="25">
            <s:Label text="Application ControlBarContent"/>
        </s:HGroup>
    </s:controlBarContent>

    <mx:TabNavigator width="100%" height="100%">

        <s:NavigatorContent label="Group">
            <s:Panel title="Panel" width="100%" height="100%">
                <s:layout>
                    <s:HorizontalLayout/>
                </s:layout>
                <s:controlBarContent>
                    <s:HGroup height="25">
                        <s:Label text="Panel ControlBarContent"/>
                    </s:HGroup>
                </s:controlBarContent>
                <s:VGroup>
                    <s:Label text="TileGroup"/>
                    <s:Scroller width="100%" height="100%">

                        <s:TileGroup horizontalGap="10" verticalGap="10"
                                        rowHeight="100" columnWidth="100">
                         ...
                        </s:TileGroup>
                    </s:Scroller>
                </s:VGroup>

                <s:VGroup>
                    <s:Label text="DataGroup"/>
                    <s:Scroller width="200" height="100%">
                        <s:DataGroup dataProvider="{dataSource}">
                            <s:layout>
                                <s:VerticalLayout gap="1" />
                            </s:layout>
                            <s:itemRenderer>
                                <fx:Component>
                                    <s:ItemRenderer height="30">
                                        <s:Label text="{data}"/>
                                    </s:ItemRenderer>
                                </fx:Component>
                            </s:itemRenderer>
                        </s:DataGroup>
                    </s:Scroller>
                </s:VGroup>
            </s:Panel>
        </s:NavigatorContent>
        <s:NavigatorContent label="BorderContainer">
            <s:layout>
                <s:VerticalLayout/>
            </s:layout>
            <s:Label text="BorderContainer"/>
            <s:BorderContainer borderAlpha="0.9" borderColor="0" borderWeight="10"
                                    width="100%" height="100%">
                <s:layout>
                    <s:VerticalLayout verticalAlign="middle"
                                            horizontalAlign="center"/>
                </s:layout>
                <s:BorderContainer borderColor="#0000FF"
                                    borderWeight="1"
                                    width="50%" height="50%">
                    <s:layout>
                        <s:VerticalLayout verticalAlign="middle"
                                                horizontalAlign="center"/>
                    </s:layout>
                    <s:BorderContainer borderColor="#FF0000"
                                            borderAlpha="0.5"
                                            borderWeight="1"
                                            width="50%" height="50%">
                        <s:layout>
                            <s:VerticalLayout verticalAlign="middle"
                                                    horizontalAlign="center"/>
                        </s:layout>
                        <s:Button label="Button"/>
                    </s:BorderContainer>
                </s:BorderContainer>
            </s:BorderContainer>
        </s:NavigatorContent>
        <s:NavigatorContent label="Scroller">
            <s:layout>
                <s:VerticalLayout/>
            </s:layout>
            <s:Label text="Scroller"/>
            <s:Scroller width="100%" height="100%">
                <s:Group width="100%" height="100%">
                    <s:Graphic width="1000" height="1000">
                        <s:BitmapImage source="@Embed('fx.png')"
                                            width="100%" height="100%"/>
                    </s:Graphic>
                </s:Group>
            </s:Scroller>
        </s:NavigatorContent>
        <s:NavigatorContent label="PopUpAnchor">
            <s:layout>
                <s:VerticalLayout/>
            </s:layout>
            <s:HGroup horizontalAlign="center" width="100%">
                <s:Label text="popUpPosition:"/>
                <s:DropDownList id="popUpPosition">
                    <s:dataProvider>
                        ...
                    </s:dataProvider>
                </s:DropDownList>
                <s:Button label="Open PopUp" click="popUpAnchor1.displayPopUp=true"/>
            </s:HGroup>
            <s:Group width="100%" height="100%">
                <s:Label text="PopUpAnchor"/>
                <s:PopUpAnchor id="popUpAnchor1"
                               popUpPosition="{popUpPosition.selectedItem}"
                               width="100%" height="100%">
                    <s:BorderContainer borderStyle="solid">
                        <s:layout>
                           <s:VerticalLayout horizontalAlign="left"/>
                        </s:layout>
                        <s:HGroup>
                            <s:Label text="Name :"/>
                            <s:TextInput/>
                        </s:HGroup>
                        <s:HGroup>
                            <s:Label text="E-Mail :"/>
                            <s:TextInput/>
                        </s:HGroup>
                        <s:HGroup>
                            <s:Button label="CLOSE"
                                        click="popUpAnchor1.displayPopUp=false"/>
                        </s:HGroup>
                    </s:BorderContainer>
                </s:PopUpAnchor> 
            </s:Group>
        </s:NavigatorContent>
    </mx:TabNavigator>
</s:Application>
    

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

プリミティブコンポーネント

<s:Graphic/>
シェイプコンポーネントを定義するためのコンテナです。レイアウトは座標指定します。
http://help.adobe.com/en_US/Flex/4.0/langref/spark/primitives/Graphic.html

<s:BitmapImage source=""/>
指定されたイメージで矩形を描画します。

プロパティ	説明
source	表示するイメージのソース

http://help.adobe.com/en_US/Flex/4.0/langref/spark/primitives/BitmapImage.html

<s:Ellipse>
<s:fill/>
<s:storke/>
</s:Ellipse>
矩形領域に内接する楕円を描画します。
http://help.adobe.com/en_US/Flex/4.0/langref/spark/primitives/Ellipse.html

<s:Line fromX="" toX="" fromY="" toY="">
<s:storke/>
</s:Line>
線を描画します。

プロパティ	説明
stroke	線のスタイル
fromX	線の描画開始座標X
toX	線の描画終了座標X
fromY	線の描画開始座標Y
toY	線の描画終了座標Y

http://help.adobe.com/en_US/Flex/4.0/langref/spark/primitives/Line.html

<s:Path data="">
<s:fill/>
<s:storke/>
</s:Path>
SVGのシンタックスでパスを定義して描画します。

プロパティ	説明
data	SVGのシンタックスデータ
fill	塗りのスタイル
stroke	線のスタイル

http://help.adobe.com/en_US/Flex/4.0/langref/spark/primitives/Path.html

<s:Rect>
<s:fill/>
<s:storke/>
</s:Rect>
矩形を描画します。

プロパティ	説明
fill	塗りのスタイル
stroke	線のスタイル

http://help.adobe.com/en_US/Flex/4.0/langref/spark/primitives/Rect.html

例) Primitives.mxml

        <s:Graphic>

    <s:BitmapImage id="bg2" source="@Embed('fx.png')" width="100" height="100"/>

    <s:Ellipse height="100" width="200">
        <s:fill>
            <s:RadialGradient>
                <s:entries>
                    <s:GradientEntry color="0xFFFFFF" ratio="0.00"/>
                    <s:GradientEntry color="0x666666" ratio="0.33"/>
                    <s:GradientEntry color="0x000000" ratio="0.66"/>
                </s:entries>
            </s:RadialGradient>
        </s:fill>
    </s:Ellipse>

    <s:Line xFrom="0" xTo="100" width="200">
        <s:stroke>
            <s:SolidColorStroke color="0x000000" weight="5"/>
        </s:stroke>
    </s:Line>

    <s:Path data="M 0 0 L 0 80 L 200 80 L 0 0">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF" ratio="0.00"/>
                <s:GradientEntry color="0x666666" ratio="0.33"/>
                <s:GradientEntry color="0x000000" ratio="0.66"/>
            </s:LinearGradient>
        </s:fill>
    </s:Path>

    <s:Rect width="200" height="80">
        <s:fill>
            <s:LinearGradient>
                <s:entries>
                    <s:GradientEntry color="0xFFFFFF" ratio="0.00"/>
                    <s:GradientEntry color="0x666666" ratio="0.33"/>
                    <s:GradientEntry color="0x000000" ratio="0.66"/>
                </s:entries>
            </s:LinearGradient>
        </s:fill>
    </s:Rect> 

</s:Graphic>
    

おわりに

今回のチュートリアルでは、Flex4アプリケーションを構築するために必要なSparkコンポーネントと各コンポーネントの基本的なプロパティを中心に紹介しました。チュートリアルサンプルでSparkコンポーネントへの理解を深めることができると思います。また、各コンポーネントのプロパティやメソッドやイベント等の詳細は、各コンポーネントにあるオンラインドキュメントのリンクからアクセスして下さい。
また、Sparkコンポーネントには、スキンやエフェクトやレイアウトなどここでは紹介できなかった機能がありますので、次のチュートリアルで紹介します。

ご購入方法

ダウンロード

会社情報

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

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

Flex 4 マスターシリーズ #05 Spark コンポーネント

著者有川榮一氏

Content

作成日

ページツール

Tags

必要条件

ユーザーレベル

必要な製品

サンプルファイル

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

はじめに

Spark コンポーネント

ネームスペース

コントロールとコンテナ

ボタンコンポーネント

リスト表示

数値入力コンポーネント

テキストコンポーネント

コンテナコンポーネント

プリミティブコンポーネント

おわりに

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

Flex 4 マスターシリーズ #05 Spark コンポーネント

著者 有川 榮一氏

Content

作成日

ページ ツール

Tags

必要条件

ユーザーレベル

必要な製品

サンプルファイル

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

はじめに

Spark コンポーネント

ネームスペース

コントロールとコンテナ

ボタンコンポーネント

リスト表示

数値入力コンポーネント

テキストコンポーネント

コンテナコンポーネント

プリミティブコンポーネント

おわりに

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

著者有川榮一氏

ページツール

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