2007年08月31日
[連載?] Flex2 入門 - 第2回
さて、お待ちかねの第2回の始まりです。
今回は『MXML』について簡単に説明をしていきます。
「ActionScript を書かなくても、XML を書けばアプリケーションが出来る」という誤解をちらほら耳にしますが、さすがにそうはいきません。
正確にはアプリケーションの UI（見た目）は出来るけど、制御が出来ません。
そう。MXML は簡単に言うと UI を定義する為のモノなのです。
以下の MXML を記述して実行をすると、ブラウザの中心部に「Say Hello」と書かれたボタンが表示されます。これだけで、ボタンにマウスを持っていけばフォーカス用の表示になるし、クリックした時には押された感たっぷりの表示になります。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
<mx:Box width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
<mx:Button label="Say Hello" />
</mx:Box>
</mx:Application>
<Application> はアプリケーションのメインとなる部分です。
HTMLの <html> と同じようなモノだと思えば大丈夫です。
<Box> はコンテナーの役割をするタグです。
HTMLの <div> みたいなモノです。
ここでは縦横を100%、縦/横揃えを共に中心に設定しています。
<Button> はボタンコンポーネントです。
<Button /> だけでボタンが生成されます。
ここでは label 属性に "Say Hello" という文字列を設定しています。
こう見ると HTML とほとんど変わりませんね。
シンプルな UI であればほんの数分でパッと作れてしまいます。
お客さんとの打ち合わせ中に、簡単な UI 定義だけ作れちゃうかもしれませんね！
（簡単じゃーんと思われて、値切られても困りますがｗ）
さて、これだけだと本当に UI だけで何も出来ません。
せめてボタンを押下したら何か表示されて欲しいですよね？
では、ちょっと ActionScript を利用して制御をしてみましょう。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
]]>
</mx:Script>
<mx:Box width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
<mx:Button label="Say Hello" click="Alert.show( 'Hello Flex World!!' )" />
</mx:Box>
</mx:Application>
MXML を上記のように書き換えます。
そうすると "Say Hello" ボタンの押下で、"Hello Flex World!!" という文字が書かれた
ダイアログが表示される様になります。
これだけで簡単なアプリケーションが完成しました！
追加した部分と言えば、<Button> に click イベントでの処理を記述しただけです。
Alert.show() というのは Javascript でいう、alert() と同じものだと思ってください。
※先頭部分に <Script> というタグが追加されていますが今は「必要なもの」だと思って、気にしなくて大丈夫です。
今回は MXML を用いた UI 定義(+α)を説明いたしましたが、
次回はもうちょっと MXML と ActionScript の関係を説明したいと思います。
2007年08月22日
[連載?] Flex2 入門 - 第1回
「Flex2 ってなんかいろいろ出来てすごいんだよね？」
「XML 書くだけでアプリケーションが出来るんだって？」
「ActionScript3 になってすごい速いんでしょ？」
というような話しをちょこちょこ耳にします。
間違ってはないですね。ただ、過度な期待は挫折の第一歩です。
いろいろなサイトに書いてあるように Flex2 は mxml と ActionScript3 を用いて開発します。
細かく言語仕様等を説明しても仕方がない(というよりボクには出来ない)ので、
以下の疑問を一つの簡単なアプリケーション開発を通じてお伝えして行こうと思います。
- どうすればアプリケーションになるの？
- そもそも Flex2 ってどうなっているの？
- 基本知識ってどんなの？
そして、気になる簡単なアプリケーションはコレ↓
※画像をクリックするとサンプルアプリケーションが開きます
このアプリケーションは、当ブログでアップした画像を表示するアプリケーションです。
タイル状に並んだサムネイルをダブルクリックすると大きく表示されます。
※某社のアプリにそっくりなのはご愛嬌という事で...
という感じで、第2回目をお楽しみに！
2007年08月13日
ActionScript3 で Singleton
何故か public しか定義できない AS3 のクラスですが、
便利なシングルトンパターンを利用したいケースは多々あります。
AS2 では private でコンストラクタを定義すれば OK だったのですが、
AS3 では許してくれません。。。
皆さんそれぞれのやり方をしている様ですが、
ボクは以下のように実現をしてます。
package {
public class SingletonTest {
// Singleton 生成用キー
private static const SINGLETON_KEY:Function = new Function();
// 唯一のインスタンスを保持する
private static var instance:SingletonTest;
// Singleton の取得
public static function getInstance():SingletonTest {
// プライぺート定数のキーを渡す
if ( !instance )
instance = new SingletonTest( SINGLETON_KEY );
return instance;
}
// コンストラクタ
// 引数が SINGLETON_KEY と一致しなかった場合は Error を throw する
public function SingletonTest(singletonKey:Function=null) {
if ( singletonKey != SINGLETON_KEY )
throw new Error( "SingletonError" );
}
}
関数の参照を定数として保持しているので全体で唯一のものになり、
さらにプライベートでの定義な為に外部からの参照も出来ません。
これにより、生成できるのは SingletonTest.getInstance() のみになる（ハズ...）
ここでは Function をキーに使っていますが、Object でも何でも良いと思います。
