プログラミング工房
TOP
Flex基本
開発環境 JavaScript連携 PHP連携1 PHP連携2(AMFPHP) ウィンドウ ボタンスキン 矩形スキン ローカルファイル(テキスト) F5等の対策 ローカルファイル(イメージ) ダウンロード、アップロード 1枚の画像のカラーを変更 時間のかかる計算処理 外部SWFの読込み
Flexで3D
Flexだけで3D Papervision3Dを使ってみる 3Dオブジェクト カメラ、前後判定の工夫しました 自由な形状を作成
Flexでクラス
Class1(白黒ゲームの盤) Class2(白黒ゲームのプレイヤー) Class3(プレイヤーを外部SWF)
PHP
共通関数1
Flexの作品
お問合せの説明 サンプルのソース表示の説明 分子構造の表示(PDBファイル) マンデルブロ集合の画像作成 swf参加型白黒ゲーム(Reversi) ストップウォッチ WEB素材
AIR
AIRを使ってみる ソースファイルのHTML変換を作る
etc.
マンデルブロ集合のギャラリー ジュリア集合のギャラリー wonderflを使ってみました お問合せ

Flex4基本-矩形スキン

■2011.02.28:作成
■2011.03.01:改定(SkinnableContainerで背景色が指定できた)
サンプル サンプルのソース

矩形スキンについて

ボタンスキンに続いて矩形領域のスキンを作成して見ます。
元にするクラスは「spark.components.SkinnableContainer」を利用します。

Flex4基本-ボタンスキン」で説明している部分は省略しています。

ツールバー(ToolBar)

Flex4基本-ボタンスキン」でツールバーボタン(ToolBarBtn)を作成しました。
今度はツールバーボタンを入れるツールバー(矩形領域)を作成してみます。

ツールバーは背景色を持ち横方向にツールバーボタンを配置できる矩形領域とします。
以下の形で利用します。
<s:SkinnableContainer skinClass="skins.ToolBarSkin" 
        backgroundColor="0xdddddd" width="100%">
    <comp:ToolBarBtn id="TBnew16" icon="@Embed('img/new16.png')" 
            toolTip="新規" click="onClick2(event)"/>
            :
</s:SkinnableContainer>

スキンは「/src/skins/ToolBarSkin.mxml」に作成します。
こちらも「Button」の代わりに「SkinnableContainer」に使用します。
 SkinnableContainerのステータスは以下のものがあります。
   normal:通常の状態
   disabled:無効
 一応、無効の時「alpha.disabled="0.5"」にしています。

 指定した背景色(backgroundColor)で枠つきの矩形を表示

 「id="contentGroup"」の所に子部品が配置されます。
  ここでHGroupで指定しているので子部品は横方向に並びます。
<?xml version="1.0" encoding="utf-8"?>
<!-- 
ツールバー
    使用方法は「comp/ToolBar.as」を参考に
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" 
    alpha.disabled="0.5">

    <fx:Metadata>
        [HostComponent("spark.components.SkinnableContainer")]
    </fx:Metadata> 
    
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    
    <!-- ツールバーの背景(枠付き) -->
    <s:Rect x="0" y="0" radiusX="0" radiusY="0" height="100%" width="100%">
        <s:stroke>
            <s:LinearGradientStroke weight="1"/>
        </s:stroke>
        <s:fill>
            <s:SolidColor color="{hostComponent.getStyle('backgroundColor')}" />
        </s:fill>            
    </s:Rect>

    <!-- ツールバーボタンを配置するための領域(横方向に並べる) -->
    <s:HGroup id="contentGroup" left="2" right="2" top="2" bottom="2" gap="2"/>
</s:Skin>

区切り線(VSepLinSkin)

ツールバーで使用する区切り線にちょうどいいものが無かったのでスキンで作ってみました。

区切り線はパラメータを追加しないのでクラスは作りません。
以下の様に利用します。
<s:SkinnableContainer skinClass="skins.ToolBarSkin" 
        backgroundColor="0xdddddd" width="100%">
        :
    <s:SkinnableContainer skinClass="skins.VSepLinSkin" height="100%"/>
        :
</s:SkinnableContainer>

