0
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,093

Published on

社内勉強会用資料

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,093
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "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来年初旬発売予定?
  1. A particular slide catching your eye?

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

×