Flex-custom-controls
フレックス-カスタムコントロール
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コンポーネント]をクリックします。
以下に示すように詳細を入力します。
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]]
