AIR: いろいろやるにはNativeWindowを使うらしい

AIRで高度なWindowの表示を行うにはNativeWindowを使うらしい。

var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
initOptions.systemChrome = NativeWindowSystemChrome.STANDARD;
initOptions.transparent = false;
initOptions.type = NativeWindowType.NORMAL;
window = new NativeWindow(initOptions);
window.visible = true;


でノーマルWindowが表示できた。PanelはNativeWindowType.UTILITYを指定する。NativeWindowType.LIGHTWEIGHTの場合はNativeWindowSystemChrome.NONEを指定する必要があった。

AIR: 複数Windowを作成

前回Flex4&AIRで単一Windowを表示しました。
今回は複数Windowを作成してみます。

mxmlファイルではWindowedApplicationからApplicationに変更。ActionScriptでWindowを作成するのでスクリプトを読み込み。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               applicationComplete="init()">
    <fx:Script source="MultiWindow.as"/>
</s:Application>

MultiWindow.asではinitメソッドとopenWindowメソッドを作成。openWindowではWindowとButtonを作成してButtonをWindowに配置。

import spark.components.Window;
import spark.components.Button;
import spark.components.Group;
 
private var window:Window = null;
 
private function openWindow(event:MouseEvent):void {
    window = new Window();
    window.width = 300;
    window.height = 300;
    window.title = "Test";
    var opnBtn:Button = new Button();
    opnBtn.x = 10;
    opnBtn.y = 10;
    opnBtn.label = "Open";
    opnBtn.addEventListener(MouseEvent.CLICK, openWindow);
    window.addElement(opnBtn);
    window.open(true);
}
 
private function init():void {
    openWindow(null);
}

コンパイルして実行するとはじめにWindowが一つ表示され、そのWindowのOpenボタンをクリックすると新しいWindowが表示されました。

このコードでは一つのwindow変数に次々に新しいWindowインスタンスが代入されるので、Closeボタンを付けてみたら案の定最後に作成したWindowだけしか閉じることができませんでした。

次はMVCのC、コントローラを作ってみるようかな。

AIR: WindowにHello worldを表示してみた

Flexは以前すこしいじったことはありますが、完全に忘れました…。たしかバージョンが違うし。

なので、AIR SDKについてきたSampleのAIRアプリ定義XMLを参考にしつつ、Flex 4でWindowにHello Worldを表示してみます。

まずMXML。HelloWorld.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark">
    <s:Label text="Hello world!"/>
</s:WindowedApplication>

Flex 4なのでSparkを使用。

そしてAIRアプリ定義。HelloWorld-app.xml

<?xml version="1.0" encoding="UTF-8"?> 
<application xmlns="http://ns.adobe.com/air/application/1.5.3"> 
    <id>samples.flex.HelloWorld</id> 
    <name>
        <text xml:lang="en">Hello World Application 0.1</text>
    </name>
    <version>0.1</version> 
    <filename>HelloWorld</filename> 
    <initialWindow>
            <content>HelloWorld.swf</content>
            <title>Hello World Application</title>
    </initialWindow>
</application>

コンパイルしてアプリをデバッグ実行してみます

$ amxmlc HelloWorld.mxml
$ adl HelloWorld-app.xml


hw_air
みごとにWindowが表示され、左上に小さくHello world!と表示されました。…中央に大きく表示したほうがいいですよね。でも疲れたので今日はここまでw。

MacにAdobe AIR開発環境を整える

あるアプリをAdobe AIRで開発してみようと思い立ったので、AIRの研究をすることにしました。

まずは開発環境を整えます。

AIR SDKをAdobe – AIR: Adobe AIR SDKからダウンロードして適当な場所にコピー。

Flex SDKはDownload Flex 4 – Flex SDK – Adobe Open SourceからFlex 4 Betaの最新のものをダウンロードしました。アプリリリースまでにはBetaではなくなっていることでしょう。

Adobe Flex SDKとOpen Source Flex SDKの違いは
Free Adobe Flex SDK と Open Source Flex SDK – てっく煮ブログ
が参考になりました。ということでOpen Source Flex SDKを使いつつ必要になったらAdobe Flex SDKに変更することにしてみます。

Flex SDKもダウンロードしたら適当な場所にコピー。私は~/local/share/に配置しました。

配置したら~/.zshenvに

export PATH=/Users/username/local/share/AIR_SDK/bin:/Users/username/local/share/flex_sdk_4.0.0.10485_mpl/bin:$PATH


と記述しました(実際にはMacPortsのパスなども入ってます。Macのデフォルトはbashなので、普通は.bashrcあたりに記述するんですがzsh使ってるので.zshenvに記述してます)。

bin下の実行ファイルが実行できたのでインストール完了。

ところで、IDEはAptanaを利用しようと思ったんですが、AptanaってHTML+CSS+JSでの開発のみをサポートしてるって事みたいなので…どうしよう。

Komod IDEはActionScriptは公式にはもうサポートしないってことみたいなんで、Komodo使いつつLexerとCIXを自分で作成するしかないかも。