Flex SDKでFlexアプリを作ってみる

Flex SDKとは

Adobe Flashを使わずにFlashを開発するためのSDK。
FlexではMXMLとActionScriptで開発する。

MXMLとは

MXMLはXMLの一種で、FlexアプリのコンポーネントのUIを配置することができる。
MXMLタグは ActionScriptのクラスまたはクラスのプロパティに相当する。Flexアプリをコンパイルすると、MXMLタグが解析されて、対応するActionScriptクラスが生成される。

ActionScriptとは

ActionScriptとはJavaScriptをベースに独自の拡張をしたもの。

Flex SDKの準備

http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3sdk
からダウンロードする。
また、Java実行環境が必要。無ければインストールする。
解凍したflex_sdk_3/binにパスを通す。

ボタンだけが表示されるアプリを作ってみる

ファイルを作成する。とりあえずFirstFlex.mxmlとする。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application

    xmlns:mx="http://www.adobe.com/2006/mxml"

    horizontalAlign="center" verticalAlign="center">

    <mx:Button id="myButton" label="I'm a button!"/>

</mx:Application>

コンパイルする。
mxmlc –strict=true –file-specs MyFirst.mxml
–strictで厳密なチェックが行われる。
–file-specsでコンパイルするファイルを指定。
FirstFlex.swfが作成される。これをブラウザにD&Dするとボタンだけが表示される。

ボタンをActionScriptで作成してみる

<?xml version="1.0" encoding="utf-8"?>

<mx:Application

    xmlns:mx="http://www.adobe.com/2006/mxml"

    horizontalAlign="center" verticalAlign="center"

    creationComplete="creationCompleteHandler();"

    >

    <mx:Button id="myButton" label="I'm a button!"/>

    <mx:Script>

        <![CDATA[

            import mx.controls.Button;

            import mx.events.FlexEvent;

            private var asButton:Button;

            private function creationCompleteHandler() :void {

                asButton = new Button();

                asButton.label = "I'm a actionscript button!";

                asButton.addEventListener (FlexEvent.CREATION_COMPLETE, buttonCreationCompleteHandler);

                addChild(asButton);

            }

            private function buttonCreationCompleteHandler(evt:FlexEvent) :void {

                asButton.x = parent.width / 2 - asButton.width / 2;

                asButton.y = parent.height / 2 - asButton.height /2;

            }

        ]]>

    </mx:Script>

</mx:Application>

コンパイルしてブラウザで読みこむとボタンが２つ表示される。