ExtJS PerfectDay #006 講義メモ

ExtJS PerfectDay #006 – 20100/05/21 の受講ノートです。 この件について@kotsutsumi さんに質問しないでください。

アジェンダ

  • Jasmin入門
  • PhantomJSとJasmin連携
  • Ext.Loaderによる本格スタブ開発
  • クラスシステム ｰ uses・requires
  • MVCアプリケーションｰアプリケーションデザイン（クラス設計）
  • Windowベースアプリケーション ｰ アプリケーションデザイン（クラス設計）
  • タスクバー作成
  • ウィンドウモジュール機構作成
  • （調整枠）
  • Ext JS 4によるプラグイン開発
  • SASS入門

Jasmin入門

JSで作られているテストフレームワーク。 次のファイルを読み込め。

[html] lib/jasmine-1.0.2/jasmine.css lib/jasmine-1.0.2/jasmine.js lib/jasmine-1.0.2/jasmine.html.js [/html]

Spec定義（テストケース） ExtJSコンポーネントのテストをしてみる。

Spec定義

[js] describe("Ext.Button", function () { var proto = Ext.Button } [/js]

前準備，後始末

describe

に指定した関数内に前準備後始末 beforeEach テストケースが実行される直前に呼び出される関数オブジェクトを指定 afterEach

it

テストケースを書くときにはitを使う。

[js] it("Ext.Button.prototype.isButton is true.".funcion() { expect(proto.isButton).toBeTruthy(); }); [/js]

expect

最終的に値を評価する。

[js] describe("Ext.button", function () { beforeEach( function () { }); afterEach(functon() { [/js]

PhantomJSとJasmin連携

コマンドラインでのテストを実現する。 APIはほとんどない。画面のないブラウザ。 PhantomJSはQtで作られています。

QtはクロスプラットフォームのUI開発フレームワーク 内部的にWebKitをサポートした。ブラウザコンポーネントを貼り付けられる。 WebViewの昨日を利用してJSを動作させる。

WebViewをC++から行うことができる。 JavaScriptからイベントを起こしてC++を呼べるし，逆も可能。

閑話休題

コマンドラインでJasmineのテストケースを実行し，実行結果のDOMを解析する。 Jasmineドライバーは動かない。

phantomjs test.js SpecRunner.html

test.js はgistにある。 コマンドラインにテスト結果を出力する。 書き換えれば好きな出力形式にできる。

クリックイベントを起こすことができる。

Extもテストフレームワーク。を作っているというアナウンスがあるが，まだ出てきていない。 イオンプロジェクトも同様。＞ExtDesignerを作っているもの。 titaniumとかairは中身のjsファイルは丸見えですよ。 flashを使って暗号化することができるので，そこにjavascriptをいれると勘合化できるがflushプレイヤー必要。

Ext.Loaderによる本格スタブ開発

Ext.LoaderによるCTOP開発

JavaScript を動的にロードできる。Scriptタグを動的に作る。 でも実際は中々むずかしい。Ext.Loaderがそれをやっていた。が使うなといっていた。 サーバーに負荷もかかるしパフォーマンスは悪い。 使うのなら最初から固めて読み込むほうが速い。

では，なぜLoaderなの？

Ext4のコアクラスとLoaderは切り離せない。

  • ext.js を読み込み，Exx Core システムのみ読み込む。
  • クラスの依存関係は，requiresとusesを利用して解決させる。
  • コンポーネント単位で開発を行う。
  • 常に，コンポーネント別と結合テストを行えるようにする。
  • Component Test Oriented Programing –> CTOP
[js] Ext.Loader.setConfig({ enabled: true, paths: { ‘Ext’: ‘../ext/src’, ‘PD’ : ‘../windows’ } }; Ext.onReady(function () { }); [/js]

上記のコードを入れることが重要。実はいらないかもしれない。

[js] Ext.define(‘PD.view.window.Window’, { extend: ‘Ext.window.Window’, initComponent: function () { var me = this; Ext. } } [/js]

Ext.reg は廃止されている。

クラスシステム ｰ uses・requires

Loader での依存関係を記述するもの。 自分のクラスでも，これが書かれていないと Loader が働かない。 これを使うのは必須。 結合時は無関係になるが

  • requires はクラスが生成される前に必ず使われる。
  • uses は，クラスファイルの読み込み時にすべて読み込まれる訳ではなく，インスタンス時に読み込まれる。
  • 絶対使うばあいはrequire
  • configオプションで使うか使わないか選べる場合はuses

MVCアプリケーションｰアプリケーションデザイン（クラス設計）

app.jp

[js] Ext.Loader.setConfig({ enabled: true, paths: { ‘Ext’: ‘../../ext/src’, ‘Ext.ux’: ‘./src/ux/’ } }); Ext.application({ name: ‘PD’, appFolder: Ext.Loader.getPath(‘PD’) + ‘/app’, controllers: [‘Index’] }); [/js]

app/controller/controler.js

複数のコントローラーができあがると思うので， その基本となるアプリケーションの基底コントローラークラスを用意した方がいい。 次のコントローラークラスでは，アプリケーションとビューポートを アプリケーションのネームスペースのプロパティに保存している。

[js] Ext.define(‘PD.controller.Controller’, { extend: ‘Ext.controller.Controller’, init: function() { }, onLaunch: function(app) { PD.Application = app; PD.Viewport = Ext.getCmp(‘PD.Viewport’); } }); [/js]

実際のコントローラーは，このクラスを継承する。

app/controller/index.js

[js] Ext.define(‘PD.controller.Index’, { extend: ‘PD.controller.Controller’, init: function() { var me = this; // スーパークラスメソッドコール me.callParent(arguments); }, onLaunch: function(app) { var me = this; // スーパークラスメソッドコール me.callParent(arguments); } }); [/js]

app/view/viewport.js

ビューポート

[js] Ext.define(‘PD.view.Viewport’, { requires: [], uses: [], extend: ‘Ext.container.Viewport’, alias: ‘widget.PD.viewport’, initComponent: function() { var me = this // 設定適用 Ext.apply(me, { id: ‘PD.Viewport’, layout: ‘border’, items: [{ region: ‘west’, width: 250, xtype: ‘PD.west’ },{ region: ‘center’, xtype: ‘PD.center’ }] }); // スーパークラスメソッドコール me.callParent(arguments); }, initEvents: function() { var me = this; // スーパークラスメソッドコール me.callParent(arguments); } }); [/js]

オススメなalias の名前の付け方，widget の次にアプリケーションの名前空間をつける。

[js] alias: ‘widget.PD.viewport’; [/js]

おすすめなidのつけかた。プリフィックスにアプリケーションの名前空間をつける。

[js] id: ‘PD.viewport’, [/js]

Windowベースアプリケーション ｰ アプリケーションデザイン（クラス設計）

[js] Ext.ux.container.Desktop [/js]

この書き方おぼえとけ。アイテムを設定するメソッドを別に用意する。

[js] items: me.genarateItems() [/js]

このメソッドおぼえとけ。initEvent はExt.Panelを継承したコントロールで使用できるよ。 継承して，

[js] initEvetns [/js]

次のコンフィグおぼえとけ

[js] Window.constrain constrainHeader [/js]

画面からはみ出さないようにする。ただExt4では，バグってますよ。

Ext JS 4によるプラグイン開発

コンポーネントにオプションをつけるようなものを作るときにプラグインがある。 Ext4では次のように書け

[js] Ext.define(‘PD.plugins.test’), { alias: ‘plugin.test’. init: funciton () { }, [/js]

Ext3ではつぎのように

[js] var tes = function() { var me = this; meinit=function(cmp){ }; } [/js]

SASS入門

パス。

5 thoughts on “ExtJS PerfectDay #006 講義メモ”

  1. oicawa

    twitter携帯からこのページの紹介を確認し、我慢できずに仕事前に読ませて頂きました。 ありがとうございます、「Ext.Loaderによる本格スタブ開発」「クラスシステム ｰ uses・requires」「MVCアプリケーションｰアプリケーションデザイン（クラス設計）」のセクション、かなり参考になりそうです。 今晩、時間があったら早速いろいろ試してみます。

  2. oicawa

    一つ質問させてください。 「MVCアプリケーションｰアプリケーションデザイン（クラス設計）」セクションの「app/controller/controler.js」で、基底コントローラクラスを作ると記載されていますが、configオプションでextendが指定されていません。 これ、Ext.app.Controllerを継承させるんですよね？

    1. sunvisor 投稿作成者

      そうです。extend指定が抜けてます。(^^;

      なぐりメモをあとで整形した際に追加し忘れました。僕の責任です。m(_ _)m ソース直しておきました。

      あと、この記事の時点と現在で一部ExtJSの仕様に変更があることがありますので、 お気をつけください。

      1. oicawa

        回答ありがとうございました。 ちなみに、昨夜３ヶ月間ほど解決しなかった問題が、こちらの記事の情報から派生した調査で解決しました！ 感謝です！

  3. Johne197

    Your style is really unique compared to other folks I’ve read stuff from. cbgadgdgdadg

コメントは停止中です。