第４回：AIRでメニューウィンドウ作成！を試してみる : kishi-r.com

第４回：AIRでメニューウィンドウ作成！を試してみる

昨日からテストログを見ている時に時間があるので、

Airをやってます。

で、アプリケーションを作りたいなぁーと妄想しているので、サンプルとして何かないか？と困っていたら、

良いのがあったのでやってみた。

やったのは、こちら

第４回：AIRでメニューウィンドウ作成！を試してみる

実際に書かれている物を確認しつつ進めていった時に、

Application Descriptorの記述が変更されていたりで

動かなかった所を修正しつつ行っていく。

環境はMacBookで、

OS X 10.5.5

です。

行った場所は自分のホームディレクトリなどで実行。　例）Users/sticikes　とかで。

下記は全てターミナルにて行いました。

まずはアプリケーション記述ファイルが必要になるので、同じ階層で、「stickies-app.xml」ファイルを作成・記述する。

$ cd /Users/stickies
$ touch stickies-app.xml
$ vim stickies-app.xml

記述は下記が記載されていた。

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0.M4" appId="jp.masuidrive.thinkit.stickies" version="1.0">
    <name>オンライン付箋</name>
    <rootContent systemChrome="standard">menu.swf</rootContent>
</application>

次に「menu.mxml」を同じディレクトリにて、作成・記述する。

$ touch menu.mxml
$ vim menu.mxml

menu.mxmlへは下記を記述する。

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="200">
  <mx:Button left="10" top="10" label="新規" id="new_btn" />
  <mx:Button right="60" top="10" label="読み込み" id="load_btn" />
  <mx:Button right="10" top="10" label="保存" id="save_btn" />
  <mx:TextArea right="10" top="40" left="10" bottom="10" id="messages" />
</mx:WindowedApplication>

これはそのまま書かれている通りでOK。

次にswfファイルを生成する。

$ amxmlc menu.mxml

上記コマンドでコンパイルすると、「menu.swf」が生成される。

下記コマンドでswfファイルを確認する。

$ ls
menu.mxml         menu.swf

これでファイルが出来たので、実際にadlコマンドで実行してみる。

$ adl stickies-app.xml
invalid application descriptor: application filename must have a non-empty value.

あーエラーになってしまった。。。

これは、冒頭に書いたとおりApplication Descriptorの記述が変わっているためなので、

「stickies-app.xml」を変更する必要がある。

$ vim stickies-app.xml

記述する内容は、下記。

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.5" appId="jp.masuidrive.thinkit.stickies" version="1.0">
    <id>kishi-r.com.stickies</id>
    <name>オンライン付箋</name>
    <version>1.0</version>
    <filename>stickies</filename>
    <description>Hello first application</description>
    <copyright>(c) 2008 </copyright>
    <initialWindow>
        <content>menu.swf</content>
        <title>Sticies Menu</title>
        <systemChrome>none</systemChrome>
        <transparent>true</transparent>
        <visible>true</visible>
    </initialWindow>
</application>

でもう一度実行してみる。

$ adl stickies-app.xml

そうすると下記のような画面が表示されるはず。

menu01 posted by (C)kishir

次に実際にボタンを押す時の動作部分を少しやってみる。

記述するファイルは、「menu.mxml」ファイル

$ vim menu.mxml

で、下記の通り記述する。

<mx:Button left="10" top="10" label="新規" id="new_btn" />

へ「click="create();"」を追加する。

<mx:Button left="10" top="10" label="新規" id="new_btn" click="create();" />

実際に「create関数」を定義する。

定義するのは、同じファイル「menu.mxml」で、記述すると下記のようになる。

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="200">
    <mx:Script>
    <![CDATA[
        public var sticky:NativeWindow;
        public function create():void {
            var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
            sticky = new NativeWindow(true, initOptions);
            messages.text += ">> Created new sticky\n"; // debug display
        }
    ]]>
    </mx:Script>
    <mx:Button left="10" top="10" label="新規" id="new_btn" click="create();" />
    <mx:Button right="60" top="10" label="読み込み" id="load_btn" />
    <mx:Button right="10" top="10" label="保存" id="save_btn" />
    <mx:TextArea right="10" top="40" left="10" bottom="10" id="messages" />
</mx:WindowedApplication>

実際に実行して確認してみる。

$ adl stickies-app.xml

動かない。。。

何でなのかを調べたら、ここに書いてありました。

やっぱ解らない時はGoogleさんに聞くのって、問題かな？

まぁーそれは良いとして続きをやろうっと。

NativeWindow クラスのコンストラクタに変更があった模様

そうなのか。

じゃー変更しないとなーって事で、「menu.mxml」を下記のように変更する。

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="200">
    <mx:Script>
    <![CDATA[
        public var sticky:NativeWindow;
        public function create():void
        {
            var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
            sticky = new NativeWindow(initOptions);
            sticky.visible = true;
            messages.text += ">> Created new sticky\n"; // debug display
        }
    ]]>
    </mx:Script>
    <mx:Button left="10" top="10" label="新規" id="new_btn" click="create();" />
    <mx:Button right="60" top="10" label="読み込み" id="load_btn" />
    <mx:Button right="10" top="10" label="保存" id="save_btn" />
    <mx:TextArea right="10" top="40" left="10" bottom="10" id="messages" />
</mx:WindowedApplication>