Flex2デビューのヒント・・・？
FlashとFlexの違いをもろに見せ付けられた感じです。
ということで、「書き物」のカテゴリーに「Flex」を追加。
AS2.0→AS3.0というのは思っていたより簡単だったのですが、
MXMLでのアプリケーション開発というものは新種で、かなり混乱しました。
いろんな文章やらソースをあさって、少しだけ何か見えてきた気がします。
ということで、今回はマップエディタ云々以前の、
Flex2でのアプリケーション作成に関して僕が思っていたり気づいたりしたことをいくつか。
Flex2でのアプリケーション開発方法って？
前述のリンクでも書かれていますが、
なにやらMXMLというHTMLっぽいタグを書いてコンポーネントと呼ばれるボタンなどの部品を並べて
アプリケーション（つまりswf）を作っていくみたいです。
例えば
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Panel width="200" height="150" layout="absolute" title="スタートページ" x="137" y="24"> <mx:Button label="マップデータ読み込み" x="25.5" y="66"/> <mx:Button x="25.5" y="36" label="新規作成"/> <mx:Label x="25.5" y="10" text="編集方法選択"/> </mx:Panel> </mx:Application>
って書けば
って感じ。
Panel（パネル）の上にButton（ボタン）が2つ、「編集方法選択」というLabel（ラベル）が並んでいますね。
public class StartPage extends Panel { public function StartPage() {ブツブツブツ・・・
と書いて作っていくよりは直感的ですね。
しかもFlexBuilder2では、これをFlash上でコンポーネントを並べるような感覚でデザインできます。
（ちなみに今の段階でこれらのボタンにイベントリスナーを登録する一般的な方法というものは僕は知りません。）
画面の移行はどうするの？
開発方法は大体分かった。
ではボタンを押したら画面を切り替え・・・はどうするのか？
【画面遷移について】
- 画面ごとにMXMLを用意し、画面を切り替えるたびに読み込む
- ActionScriptで動的に切り替え
なんて方法があるみたいです。
1については僕はためしたことが無いので何も言えませんが、
2については後で書いてみます。
僕の場合
未だ僕自身、コンポーネントの使い方や一般的なFlexでのアプリケーション開発の方法を知りませんが、
自分なりの開発方法を編み出しました。
その基本的な流れを書いてみます。
基本は前述の2の方法で開発を進めています。
こちらを参考にさせていただきました。
前のバージョンでの話のようですが、手探りのヒントになりました。
【UI コンポーネントの動的な生成】
流れは
これだけです。
僕の場合、MXMLよりもこれまで使ってきたAS3.0で作っていく方が気が楽だったという話。
つまりまだFlexのありがたみを味わいきれていないのかもしれません。
具体的なコードを書きます。
メインとなるmxmlファイル。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="initApp()">
<mx:Script>
<![CDATA[
import setting.StartPage;
// ■アプリケーション初期化
public function initApp():void
{
// スタートページ
addChild(new StartPage());
}
]]>
</mx:Script>
</mx:Application>
スタートページのクラス。
/**
* ・スタートページパネル
*/
package setting
{
import mx.containers.Panel;
import mx.controls.Button;
import data.AppData;
import flash.events.MouseEvent;
import mx.controls.Label;
public class StartPage extends Panel
{
// --------------------------------------------------------------------------------------
// --プロパティ -----------------------------------------------------------------------------
private var _newBt :Button; // 新規作成ボタン
private var _loadBt :Button; // 読み込みボタン
// --------------------------------------------------------------------------------------
// --初期処理 -----------------------------------------------------------------------------
// ■コンストラクタ
public function StartPage()
{
width = 200;
height = 150;
layout = "absolute";
title = "スタートページ";
x = AppData.WIDTH / 2 - width / 2;
y = AppData.HEIGHT / 2 - height / 2;
// 説明ラベル
var l:Label = new Label();
l.text = "編集方法選択";
l.x = 25.5;
l.y = 10;
addChild(l);
// 新規作成ボタン
var b:Button = new Button();
b.label = "新規作成";
b.x = 25.5;
b.y = 36;
b.addEventListener(MouseEvent.CLICK, newBtOnClick);
_newBt = b;
addChild(b);
// 読み込みボタン
b = new Button();
b.label = "マップデータ読み込み";
b.x = 25.5;
b.y = 66;
b.addEventListener(MouseEvent.CLICK, loadBtOnClick);
_loadBt = b;
addChild(b);
}
// --------------------------------------------------------------------------------------
// --イベントリスナーメソッド -----------------------------------------------------------------
// ■新規作成ボタンクリック
private function newBtOnClick(event:MouseEvent):void
{
parent.addChild(new SettingEditor());
endStartPage();
}
// ■読み込みボタンクリック
private function loadBtOnClick(event:MouseEvent):void
{
parent.addChild(new MapDataLoader());
endStartPage();
}
// --------------------------------------------------------------------------------------
// --通常メソッド -------------------------------------------------------------------------
// ■スタートページ終了メソッド
private function endStartPage():void
{
_newBt.removeEventListener(MouseEvent.CLICK, newBtOnClick);
_loadBt.removeEventListener(MouseEvent.CLICK, loadBtOnClick);
parent.removeChild(this);
}
// --------------------------------------------------------------------------------------
// --プロパティの設定取得メソッド -------------------------------------------------------------
}
}
このスタートページのクラスのように、画面ごとにクラスを作っていって開発を進めています。
このスタートページは、前に書いたMXMLの例と同じデザインを再現しています。
MXMLの方が直感的で分かりやすいということが分かると思います。（でも僕はAS3で作ってる...。）
イベントリスナーの登録などは、普通にAS3での方法と同じみたいです。
あと描画も「addChild」、「removeChild」で行うという点もそのままです。
しかし「Sprite」を生成して「addChild」すると強制型変換のランタイムエラーで怒られました。
このあたりは少し違うようです。
あとがき
コンポーネントの使い方や描画についてもほとんど知らず、
まだまだ分からないことだらけで人に語れるほどエライ身分ではないですが、
ちょっとしたヒントとなれば幸いです。
