Ext JS4 MVCアプリケーション開発第一回

こんにちは、ゼノフィ安永です。

はじめに

近年のWebアプリケーションやその開発手法は、大きな過渡期にあります。Ajaxなどの技術に始まる、Javascriptの業界における再評価、再認識は、それらに大きな影響を与えています。
またスマートフォンの台頭、HTML5、CSS3の広まりも、従来のWeb開発、Web知識だけでは補えないものになってきています。そんな時代の変化に対応すべく、様々なJavascriptライブラリが生まれました。有名なものでは、prototype.js、YUI、GWT、jQueryそしてExt JSです。

Ext JSは2012年1月現在、バージョン4がリリースされ、またスマートフォン等のコンテンツ用にSencha Touchというフレームワークも登場しています。
Ext JSはRIAに特化した開発に優れていますが、その開発手法は煩雑になりがちです。プロジェクトで何か1つ開発手法を決めておかないと、大規模な開発になるにつれて非常に困難になることが予想できます。
バージョン4からExt JSは、MVCに分けて開発がしやすくなりました。今回はExt JSのMVCアプリケーション開発について、数回に分けて解説していきます。

アプリケーション作成

何を作るか

簡単なアプリケーションを作成していきましょう。
画面全体に、Viewportを表示し、north、west、centerに分け、だんだん装飾していきましょう。

エントリーポイントと脱onReady

今までExt JSでの開発は、Ext.onReadyから始まることが殆どだったと思います。Ext.onReadyも今まで通り使うことは出来ますが、Ext JS4からは、MVC形式でアプリケーションを開発する場合、Ext.Applicationから始めましょう。
Ext.Applicationクラスは、Ext.app.Controllerを継承したクラスであり、シングルトンで定義されているため、ユーザーがインスタンス化することはありません。

Ext.application({
    launch: funciton () {
        // launch my application
    };
});

このクラスで設定すべき事を、もう少し掘り下げたいと思います。

Ext.Applicationクラス

まずここでは次のことを設定します。

アプリケーション名の設定
アプリケーションフォルダの設定
使用するコントローラの定義

アプリケーション名は、今後の開発でクラス名などに使用します。アプリケーションフォルダの設定は、コントローラやモデル、ストアなどを読み込みにいくパスを設定します。未指定の場合、同一ディレクトリが設置ディレクトリになります。
またこのクラス内で、使用するコントローラの定義も行います。これらの設定を記述すると、下記のようになります。

Ext.application({
    // アプリケーション名
    name: 'Xenophy',
    // アプリケーションフォルダパス
    appFolder: 'src/app',
    // コントローラ定義
    controllers: [],
    // アプリケーション起動時イベントハンドラ
    launch: funciton () {
        alert('Launch My App.');
    };
});

これを、src/app.jsとして設置します。このファイルはHTMLがscriptタグで読み込む必要があります。

コントローラの設置

アプリケーションクラスを設置したので、とりあえず何か動かしてみましょう。ファイル名をMain.jsとして、アプリケーションフォルダに設置します。
Ext.Applicationクラスでは、appFolderの値を’src/app’としましたが、コントローラはそのフォルダ下のcontrollerフォルダに入ります。つまり、Main.jsは、src/app/controller/Main.jsに設置します。

Ext.define

コントローラは必ずExt.app.Controllerを継承している必要があります。継承というとExt.extend()を思い浮かべた方もいるかもしれませんが、この方法では、見た目（view）と実装（model/controller）が混在するクラスになってしまいます。Ext JS4からのクラス定義は、Ext.define()にシフトしていきます。

Ext.define('Xenophy.controller.Main', {
    extend: 'Ext.app.Controller',
    init: function() {
        // 自動的に呼び出される
    }
});

こうしたExt JS4のクラスシステムについては、「Ext JS4実践開発ガイド」でも解説されています。

Ext.Loader

ところでこのMain.jsはHTMLで読み込む必要がありますが、今後ファイルを設置する度に、HTMLにも記述を追加しなくてはいけないのはネックに感じることもあるでしょう。そこでExt.Loaderという仕組みを利用し、読み込まれていなければExt.Loaderがファイルを走査するようにしましょう。
そのためには、src/app.jsで設定する必要があります。下記をファイルの先頭に追加してください。

// Ext.Loader有効化
Ext.Loader.setConfig({
    enabled: true
});

これで、app.js以降に設置するファイルをHTMLで読み出す必要がなくなりました。

アプリケーションオブジェクト

さて、こうしてコントローラの設置が完了しました。initで設定した関数が自動で呼ばれるので、alert()などで実行されていることを確認してもよいでしょう。
このタイミングでwindowオブジェクトには、window[‘アプリケーション名’]のオブジェクトが生成されています。アプリケーション名とは、Ext.Applicationで設定したアプリケーション名の事です。
このオブジェクトをアプリケーションオブジェクトと呼びます。ただ、このwindowオブジェクトに生成されたクラスオブジェクトは、コントローラクラスの定義などが格納されるものであり、
実際のExt.app.Applicationオブジェクトとして扱う場合には、this.applicationとして参照できるクラスオブジェクトを利用するようにしてください。

ビューの設置

ここまで、コントローラの設置までを簡単に学んできました。しかしこれだけでは、画面には何も表示されていません。
それではこの画面に相当するviewを作成していきましょう。
ここではViewportコンポーネントを表示していきます。

Viewportを作成する2つの方法

MVCアプリケーション形式では、Viewportの作成方法が2つあります。1つはユーザーが自分で作成する方法で、もう1つはApplicationクラスが作成する方法です。
まずは下記のようなsrc/app/view/Viewport.jsを作成します。

Ext.define('Xenophy.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'fit',
    items: [{
        title: 'Xenophy Application',
    }]
});

コントローラを設置したのと同じように、アプリケーションフォルダ下の、さらにビューはviewフォルダ下に設置されます。これだけでは、画面には何もまだ表示されていません。この作成したXenophy.view.Viewportクラスをインスタンス化して表示させます。
インスタンス化はsrc/app.jsのアプリケーションクラスで行います。launchで設定するファンクションに記述しましょう。

1
2
3

launch: function() {
    Ext.create('Xenophy.view.Viewport');
}

Viewport.jsもExt.Loaderによって読み込まれているため、HTMLで読み込む必要はありません。
では、Viewportを作成する2つめの方法をご紹介します。下記は、先ほどのアプリケーションクラスです。

// アプリケーション設定
Ext.application({
    // Viewport自動生成
    autoCreateViewport: true,
    // アプリケーション名
    name: 'Xenophy',
    // アプリケーションフォルダパス
    appFolder: 'src/app',
    // 使用コントローラー定義
    controllers: ['Main'],
    // アプリケーション起動時イベントハンドラ
    launch: function() {
    }
});

launchの処理は無くなった代わりに、autoCreateViewportというプロパティの設定が増えました。実は2つ目の方法の違いはこれだけです。ユーザーがインスタンス化するか、内部的に自動的にインスタンス化してくれるかの違いです。通常は、この方が簡潔でよいでしょう。注意点としては、ちゃんとview/Viewport.jsというファイル名になっていて、かつ、アプリケーション名が先頭つくクラス名(ここでは、Xenophy.view.Viewportになっている必要があります。この命名規則は、おきまりだと覚えておくとよいでしょう。

今回のソース

今回までのソースサンプルはこちらです。

おわりに

第一回は、Ext JSによるMVCアプリケーション開発の、いわば準備的な内容をお送りしました。
次回は、各リージョンの動きを、もう少し実装していきたいと思います。

Ext JS