Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ExtJS入門Ext.Direct  2012/11/22
アジェンダ● 案件紹介● ExtJS(Ext.Direct)● 作ってみる  ● one more thing.
こんな案件あるよねある日「簡単なテーブルでCRUDアプリ作って。 これ画面イメージね。」「期間?1週間くらいでチャチャッと作って。」「( ゚д゚)ポカーン」よくある(らしい)おはなし。
画面イメージ(注)案件の実物とは異なります。
こんな案件あるよね簡単なアプリといっても・・・● 詰めてみると意外にやること多い。● 要望とか増えるんじゃない?設計とか拡張性を考えたら得意なフレームワークがあるといいよね。ということで、ExtJSを使ってみた。
ExtJSってなに?JavaScriptベースでのクライアントMVCフレームワーク(開発:Sencha http://www.sencha.com/)● きれいなUI ⇒ bootstrap, jQueryUI, etc● MVC ⇒ Back...
ウリはたくさん● Sencha Touch     - スマフォ向けRIAアプリ対応● Sencha Architect - ビジュアルエディタ● Sencha Cmd       - ビルドコマンド  and more...今回はこのへん触れ...
Ext.DirectJavaScriptから擬似的にサーバクラス・メソッドを叩く感じ(Remote Procedure Call)readystatusが何番だったら復帰して・・・とかのいつものAjaxコードが不要に。やってることがわかりやすく...
たとえばこんな構成(LAMP)で               サーバ  ブラウザ         (Apache)  (ExtJS)                 RDB               + PHP      (MySQL)
サーバ?ServerClass.php<?php class ServerClass {   public function getFormData() {     return array(        success => true,  ...
クライアント?client.js<script type "text/html"> ServerClass.getFormData(function(ret) {    console.log(ret.data.formData); // na...
もちろん使うための準備、お作法があるので・・・次からのサンプルでご紹介。今回のサーバ側サンプルはPHP。他の言語でも結構行けるらしい。PerlとかJavaとか.Netとか。https://market.sencha.com/extensions
MVCは?冒頭のCRUDアプリを目標にサンプルで確認。1.   サーバでDBのアクセス用クラスを準備。2.   アプリのエントリポイントを作る。3.   モデルを準備。4.   ビューを準備。5.   コントローラで整理。
その1DBアクセスクラス準備その前に、Ext Direct Packを配置。http://www.sencha.com/products/extjs/download/php/classess下にサーバクラスを実装します。(このあたりはRoot...
その1DBアクセスクラス準備CRUDを想定して、Members::getAll, add, update, remove を実装。コメントの@remotableがPHP版Direct用メソッドの印。(スタブなら固定配列を返すだけでもOK)   ...
その2アプリのエントリポイントベースとなるHTMLはExtJSとサーバメソッド情報(api.php)、エントリポイント用JS(myapp.js)を読み込む。myapp.js  Ext.onReady(function() {      Ext....
その3モデル準備model/Member.js (テーブルに利用するデータ定義) Ext.define(MyApp.model.Member, {     extend    : Ext.data.Model,     fields  :[  ...
その3データストア準備store/Members.js (ストア=テーブルデータのコントローラ)  Ext.define(MyApp.store.Members, {    extend : Ext.data.Store,    model :...
その4ビュー準備view配下に以下を準備。 Viewport.js   // 画面の下地、3ペインを定義 Header.js MemberList.js // センターに配置 Footer.jsとりあえず3ペインで準備。MemberList.j...
その5コントローラで整理controller/Members.jsを配置、動作(create, update, delete)を記述。・データ読み込み(read)はストアのautoLoadにお任せ・updateをeditorプラグインにお任せ
できあがりAjaxを意識せずにCRUD操作完了。
one more thingチャートとか付けたくないですか?簡単にビューを追加。データ連携できるのが強み。 - 「レゴのようだ」(某氏)ExtJSではチャートUI (Chartクラス)が準備されてるいるので拡張して追加。Ext.chart.Ch...
さらに one more thingExt.Directがわかりにくいサーバメソッドを呼び出す動きが見たい。というわけで、Footer部に簡単なサーバクラス呼び出し用のボタンを追加。(ほんとはビューでコントロールしちゃダメ(^_^;)) vie...
サーバ側の準備サーバにEchoClassを追加。api.php にEchoClassを登録。                         EchoClass.php                         class EchoCla...
o... one more thing (^_^;)Proxyモデル● ExtJS(Sencha)はデータのProxyモデルが整備されている。● テーブルのような配列型データ構造は以下の構成をとる。                       ...
最後に楽しくUI作ってみませんか。まるでレゴのように・・・(^^♪サンプルソースはこちら。https://github.com/MtBlue81/DirectSample
ユーザグループ9月に日本でのユーザグループが発足しました。Japan Sencha User Grouphttp://www.meetup.com/Japan-Sencha-User-Group/
書籍もSencha Ext JS 4実践開発ガイドhttp://amzn.to/Rc0DSp
書籍もSencha Ext JS 4実践開発ガイド 2来年初旬発売予定?
Upcoming SlideShare
Loading in …5
×

Ext.direct

1,408 views

Published on

社内勉強会用資料

  • Be the first to comment

Ext.direct

  1. 1. ExtJS入門Ext.Direct 2012/11/22
  2. 2. アジェンダ● 案件紹介● ExtJS(Ext.Direct)● 作ってみる ● one more thing.
  3. 3. こんな案件あるよねある日「簡単なテーブルでCRUDアプリ作って。 これ画面イメージね。」「期間?1週間くらいでチャチャッと作って。」「( ゚д゚)ポカーン」よくある(らしい)おはなし。
  4. 4. 画面イメージ(注)案件の実物とは異なります。
  5. 5. こんな案件あるよね簡単なアプリといっても・・・● 詰めてみると意外にやること多い。● 要望とか増えるんじゃない?設計とか拡張性を考えたら得意なフレームワークがあるといいよね。ということで、ExtJSを使ってみた。
  6. 6. ExtJSってなに?JavaScriptベースでのクライアントMVCフレームワーク(開発:Sencha http://www.sencha.com/)● きれいなUI ⇒ bootstrap, jQueryUI, etc● MVC ⇒ Backbone.js, AngularJS, etcその両方が備わってる。
  7. 7. ウリはたくさん● Sencha Touch - スマフォ向けRIAアプリ対応● Sencha Architect - ビジュアルエディタ● Sencha Cmd - ビルドコマンド and more...今回はこのへん触れません。m(_ _)mイチ押し ⇒ Ext.DirectとMVCアーキテクチャ
  8. 8. Ext.DirectJavaScriptから擬似的にサーバクラス・メソッドを叩く感じ(Remote Procedure Call)readystatusが何番だったら復帰して・・・とかのいつものAjaxコードが不要に。やってることがわかりやすくなって、可読性があがる。
  9. 9. たとえばこんな構成(LAMP)で サーバ ブラウザ (Apache) (ExtJS) RDB + PHP (MySQL)
  10. 10. サーバ?ServerClass.php<?php class ServerClass { public function getFormData() { return array( success => true, data => array(name => Aoyama) ); } }?>
  11. 11. クライアント?client.js<script type "text/html"> ServerClass.getFormData(function(ret) { console.log(ret.data.formData); // name => Aoyama });</script>
  12. 12. もちろん使うための準備、お作法があるので・・・次からのサンプルでご紹介。今回のサーバ側サンプルはPHP。他の言語でも結構行けるらしい。PerlとかJavaとか.Netとか。https://market.sencha.com/extensions
  13. 13. MVCは?冒頭のCRUDアプリを目標にサンプルで確認。1. サーバでDBのアクセス用クラスを準備。2. アプリのエントリポイントを作る。3. モデルを準備。4. ビューを準備。5. コントローラで整理。
  14. 14. その1DBアクセスクラス準備その前に、Ext Direct Packを配置。http://www.sencha.com/products/extjs/download/php/classess下にサーバクラスを実装します。(このあたりはRooterの実装に依存)
  15. 15. その1DBアクセスクラス準備CRUDを想定して、Members::getAll, add, update, remove を実装。コメントの@remotableがPHP版Direct用メソッドの印。(スタブなら固定配列を返すだけでもOK) class Members { /** * @remotable */ public function getAll() { return {DB取得の結果} } }
  16. 16. その2アプリのエントリポイントベースとなるHTMLはExtJSとサーバメソッド情報(api.php)、エントリポイント用JS(myapp.js)を読み込む。myapp.js Ext.onReady(function() { Ext.tip.QuickTipManager.init(); Ext.direct.Manager.addProvider(Ext.app.REMOTING_API); }); Ext.application({ アプリの各種設定(名前とか) });
  17. 17. その3モデル準備model/Member.js (テーブルに利用するデータ定義) Ext.define(MyApp.model.Member, { extend : Ext.data.Model, fields :[ {name: section , type: string}, {name: name , type: string}, {name: offence , type: int}, {name: defence , type: int}, {name: speed , type: int}, {name: condition , type: string}, {name: birth , type: timestamp}, {name: weapon , type: string} ] });
  18. 18. その3データストア準備store/Members.js (ストア=テーブルデータのコントローラ) Ext.define(MyApp.store.Members, { extend : Ext.data.Store, model : MyApp.model.Member, proxy : { type : direct, api : { create : Members.add, // 1のサーバメソッドを指定 read : Members.getAll, ... }, reader : { type : json ... }
  19. 19. その4ビュー準備view配下に以下を準備。 Viewport.js // 画面の下地、3ペインを定義 Header.js MemberList.js // センターに配置 Footer.jsとりあえず3ペインで準備。MemberList.jsがモデルに紐付くビューに。
  20. 20. その5コントローラで整理controller/Members.jsを配置、動作(create, update, delete)を記述。・データ読み込み(read)はストアのautoLoadにお任せ・updateをeditorプラグインにお任せ
  21. 21. できあがりAjaxを意識せずにCRUD操作完了。
  22. 22. one more thingチャートとか付けたくないですか?簡単にビューを追加。データ連携できるのが強み。 - 「レゴのようだ」(某氏)ExtJSではチャートUI (Chartクラス)が準備されてるいるので拡張して追加。Ext.chart.Chart:ベクターデータ(SVG)を使ったグラフUIRaphaëlがベース(Sencha内に組込み)http://raphaeljs.com/
  23. 23. さらに one more thingExt.Directがわかりにくいサーバメソッドを呼び出す動きが見たい。というわけで、Footer部に簡単なサーバクラス呼び出し用のボタンを追加。(ほんとはビューでコントロールしちゃダメ(^_^;)) view/Footer.js --> view/EchoBox.js }, { xtype : button, text : Server Info, handler : function(btn) { EchoClass.who(function(text) { alert(text); }); } }]
  24. 24. サーバ側の準備サーバにEchoClassを追加。api.php にEchoClassを登録。 EchoClass.php class EchoClass { // api.php 抜粋 /** $api->add( * @remotable array( */ EchoClass, public function who() { Members return "I am server"; ) } ); }
  25. 25. o... one more thing (^_^;)Proxyモデル● ExtJS(Sencha)はデータのProxyモデルが整備されている。● テーブルのような配列型データ構造は以下の構成をとる。 Memory? Proxy File?Table Server?View Store データ バインディング Reader/ Writer⇒ LocalStrage使ってみると、クライアントのみのアプリに切り替わる
  26. 26. 最後に楽しくUI作ってみませんか。まるでレゴのように・・・(^^♪サンプルソースはこちら。https://github.com/MtBlue81/DirectSample
  27. 27. ユーザグループ9月に日本でのユーザグループが発足しました。Japan Sencha User Grouphttp://www.meetup.com/Japan-Sencha-User-Group/
  28. 28. 書籍もSencha Ext JS 4実践開発ガイドhttp://amzn.to/Rc0DSp
  29. 29. 書籍もSencha Ext JS 4実践開発ガイド 2来年初旬発売予定?

×