Recomendados
Mais conteúdo relacionado
Mais procurados
Semelhante a Ext.direct
Semelhante a Ext.direct (20)
Ext.direct
- 2. アジェンダ ● 案件紹介 ● ExtJS（Ext.Direct） ● 作ってみる ● one more thing.
- 3. こんな案件あるよね ある日 「簡単なテーブルでCRUDアプリ作って。 これ画面イメージね。」 「期間？1週間くらいでチャチャッと作って。」 「( ﾟдﾟ)ﾎﾟｶｰﾝ」 よくある(らしい)おはなし。
- 6. ExtJS ってなに？ JavaScriptベースでの クライアントMVCフレームワーク （開発：Sencha http://www.sencha.com/） ● きれいなUI ⇒ bootstrap, jQueryUI, etc ● MVC ⇒ Backbone.js, AngularJS, etc その両方が備わってる。
- 7. ウリはたくさん ● Sencha Touch - スマフォ向けRIAアプリ対応 ● Sencha Architect - ビジュアルエディタ ● Sencha Cmd - ビルドコマンド and more... 今回はこのへん触れません。m(_ _)m イチ押し ⇒ Ext.DirectとMVCアーキテクチャ
- 9. たとえば こんな構成(LAMP)で サーバ ブラウザ (Apache) (ExtJS) RDB + PHP (MySQL)
- 10. サーバ？ ServerClass.php <?php class ServerClass { public function getFormData() { return array( 'success' => true, 'data' => array('name' => 'Aoyama') ); } } ?>
- 11. クライアント？ client.js <script type "text/html"> ServerClass.getFormData(function(ret) { console.log(ret.data.formData); // name => Aoyama }); </script>
- 13. MVCは？ 冒頭のCRUDアプリを目標にサンプルで確認。 1. サーバでDBのアクセス用クラスを準備。 2. アプリのエントリポイントを作る。 3. モデルを準備。 4. ビューを準備。 5. コントローラで整理。
- 15. その１ DBアクセスクラス準備 CRUDを想定して、 Members::getAll, add, update, remove を実装。 コメントの@remotableがPHP版Direct用メソッドの印。 （スタブなら固定配列を返すだけでもOK） class Members { /** * @remotable */ public function getAll() { return {DB取得の結果} } }
- 16. その２ アプリのエントリポイント ベースとなる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. その３ モデル準備 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. その３ データストア準備 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. その４ ビュー準備 view配下に以下を準備。 Viewport.js // 画面の下地、3ペインを定義 Header.js MemberList.js // センターに配置 Footer.js とりあえず3ペインで準備。 MemberList.jsがモデルに紐付くビューに。
- 22. one more thing チャートとか付けたくないですか？ 簡単にビューを追加。データ連携できるのが強み。 - 「レゴのようだ」（某氏） ExtJSではチャートUI (Chartクラス)が準備されてるいるので拡張 して追加。 Ext.chart.Chart：ベクターデータ(SVG)を使ったグラフUI Raphaëlがベース（Sencha内に組込み） http://raphaeljs.com/
- 23. さらに one more thing Ext.Directがわかりにくい サーバメソッドを呼び出す動きが見たい。 というわけで、Footer部に簡単なサーバクラス呼び出し用のボタ ンを追加。（ほんとはビューでコントロールしちゃダメ(^_^;)） view/Footer.js --> view/EchoBox.js }, { xtype : 'button', text : 'Server Info', handler : function(btn) { EchoClass.who(function(text) { alert(text); }); } }]
- 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. o... one more thing (^_^;) Proxyモデル ● ExtJS(Sencha)はデータのProxyモデルが整備されている。 ● テーブルのような配列型データ構造は以下の構成をとる。 Memory? Proxy File? Table Server? View Store データ バインディング Reader/ Writer ⇒ LocalStrage使ってみると、クライアントのみのアプリに切り替わる
- 27. ユーザグループ 9月に日本でのユーザグループが発足しました。 Japan Sencha User Group http://www.meetup.com/Japan-Sencha-User-Group/
- 28. 書籍も Sencha Ext JS 4実践開発ガイド http://amzn.to/Rc0DSp
- 29. 書籍も Sencha Ext JS 4実践開発ガイド 2 来年初旬発売予定？