<< AS3.0アプリでのパラメータ受け渡し | main | 「Google 急上昇ワード」のブログパーツを作ってみた >>

2008.04.14 Monday

MXMLで画面作り

Flex 3 SDKを使ってそれなりのGUIを作る場合、MXMLという書式で画面作りをすることになります。
簡単に言うと、一般のWindowsアプリのリソースに相当するもので、ボタンやテキストフィールドなど必要なものを配置するわけですが、これをテキストで書いていく必要がある、ということになります。

サンプルが、
Adobe Flex 2 Component Explorer
にあるので、これが参考になります。

--

--

具体例を挙げると、
<?xml version="1.0"?>
<!-- Simple example to demonstrate the Button control. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
        
            import flash.events.Event;
        
            // Event handler function to print a message
            // describing the selected Button control.        
            private function printMessage(event:Event):void  {
              message.text += event.target.label + " pressed" + "\n";
            }
      
      ]]>
    </mx:Script>

    <mx:Panel title="Button Control Example" 
        height="75%" width="75%" layout="horizontal" 
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <mx:VBox>
            <mx:Label width="100%" color="blue"
                text="Select a Button control."/>

             <!-- The size of the button and the label attributes can be customized -->
             <mx:Button label="Customized Button" color="#993300" toggle="true" selected="true"
                 textAlign="left" fontStyle="italic" fontSize="13" width="200" 
                 click="printMessage(event);"/>

             <!-- By default, the look and feel of the customized button is 
                 similar to the Default Button.  -->
             <mx:Button label="Default Button" click="printMessage(event);"/>
        </mx:VBox>

         <mx:TextArea id="message" text="" editable="false" height="100%" width="100%"
             color="#0000FF"/>

    </mx:Panel>
</mx:Application>

Adobe Flex 2 Component Explorerのボタンコントロールのサンプルを一部割愛しただけのものですが、Flex 3 SDKのみでパブリッシュ出来ます。

ソースを見ると分かるのですが、画面定義部とスクリプト定義部が混在できます。これがWindowsアプリのリソースファイルと異なるところでしょうか。

実際に動作させると分かるのですが、これだけのソースでリッチなコントロールが使えるというのは、Goodですね。
テキストも行数が増えると、自動的にスクロールバーが付加されますし。

ただ、サイズがでかいのが問題。
これだけのソースで、このサイズとは・・・

ブログパーツなどを作る場合、サイズが小さい方がよいので自前でコントロールをAS3で作った方がよいと思います。
サイズが大きくなると、ダウンロードにも時間がかかりますしね。

■入門記事
順番が前後しますが、Flex 3 SDKを使ったFlashアプリケーション開発の入門記事を書いてみました。
Flex 3 SDKによるFlash開発入門
よろしければどうぞ。

--

テクノラティお気に入りに追加する

Comments

コメント入力は停止しています

海外からと思われるコメントスパムが横行しているため、全記事のコメント入力を停止しています。メッセージのある方は、ホームページの一番下に連絡欄がありますので、そちらからお願いします。

Trackback URL

トラックバックする場合は、
トラックバック元の記事にこのエントリへのリンクを記載してください
このエントリのタイトル「MXMLで画面作り」
このエントリのリンク「http://kommy.s254.xrea.com/blog/log/eid71.html」