AIRでExt JSを使ってUIを作成する その2

「AIRでExt JSを使ってUIを作成する」で、旧バージョンのExt JSを使ってAIRの上にExt JSをのせましたが、 ここでは、最新のExt JS 2.2.1を使ってAIRの上にExt JSをのせます。

アプリケーションサンドボックスでは、Ext JSが使えないため非アプリケーションサンドボックス側にExt JS、 アプリケーションサンドボックスにAIRと分け、サンドボックスブリッジで双方処理を行います。

[サンプルファイル]

HTMLの作成例

アプリケーションサンドボックス用のHTML(main.html)と非アプリケーションサンドボックス用のHTML(ui.html)の2つを 用意します。

ui.htmlは、main.htmlの上に表示されるようiframeで実装します。 

<html>
<head>
<title>templates</title>
<script src="lib/air/AIRAliases.js" type="text/javascript"></script>
<script src="lib/air/AIRIntrospector.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</head>
<body>
    <iframe id="UI"
        src="http://localhost/ui.html"
        sandboxRoot="http://localhost/"
        documentRoot="app:/"
        width="100%" 
        height="100%"
        style="width:100%; height:100%;border:none"
        ondominitialize="initParentBridge()">
    </iframe>
</body>
</html>

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="lib/ext/source/locale/ext-lang-ja.js"></script>
<script type="text/javascript" src="ui.js"></script>
<!-- テーマを変更
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/xtheme-gray.css" />
-->
</head>
<body>
</body>
</html>

JavaScriptの作成例

それぞれのJavaScriptを次のように作成します。ここでは、双方にサンドボックスブリッジを用意しています。

main.html側のJavaScript

//ui.htmlとのサンドボックスブリッジ
window.onload = function(){
    childInterface = document.getElementById('UI').contentWindow.childSandboxBridge;

    //メソッド実行
    //childInterface.msgBox('TEST');
}
	
var parentInterface = {
    trace: function(str){
        air.trace(str);
    }
}
//main.htmlのサンドボックスブリッジ
function initParentBridge(){
    document.getElementById('UI').contentWindow.parentSandboxBridge = parentInterface;
}

ui.html側のJavaScript

Ext.BLANK_IMAGE_URL = 'lib/ext/resources/images/default/s.gif';

var childInterface = {
    msgBox: function(msg) {
        Ext.Msg.alert('Message',msg);
    }
}
window.childSandboxBridge = childInterface;

// Main application entry point
Ext.onReady(function() {
    // クイックチップスの初期化
    Ext.QuickTips.init();

    // ViewPortやPanelを配置

});