フレックス-スキン付きスタイル

スキニングとは何ですか？

Flexのスキニングは、UIコンポーネントのルックアンドフィールを完全にカスタマイズするプロセスです。
スキンは、コンポーネントのテキスト、画像、フィルター、遷移、および状態を定義できます。
スキンは、別個のmxmlまたはActionScriptコンポーネントとして作成できます。
スキンを使用して、UIコンポーネントのすべての視覚的側面を制御できます。
スキンを定義するプロセスは、すべてのUIコンポーネントで同じです。

ステップ1 –スキンを作成する

*File> New> MXML Skin* オプションを使用してCreate MXML Skinウィザードを起動します。

フレックススキンウィザード

Packageを com.finddevguides.skin 、名前を GradientBackgroundSkin と入力し、ホストコンポーネントを既存のflex BorderContainerコントロール* spark.component.BorderContainer *として選択します。

これで、BorderContainerのスキンが作成されました。 mxmlスキンファイル src/com.finddevguides/skin/GradientBackgroundSkin.mxml の内容を変更します。

次のように塗りつぶしレイヤーを更新します-

<!-- fill -->
<s:Rect id = "backgroundRect" left = "0" right = "0" height = "100%" top = "0">
   <s:fill>
      <s:LinearGradient rotation = "90">
         <s:GradientEntry color = "0x888888" ratio = "0.2"/>
         <s:GradientEntry color = "0x111111" ratio = "1"/>
      </s:LinearGradient>
   </s:fill>
</s:Rect>

ステップ2：スキンを適用する

次の2つの方法でコンポーネントにスキンを適用できます-

MXMLスクリプトでのスキンの適用（静的）

*skinClass* 属性を使用して、ID *mainContainer* を持つBorderContainerに *GradientBackgroundSkin* を適用します。

<s:BorderContainer width = "560" height = "500" id = "mainContainer"
   styleName = "container">
   <s:VGroup width = "100%" height = "100%" gap = "50"
      horizontalAlign = "center" verticalAlign = "middle"
      skinClass = "com.finddevguides.skin.GradientBackgroundSkin">

ActionScriptでのスキンの適用（動的）

*skinClass* プロパティを使用して、ID *mainContainer* を持つBorderContainerに *GradientBackgroundSkin* を適用します。

protected function gradientBackground_clickHandler(event:MouseEvent):void {
   mainContainer.setStyle("skinClass", GradientBackgroundSkin);
}

スキン付きFlexスタイルの例

次の手順に従って、テストアプリケーションを作成して、Flexアプリケーションでのスキニングの動作を確認してください-

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 skin GradientBackgroundSkin.mxml under a packagecom.finddevguides.skin as explained above. 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.

以下は、GradientBackgroundSkin.mxmlファイル src/com/finddevguides/skin/GradientBackg roundSkin.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:mx = "library://ns.adobe.com/flex/mx">

   <!-- host component -->
   <fx:Metadata>
      [HostComponent("spark.components.BorderContainer")]
   </fx:Metadata>

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

   <!-- SkinParts
   name = contentGroup, type = spark.components.Group, required = false
   -->

   <!-- fill -->
   <s:Rect id = "backgroundRect" left = "0" right = "0" height = "100%" top = "0">
      <s:fill>
         <s:LinearGradient rotation = "90">
            <s:GradientEntry color = "0x111111" ratio = "0.2"/>
            <s:GradientEntry color = "0x888888" ratio = "1"/>
         </s:LinearGradient>
      </s:fill>
   </s:Rect>

   <!-- must specify this for the host component -->
   <s:Group id = "contentGroup" left = "0" right = "0" top = "0" bottom = "0"/>
</s:Skin>

以下は、変更されたHelloWorld.mxml filesrc/com/finddevguides/client/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"
   initialize = "application_initializeHandler(event)">

   <fx:Style source = "/com/finddevguides/client/Style.css"/>
   <fx:Script>
      <![CDATA[
         import com.finddevguides.skin.GradientBackgroundSkin;
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         import spark.skins.spark.BorderContainerSkin;

         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");
         }

         protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Application";
         }

         protected function gradientBackground_clickHandler(event:MouseEvent):void {
            mainContainer.setStyle("skinClass", GradientBackgroundSkin );
         }

         protected function standardBackground_clickHandler(event:MouseEvent):void {
            mainContainer.setStyle("skinClass", BorderContainerSkin );
         }
      ]]>
   </fx:Script>

   <fx:Declarations>
      <s:RadioButtonGroup id = "selectorGroup"/>
   </fx:Declarations>

   <s:BorderContainer width = "500" height = "500" id = "mainContainer"
      skinClass = "spark.skins.spark.BorderContainerSkin"
      horizontalCenter = "0" verticalCenter = "0" cornerRadius = "10">

      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
         verticalAlign = "middle">
         <s:Label id = "lblHeader" fontSize = "40" color = "green"
            styleName = "heading"/>
         <s:Button label = "Click Me!" id = "btnClickMe"
            click = "btnClickMe_clickHandler(event)"/>
         <s:RadioButton color = "gray" fontWeight = "bold"
            group = "{selectorGroup}" label = "Standard Background"
            click = "standardBackground_clickHandler(event)" selected = "true"/>
         <s:RadioButton color = "gray" fontWeight = "bold"
            group = "{selectorGroup}" label = "Gradient Background"
            click = "gradientBackground_clickHandler(event)"/>
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

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

Flex Skin Style1

フレックススキンスタイル2

Flex-style-with-skin