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を指定する必要があった。
前回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、コントローラを作ってみるようかな。
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
みごとにWindowが表示され、左上に小さくHello world!と表示されました。…中央に大きく表示したほうがいいですよね。でも疲れたので今日はここまでw。
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して実行可能になりました。
あるアプリを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を自分で作成するしかないかも。
Adobe Flashを使わずにFlashを開発するためのSDK。
FlexではMXMLとActionScriptで開発する。
MXMLはXMLの一種で、FlexアプリのコンポーネントのUIを配置することができる。
MXMLタグは ActionScriptのクラスまたはクラスのプロパティに相当する。Flexアプリをコンパイルすると、MXMLタグが解析されて、対応するActionScriptクラスが生成される。
ActionScriptとはJavaScriptをベースに独自の拡張をしたもの。
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するとボタンだけが表示される。
<?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>
コンパイルしてブラウザで読みこむとボタンが２つ表示される。