Ext JSアプリケーション開発の基本アプリケーション設計：初級編

自己紹介

小堤　一弘（こつつみ　かずひろ）

株式会社ゼノフィhttp://www.xenophy.com/

code:x

http://code.xenophy.com/

xFrameworkPX

http://px.xFramework.net/

xFrameworkEX

http://ex.xFramework.net/

アプリケーション設計

• Ext JSの使い方は、サンプルとかで学べるけど、アプリケーションの作り方はどこにあるの？

アプリケーション設計

どこにもありません。

自分で考えるしかないアプリケーション設計

• サンプルのまねをしてアプリケーションを作っていったけど、実際につくりこんでいくとぐちゃぐちゃになる。

• ベストプラクティスがあれば助かるのになぁ。

アプリケーションの形態を考える

• Ext.Viewportを使ったフルスクリーンアプリケーションを作る

• 既存のHTMLにコンポーネントを埋め込んで作る

アプリケーションクラスを考える

• どのような形のアプリケーションでも１つのアプリケーションクラスを作って、そいつがすべてを管理する仕組みはどうだろうか？

アプリケーションクラスで求められるもの

• アプリケーション内で起こるイベントを管理しなくてはならない。

• アプリケーションのブートストラップ（起動ポイント）にならなくてはならい。

• とか・・が考えられる。

アプリケーションクラスの親クラス

• Ext.Viewportを使った場合は、Ext.Viewportクラスを親にしたほうがいい？

• いろんな形を考えて・・・Ext.util.Observableクラスがよさそう。

• やってみる・・。

アプリケーションクラスの定義

Ext.ns( 'Ext.app' );

Ext.app.App = Ext.extend( Ext.util.Observable, {

constructor : function() {

// todo

}

アプリケーションクラスの実行

Ext.onReady(function(){

new Ext.app.App();

});

アプリケーションの初期化

• アプリケーションの初期化は、Ext.app.Appクラスのコンストラクタで行う。

Ext.Viewportを作ってみる

Ext.app.App = Ext.extend( Ext.util.Observable, {

constructor : function() {

this.vp = new Ext.Viewport({

layout: 'fit',

items: [{

自作コンポーネントを作る？

• さっきの例だとサンプルの書き方をonReadyからアプリケーションのコンストラクタに移動しただけじゃん。

• やっぱり、itemsのコンフィグオプションを指定してパネルを作っている部分をコンポーネント化して作っていきた

自作コンポーネントを作る！

• 必要なので、作ろう。

• だけど、どうやって作るの？

Ext.Panelを継承したクラスを作る

Ext.MyPanel = Ext.extend( Ext.Panel, {

initComponent : function() {

Ext.apply( this, {

title: 'MyPanel版：テストアプリケーション',

html: 'MyPanel版：テストアプリケーションパネルの内容'

});

Ext.MyPanel.superclass.initComponent.call( this );

}

});

Ext.reg( 'mypanel', Ext.MyPanel );

Ext.Panelを継承したクラスを作るExt.ns( 'Ext.app' );

Ext.app.App = Ext.extend( Ext.util.Observable, {

constructor : function() {

this.vp = new Ext.Viewport({

layout: 'fit',

items: [{

xtype: 'mypanel'

}]

});

}

});

まだまだ続く複雑なアプリケーション

• パネル1個じゃアプリじゃない。

• サンプルみたく複雑なレイアウトをしてみる。

• 複数のコンポーネント間でイベントを使って処理を行う。

次回予告

• もうちょっと、アプリケーションらしい形を作って、イベント制御を行ってみよう！

ご静聴、ありがとうございましたｍ（＿ ＿）ｍ