Ext Jsで柔軟に開発仕事をこなす

ExtJS で柔軟に開発仕事をこなす方法株式会社sus4　野村亮之

開発という観点から見る ExtJS での開発メリット

設計 / 企画段階

モックアップ構築の迅速化と本番に近い形での実装によりユーザーとビジネスフローを確かめながら画面の設計が可能

完成したモックアップからサーバとのやり取りを設計し、 DB との整合性をとる

製造段階

UI 部分を ExtJS に依存することによる View の分離

プログラマは、ロジック (Control, Model) に集中し、テンプレータ（ UI デザイナ）は、 UI に集中

テスト段階

プログラマ・デザイナの仕事が完全に分離しているので、単体テストの実施が容易（責任も分散できる）

ExtJS における仕事の分担 UI デザイナーの仕事どのように使いやすい UI デザインを提供するか考えればよいビジネスプロセスを重視した UI の開発（システムに依存しない）をすればよい JSON/XML 形式のデータをどうやってうまく表示するかを考えればよいプログラマの仕事いかに高速に、結果を返せるかを考えればよい柔軟に JSON の形式を変更できるように（情報の追加・削除など）考慮して、開発をすればよい（メンテナンシビリティ）スケールアウトする場合は、 JSON の分散と同時性のみを考慮すればよい共通項は JSON/XML

今回の事例 OTSベース動画分析ツール – Video Analytics

Video Analytics の ExtJS 的特徴

Viewport を利用した全面 ExtJS アプリケーション

Open Flash Chart でチャートの描画

ExtJS3.0 で統合されている機能

Flash との連携

flashvars, ExternalInterface を利用した Flash / JavaScript との動的連携

Video Analytics の ExtJS 的特徴 (2)

Ext.extend を利用した機能分離

ダッシュボードは、パネルごとに入れ替え可能 (Portal Demo ベース )

日付選択に、 DatePickerPlus というプラグインを採用

複数日選択・月選択などが可能

メインパネルはタブパネルで構成

コンテンツの表示・切り替え時にパラメータオブジェクトの比較を行い、表示の効率化

Form 操作の効率化とサーバとの連携

クライアントバリデーション・サーバ側バリデーションの方法と、可否の受け渡し

Form 周りの細かい Tips

コーディングする際に忘れがちなこと

ログインセッションが切れた場合の処理 ->業務系アプリケーションになると、 1 画面の操作が長くなるため、サーバセッションが切れやすい（デフォルトの場合）

サーバ情報とクライアントで表示されている情報の同期タイミング

リクエストを減らす努力

高速回線・低速回線での挙動の違い (Event や Callback を必ず使うこと )

おまけ参照渡しと実体渡し

タブパネル - HTMLを動的にロードする場合

ツールバーの日付が変更された場合、開いているタブパネルすべてをリクエストしなおすのは非効率

次回開いた瞬間にリクエストをかけるのが理想

Ext.ux.clone() でオブジェクトをコピーし、そのパネルの状態を保持

activate( 前面に表示されたとき ) 時に、 clone されたパラメータと現在のパラメータを比較、同じでない場合のみ再描画する

タブパネル - HTMLを動的にロードする場合(実装例) メソッドの引数として params が渡されている 542 if(!force && compareParams(params, ppn.params) ) return; 543 544 ppn.load({ 545 url: ppn.baseurl, 546 method: 'POST', 547 params: Ext.ux.clone(params), 548 scripts: true, 549 callback: function(el) 550 { … 562 } 563 }); 指摘事項：状態を比較するのであれば、 Ext.state.manager( ステートマネージャ ) を利用するほうがよい

タブパネル - HTMLを動的にロードする場合(実装例) 54 function compareParams (p1, p2) 55 { 56 if(!p1 || 'object' !== typeof p1) { 57 return false; 58 } 59 if(!p2 || 'object' !== typeof p2) { 60 return false; 61 } 62 63 for(k in p1) { 64 //p2 が空の場合 65 if(!p2. hasOwnProperty (k)) return false; 66 67 //p2 と p1 の値が違う 68 if(p2[k]!==p1[k]) return false; 69 } 70 return true; 71 }

Form操作の効率化とサーバとの連携

新規登録と更新をどのように分けるか

新規登録は、サーバから登録情報を取得しない

新規登録と更新で、サブミット先を変える必要がある

formPanel は共通化

Ext.apply の利用で新規登録 formPanel の config を書き換える

サーバとのやり取りはステータスコードにて管理

Form操作の効率化とサーバとの連携(実装例) 185 editVideo: function(record) 186 { 187 var id = record.data.id; 188 if(!id) return; 189 190 var us = this.updateSwf; 191 var sn = this.swfname; 192 var form = this.addVideo( { 193 url: String.format('{0}/index.php/adminapi/video/{1}/update', baseUrl, id), 194 update: true 195 } ); 196 form.load ({ 197 url:String.format('{0}/index.php/adminapi/video/{1}/info', baseUrl, id), 198 success: function(f) 199 { 200 us(sn, form); 201 }, 202 }); 203 }, 指摘事項： ExtJS 3.0 からは Direct という機能を使って、サーバとのやり取りが実現可能。そのほうが、コード量が削減できるし、楽に運用ができるとのこと

Form操作の効率化とサーバとの連携(実装例) 256 var form = new Ext.FormPanel( Ext.apply ({ 257 url: String.format('{0}/index.php/adminapi/video/default/add', baseUrl), 258 method: 'POST', 259 reader: reader, 260 bodyStyle: 'padding: 1em', 261 border: false, 262 region: 'center', 263 layout: 'form', 264 items:[ … 427 xtype: 'textfield', 428 name: 'page_url', 429 fieldLabel: ' 掲載ページ URL<br />( オプション )', 430 width: 240, 431 vtype: 'url' 432 } 433 ] 434 } 435 ] 436 }, extra ));

Form操作の効率化とサーバとの連携(実装例) ステータスコードの返却 486 success: function(form, res) 487 { 488 var res = Ext.decode(res.response.responseText);489 if(res.success){ 490 store.reload(); 491 win.close(); 492 return; 493 } 494 495 return; 496 }, 497 failure: function(form, res) 498 { 499 var res = Ext.decode(res.response.responseText); 500 switch(res.errno){ 501 502 case 501: 503 var msg = " 入力された情報が間違っています。 <br /> もう一度よく確認をしてご登録ください。 "; 504 break; 505 …

Form周りの細かいTips Fieldの下に注意文を表示する 142 Ext.override(Ext.form.Field, { 143 144 afterRender: function() 145 { 146 var text = this.cautionText; 147 if(text){ 148 //Type is below, upper 149 var type = this.cautionType ? this.cautionType : 'below'; 150 var pElem = this.getEl().parent(); 151 //elem.dom.innerHTML += <div>text + '</div>'; 152 153 var elem = { 154 tag: 'div', 155 html: text, 156 cls: 'x-form-caution-text' 157 }; 158 159 Ext.DomHelper.append(pElem, elem); 160 } 161 Ext.form.Field.superclass.afterRender.call(this); 162 this.initEvents(); 163 this.initValue(); 164 } 165 166 }); 指摘事項：既存クラスのオーバーライドは、 ExtJS 本体のバージョンがあがったときに動作しない可能性が残る。できるだけ、 event として処理したほうがよい改善策としては、 override ではなく、独自の FormClass を作成して、各フォームはそれを継承するようにすればよい。

Form周りの細かいTips Fieldの下に注意文を表示する

おまけ: プロジェクトでよく利用するプラグイン