HOME > Learning Place >  No.2 ビュー

ビュー

さて、今回は MVC の “V” (View) のお話をしましょう。 Sencha のフレームワークは、もともと UI を担当する、コンポーネントのフレームワークとして始まっています。 ですから、この部分は得意とする分野でもあります。

Sencha での View は、コンポーネントの集合体です。 他のフレームワークの場合、ここを担うのはテンプレートエンジンだったりするのですが、Sencha の場合は、明らかに主役はコンポーネントです。

MVCでの使い方

前回に説明したように、Sencha フレームワークのアプリを作成する際には、MVC の規則に従うことを推奨します。 そうすることでコードが組織化され再利用可能になります。 MVCの “V” として、ビューもその構造の中に収まります。 MVC でのビューに関する規則は非常にシンプルです。 No.10 クラスシステムの理解 でご紹介した名付け規則に従って名前をつけましょう。

例えば EX というアプリケーション名を持つアプリケーションの場合、 EX.view.MyView クラスは、app/view/MyView.js というファイルの中に定義されます。 こうするとアプリケーションは自動的にファイルを見つけてロードします。

MVC の標準の構成では、app/view フォルダの下にビューのソースファイルを配置します。 そして、関連するコントローラーの views コンフィグにビューの名前を指定すると、そのビューは自動的にロードされます。

1
2
3
4
5
6
7
8
9
10
11

Ext.define('EX.controller.Main', {
    views: [
        'MyView'
    ],
 
    init: {
        :
        :
    }
 
});

しかし多くの場合、ここでビューを定義するよりも、ビュークラスの中で、そのビューが利用しているクラスを requires 配列にセットする方法がとられます。

また、Ext JS の場合は、Application の autoCreateViewport コンフィグを true に設定する事によって、起動時のビューポートを自動作成できます。 その際には、Viewportという名前のビュークラス、(EX.view.Viewport) が必要です。

app.js
1
2
3
4
5
6
7
8
9
10

    Ext.application({
        name: 'EX',
 
        // ビューポートを自動的に作成する
        autoCreateViewport: true,
 
        launch: function() {
            //
        }
    });
app/view/Viewport.js
1
2
3
4
5

    Ext.define('EX.view.Viewport', {
        extend: 'Ext.container.Viewport',
        layout: 'border',
        html: 'Viewport'
    });

コンポーネントを使う

ビューを構築する簡単な方法は既存のコンポーネントを使うことです。 たとえば、なにかHTMLが書かれた1枚のパネルを生成するには次のようにします。

1
2
3
4
5
6
7

    Ext.create('Ext.Panel', {
        title: 'My App',
        html: 'Welcome to my app',
        width: 200,
        height: 100,
        renderTo: Ext.getBody()
    });

最も良い方法は、目的に特化したサブクラスを作って、それを生成することです。 次のコードは、Ext JS での記述例です。

1
2
3
4
5
6
7
8

    Ext.define('EX.view.Welcome', {
        extend: 'Ext.Panel',
 
        title: 'My App',
        html: 'Welcome to my app',
        width: 200,
        height: 100,
    });

前述のように、このクラスは、/app/view/Welcome.js に配置します。

1
2
3

    Ext.create('EX.view.Welcome', {
        renderTo: Ext.getBody()
    });

クラスを使う際には、このように定義したクラス名で Ext.create すれば使えます。

結果は同じですが、こうすれば新しいコンポーネントをいくつでも生成する事ができます。 既存のコンポーネントのサブクラスを作ってから、それのインスタンスを生成する、 これが標準的なパターンですので、これに従ってアプリを構築しましょう。 ここで何をしているのかを見てみます。

  • Ext.define は既存のクラス (この場合では Ext.Panel ) を継承して新しいクラスを作ることができます
  • EX.view.MyView クラスは新しいクラスを作るときの名付け規則に従っています。 クラス定義をする際には好きなクラス名をつけても良いわけですが、名付け規則に従ってつけるようにしましょう。
  • コンフィグを新しいクラスの内部で定義しています。 コンフィグはサブクラスの定義の中でも指定できますし、 そのサブクラスをインスタンス化するときにも指定できます。