スキンは「/src/skins/VSepLinSkin.mxml」になります。
 暗い幅1の矩形と明るい幅1の矩形とを描いて立体的に見えるようにしています。
    <!-- 暗い色と明るい色の線(幅1のBOX)を表示 -->
    <s:Rect x="0" y="0" radiusX="0" radiusY="0" height="100%" width="1">
        <s:fill>
            <s:SolidColor color="0x999999" />
        </s:fill>            
    </s:Rect>
    <s:Rect x="1" y="0" radiusX="0" radiusY="0" height="100%" width="1">
        <s:fill>
            <s:SolidColor color="0xffffff" />
        </s:fill>            
    </s:Rect>

スクロールバー付きの領域(ScrllSkin)

矩形領域にスクロールバーを付けてるスキンを作ってみます。

スクロールバー付きの領域もパラメータを追加しないのでクラスは作りません。
使用方法
<s:SkinnableContainer skinClass="skins.ScrllSkin" width="400" height="200">
    :
</s:SkinnableContainer>

スキンは「/src/skins/ScrllSkin.mxml」に作成します。
外枠を付けて、子部品を配置領域を「s:Scroller」で囲っています。
    <!-- 枠付の表示-->
    <s:Rect top="0" bottom="0" left="0" right="0" height="100%" width="100%">
        <s:stroke>
            <s:LinearGradientStroke weight="1"/>
        </s:stroke>
    </s:Rect>
    
    <!-- スクロールバーの定義 -->
    <s:Scroller top="1" bottom="1" left="1" right="1">
        <!-- 子部品を配置するための領域 -->
        <s:Group id="contentGroup" top="0" bottom="0" left="0" right="0"/>
    </s:Scroller>

Panelの様な部品(myPanel)

「SkinnableContainer」を元にPanelの様な部品を作りました。
単純な矩形にタイトルバー、アイコン、タイトルを追加しました。
(今回の例はPanelのスキンで作るべきです。練習用に「SkinnableContainer」で作成)
利用方法
    <comp:myPanel icon="@Embed('img/open16.png')" Title="BoxSkin(矩形のスキン)" 
            brColor="0xeeeeee" width="100%" height="100%">
              :
    </comp:myPanel>

スキンのクラスを「/src/comp/myPanel.as」に作成します。
「Button」の代わりに「SkinnableContainer」に使用します。
 パラメータにタイトル部のアイコン、文字、背景色を追加
package comp
{
    import skins.myPanelSkin;
    import spark.components.SkinnableContainer;
 
    //インターフェースの定義(タイトル部のアイコン、文字、背景色)
    [Style(name = "icon", type = "Class", inherit = "no")]
    [Style(name = "Title", type = "String", format = "String", inherit = "no")]
    [Style(name = "brColor", type = "uint", format = "Color", inherit = "no")]
     
    public class myPanel extends SkinnableContainer {
        public function myPanel() {
            super();
            setStyle("skinClass", myPanelSkin);
        }
    }
}

スキンを「/src/skins/myPanelSkin.mxml」に作成します。
 タイトルバーを付けて、アイコンとタイトルを表示
 枠つきの子部品の配置領域を定義しています。
    <s:VGroup gap="0" height="100%" width="100%">
        <!-- タイトル部 -->
        <s:Group width="100%">
            <!-- タイトル部:外枠と背景 -->
            <s:Rect x="0" y="0"  height="100%" width="100%">
                <s:stroke>
                    <s:LinearGradientStroke weight="1"/>
                </s:stroke>
                <s:fill>
                    <s:SolidColor color="{hostComponent.getStyle('brColor')}" />
                </s:fill>         
            </s:Rect>
            <!-- タイトル部:アイコンとタイトル文字 -->
            <s:HGroup left="5" right="5" top="4" bottom="4" 
                       verticalAlign="contentJustify" gap="5">
                <s:BitmapImage source="{hostComponent.getStyle('icon')}"/>
                <s:Label text="{hostComponent.getStyle('Title')}"
                       textAlign="center" verticalAlign="middle"/>
            </s:HGroup>
        </s:Group>

        <!-- 中身を表示する部分(枠付き) -->
        <s:Group height="100%" width="100%">
            <s:Rect x="0" y="0"  height="100%" width="100%">
                <s:stroke>
                    <s:LinearGradientStroke weight="1"/>
                </s:stroke>
            </s:Rect>
            <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0"/>
        </s:Group>
        
    </s:VGroup>

プログラミング工房