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を配置
});