RIA開発のためのJavaScriptライブラリ「ExtJS」
こんにちは、酒巻です。
前回はWeb上で使えるエディタ「Ace Editor」について紹介しました。
今回は、Monaca IDEを開発する上でもう一つの重要なフレームワークである、ExtJSを紹介したいと思います。
ブラウザ上で動作が完結するクラウド型のアプリケーションは、ローカルで動くアプリケーションに比べてユーザビリティを保つためには労力がかかります。
また、RIAを作りたいけれども、FlashではなくJavaScript・HTML5・CSS3で開発したいという要望もあると思います。
Monaca開発チームでは、Monaca IDE開発用フレームワークとしてExtJSというRIA開発用JavaScirptライブラリを使用しています。
ExtJSは、ディレクトリ構造を描画するのに適したTreeView、エクセルライクなGridView、タブによるパネルの切り替えやメニューバーなど、基本的なコンポーネントを備えています。
また、バージョン4からはグラフの描画も可能になりました。
2011/11/22現在の最新バージョンは「4.0.7」です。
今回は、ExtJSの導入と動作確認までを行なっていきたいと思います。
ExtJSの導入
ExtJSのサンプル
まずはExtJSのサンプルアプリケーションの見てみましょう。
http://dev.sencha.com/deploy/ext-4.0.0/examples/
サンプルを見ていると、ExtJSの機能の豊富さがわかると思います。これだけの機能があれば、大抵のアプリケーション開発には困らないでしょう。
ダウンロードと設置
早速、Senchaのサイトにアクセスし、ExtJSをダウンロードします。
http://www.sencha.com/products/extjs/download/
ダウンロードしたファイルを解凍すると、ExtJSのライブラリやサンプルなど、たくさんのファイルが入っています。ExtJSの動作に不要なファイルも多いのですが、今回はこのまま利用します。
ディレクトリの名前を”extjs”と変更します。次にディレクトリを作成し、任意のアプリケーション名をつけ（ここでは仮にAppNameとします）、その中にextjsディレクトリを入れます。
さらに、index.htmlとapp.jsを作成します。
- AppName
- extjs
- build
- …
- index.html
- app.js
ExtJSは、XMLHttpRequestのクロスドメインの制約があるため、サーバ上に設置しないと大抵のブラウザでは動きません。任意のサーバ（今回は、仮にlocalhostに設置したとします）にファイル群を移動させましょう。
- www
- AppName
- extjs
- build
- …
- index.html
- app.js
コーディング
次に、index.htmlとapp.jsを以下のように編集します。
index.html
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css"
href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
app.js
Ext.application({
name : 'HelloExt',
launch : function() {
Ext.create('Ext.container.Viewport', {
style : "padding: 10px",
items : [{
xtype : "panel",
title : 'Hello Ext',
width : 500,
height : 300,
layout : {
type : "vbox", pack : "top", padding : "20px"
},
items : [{
region : "north",
style : "margin: 10px",
height : 30,
width : 100,
xtype : "button",
text : "click here!",
handler : function() {
Ext.MessageBox.prompt(
"title",
"message",
function(btn, text) {
if(btn == "ok") {
Ext.getCmp("textLbl").setText(text);
}
}
);
}
},{
region : "center",
xtype : "label",
text : "Hello! Welcome to Ext JS",
id : "textLbl"
}]
}]
});
}
});
ここまで編集したら、実際に表示させてみましょう。
上の画像のような画面が表示されたでしょうか？
今回はExtJSの導入と動作確認まで行いました。
次回以降、ExtJSの機能について見ていきたいと思います。
