物欲とその仲間たちの記録：[連載?] Flex2 入門

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 の関係を説明したいと思います。

15:53｜Flex / Flash / AS3 / AS2｜0コメント｜0トラックバック

このエントリーのトラックバックURL
http://www.extype.com/mt/mt-tb.cgi/721

Twitter