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。

amxmlcを実行するとbad interpreter: /bin/sh^M: no such file or directory

Macでamxmlcを実行しようとするとpermission denied: amxmlcだったので、chmod +x amxmlcして実行すると、amxmlc: bad interpreter: /bin/sh^M: no such file or directoryとエラーが表示されました。どうやらdos2unixの出番です。

$ sudo port install dos2unix
して
$ dos2unix amxmlc
で再度chmod +xして実行可能になりました。

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を自分で作成するしかないかも。

Flex SDKでFlexアプリを作ってみる

Flex SDKとは

Adobe Flashを使わずにFlashを開発するためのSDK。
FlexではMXMLとActionScriptで開発する。

MXMLとは

MXMLはXMLの一種で、FlexアプリのコンポーネントのUIを配置することができる。
MXMLタグは ActionScriptのクラスまたはクラスのプロパティに相当する。Flexアプリをコンパイルすると、MXMLタグが解析されて、対応するActionScriptクラスが生成される。

ActionScriptとは

ActionScriptとはJavaScriptをベースに独自の拡張をしたもの。

Flex SDKの準備

http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3sdk
からダウンロードする。
また、Java実行環境が必要。無ければインストールする。
解凍したflex_sdk_3/binにパスを通す。

ボタンだけが表示されるアプリを作ってみる

ファイルを作成する。とりあえずFirstFlex.mxmlとする。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application

    xmlns:mx="http://www.adobe.com/2006/mxml"

    horizontalAlign="center" verticalAlign="center">

    <mx:Button id="myButton" label="I'm a button!"/>

</mx:Application>

コンパイルする。
mxmlc –strict=true –file-specs MyFirst.mxml
–strictで厳密なチェックが行われる。
–file-specsでコンパイルするファイルを指定。
FirstFlex.swfが作成される。これをブラウザにD&Dするとボタンだけが表示される。

ボタンをActionScriptで作成してみる

<?xml version="1.0" encoding="utf-8"?>

<mx:Application

    xmlns:mx="http://www.adobe.com/2006/mxml"

    horizontalAlign="center" verticalAlign="center"

    creationComplete="creationCompleteHandler();"

    >

    <mx:Button id="myButton" label="I'm a button!"/>

    <mx:Script>

        <![CDATA[

            import mx.controls.Button;

            import mx.events.FlexEvent;

            private var asButton:Button;

            private function creationCompleteHandler() :void {

                asButton = new Button();

                asButton.label = "I'm a actionscript button!";

                asButton.addEventListener (FlexEvent.CREATION_COMPLETE, buttonCreationCompleteHandler);

                addChild(asButton);

            }

            private function buttonCreationCompleteHandler(evt:FlexEvent) :void {

                asButton.x = parent.width / 2 - asButton.width / 2;

                asButton.y = parent.height / 2 - asButton.height /2;

            }

        ]]>

    </mx:Script>

</mx:Application>

コンパイルしてブラウザで読みこむとボタンが2つ表示される。