Adobe AIR と ExtJS の入門（3） - Adobe AIRとExtJSで一番簡単なコンポーネントの使い方
- Adobe AIRとExtJSについて
- エフェクトとイベントを使う
- Adobe AIRとExtJSで一番簡単なコンポーネントの使い方
- Adobe AIR と Ext JS で作るTODOボード
クジラ飛行机です。Adobe AIR (JavaScript) でよく使われるJavaScriptのライブラリ、ExtJS を紹介しています。ExtJS を使うと、リッチなUIを使った Web アプリケーションを比較的簡単に作成できます。メッセージボックスなどもいちいちカッコよく、グリッドやパネルのレイアウトも手軽に作成できます。また、 ExtJS には AIR との連携を考慮されたライブラリも多くあります。
今まで、ExtJS が気になっていた方に向けた入門講座になっています。JavaScriptをそれほど熟知していない方でも気軽に読める内容です。ぜひ、読んでみてください。
これまでのおさらい
フリーのAjax統合開発環境 Aptana Studio を使って、Adobe AIR と ExtJS を組み合わせたアプリケーションを紹介しています。1回目では、ExtJS でどんなことができるのか、紹介しました。そして、2回目では、ExtJS を使って実際にプログラムを作っていきました。ExtJS を AIR で使う上でのセキュリティに注意なども解説しました。
- ExtJS 入門(1)～ExtJS の実力をチェック
- http://www.hakkaku.net/articles/20080312-159
- ExtJS 入門(2)～エフェクトとイベント
- http://www.hakkaku.net/articles/20080327-178
今回見ていくこと
- AIR で Ajax ライブラリを使う時の注意
- ExtJS の Button コントロールを使う
- ウィンドウへコントロールを追加する
Adobe AIR で Ajax ライブラリを使う時の注意
はじめに、今回のすべてのプログラムで利用する雛型を示します。プログラムで、毎回、以下の２つのファイルを利用します。雛型を示す前に、なぜ、２つのファイルが必要になるのかを再度確認してみましょう。
前回も紹介しましたが、Adobe AIR で Ajax のライブラリを使うとき、標準の状態では、セキュリティ上の制約から、eval() メソッドなどが使えない状態になっているのです。AIR の動作モードには、Application sandbox と、Non-application sandbox と２つのモードが用意されています。
標準の Application sandbox では、AIR の API（ローカルファイルへのアクセスなど）が完全に使えるのですが、JavaScript の eval() などのダイナミックな機能が制限されています。
そして、、Non-application sandbox では、HTMLの互換性重視モードとも言えるものです。これは、Non-application sandbox と呼ばれるもので、セキュリティに厳しく、AIR APIは使えません。しかし、その代わり、JavaScript の eval() などのダイナミックな機能が利用可能です。
AIR では、この２つのモードを使い分けることが重要になってきます。また、これら２つの動作モードの中で定義したJavaScriptの関数を相互に呼び出すための仕組みも用意されています。
Adobe AIR のデフォルトでは、ダイナミックな機能が制限された、Application sandbox で起動します。HTMLの互換性重視モード(Non-application sandbox)に切り替えるには、iframe タグを使って、サンドボックスが、どのセキュリティモードに属するのかを明示します。
そして、以下が、今回の雛型です。メインHTMLファイルを、main.html 、そして、Ajax をガンガン使いたいファイルを ui.html としています。今回は、main.html はほとんど書き換えず、ui.html の方を主に書き換えます。
main.html
<html><body> <iframe id="UI" src="ui.html" sandboxRoot="http://example.com/" documentRoot="app:/" style="width:100%; height:100%;border:none"> </iframe> </body></html>
ui.html
<html><body>
<!-- ExtJS を使う上での基本的なライブラリの取り込み-->
<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>
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css"/>
<!-- ここにスクリプト -->
<script type="text/javascript">
Ext.onReady(function(){
Ext.MessageBox.alert("test","hello!");
});
</script>
</body></html>
つまり、Adobe AIRの方針としては、UI は、別のHTMLファイルに記述するということさえ覚えておけば良いことになります。
それから、今回の解説では、上記の雛型を利用しますが、Aptana Studioで AIR プロジェクトを作る場合には、上記の雛型を自動で生成してくれる便利な機能があります。プロジェクトの新規作成で、プロジェクト名を決定するダイアログで、そのすぐ下に、Application sandbox あるいは、Application and non-application sandbox のどちらかを選ぶチェックボックスがあります。ここで、後者を選ぶと、自動的に上の雛型に近いものを生成してくれます。
※参考）AIR のセキュリティで、より詳しい内容は、以下をご覧ください。・Introducing the Adobe AIR security model・http://www.adobe.com/devnet/air/articles/int..
ExtJS のコントロールを使う
Button コントロール
ExtJS に限らず、UIを利用したプログラムで最も基本となるUIパーツと言えば、ボタンです。「ボタン」をどのように作成し、どのようにイベントを記述するのかを見ることで、そのライブラリをどのように扱ったら良いのか、基本的な事柄が見えてきます。
そこで、ここでは、次のようにTestというボタンを作り、これをクリックすると「Hello」というメッセージボックスを表示するという簡単なプログラムを作ってみます。
以下のサンプルを実行するには、Aptana Studioでプロジェクトを作成し、自動的に生成されたメインファイルを、上記の main.html の内容に書きかけます。そして、新規HTMLドキュメントとして生成した「ui.html」を以下のプログラムに書き換えます。
<html><body>
<!-- ExtJS を使う上での基本的なライブラリの取り込み-->
<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>
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css"/>
<!-- スクリプト -->
<script type="text/javascript">
Ext.onReady(function(){
// ボタンを作る
var btn = new Ext.Button({
text:"Test",
handler: function(){ Ext.MessageBox.alert("","Hello!"); }
});
// document.body に描画
btn.render(document.body);
});
</script>
</body></html>
プログラムの大半は、ライブラリの取り込みや、script タグなど、宣言的なものがほとんどです。メインプログラムの部分だけを取り出して、再度見ていきましょう。
Ext.onReady(function(){
// ボタンを作る --- (*1)
var btn = new Ext.Button({
text:"Test",
handler: function(){ Ext.MessageBox.alert("","Hello!"); }
});
// document.body に書き込む --- (*2)
btn.render(document.body);
});
ExtJS では、初期化コードを、Ext.onReady() の引数に与えるのでした。これにより、ExtJS のライブラリの初期化などが終わった後に、ExtJS を利用したプログラムを記述することができます。
そして、ボタンを作成する場合は、new 演算子で、Ext.Button クラスを作成します。これが、プログラムの(*1) の部分です。作成しただけでは画面に表示されないので、(*2) の部分にあるように、Ext.Button の render メソッドで書き込みを行います。
ボタンを作成する場合に、どんなボタンを作るのかを、Object として引数にパラメータを渡すことができます。Ext.Button のコンストラクタは、次のような形式になっています。
[書式] Button クラスのコンストラクタ new Ext.Button( config ); → config には、 Object 型の設定を与える
上記のサンプルでは、どのような引数を与えるか再度確認してみます。上記と全く同じ動作をするプログラムですが、コンストラクタに与える引数を変数に分けて書き直してみました。
var config = {
text:"Test",
handler: function(){ Ext.MessageBox.alert("","Hello!"); }
};
var btn = new Ext.Button(config);
「text」は、ボタンに表示するテキスト、「handler」には、クリックされたときに何をするのかのコードを指定しています。ExtJS の Button がだいぶ分かってきました。
パネルの利用
ExtJS では、画面のレイアウトが簡単にカッコよく作成できるように工夫されています。ここでは、パネルの利用例として、Yes と No の２択ボックスを Ext.Panel クラスを使って作ってみます。
YesとNoのボタンのついたパネルを作ります
こちらも冒頭の雛型のうち、ui.html だけを書き換えたものとなっています。
<html><body>
<!-- ExtJS を使う上での基本的なライブラリの取り込み-->
<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>
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css"/>
<!-- スクリプト -->
<script type="text/javascript">
Ext.onReady(function(){
// 簡易メッセージ表示関数を定義
function alert2(str) { Ext.MessageBox.alert("",str); }
// パネルを作る
var panel = new Ext.Panel({
renderTo:document.body,
title:"Test Panel",
frame:true,
buttons: [
{
text:"Yes",
handler: function() { alert2("Yes"); }
},
{
text:"No",
handler: function() { alert2("No"); }
}]
});
});
</script>
</body></html>
詳しく見てみましょう。このプログラムでは、new 演算子で、Ext.Panel クラスを生成すると、画面にパネルが表示されるようになっています。パネルもボタンと同じように、クラスを生成するときの引数に、生成のための設定を与えることで、ほとんどのパラメータを一括設定することができるようになっています。
[書式] new Ext.Panel( Object config ); → config には、 Object 型の設定を与える
また、ボタンでは、new でボタンを生成してから、render メソッドで、ボタンの内容を書き込みしていましたが、ここでは、renderTo メソッドを用いて、書きこみ先も指定しています。
そして、Panel の便利な設定項目として、buttons というオプションが用意されていることです。この buttons に複数ボタンの設定パラメータを与えることによって、任意のテキストと動作をするボタンを作成することができるというわけです。
ここまで、二択ボタンのあるパネルを作ってみましたが、一般的にこれは、何かしらの動作の選択に使うものでしょう。ですので、Yes か No を選択したら、ダイアログが閉じるようにしてみます。そのためには、Ext.Window クラスを使います。先ほど作ったパネルを、ウィンドウの上に配置するのです。
プログラムは、以下のようになります。雛型の、ui.html を以下の内容に書き換えます。これを実行すると、ダイアログが表示され、Yes を選ぶと、ウィンドウが閉じます。
<html><body>
<!-- ExtJS を使う上での基本的なライブラリの取り込み-->
<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>
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css"/>
<!-- スクリプト -->
<script type="text/javascript">
Ext.onReady(function(){
// 簡易メッセージ表示関数を定義
function alert2(str) { Ext.MessageBox.alert("",str); }
// ウィンドウに乗せるパネルを作る
var panel = new Ext.Panel({
frame:true,
html:"Close the window ?",
height:100,
});
// ウィンドウを使う
var win = new Ext.Window({
title:"Action1",
modal: true,
items:[panel],
buttons: [
{
text:"Yes",
handler: function() { alert2("Yes"); win.close(); }
},
{
text:"No",
handler: function() { alert2("No"); }
}]
});
win.show();
});
</script>
</body></html>
ここで注目したいのは、Ext.Window の生成時に渡す config オブジェクトの items プロパティでしょうか。ウィンドウの上に乗せたいパネルなどを、ここに配列形式でセットすると、ウィンドウの上に配置できるのです。
まとめ
今回は、ExtJS のコンポーネント（コントロール）について、簡単に使い方を見てきました。ボタン、パネル、ウィンドウと、基本的なコンポーネントを使ってみました。これら、ExtJS のコンポーネントは、クラスのコンストラクタに、UIの動作や見た目の情報をオブジェクトとして渡すことで、手軽にカッコいいコンポーネントを利用できることが分かりました。他にも、フォームを作る時に便利な、コンポーネントもあります。少しずつ基本的なコンポーネントの使い方が分かってきたと思いますので、次回は、実際に役立つアプリケーションを作って、ExtJSの魅力をさらに探究していこうと思います。
このサイトについて
執筆者紹介
クジラ飛行机
TrackBack URL :
技術記事のRSSフィード
News&TopicsのRSSフィード
製品紹介のRSSフィード
この執筆者のRSSフィード