既存システムに対するExt JSの部分的適用事例

2009/02/18 　第８回 Ext JS/Ext GWT 勉強会

Ext Japan,LLC ／株式会社ゴーガ 石丸健太郎

Extはどこで多く使われているのか？

部分的 Ext適用のメリット

• カレンダー• グリッド• ツリー• リッチテキストフォーム• 複数のダイアログボタン・・・ etc

• 既存の DB、処理系ロジックをそのまま適用• UI部分をデザイナーなしでも見栄え良くできる• ゼロから作ると大変なコンポーネントを選択的に活用• 使う部分のライブラリだけを読み込むと軽くなる・・・ etc

★処理系プログラミングのパラダイムシフト

• デザインとロジック分離のもう一つの形• 従来処理系で行っていたプレゼンテーションや各種処理をクライアント側に分散させることで、従来とは別の形でのスケールアウトを実現

• JSONPによってサーバサイド処理さえ必要ないマッシュアップアプリを実現可能

データ層

ストアドプロシジャー（ SQL）

アプリ層

処理系言語PHPetc

マッシュアップクラウド

API

API

API

API

API

プレゼン層

Ext

Ext

HTMLJavaScriptCSS

★処理系プログラミングのパラダイムシフト

• サーバ側とクライアント側にそれぞれのMVCモデル• DB→処理系はシンプルな APIのみを用意• クライアント→処理系は従来のシステムを再利用

データベース

処理系 マッシュアップクラウド

API(データ）

API (データ）

プレゼン層Ext

●Modeldata.record

●ViewGridPanel

●Ctrl data.store

チェックロジック

ワークフロー

更新情報

更新情報

◎View

◎Model

◎Ctrl

Grid Filteringの実装例

• 日本語は通るが IME入力は想定されてない• IDで返すように設計すると幸せになれるかも？！• 単一選択・複数選択・日付・文字列・大小比較に対応• 標準ライブラリに追加して利用• 2.2.1にはちょっとしかバグが

http://ext.geo.jp/

http://extjs.com/deploy/dev/examples/grid-filtering/grid-filter.html

Thanks a lot !

ご清聴ありがとうございました。

http://extjs.co.jp/