![タブパネル - 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 }](https://image.slidesharecdn.com/extjs-090806012044-phpapp02/85/Ext-Js-11-320.jpg)
![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 ));](https://image.slidesharecdn.com/extjs-090806012044-phpapp02/85/Ext-Js-14-320.jpg)
Ext Jsで柔軟に開発仕事をこなす
- 1. ExtJS で 柔軟に開発仕事をこなす方法 株式会社sus4 野村亮之
- 2. 開発という観点から見る ExtJS での開発メリット 設計 / 企画段階 モックアップ構築の迅速化と本番に近い形での実装によりユーザーとビジネスフローを確かめながら画面の設計が可能 完成したモックアップからサーバとのやり取りを設計し、 DB との整合性をとる 製造段階 UI 部分を ExtJS に依存することによる View の分離 プログラマは、ロジック (Control, Model) に集中し、テンプレータ（ UI デザイナ）は、 UI に集中 テスト段階 プログラマ?デザイナの仕事が完全に分離しているので、単体テストの実施が容易（責任も分散できる）
- 3. ExtJS における仕事の分担 UI デザイナーの仕事 どのように使いやすい UI デザインを提供するか考えればよい ビジネスプロセスを重視した UI の開発（システムに依存しない）をすればよい JSON/XML 形式のデータをどうやってうまく表示するかを考えればよい プログラマの仕事 いかに高速に、結果を返せるかを考えればよい 柔軟に JSON の形式を変更できるように（情報の追加?削除など）考慮して、開発をすればよい（メンテナンシビリティ） スケールアウトする場合は、 JSON の分散と同時性のみを考慮すればよい 共通項は JSON/XML
- 4. 今回の事例 OTSベース動画分析ツール – Video Analytics
- 5. 今回の事例 OTSベース動画分析ツール – Video Analytics
- 6. Video Analytics の ExtJS 的特徴 Viewport を利用した全面 ExtJS アプリケーション Open Flash Chart でチャートの描画 ExtJS3.0 で統合されている機能 Flash との連携 flashvars, ExternalInterface を利用した Flash / JavaScript との動的連携
- 7. Video Analytics の ExtJS 的特徴 (2) Ext.extend を利用した機能分離 ダッシュボードは、パネルごとに入れ替え可能 (Portal Demo ベース ) 日付選択に、 DatePickerPlus というプラグインを採用 複数日選択?月選択などが可能 メインパネルはタブパネルで構成 コンテンツの表示?切り替え時にパラメータオブジェクトの比較を行い、表示の効率化 Form 操作の効率化とサーバとの連携 クライアントバリデーション?サーバ側バリデーションの方法と、可否の受け渡し Form 周りの細かい Tips
- 8. コーディングする際に忘れがちなこと ログインセッションが切れた場合の処理 ->業務系アプリケーションになると、 1 画面の操作が長くなるため、サーバセッションが切れやすい（デフォルトの場合） サーバ情報とクライアントで表示されている情報の同期タイミング リクエストを減らす努力 高速回線?低速回線での挙動の違い (Event や Callback を必ず使うこと ) おまけ 参照渡しと実体渡し
- 9. タブパネル - HTMLを動的にロードする場合 ツールバーの日付が変更された場合、開いているタブパネルすべてをリクエストしなおすのは非効率 次回開いた瞬間にリクエストをかけるのが理想 Ext.ux.clone() でオブジェクトをコピーし、そのパネルの状態を保持 activate( 前面に表示されたとき ) 時に、 clone されたパラメータと現在のパラメータを比較、同じでない場合のみ再描画する
- 10. タブパネル - 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( ステートマネージャ ) を利用するほうがよい
- 11. タブパネル - 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 }
- 12. Form操作の効率化とサーバとの連携 新規登録と更新をどのように分けるか 新規登録は、サーバから登録情報を取得しない 新規登録と更新で、サブミット先を変える必要がある formPanel は共通化 Ext.apply の利用で新規登録 formPanel の config を書き換える サーバとのやり取りはステータスコードにて管理
- 13. 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 という機能を使って、サーバとのやり取りが実現可能。そのほうが、コード量が削減できるし、楽に運用ができるとのこと
- 14. 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 ));
- 15. 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 …
- 16. 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 を作成して、各フォームはそれを継承するようにすればよい。
- 18. おまけ: プロジェクトでよく利用するプラグイン Ext.ux.DatePickerPlus -> 月選択?週選択などができる Ext.ux.TinyMCE ->TinyMCE をプラグインできるので、高機能な HTML エディタを提供可能 Ext.ux.clone ->JavaScript ではすべて参照で渡されるので、実態をコピーしたいときに重宝