次の例では、コンフィグを追加、変更して Ext.create をコールしています。

1
2
3
4
5
6

    Ext.create('EX.view.Welcome', {
        title: 'Another Title',
        width: 200,
        height: 100,
        renderTo: Ext.getBody()
    });

通常は、width や height などは実際に使われる局面によって替わってくるものですから、クラス定義に含めず、実際に利用するときにコンフィグによって指定することになります。

どのコンフィグオプションをクラス定義で指定して、どれを利用時に定義するのかは、そのカスタムクラスの汎用性を左右しますので、よく考えて指定するようにしましょう。

xtype を使う

前の例では、Ext.create を使って明示的にコンポーネントのインスタンスを生成しています。 実際のアプリケーションでは、このようにコンポーネントのインスタンスを作ることもありますが、コンテナーの items 配列にコンフィグをセットすることで使う場合もあります。

先ほどの Welcome ビューを子アイテムに持つタブパネルを作るとしましょう。 items 配列にセットできるように、EX.view.Welcome クラスに xtype コンフィグを指定します。

1
2
3
4
5
6
7

    Ext.define('EX.view.Welcome', {
        extend: 'Ext.Panel',
 
        xtype : 'welcomepanel',
        title: 'My App',
        html: 'Welcome to my app'
    });

そして、このコンポーネントを items で指定するには

1
2
3
4
5
6
7
8
9
10
11

    Ext.define('EX.view.MainTab', {
        extend: 'Ext.tab.Panel',
 
        requires: [
            'EX.view.Welcome'
        ],
 
        items: [{
            xtype: 'welcomepanel'
        }]
    });

このように items 配列内のオブジェクトの xtype プロパティをセットしてやります。 そして、このビュークラスで利用しているクラス事前にロードするために、requires 配列の中に、クラス名を追加しています。 この EX.view.MainTab クラスは、子アイテムとして EX.view.Welcome を使うので、そのクラスが「必要だよ」とクラスシステムに教えてあげるのです。

このあたりの仕組みについては、 No.6 コンポーネントモデル にも説明がありますので参考にしてください。

アプリケーションを作成してゆくと、沢山のビューが出来上がります。

それらを全て app/view の下に並列に並べると、すぐに数十から数百といったビュークラスが並ぶことになります。 そこでビューのクラスは、パッケージに分けて定義するようにしましょう。 Ext.view. の下にパッケージ名をつけて、その下にクラスを格納します。 Ext.view.foo.Bar といったクラス名にして、それは app/view/foo/Bar.js というファイルに保存します。 このパッケージ名はさらに深い階層にすることも可能です。

作成するアプリケーションでの関連性などで、適切にパッケージを切って分類するようにしましょう。

まとめ

コンポーネントやレイアウトについては、これまでも No.6 コンポーネントモデル や No.7 レイアウトモデル で解説してきました。

今回はそれらを MVC の “V” としてアプリケーションに配置することについて学びました。 内容をまとめてみましょう。

  • ビューは、app/view の下に定義します。クラス名は MyApp.view パッケージの下になります。
  • 複数のコンポーネントが配置されたコンテナーを新しいクラスとして定義します。
  • その際にクラスには xtype (または alias: 'widget.foo') でもクラス特有の xtype をつけておきます。
  • そのビューを他のコンテナーに配置するには、コンテナーの items 配列の要素の xtype にビューの xtype を指定します。
  • ビューのクラスは沢山作成されるので、画面単位などで適切にパッケージに分類する様にしましょう。

今回はビューについてまとめました。 如何でしたでしょうか。 次回は、この続きとしてコンポーネントの具体的利用法について説明します。 お楽しみに。

Learning Placeトップに戻る

PAGETOP