フレックス-SkinnableContainer

前書き

SkinnableContainerクラスは、視覚コンテンツを含むすべてのスキン可能コンテナの基本クラスです。

クラス宣言

以下は spark.components.SkinnableContainer クラスの宣言です-

public class SkinnableContainer
   extends SkinnableContainerBase
      implements IDeferredContentOwner, IVisualElementContainer

パブリックプロパティ

Sr.No	Property & Description
1	autoLayout : Boolean trueの場合、子の位置またはサイズが変更されたときに測定とレイアウトが行われます。
2	creationPolicy : String このコンポーネントのコンテンツ作成ポリシー。
3	deferredContentCreated : Boolean [read-only] Contains true if deferred content has been created.
4	layout : LayoutBase このコンテナのレイアウトオブジェクト。
5	mxmlContent : Array [write-only] The visual content children for this Group.
6	mxmlContentFactory : IDeferredInstance [write-only] A factory object that creates the initial value for the content property.
7	numElements : int [read-only] The number of visual elements in this container.

パブリックメソッド

Sr.No	Method & Description
1	SkinnableContainer() コンストラクタ。
2	addElement(element:IVisualElement):IVisualElement このコンテナに視覚要素を追加します。
3	addElementAt(element:IVisualElement, index:int):IVisualElement このコンテナに視覚要素を追加します。
4	createDeferredContent():void このコンポーネントのコンテンツを作成します。
5	getElementAt(index:int):IVisualElement 指定されたインデックスにある視覚要素を返します。
6	getElementIndex(element:IVisualElement):int ビジュアル要素のインデックス位置を返します。
7	removeAllElements():void コンテナからすべての視覚要素を削除します。
8	removeElement(element:IVisualElement):IVisualElement このコンテナの子リストから指定された視覚要素を削除します。
9	removeElementAt(index:int):IVisualElement コンテナ内の指定されたインデックス位置から視覚要素を削除します。
10	setElementIndex(element:IVisualElement, index:int):void ビジュアルコンテナ内の既存のビジュアル要素の位置を変更します。
11	swapElements(element1:IVisualElement, element2:IVisualElement):void 指定した2つの視覚要素のインデックスを交換します。
12	swapElementsAt(index1:int, index2:int):void コンテナ内の指定された2つのインデックス位置にあるビジュアル要素を交換します。

保護されたメソッド

Sr.No

Method & Description

1

createChildren():void

[override] Create content children, if the creationPolicy property is not equal to none.

2

partAdded(partName:String, instance:Object):void

[override] Called when a skin part is added.

3

partRemoved(partName:String, instance:Object):void

[override] Called when an instance of a skin part is being removed.

イベント

Sr.No

Event & Description

1

contentCreationComplete

このコンポーネントのコンテンツが作成された後に送出されます。

2

elementAdd

ビジュアルエレメントがコンテンツホルダーに追加されたときに送出されます。

3

elementRemove

ビジュアル要素がコンテンツホルダーから削除されたときに送出されます。

継承されるメソッド

このクラスは、次のクラスからメソッドを継承します-

spark.components.supportClasses.SkinnableContainerBase
mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
対象

Flex SkinnableContainerの例

テストアプリケーションを作成して、FlexアプリケーションでSkinnableContainerの使用を確認するには、次の手順に従います。

Step	Description
1	Create a project with a name HelloWorld under a packagecom.finddevguides.client as explained in the Flex - Create Application chapter.
2	Create a skin SkinnableContainerSkin for a host Component SkinnableContainerunder a package com.finddevguides.skin as explained in Flex - Style with skinchapter. Keep rest of the files unchanged.
3	Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged.
4	Compile and run the application to make sure business logic is working as per the requirements.

以下は、変更されたmxmlファイル src/com.finddevguides/skin/SkinnableContainerSkin.mxml の内容です。

<?xml version = "1.0" encoding = "utf-8"?>
<s:Skin 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">

   <fx:Metadata>
      <![CDATA[
        /* *
        * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
         [HostComponent("spark.components.SkinnableContainer")]
      ]]>
   </fx:Metadata>

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

   <s:Rect left = "0" right = "0" top = "0"
      bottom = "0" radiusX = "5" radiusY = "5">
      <s:stroke>
         <s:LinearGradientStroke weight = "2"/>
      </s:stroke>
      <s:fill>
         <s:LinearGradient rotation = "90">
            <s:entries>
               <s:GradientEntry color = "0xdddddd"/>
               <s:GradientEntry color = "0x020202" alpha = ".5"/>
            </s:entries>
         </s:LinearGradient>
      </s:fill>
   </s:Rect>

   <s:Group id = "contentGroup" left = "0" right = "0"
      top = "0" bottom = "0" minWidth = "0" minHeight = "0">
      <s:layout>
         <s:BasicLayout/>
      </s:layout>
   </s:Group>
</s:Skin>

以下は、変更されたmxmlファイル src/com.finddevguides/HelloWorld.mxml の内容です。

<?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
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">

   <fx:Style source = "/com/finddevguides/client/Style.css"/>
   <s:BorderContainer width = "630" height = "480" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50"
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Layout Panels Demonstration"
            fontSize = "40" color = "0x777777" styleName = "heading"/>

         <s:Panel id = "skinnableContainerPanel" title = "Using SkinnableContainer"
            width = "500" height = "300" >
            <s:layout>
               <s:VerticalLayout  gap = "10" verticalAlign = "middle"
                  horizontalAlign = "center"/>
            </s:layout>

            <s:SkinnableContainer
               skinClass = "com.finddevguides.skin.SkinnableContainerSkin"
               width = "50%" height = "50%" horizontalCenter = "0"
               verticalCenter = "0">

               <s:HGroup horizontalCenter = "0" verticalCenter = "0">
                  <s:BorderContainer width = "50" height = "50"
                     borderWeight = "2" color = "0x323232"/>
                  <s:BorderContainer width = "50" height = "50"
                     borderWeight = "2" color = "0x323232"/>
                  <s:BorderContainer width = "50" height = "50"
                     borderWeight = "2" color = "0x323232"/>
               </s:HGroup>
            </s:SkinnableContainer>
         </s:Panel>
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

すべての変更が完了したら、link：/flex/flex_create_application [Flex-アプリケーションの作成]の章で行ったように、アプリケーションを通常モードでコンパイルして実行します。アプリケーションに問題がなければ、次の結果が生成されます。[link：/flex/samples/LayoutsApplicationl＃currentlyLoaded = SkinnableContainer [オンラインで試す]]

Flex SkinnableContainer

Flex-skinnablecontainer