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