フレックス-カスタムコントロール

Flexには、カスタムコンポーネントを作成する2つの方法があります。

ActionScriptを使用する
MXMLを使用する

ActionScriptを使用する

既存のコンポーネントを拡張することにより、コンポーネントを作成できます。 Flash Builderを使用してコンポーネントを作成するには、*ファイル>新規> ActionScriptクラス*をクリックします。

以下に示すように詳細を入力します-

Flash Builderは、次のCustomButton.asファイルを作成します。

package com.finddevguides.client {
   import spark.components.Button;

   public class CustomButton extends Button {
      public function CustomButton() {
         super();
      }
   }
}

MXMLを使用する

既存のコンポーネントを拡張することにより、コンポーネントを作成できます。 Flash Builderを使用してコンポーネントを作成するには、[ファイル]> [新規]> [MXMLコンポーネント]をクリックします。

以下に示すように詳細を入力します。

Flex MXMLコンポーネント

Flash Builderは、次のCustomLogin.mxmlファイルを作成します。

<?xml version = "1.0" encoding = "utf-8"?>
<s:Group 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 = "400" height = "300">
</s:Group>

Flexアプリケーションでカスタムコントロールをテストするには、次の手順に従います-

Step	Description
1	Create a project with a name HelloWorld under a package com.finddevguides.client as explained in the Flex - Create Application chapter.
2	Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged.
3	Create CustomLogin.mxml and CustomButton.as component as explained above. Modify these files 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/client/CustomLogin.mxml の内容です。

<?xml version = "1.0" encoding = "utf-8"?>
<s:Group 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 = "400" height = "300">

   <s:Form>
      <s:FormItem label = "UserName:">
         <s:TextInput width = "200"/>
      </s:FormItem>

      <s:FormItem label = "Password:">
         <s:TextInput width = "200" displayAsPassword = "true"/>
      </s:FormItem>

      <s:FormItem>
         <s:Button label = "Login"/>
      </s:FormItem>
   </s:Form>
</s:Group>

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

package com.finddevguides.client {
   import spark.components.Button;

   public class CustomButton extends Button {

      public function CustomButton() {
         super();
         this.setStyle("color","green");
         this.label = "Submit";
      }
   }
}

以下は、変更されたmxmlファイル src/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"
   xmlns:client = "com.finddevguides.client.*"
   initialize = "application_initializeHandler(event)">

   <fx:Style source = "/com/finddevguides/client/Style.css"/>
   <fx:Script>
      <![CDATA[
        import mx.events.FlexEvent;

        protected function application_initializeHandler(event:FlexEvent):void {
          //create a new custom button
           var customButton: CustomButton = new CustomButton();
           asPanel.addElement(customButton);
        }

      ]]>
   </fx:Script>

   <s:BorderContainer width = "630" height = "480" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "10"
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Custom Controls Demonstration"
            fontSize = "40" color = "0x777777" styleName = "heading"/>

         <s:Panel title = "Using MXML Component" width = "400" height = "200">
            <client:CustomLogin>
            </client:CustomLogin>
         </s:Panel>

         <s:Panel  title = "Using AS Component" width = "400" height = "100">
            <s:VGroup id = "asPanel" width = "100%" height = "100%" gap = "10"
               horizontalAlign = "center" verticalAlign = "middle">
            </s:VGroup>
         </s:Panel>
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

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

Flexカスタムコントロール

Flex-custom-controls

フレックス-カスタムコントロール

ActionScriptを使用する

MXMLを使用する