Flex SDKをインストールしてHello, World!するデモ
人気急上昇かもしれないFlexを、ゼロから始めてみるデモです。
お品書き:
- AdobeのサイトからFlex SDKをダウンロードする
- Flex SDKをインストールする
- rascutをインストールする
- Hello, World!なインターフェイスを書く
- ActionScriptを書いてアクションを加える
というわけで、Party!.orgで作成した動画が↓コレです。
※アクションを追加したコードで、
最初にFlex SDKをダウンロードしているサイトは、ここです。「flex_sdk_3.zip」というファイルがダウンロードできるので、これを適当なところに展開しています。
展開したあと「${適当なところ}/bin」にPATHを通すと、コンパイラ(mxmlc)など各種ツールが使えるようになります。
rascutについては、ActionScript開発者必須「rascut」 - MONNGIFTやActionScript やるなら入れとけ。rascut 導入と使い方。 - てっく煮ブログが分かりやすいです。
最初に書いているhello.mxmlは、↓こんな感じです。
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Button label="Hello, Wrold!"/> </mx:Application>
Hello, World!と書かれたボタンが出てくるだけです。
続いてアクションを設定した後のhello.mxmlは、↓これです。
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Button id="a" click="helloClicked(event)" label="Hello, World!" /> <mx:TextArea id="log" text="log: "/> <mx:Script source="action.as"/> <!-- ボタンを追加する箱 --> <mx:HBox id="yokoNarabi"/> </mx:Application>
※デモの動画では
↓action.as
// 他のクラスを使うときは // 忘れずにimport import mx.controls.Button; // Eventクラスの引数を取るhelloClickedメソッド // 返り値はvoid private function helloClicked(event:Event):void { // ボタンが押されたときに // TextArea id="log"にテキストを追加 log.text += "clicked!"; // 新しいボタンを作成してみる var button:Button = new Button(); // Button label="clicked" button.label = "clicked!"; // HBox id="yokoNarabi" の中にボタンを追加 yokoNarabi.addChild(button); }
↓これが完成したFlashです。
ここから先はComponent ExplorerやLiveDocsを見つつ、Let's Flex!