ExtJS入門

Ext.Direct2012/11/22

アジェンダ

● 案件紹介● ExtJS（Ext.Direct）● 作ってみる

● one more thing.

こんな案件あるよね

ある日

「簡単なテーブルでCRUDアプリ作って。　これ画面イメージね。」「期間？1週間くらいでチャチャッと作って。」

「( ﾟдﾟ)ﾎﾟｶｰﾝ」

よくある(らしい)おはなし。

画面イメージ

（注）案件の実物とは異なります。

こんな案件あるよね

簡単なアプリといっても・・・● 詰めてみると意外にやること多い。● 要望とか増えるんじゃない？

設計とか拡張性を考えたら得意なフレームワークがあるといいよね。ということで、ExtJSを使ってみた。

ExtJS

ってなに？

JavaScriptベースでのクライアントMVCフレームワーク（開発：Sencha http://www.sencha.com/）

● きれいなUI ⇒ bootstrap, jQueryUI, etc● MVC ⇒ Backbone.js, AngularJS, etcその両方が備わってる。

ウリはたくさん

● Sencha Touch - スマフォ向けRIAアプリ対応● Sencha Architect - ビジュアルエディタ● Sencha Cmd - ビルドコマンド

and more...

今回はこのへん触れません。m(_ _)m

イチ押し ⇒ Ext.DirectとMVCアーキテクチャ

Ext.Direct

JavaScriptから擬似的にサーバクラス・メソッドを叩く感じ（Remote Procedure Call）

readystatusが何番だったら復帰して・・・とかのいつものAjaxコードが不要に。

やってることがわかりやすくなって、可読性があがる。

たとえば

こんな構成(LAMP)で

ブラウザ(ExtJS)

サーバ(Apache)

+ PHPRDB(MySQL)

サーバ？

ServerClass.php<?php class ServerClass { public function getFormData() { return array( 'success' => true, 'data' => array('name' => 'Aoyama') ); } }?>

クライアント？

client.js<script type "text/html"> ServerClass.getFormData(function(ret) { console.log(ret.data.formData); // name => Aoyama });</script>

もちろん

使うための準備、お作法があるので・・・

次からのサンプルでご紹介。

今回のサーバ側サンプルはPHP。他の言語でも結構行けるらしい。

PerlとかJavaとか.Netとか。

https://market.sencha.com/extensions

MVCは？

冒頭のCRUDアプリを目標にサンプルで確認。

1. サーバでDBのアクセス用クラスを準備。2. アプリのエントリポイントを作る。3. モデルを準備。4. ビューを準備。5. コントローラで整理。

その１

DBアクセスクラス準備

その前に、Ext Direct Packを配置。

http://www.sencha.com/products/extjs/download/

php/classess下にサーバクラスを実装します。

(このあたりはRooterの実装に依存)

その１

DBアクセスクラス準備

CRUDを想定して、

Members::getAll, add, update, remove を実装。

コメントの@remotableがPHP版Direct用メソッドの印。（スタブなら固定配列を返すだけでもOK）

class Members {/** * @remotable */public function getAll() {

return {DB取得の結果}

}}

その２

アプリのエントリポイント

ベースとなる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({ アプリの各種設定（名前とか）

});

その３

モデル準備

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'} ]});

その３

データストア準備

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'

... }

その４

ビュー準備

view配下に以下を準備。　Viewport.js // 画面の下地、3ペインを定義

　Header.js　MemberList.js // センターに配置

　Footer.js

とりあえず3ペインで準備。MemberList.jsがモデルに紐付くビューに。

その５

コントローラで整理

controller/Members.jsを配置、動作(create, update, delete)を記述。

・データ読み込み(read)はストアのautoLoadにお任せ・updateをeditorプラグインにお任せ

できあがり

Ajaxを意識せずにCRUD操作完了。

one more thingチャートとか付けたくないですか？

簡単にビューを追加。データ連携できるのが強み。

- 「レゴのようだ」（某氏）

ExtJSではチャートUI (Chartクラス)が準備されてるいるので拡張して追加。

Ext.chart.Chart：ベクターデータ(SVG)を使ったグラフUI

Raphaëlがベース（Sencha内に組込み）

http://raphaeljs.com/

さらに 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); }); } }]

サーバ側の準備

サーバにEchoClassを追加。

api.php にEchoClassを登録。

EchoClass.php

// api.php 抜粋

$api->add( array( 'EchoClass', 'Members' ));

class EchoClass {/** * @remotable */public function who() {

return "I am server";}

}

o... one more thing (^_^;)Proxyモデル

● ExtJS(Sencha)はデータのProxyモデルが整備されている。● テーブルのような配列型データ構造は以下の構成をとる。

Table View Store

Proxy

Reader/Writer

データバインディング

Memory?File?Server?

⇒ LocalStrage使ってみると、クライアントのみのアプリに切り替わる

最後に

楽しく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

来年初旬発売予定？