アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

RIA開発のためのJavaScriptライブラリ「ExtJS」

こんにちは、酒巻です。

前回はWeb上で使えるエディタ「Ace Editor」について紹介しました。
今回は、Monaca IDEを開発する上でもう一つの重要なフレームワークである、ExtJSを紹介したいと思います。



ブラウザ上で動作が完結するクラウド型のアプリケーションは、ローカルで動くアプリケーションに比べてユーザビリティを保つためには労力がかかります。

また、RIAを作りたいけれども、FlashではなくJavaScriptHTML5・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"
                }]
            }]
        });
    }
});


ここまで編集したら、実際に表示させてみましょう。

http://localhost/AppName/



上の画像のような画面が表示されたでしょうか?

今回はExtJSの導入と動作確認まで行いました。
次回以降、ExtJSの機能について見ていきたいと思います。