ExtJSでAIRやってみた
ExtJSのエントリはこちらにまとめてありますダウンロードページより、アーカイブ(Ext JS 2.2 SDK)をダウンロードして解凍してください。20081211時点のバージョンは ext-2.2 です。
今日は、ExtJSのAIRアプリケーションを解説してみたいと思います。
最近作ったやる夫AIRはHTML１本だけのコンテンツだったのでflexSDKのadtコマンドでパッケージを簡単に作れましたが、ExtJSはスクリプトもスタイルもイメージファイルもたくさんあるので、AIRパッケージを作るのに苦労しそうなので今回はaptanaを使っています。
基本的には、普通にHTMLとExtJSでアプリケーションを作っていって、AIR化するだけなのですが本家のサンプルを見るとHTMLは以下のようにほとんど書いていなかったのでこれを真似して作ってみます。
main.html
<html> <head> <title>ExtGridAIR</title> <link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="lib/ext/air/resources/ext-air.css" /> <script type="text/javascript" src="lib/air/AIRAliases.js"></script> <script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="lib/ext/ext-all.js"></script> <script type="text/javascript" src="lib/ext/air/ext-air.js"></script> <script type="text/javascript" src="main.js"></script> </head> <body> <span></span> </body> </html>見るとスタイルシートにext-air.cssを追加して、さらにスクリプトにAIRAliases.jsとext-air.jsが使われています。main.jsは以下のとおりになります。
AIRアプリを作る場合は、Ext.air.NativeWindowを使ってウィンドウを構築するようです。さらにViewPortでレイアウトを組むというやり方です。たぶんmain.htmlのエレメントに直接gridやtreeなどをレンダリングしても大丈夫だと思います。が、non-application Sandboxのhtmlをiframeで組んであげる必要が出てきたりします。このsandboxの話は八角研究所のエントリに詳しく載っています
main.js
Ext.onReady( function(){
(
new Ext.air.NativeWindow({
id: 'mainWindow',
instance: window.nativeWindow,
width : 316,
height : 150
})
).show();
new Ext.Viewport({
layout:'fit',
items: new Ext.grid.GridPanel({
store: new Ext.data.SimpleStore({
fields: [{ name: 'a' },{ name: 'b' }],
data:[[ 'hoge', 1 ],[ 'moge', 2 ],[ 'fuga', 3 ]]
}),
cm: new Ext.grid.ColumnModel([
{ id : "gridid", header: "title", sortable: true, dataIndex: 'a' },
{ header: "number", sortable: true, dataIndex: 'b' }
]),
title:'simple-grid',
stripeRows:true,
view: new Ext.grid.GridView({
forceFit:true
})
})
});
});
こんなかんじでViewPortをつかってあげると、デスクトップアプリケーションぽく綺麗にまとまりますね。今回はgirdを１個だけ載せているのでExt.ViewPortのlayoutを'fit'で使っていますが、absolute, accordion, anchor, border, card, column, fit, form, tableなんかで組めるようです。詳しくはExt.ContainerのlayoutConfigを見てください。
<?xml version="1.0" encoding="UTF-8"?> <application xmlns="http://ns.adobe.com/air/application/1.5"> <id>com.adobe.example.extGrid</id> <filename>extGrid</filename> <name>extGrid</name> <version>2.0</version> <description></description> <copyright></copyright> <initialWindow> <content>extGrid.html</content> <title/> <systemChrome>standard</systemChrome> <transparent>false</transparent> <visible>false</visible> <minimizable>true</minimizable> <maximizable>true</maximizable> <resizable>true</resizable> </initialWindow> <icon> <image16x16>icons/AIRApp_16.png</image16x16> <image32x32>icons/AIRApp_32.png</image32x32> <image48x48>icons/AIRApp_48.png</image48x48> <image128x128>icons/AIRApp_128.png</image128x128> </icon> <fileTypes> </fileTypes> </application>
AIRパッケージ化
export adobe air packageをクリックします。AdobeAirPackageExporterがあがるのでnextを押してウィザードに従います。certificateが空の場合は、ConfigureCertificateという青地の箇所をクリックして証明書を作成します。証明書の作成は、以下のスクリーンショットのように証明書名とパスワード、パブリッシャを設定するだけで作られます。
作られた証明書のパスワードをポップアップ元のDigitalSigning画面で設定してnextを押すことでパッケージに含まれるコンテンツを選べます。
選ぶコンテンツは、全部入れれば間違いはありませんが、かなり冗長なファイルも含まれます。ExtJSで利用しているスタイルや画像などを選んでfinishを押すとairパッケージが作成されます。airパッケージをインストールして試してみましょう！