2008.11.26 NCS 鈴⽊

外部ライブラリの
Ext.Component
Ext Component化
Ext.Component化
    Component化
⽬次
外部ライブラリをComponent化する意義
           p
取りこむ⼿法
◦ 継承
◦ プラグイン
継承のスタイル
◦ Component
◦ ⾮Component
親クラスを選ぶ
◦ Ext.Component
◦ Ext ...
そもそもExt Componentとは…
そもそもExt Componentとは…
そもそもExt.Componentとは
    Ext.Componentとは
 「Ext 2.0 - API ドキュメント & チュートリアル」⽇本語版
 (...
つまりExt Componentとは…
つまりExt Componentとは…
つまりExt.Componentとは
   Ext.Componentとは
 Extにおけるウィジェットの基本単位である
 ◦ ブラウザウィンドウ上である⼀定の幅と...
…
◦ DOMノードと同期したIDによる管理
    Ext.ComponentMgrによる⼀元管理
    Ext.id()によるID⽣成
    Ext.getCmp() Ext.get() による⼀発検索 (Ext.fly()) Comp...
ようするに、外部ライブラリを
Ext.Component化すると…
Ext.Component化
             化すると…
前記の機能のすべてを外部ライブラリに
付加することができる
 ◦ まあ、実際は「その準備ができる」だけで、
...
どのようにして取り込むか?
Extは標準で2つの拡張の様式を提供して
いる
◦ 継承
  サブクラスを派⽣させることができる
◦ プラグイン
  クラス継承ツリーに割りこめる
  クラス継承ツリ に割りこめる


◦ 取りこむライブラリの性質に...
Extにおける継承のスタイル
Extにおける継承のスタイル
Componentかそうでないかでスタイ
ルが若⼲異なる

要
要するに、
そのクラスはブラウザ上に「表⽰さ
れ」ますか?
        はい         いいえ

 Compo...
Componentの継承スタイル
Componentの継承スタイル
/**                                                                               this.t...
Component のサブクラスに
xtype に登録することができる。
◦ Ext.Componentツリーの正式な⼀員に
Ext.extend の引数にすべてを書ける
あらゆるメソッド中で親クラスのメソッドを参照可能
◦ ThisClass...
Component のサブクラスに
プロパティ・コンフィグ・メソッドをフラットに書くことができる
◦ /** は public (JsDoc)
◦ // は private
あらゆる箇所で独⾃のイベントの発⾏が可能に
◦ this.fireEv...
レンダリング時にしなければな
らないこと
インスタンス⽣成時は、まだレンダリング(DOMノードの⽣成と
documentツリーへの登録)は⾏われていない。
d       tツリ     の登録)は⾏われていない
show() や render...
親クラスを選ぶ
Ext.Component以外の選択肢
Ext Component以外の選択肢
◦ Ext.Component
   シンプルなウィジェット
   単独で存在できる
◦ Ext.BoxComponent
            ...
⾮Componentの継承スタイル
 Componentの継承スタイル
/**
* @class MyNameSpace.MyClass                                  // Ext.extend でこのクラス...
⾮Component のクラス定義
constructor を function で定義する。
◦ 引数は通常 config オブジェクトひとつ
◦ Ext apply 等を駆使して config を this
  Ext.apply
  に反...
参考⽂献
Ext 2 Overview (Japanese)
◦ http://extjs.com/learn/Ext_2_Ove
  rview_(Japanese)
    i    (J       )
Manual:Component:...
Upcoming SlideShare
Loading in...5
×

外部ライブラリのExt.Component化

3,435

Published on

第6回 Ext JS / Ext GWT勉強会資料 by NCS鈴木さん

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,435
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
26
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

外部ライブラリのExt.Component化

  1. 1. 2008.11.26 NCS 鈴⽊ 外部ライブラリの Ext.Component Ext Component化 Ext.Component化 Component化
  2. 2. ⽬次 外部ライブラリをComponent化する意義 p 取りこむ⼿法 ◦ 継承 ◦ プラグイン 継承のスタイル ◦ Component ◦ ⾮Component 親クラスを選ぶ ◦ Ext.Component ◦ Ext BoxComponent Ext.BoxComponent ◦ Ext.Container 外部ライブラリの取り込み例 ◦ Mac OS-Style Dock l k ◦ flot さらなる拡張にむけて
  3. 3. そもそもExt Componentとは… そもそもExt Componentとは… そもそもExt.Componentとは Ext.Componentとは 「Ext 2.0 - API ドキュメント & チュートリアル」⽇本語版 (http://docs.ext-japan.org/docs/)によれば… (h //d /d /)によれば ◦ 全てのExtコンポーネントに対する基本クラス。 コンポーネント の全てのサブクラスは、⽣成、レンダリングそして消去からなる 全 サブク は ⽣成 ダリ グ 消去からな 標準 Ext コンポーネントのライフサイクルにおいて⾃動的に関 与することが可能です。 それらはまた、表⽰/⾮表⽰、有効/ 無効という基本的なビヘイビアに対する⾃動的 なサポートをも 有します。コンポーネントはどんなサブクラスでも ポ ブ Ext.Container への遅延表⽰(※lazy-render)を可能とし、ま た、コンポーネントはいつでも Ext.getCmp を通じて参照する ことが可能となるように、⾃動的に Ext.ComponentMgr に登録 t Co po e t g されます。レイアウトの中にレンダリングを要する全ての視覚 ウィジェットは、 サブクラス・コンポーネントでなくてはなり ません(あるいは、ボックスモデル操作が要求されているのなら、 Ext.BoxComponent です)。 ◦ あらゆるコンポーネントは getXType や isXType のような xtype をチェックするメソッドに加えて特定の xtype、すなわち Ext 特有の型名、を有します。
  4. 4. つまりExt Componentとは… つまりExt Componentとは… つまりExt.Componentとは Ext.Componentとは Extにおけるウィジェットの基本単位である ◦ ブラウザウィンドウ上である⼀定の幅と⾼さを占有する DOMノード管理オブジェクト 幅(w)+⾼さ(h)+位置(x,y,z) DOMノード + Ext.Element css スタイル (style or class) ◦ 標準的なGUI SDKと同じウィジェット機能を提供 動的な表⽰・⾮表⽰ 動的な有効・無効 動的な幅・⾼さ・その他外観の⼀貫性のある変更 ◦ DOMノ ドのライフサイクルを整理 DOMノードのライフサイクルを整理 インスタンス⽣成→レンダリング→破棄 ◦ DOMネイティブのイベントを代⾏(Ext.eventMgr) Ext独⾃イベントとのAPIの統⼀ E t独⾃イベントとのAPIの統 独⾃イベントを定義可能に ◦ Ext独⾃の簡便な継承体系をサポート JavaScript ネイティヴのデリケ トな継承様式を整理 J S i t ネイティヴのデリケートな継承様式を整理
  5. 5. … ◦ DOMノードと同期したIDによる管理 Ext.ComponentMgrによる⼀元管理 Ext.id()によるID⽣成 Ext.getCmp() Ext.get() による⼀発検索 (Ext.fly()) Component 単位での他者へのアクセスメソッドを提供 親 : this.ownerCt ⼦ : this.items (Array) 兄弟 : this.ownerCt.items (Array) ◦ JSONツリー → DOMノードツリー変換 煩雑な html + css (=XML)の記述を廃して、簡便でJavaScriptフ レンドリーなJSONによる設定系IFを提供 xtype でだらだら書ける(Ext.ComponentMgr) ◦ Ext の継承体系への編⼊ サブクラスを定義することができる ◦ Ext.state.Managerによる外観の保存 基本は Cookie に保存(他も独⾃実装できる) Component.id で管理するので、バージョンアップ時にめためた になることが… になることが
  6. 6. ようするに、外部ライブラリを Ext.Component化すると… Ext.Component化 化すると… 前記の機能のすべてを外部ライブラリに 付加することができる ◦ まあ、実際は「その準備ができる」だけで、 実装は⾃分でするんだけど 実装 ⾃分 だ ど 標準のExt Component 群と混ぜ合わせ 標準のE t C t ることができるようになる Extの使⽤法を知っている開発者であれ ば、難なく使うことができるようになる JSONでの設定系に乗ってくる APIの使⽤感が統⼀される
  7. 7. どのようにして取り込むか? Extは標準で2つの拡張の様式を提供して いる ◦ 継承 サブクラスを派⽣させることができる ◦ プラグイン クラス継承ツリーに割りこめる クラス継承ツリ に割りこめる ◦ 取りこむライブラリの性質によって使い分け るべし ◦ 今回は継承による取り込みのみをご紹介
  8. 8. Extにおける継承のスタイル Extにおける継承のスタイル Componentかそうでないかでスタイ ルが若⼲異なる 要 要するに、 そのクラスはブラウザ上に「表⽰さ れ」ますか? はい いいえ Component ⾮Component
  9. 9. Componentの継承スタイル Componentの継承スタイル /** this.template = MyNameSpace.MyComponent.componentTemplate; * @class MyNameSpace.MyComponent } * @extends Ext.SuperComponent // Template -> DOM ノードをして、ct もしくは position のあたりに挿⼊ * こんな感じで JsDoc を書くのが Ext ⾵ var cmp, targs = [ʻinnerHtmlʼ, ʻclassʼ]; * @cfg {String} foo This is foo option if (position) { * @cfg {Number} bar This is bar option cmp = this.template.insertBefore(position, targs, true); * @constructor } else { * @param {Object} config The config object cmp = this.template.append(ct, targs, true); */ } MyNameSpace.MyComponent = Ext.extend(Ext.SuperComponent, { /* // その他、style の設定、イベントの代⾏等 * 適当にデフォルトの設定を列挙する }, * @type String */ /** hoge: “hogehoge”, * パブリックメソッドは JsDoc で * @param {String} // private */ initComponent: function() { public_method: function(hoge) { // 前で、config の状態を⾒ながら補完 this.hoge = hoge; MyNameSpace.MyComponent.superclass.initComponent.call(this); this.private_method(); // イベントハンドラ等は、インスタンスができてからくっつける }, }, // private プライベ トメソッドは // で プライベートメソッドは // private private_method: function(scope) { // DOM のレンダリングを⾏う // 親クラスのメソッドを呼び出せる onRender: function(ct, position) { MyNameSpace.MyComponent.superclass.private_method.call(scope || // テンプレートの準備 this); if (!this.template) { } if (!MyNameSpace.MyComponent.componentTemplate) { }); MyNameSpace.MyComponent.componentTemplate = new // xtype に登録する Ext.Template(ʻ<tag class={1}>{0}</tag>ʼ); Ext.reg(“mycomp”, MyNameSpace.MyComponent); }
  10. 10. Component のサブクラスに xtype に登録することができる。 ◦ Ext.Componentツリーの正式な⼀員に Ext.extend の引数にすべてを書ける あらゆるメソッド中で親クラスのメソッドを参照可能 ◦ ThisClass.superclass.xxx.call(scope || this); ◦ scope の対応は忘れずに! 親クラスとデフォルト値を変えることができる ◦ extend 中 JSON にまぜこむと上書きされる 中の ぜ 上書き れ initComponent() の中で⼀括していろいろ初期化可能 ◦ 親クラスメソッド呼び出し前 設定やインスタンスの補完 ◦ 親クラスメソッド呼び出し後 このクラスの発⾏するイベントの定義 デフォルトのイベントハンドラを追加 レイアウト⼦のインスタンスの状態に応じた処理を追加可能 ◦ この段階ではまだDOMノードは⽣成されていない点に注意 this.onRender() を定義 → 正式 this.on(ʻrenderʼ, function() {xxx;}, this); でフック(簡易)
  11. 11. Component のサブクラスに プロパティ・コンフィグ・メソッドをフラットに書くことができる ◦ /** は public (JsDoc) ◦ // は private あらゆる箇所で独⾃のイベントの発⾏が可能に ◦ this.fireEvent(ʻevent_nameʼ, arguments…); ◦ 名前は initComponent 時に事前に与えてあげましょう。→ イベントの整理 に役⽴ちます。 this.onRender でDOMノードを⽣成して、親コンテナに登録する でDOMノ ドを⽣成して、親コンテナに登録する ◦ DOMノードはExt.Templateで⽣成 html + css class を⽣成 style 指定はきかないっす キャッシュしてまじめに使いまわすこと ◦ 引数はレイアウト先(DOM挿⼊先)を指している renderTo applyTo 等、⾶び地を許可しているので。 ct が登録先親DOMノード → append() position が挿⼊位置 (null なら ct へ)→ insertBefore() ◦ その他、レンダリング後にはじめて設定可能になるようなものを初期化
  12. 12. レンダリング時にしなければな らないこと インスタンス⽣成時は、まだレンダリング(DOMノードの⽣成と documentツリーへの登録)は⾏われていない。 d tツリ の登録)は⾏われていない show() や render() メソッドが呼び出されると、そのComponent に所属している⼦Component が順次レンダリングされてゆく this.onRender() が共通のレンダリングエントリポイント ◦ 親クラスが E t C Ext.Component なら superClass.onRender.call(this) は必要な t Cl R d ll(thi ) い。(Ext.Component.onRender() は Ext.emptyFn) ◦ render イベントを出す必要もなし(上位でやってくれる) ◦ Ext.Template からDOMノードを⽣成 Ext.BoxComponent 以上の場合は、⾃⾝の幅と⾼さ、位置の設定をきちんと反映する こと ◦ ct もしくは position の前後にDOMノードを挿⼊ ◦ Ext.Component ID と Ext.Element ID と DOM ID の三者を同期 p this.el.dom.id = this.el.id = this.id; ◦ その他、こまごまとした設定 JSON → css Style DOMネイティヴなイベントの代⾏設定
  13. 13. 親クラスを選ぶ Ext.Component以外の選択肢 Ext Component以外の選択肢 ◦ Ext.Component シンプルなウィジェット 単独で存在できる ◦ Ext.BoxComponent p 幅⾼さを width, height オプションで指定できる Component 他Componentのレイアウト解決に関与する 他C tのレイアウト解決に関与する ◦ Ext.Container レイアウト上の⼦(そのComponent中に別の Componentが⼊っているようなComponent) Ext.layout に関連づけられる
  14. 14. ⾮Componentの継承スタイル Componentの継承スタイル /** * @class MyNameSpace.MyClass // Ext.extend でこのクラスを定義する * @extends Ext.util.Observable // new MyNameSpace.MyClass(); でインスタンスを⽣成できるようになる。 * こんな感じで JsDoc を書くのが Ext ⾵ // この MyNameSpace.MyClass のサブクラスを定義できるようになる。 * @cfg {String} foo This is foo option // Ext.extend の引数は (このクラス、親クラス、メソッド群) * @cfg {Number} bar This is bar option // メソッドは上のコンストラクタ側で定義してしまうと、 * @constructor // サブクラスに継承されなくなってしまうので こちら側で定義する サブクラスに継承されなくなってしまうので、こちら側で定義する。 * @param {Object} config The config object Ext.extend(MyNameSpace.MyClass, Ext.util.Observable, { */ /** MyNameSpace.MyClass = function(config) { * パブリックメソッド // Component でないクラスは、constructor をきちんとつくる * @param {String} foo a new foo to set config = config || {}; // 引数なし時に対応 * @param {Number} bar a new bar to set // config をもとに this を適当に初期化。 * @return {Array} new foo and bar to set this.foo = “foo”; */ this.bar = 0; myPublicMethod: function(foo, bar) { Ext.apply(this, config); if (typeof foo != “undefined”) { // 親クラスの constructor を呼んであげる this.foo = foor; MyNameSpace.MyClass.superclass.constructor.call(this); } }; if (typeof bar != “undefined”) { this.bar = bar; } this.myPrivateMethod(); return [this foo this bar]; [this.foo, this.bar]; }, // private myPrivateMethod: function() { // do something g } });
  15. 15. ⾮Component のクラス定義 constructor を function で定義する。 ◦ 引数は通常 config オブジェクトひとつ ◦ Ext apply 等を駆使して config を this Ext.apply に反映しつつ、適切に初期化 Ext.extend Ext extend の引数は 3つ ◦ 1: 定義するクラス ◦ 2: 親ク 親クラス ◦ 3: メソッド群オブジェクト constructor 側でメソッドを追加すると、サブ クラスを定義した際にメソッドが継承されない ので注意。 ので注意
  16. 16. 参考⽂献 Ext 2 Overview (Japanese) ◦ http://extjs.com/learn/Ext_2_Ove rview_(Japanese) i (J ) Manual:Component:Extension or Plugin ◦ http://extjs.com/learn/Manual:Co mponent:Extension_or_Plugin
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×