読者です 読者をやめる 読者になる 読者になる

Flex SDKをインストールしてHello, World!するデモ

人気急上昇かもしれないFlexを、ゼロから始めてみるデモです。


お品書き:

  1. AdobeのサイトからFlex SDKをダウンロードする
  2. Flex SDKをインストールする
  3. rascutをインストールする
  4. Hello, World!なインターフェイスを書く
  5. ActionScriptを書いてアクションを加える

というわけで、Party!.orgで作成した動画が↓コレです。


※アクションを追加したコードで、にclick="helloClicked(event)"が抜けていました><


最初にFlex SDKをダウンロードしているサイトは、ここです。「flex_sdk_3.zip」というファイルがダウンロードできるので、これを適当なところに展開しています。
展開したあと「${適当なところ}/bin」にPATHを通すと、コンパイラmxmlc)など各種ツールが使えるようになります。


rascutについては、ActionScript開発者必須「rascut」 - MONNGIFTActionScript やるなら入れとけ。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>

※デモの動画ではにclick="helloClicked(event)"が抜けていました。 ↑これが正しいです。

↓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 ExplorerLiveDocsを見つつ、Let's Flex