Comments
Transcript
Dojo ISE Webインフラストラクチャー部 水野 雅裕 WebSphere sMash ハンズオン
WebSphere sMash ハンズオン
５．Dojoアプリ入門
ISE Webインフラストラクチャー部
水野 雅裕
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
Agenda
Dojo Toolkit ~ 基本編
Dojo Toolkit ~ Dijit
Dojo Toolkit ~ Dojo Core
【参考】 Dojo Toolkit ~ その他
2
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
Dojo Toolkit ~ 基本編
3
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
WWW
REST
sMashの適用シナリオ例
サービス
JSON
WebSphere sMash
REST
クライアント部分
スクリプト
アセンブル
フロー
REST
JavaScript
+ Dojo
ブラウザー
REST
HTTP
JSON
ATOM
RSS
スクリプト
JSON
or
サービス
REST
スクリプト
HTTP
サービス
ATOM
SOAP
リポジトリ
エンタープライズ
システム
Java SE
SOAP
WSDL
クライアント
サービス
サービス
JMS
ライブラリ
DB
データ
サービス
JMS
JMS
Provider
4
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
Dojo Toolkit V1
JavaScript ツールキットの1つ
WebSphere sMashは、
主な特徴
– “フル・フューチャー”のツールキット
– 主要ブラウザーで稼動
– 軽量かつ高機能
Dojoを提供します
• GUI部品のみでなく、データや通信関連の機能も充実
http://dojotoolkit.org/
– 機能
• Dojo Core
–
–
–
–
–
Dojoの基本的な機能を提供
イベント処理システム
ドラッグ＆ドロップ
言語ユーティリティ、ローカライゼーション
データ・アクセスetc
• Dijit （Dojo Widget）
– リッチなユーザー・インターフェースを提供
– 高品質で自然なデフォルトテーマ (置換可能)
– 拡張可能なレイアウト、フォーム
• DojoX (Extension)
– 先進的な機能を提供
– チャートやComet実装など
5
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
sMashでDojoを使用する方法
Dojoを使用するための準備
– 必要なモジュールをsMashのリポジトリーに取り込む
• config/ivy.xmlファイルの<dependencies>に以下を追加して稼動
<dependency org="zero" name="zero.dojo" rev="[1.0.0.0, 2.0.0.0["/>
DojoとsMashのDojo拡張機能がダウンロードされる
Dojoの宣言
– JavaScript内にDojo使用の宣言を記述してファイルをpublic
ディレクトリーに配置
<script type="text/javascript" src="/dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: false"></script>
sMash v1.0出荷時は、Dojo 1.1が使用されている
6
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
Dojo Coreの使用宣言
dojo.jsの指定
<script type="text/javascript“
src=“/dojo/dojo.js” djConfig="parseOnLoad: true"></script>
– Dojoの最もベースとなるモジュール
• 他のDojoモジュールのロードが可能に
• src属性: dojo.jsモジュールの配置されたディレクトリを指定
• djConfig: dojoの設定内容を指定。
– parseOnLoad：ドキュメント読込み後、dojoType属性が指定された要素のパースを実施
Dojo _baseに含まれるAPIの使用
– そのまま使用可能
• 例）次ページのサンプル・コードで使用しているAPI
– dojo.addOnLoad() : ページ読込時に行う処理を指定
– dojo.byId() : DOM要素の取得
– dojo.connect() : イベントの関連付け
Dojo _baseに含まれないAPIの使用
– API呼出しの前にdojo.require()でモジュールのロードが必要
7
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
Dojo 基本：コード例
dojo.jsの指定
Dojo baseをロード。これにより
<html>
他のDojo機能へのアクセスが可能に
<head>
<title>Web2.0 WS Sample01</title>
<script type="text/javascript“ src=“/dojo/dojo.js”
djConfig="parseOnLoad: true"></script>
dojo.addOnLoad()
<script type="text/javascript">
dojo.byId()
dojo.addOnLoad(init);
ページが読み込まれる際に
実行される関数を指定
function init() {
DOMエレメントの取得
var button = dojo.byId("button01");
dojo.connect(button, "onclick", function() {
dojo.connect()
var name = dojo.byId("name01");
dojo.string.pad()
発生したイベントと
var rawid = dojo.byId(“clubid01”);
関数を結びつける
明示的にロードした
dojo.require(“dojo.string”);
dojo.stringのpad()を使用
var fmtid = dojo.string.pad(rawid.value,6);
dojo.require()
dojo baseに含まれて
いないモジュールは、
明示的にロード。
8
alert(“会員番号”+fmdid+”の”+name.value +”さんですね");
});
}
</script>
</head>
<body>
名前を入力してください。<input type="text", id="name01">
会員番号を入力してください。 <input type="text", id=“clubid01">
<input type="button", id="button01" value="クリック！">
</body>
</html>
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
DojoでのAjax（非同期通信）プログラミング
キーワード
型
説明
content
Object
リクエスト送信時に送られるデータ。
error
Function
エラー時に呼び出される関数(エラー・ハンド
ラー)。
form
DOMNode
フォームのDOMNode。フォームの値が送信
される。
xhrXXX メソッド
handleAs
String
受信データの型。省略時値はtext。
– dojo.js
headers
Object
HTTPリクエストの追加のヘッダー。
load
Function
データ受信完了時に呼び出される関数。
preventCache
Bookean
キャッシュを無効化するか。省略時値はfalse。
sync
Boolean
同期型でリクエストを送信するときはtrue。省
略時値はfalse。
timeout
Integer
タイムアウト(ミリ秒)。満了時にはエラー・ハン
ドラーが呼び出される。
url
String
宛先URL。必須パラメータ。
…
…
…
クロス・ブラウザ化
XMLHttpRequestに比べ
– 容易
– 直感的
– HTTPメソッドに対応
•
•
•
•
xhrGet
xhrPost
xhrPut
xhrDelete
– パラメータ
• 右表を参照
• 必須パラメータはurlのみ
9
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
【参考】 Ajaxプログラミング : Dojo
GET 要求
function submit(){
dojo.xhrGet( {
url: "./member",
timeout: 5000,
handleAs: “json-comment-filtered",
load: function(response, ioArgs) {
dojo.byId("messageBox").innerHTML = response[0].firstname + “ ” + response[0].lastname;
return response;
},
error: function(response, ioArgs) {
dojo.byId("messageBox").innerHTML = “Error ! HTTP status code: “ + ioArgs.xhr.status;
return response;
}
});
}
<body>
<button id = “Get" onclick = "submit()">Get Member</button>
<div id = "messageBox"></div>
</body>
10
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
Dojo Toolkit ~ Dijit
11
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
Dijit（Dojo Widget）の使用
Dojo上で稼動するリッチなUIコンポーネント群
Dijitの呼び出し方
– 宣言的呼出し
• HTMLタグ内部で、dojoTypeを指定して呼び出す
• ページの初回ロード時にのみインスタンス化される
– 但し、djConfigでparseOnLoad: trueの設定が必要
<button dojoType="dijit.form.Button" id="button01">クリック！</button>
– プログラマティック呼出し
•
•
ユーザー・アクションの結果として、dijitを呼出したい場合に使用
第１引数にdijitのプロパティ、第２引数に置換えを行うDOMノード
var datetxt01 = new dijit.form.DateTextBox( {id:“datetxt01"}, dojo.byId("someDiv"))
– いずれの場合も、dojo.requre()でモジュールのロードが必要
– dijit.byId()で、dijitインスタンスの参照を取得可能
var btn01 = dijit.byId(“button01”) ;
dojo.connect(btn01,"onclick",obj1,myfunc01);
12
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
【参考】 Dijit一覧 ①フォーム / dijit.form
dijit.form.CheckBox
dijit.form.DateTextBox
dijit.form.TextArea
dijit.form.TextBox
dijit.form.ComboBox
dijit.form.InlineEditBox
dijit.form.DateTextBox
dijit.form.NumberSpiner
dijit.form.CurrencyTextBox
dijit.form.NumberTextBox
dijit.form.FilteringSelect
dijit.form.Validataion
TextBox
dijit.form.Slider
13
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
【参考】 Dijit一覧 ②コマンド制御 / dijit.form
dijit.form.Button
dijit.MenuItem
dijit.form.DropDownBusttion
dijit.form.ComboButton
dijit.Toolbar
14
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
【参考】 Dijit一覧 ③ユーザー・アシスタンス
dijit.Dialog
dijit.ProgressBar
dijit.TitlePane
dijit.TooltipDialog
dijit.Tooltip
15
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
【参考】 Dijit一覧 ④ 編集・表示
dijit.ColorPalette
dijit.Editor
dijit.Tree
16
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
【参考】 Dijit一覧 ⑤ レイアウト / dijit.layout
dijit.layout.LayoutContainer
dijit.layout.AccordionContainer
dijit.layout.SplitContainer
dijit.layout.StackContainer
dijit.layout.ContentPane
17
dijit.layout.TabContainer
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
Dijitテーマの使用
Dojoが事前に用意しているテーマ・デザインを利用可能
– <style>タグでCSSのインポート
<style type=“text/css”>
@import "/dijit/themes/tundra/tundra.css";
</style>
– <body>要素のclass属性にテーマ名を指定
<body class=“tundra”> … </body>
noir
soria
tundra
Dojo 1.1では、「nihiro」
を追加
18
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
Dijitを利用したコード例
<html>
<head>
Dijitテーマの呼出し
<title>Web2.0 WS Sample02</title>
<style type="text/css">
@import "/dijit/themes/tundra/tundra.css";
</style>
<script src="/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
</head>
<body class="tundra“>
<script type="text/javascript">dojo.require("dijit.form.Button");</script>
<button dojoType="dijit.form.Button" id="button01">日付を指定する
<script type="dojo/method" event="onClick">
宣言的呼出し
dojo.require("dijit.form.DateTextBox");
var btn01 = new dijit.form.DateTextBox({id:"datebox01"}, dojo.byId("someDiv"))
ページ読込み時に
</script>
ロードされる
</button><br>
<div id="someDiv"></div>
プログラマティック呼出し
</body>
</html>
ボタンがクリック
された際に表示される
19
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
Dojo Toolkit ~ Dojo Core
20
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
Dojoでのイベント・ハンドリング
ページ読込みイベント時に処理を行う
– dojo.addOnLoad()
•
初期化の処理を実装。ページ読込み完了を待たず
開始されるのでパフォーマンスがよい
<script type=“text/javascript”>
function init() { // some initialization }
dojo.addOnLoad(init);
</script>
明示的にイベントを結びつける
– dojo.connect()/dojo.disconnect()
•
DOMのイベントと関数を結びつける/破棄する
<script type="text/javascript">
function myfunc01(){ console.debug("myfunc01 is called"); }
var btn = dojo.byId("button01");
button01で”onclick”イベントが発生し
たときにobj1のmyfunc01が呼ばれる
evnt = dojo.connect(btn,"onclick",obj1,myfunc01);
…
[注意] 呼出した関数に戻り値
があっても拾えない
dojo.disconnect(evnt); //関連付けの破棄
イベントのハンドラーを渡す
</script>
•
オブジェクトや関数同志を関連付け
evnts[ ];
evnts[0] = dojo.connect(obj1,”func1”,obj2,”func2”);
evnts[1] = dojo.connect(glbfunc1,glbfunc2);
evnts[2] = dojo.connect(obj1,”func1”, glbfunc1);
evnts[3] = dojo.connect(glbfunc2,obj2,”func2”);
obj1のfunc1とobj2のfunc2を紐付ける
グローバル関数glbfunc１とglbfunc2を紐付ける
obj1のfunc1とglbfunc1を紐付ける
glbfunc2とobj2のfunc2を紐付ける
21
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
Dojoでのイベント・ハンドリング（つづき）
subscribe
publish
イベントのpublish/subscribe
– dojo.publish(トピック名,配列)
TOPIC
• トピックに対しイベントを通知
–
– トピック名：イベントを通知するトピック名
– 配列： 呼出す関数に渡される引数の配列
dojo.subscribe(トピック名,コンテキスト,関数)
• トピックへの登録
–
– トピック名：サブスクライブするトピック名
– コンテキスト：呼出される関数のコンテキスト
– 関数：イベント発生時に呼出される関数
dojo.unsubscribe(ハンドル)
• トピックへの登録解除
– ハンドル：トピックに登録した際のハンドル
22
<head>
･･･
<script type=“text/javascript”>
function rcvEvnt(msg){
console.debug(msg);
}
function makeEvnt(){
dojo.publish(“myTopic1”,[”EventHappen!”]);
}
function init(){
evnt1 =
dojo.subscribe(“myTopic1",null,rcvEvnt)
}
dojo.addOnLoad(init);
</script>
</head>
<body>
<button onclick=“makeEvnt”></button>
</body>
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
DOMとは？
Document Object Model
– JavaScriptなどのプログラミング言語からHTML文書/XML文書を操作するため
のインターフェース
• JavaScriptはHTML/XMLを解析し、1つ１つのタグや文字列をオブジェクトとして処理
• タグの入れ子構造をツリーとして表現、DOM Treeとして扱う
– 各オブジェクトはノードと呼ばれる(要素ノード、テキスト・ノードetc）
• DOMを操作することによって、ページを（再読込なしに）動的に更新できる
– W3C が策定する標準
• あくまでDOMは標準。DOMを実装するXMLパーサーはベンダー依存
<div id="example">
<h1>見出し</h1>
<p>段落1</p>
<p>段落2</p>
</div>
Internet Explorerで左のHTMLを
解釈した場合のDOM Tree
23
div
h1
p
p
#text
#text
#text
要素ノード
テキスト・ノード
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
Dojoでの基本DOM操作
– dojo.byId(id) ：指定されたDOMノードをIDで取得
– dojo.place(node,refNode,position) ： nodeをrefNodeのpositionに挿入
• position：“before”、”after”、”first”、”last”
※first/lastの場合は子要素として挿入される
<body>
<button onclick=onbutton() id="button01" >button01</button>
<script type="text/javascript">
function onbutton(){
dojo.byId("msg").innerHTML = “This node is inserted";
node = dojo.byId("msg")
msgノードをplace2
refNode = dojo.byId("place2");
ノードの前に挿入
dojo.place(node,refNode,“before");
}
</script>
<div id="parent">
<div id="place1">place1</div>
<div id="place2">place2</div>
<div id="place3">place3</div>
<div id="msg"></div>
</div>
</body>
24
msgノードのinnterHTMLプロパ
ティの値に文字列を指定
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
dojoDndItem
【参考】 Drag ＆ Drop：dojo.dnd
Drag ＆ Drop操作を容易に実装可能
– Source : アイテムをDrag可能なDOMノード
– Target : アイテムをDrop可能なDOMノード
dojo.dnd.
Source
dojo.dnd.
Target
［例:商品リスト］
［例:カート］
• dojo.dnd.Source : Source/Target双方の機能を持つ。通常はこちらを使用
• dojo.dnd.Target : 純粋にTargetの役割。アイテムを追加しても削除できない
– accept属性で、受け入れ可能なアイテムのdndTypeを指定可能
<div dojoType=“dojo.dnd.Source” jsId=“shelf” class=“source” >ソース・エリア</div>
･･･
<div dojoType=“dojo.dnd.Target” jsId=“cart” class=“target” accept=“group01”>ターゲット・エリ
ア</div>
– アイテムも、classにdojoDndItemを指定したDOMノードとして定義
• dndType: 移動可能なエリアを制御するために利用
• dndData: アイテムに関連付けるデータ
<img src=“Item01img.png" class="dojoDndItem" dndType=“group01“ dndData=“10”>/>
<img src=“Item02img.png" class="dojoDndItem" dndType=“group01,group02“ dndData=“5”/>
25
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
Drag&Dropのイベントをsubscribe
• /dnd/drop
：移動完了
【参考】 Drag & Drop：dojo.dnd
（続き）
• /dnd/start ：移動開始
• /dnd/cancel ：移動キャンセル
• /dnd/source/over ：指定ソース上をマウス移動
<head>
･･･
<script type="text/javascript">
dojo.require(“dojo.dnd.Source”);
･･･
function init(){
dojo.dnd.Source
dojo.subscribe(“/dnd/drop”, function(source,nodes,iscopy){･･･}）;
のロード
dojo.subscribe(“/dnd/start”, function(source,nodes,iscopy){･･･});
dojo.subscribe("/dnd/cancel", function(){･･･});
dojo.subscribe("/dnd/source/over", function(source){･･･});
}
dojo.addOnLoad( init );
</script>
</head>
ソースの指定
<body> ･･･
dojo.dnd.Source
<td>商品リスト
<div dojoType=“dojo.dnd.Source” jsId=“shelf” accept=“gp01”>
<img src=“itm01.jpg” class=“dojoDndItem” dndType=“gp01“ dndData=“10”>
<img src=“Itm02.jpg” class=”dojoDndItem“ dndType=“gp01“ dndData=“5”/>
アイテムの指定
･･･
</div>
dojoDndItem
</td>
<td>ショッピング・カート
<div dojoType=“dojo.dnd.Target” jsId=“cart”>ターゲット・エリア</div>
</td>
ターゲットの指定
</body>
dojo.dnd.Target
26
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
文化的慣習
日付/時間
– Dojoでは各国語へのフォーマット/各国語からのパースが可能
<script type="text/javascript">
dojo.require("dojo.date.locale");
var dt = new Date();
console.info("日本語:"+dojo.date.locale.format(dt {locale:'ja',formatLength:'full'}));
console.info(“仏 語:”+ dojo.date.locale.format(dt, {locale:‘fr',formatLength:'full'}));
var date = dojo.date.locale.parse(“2008年4月7日月曜日”,{selector:‘date’,formatLength: “full”});
console.info(date);
</script>
通貨
– 表記方法、丸めなどの慣習も適用
<script type="text/javascript">
dojo.require("dojo.currency");
console.info(dojo.currency.format(1234.567, {currency: "USD"}));
console.info(dojo.currency.format(1234.567, {currency: "EUR"}));
console.info(dojo.currency.format(1234.567, {currency: "JPY"}));
</script>
27
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
日本語対応について
データとして日本語（UTF-8）を扱うことが可能
Dojoの各種リソースも日本語対応済み
– カレンダー、日付、時間、通貨、デフォルトメッセージ etc.
IMEの制御に対応する機能はない
文字化けに注意
・Shift-JIS範囲外の文字が入力
された場合
UTF-8対象部分
・他システムとデータ共有
（変換コンバーターが違う場合）
UTF-8化対象部分
HTML
Shift-JIS
CSS
Unicode
ブラウザー
JS
XML
DB
JVM
sMash
EBCDIC
JSON
ホスト
28
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
Dojoにおけるデータ・アクセス：dojo.data
データ・フォーマットに捉われないアクセス方法を提供
– データ･ストアがデータ・ソースのデータ・フォーマットを隠蔽
– dojo.data API
dojo.data API
9 abstractのAPI
9 全てのAPIを全てのデータ・ストアが
サポートしているわけではない
属性(Attribute)
要求
値(Value)
no
name
dpt
place
0100
川中
ISE
幕張
0200
山中
SWG
箱崎
0300
野中
ATS
幕張
アイデンティティ アイテム
(Item)
(Identity)
29
¾ dojo.data.api.Read
¾ dojo.data.api.Write
¾ dojo.data.api.Identity
¾ dojo.data.api.Notification
データ・ストア
データを読み込む
JavaScriptオブジェクト
• dojo.data.ItemFileReadStore
• dojo.data.ItemFileWriteStore
• dojox.data.CsvStore
• dojox.data.XmlStore
• dojox.data.OpmlStore
• dojox.data.HtmlTableStore
• dojox.data.AtomReadStore
• dojox.data.FlickrStore など
データ・ソース
¾ファイル
- JSON
- XML
- CSV
¾Webサービス等
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
dojo.data API
dojo.data の基本コンセプト
– データ・アクセスは個々のAPIに分割され、データ・ストア毎に実装を判断できる
• dojo.data.api.Read
– データ・アイテムやその属性を読み込む機能
> 検索条件にマッチするデータの取得、取得データのソートなどの機能を持つ
> レイジー・ロード機能、ページ・ロード機能など応用機能を持つストアもある
• dojo.data.api.Write
– データ・アイテムやその属性の作成、更新、削除を行う機能
> Undoが可能なよう newItem, deleteItem, setAttributeをトラッキング
> 保存を行ったときにまとめて書込み(バッチ・プロセッシング）
• dojo.data.api.Identity
– Identity（または複合Identity）により、ただ1つのアイテムを特定し取得する機能
• dojo.data.api.Notification
– データ・ストア内のアイテムの作成、削除、更新などのイベントを通知
> dojo.connect() で データ・ストアのonNew/onDelete/onSetのイベントと結びつける方法
> データ・ストアのonNew/onDelete/onSetの関数を、ユーザー・ロジックに置き換える方法
– アイテムやその属性は、常にデータ・ストアの機能を介して、アクセス、更新、作成、削除
が行われる。属性は決してアイテムから直接取得されない。
•
•
30
データ・ストアを介してアクセスすることで
内部構造の隠蔽が可能
データ・ストアは非常に軽い内部構造を利用でき、
メモリー負荷を軽減できる
○ val = someStore.getValue(item,”attr1”)
× val = item.attr1
× val = item.getValue(“attr1”)
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
[参考] データ・ストアのドライバーとその機能
Read Write
Identity
Notification
データ・
タイプ
dojo.data.ItemFileReadStore
9
8
9
8
JSON
dojo.data.ItemFileWriteStore
9
9
9
9
JSON
dojox.data.FlickrStore
9
8
8
8
JSON
dojox.data.XmlStore
9
9
8
8
XML
dojox.data.CsvStore
9
8
9
8
CSV
dojox.data.OpmlStore
9
8
9
8
OPML
dojox.data.HtmlTableStore
9
8
9
8
HTML
Table
dojox.data.QueryReadStore
9
8
9
8
JSON
31
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
データ・ストアの使用①
例）dojo.data.ItemFileReadStore： JSONファイル読込み用データストア
urlでデータ･ソースと
– fetch(): 検索条件付きデータ取得
なるファイルを指定
dojo.require("dojo.data.ItemFileReadStore")
var dataStore = new dojo.data.ItemFileReadStore({url:"member.json"});
var gotList = function(items, request){ // データを全て取得した際に実行される処理
dojo.forEach(items, function(i){
console.info(dataStore.getValue(i,“name”));
});
}
var gotItem = function(item, request){ // アイテムを取得するたびに実行する処理 }
var gotError = function(error, request){ // データ取得時にエラーが発生した場合の処理 }
dataStore.fetch( {
検索はデフォルト 大文字小文字を区別する。
queryOptions: {ignoreCase: true},
区別したい場合はqueryOptions で
ignoreCase: trueを 指定。
query: { place: "Makuhari", dpt: "ISE.*" },
検索条件は複数指定可能。
onComplete: gotList,
＊は任意の文字列、？は任意の一文字。
//onItem: gotItem,
なにも検索条件を指定していなければ、
onError: gotError
全てのアイテムを返す。
} );
データ取得イベント
•onComplete: 全アイテム取得した際に実行
•onItem: アイテム取得毎に実行
•onError: データ取得でエラーが発生した際に実行
32
（注意）onItemも共に指定されている場合には、
onCompleteで渡される取得データの配列は常にnull
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
データ・ストアの使用②
例）dojo.data.ItemFileReadStore： JSONファイル読込み用データストア
– fetch(): ソートキーを指定し、データのソート
dojo.require("dojo.data.ItemFileReadStore")
var dataStore = new dojo.data.ItemFileReadStore({url:"member.json"});
・・・
ソートのキーをJSON形式で指定。複数のソート・キーも指定可能
var sortKeys = [
attribute：ソートのキーとなるattribute
{ attribute: “org”, descending: true }
descending：降順か否か
{ attribute: “name”, descending: false }
]
dataStore.fetch({
sort: sortKeys,
ソートの実行とソートのキーを明示。
onComplete: gotList,
onError: gotError
});
– fetchByIdentity() : Identityを指定してのデータ取得
dojo.require("dojo.data.ItemFileReadStore")
identityとしてキーを指定。
var dataStore = new dojo.data.ItemFileReadStore({url:"member.json"});
ここではtextboxで取得した情報をキーに指定
dataStore.fetchByIdentity({
identity: dojo.byId(“textbox01").value,
onItem: function(item){ console.debug(“Item is:”,dataStore.getValue(item,“name”)); }
});
33
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
データ・ストアの使用③
例）dojox.data.XmlStore：
XMLファイル読込用データストア
// dojo.require("dojo.data.ItemFileReadStore");
XmlStoreを作成
dojo.require("dojox.data.XmlStore");
// var dataStore = new dojo.data.ItemFileReadStore({url:"member.json"});
var dataStore = new dojox.data.XmlStore({url:"member.xml, root:”member”});
var gotList = function(items, request){ // データを全て取得した際に実行される処理
dojo.forEach(items, function(i){
console.info(dataStore.getValue(i,“name”));
ロジックはそのまま使用可能
});
}
var gotItem = function(item, request){ // アイテムを取得するたびに実行する処理 }
var gotError = function(error, request){ // データ取得時にエラーが発生した場合の処理 }
dataStore.fetch( {
onComplete: gotList,
onItem: gotItem,
onError: gotError
} );
34
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
例：todoufuken.json
データ・ストアとdijitの連携
容易に連携可能
{ label: ‘name’, identifier: 'name',
items: [
{ name:'北海道', type:'chihou' },
{ name:‘東北’, type:‘chihou’,
children:[{_reference:'青森'}, ･･･'}] },
{ name:'青森', type:'ken'},
{ name:'秋田', type:'ken'},
{ name:'岩手', type:'ken'},
･･･
<head>
･･･
<script src=“/dojo/dojo.js”
djConfig="parseOnLoad: true"></script>
<script>
dojo.require("dojo.data.ItemFileReadStore")
dojo.require("dijit.Tree");
dojo.require("dojo.parser")
データ・ストア
</script>
にIDをつける
</head>
<body class="tundra">
<div dojoType=“dojo.data.ItemFileReadStore”
データ・ストア
のIDを渡す
url="todoufuken.json" jsid="kenmeiStore"/>
<div dojoType=“dijit.Tree” store=“kenmeiStore”
labelAttr=“name“ label=”都道府県” query=“{ type:‘chihou’ }”>
</div>
</body>
35
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
【参考】 sMash用データ・ストア
ZRM用データ・ストア ドライバー
– zero.resource.DataStore
• ZRMを通じて、データの読込み、追加、変更が可能
• 表示用dijitとして、zero.grid.DataGrid、dojox.grid.Grid、dijit.form.ComboBox、dijit.form.FilteringSelect
のみサポート
– fetch
• 全てのデータに対してfetch()可能
– フィルタリング
• fetch()で取得したデータをフィルター可能
– ソート
• fetch()で取得したデータをソート可能
– ページング
• fetch()でデータを取得する際にページング可能
アプリ明示的に
contextRootを持って
いる場合はここに指
定する必要がある
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("zero.resource.DataStore"); </script>
・・・
<div dojoType="zero.resource.DataStore" jsId="thestore“ contextRoot=""></div>
・・・
zero.grid.DataGrid
– dojox.grid.GridのDojo独自拡張
– ZRMのデータをzero.resource.DataStoreを使用してGrid表示させる事が可能
36
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
【参考】 Dojo Toolkit ~ その他
37
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
【参考】 sMash独自のDojo拡張
DataStoreのZRM用実装 （先述）
Atom Data Access機能
Atom Data Access機能は、sMashでDojoを
リポジトリー追加するとその中に入っている
– Atom library - Atomプロトコルの実装
– The AppStore - Atom用のデータ・ストア
– The Atom Widgets - Atom情報の表示／編集機能
FeedViewer Widget
<div dojoType="ibm_atom.widget.FeedViewer“ widgetId="fv1“
url="samplefeed.xml" entrySelectionTopic="atomfeed/entry/topic" />
FeedEntryEditor Widget
<div dojoType="ibm_atom.widget.FeedEntryViewer" widgetId="feedEditor“ enableMenu="true“
enableMenuFade="true“ enableEdit="true” displayEntrySections="title,authors,summary“
entrySelectionTopic="atomfeed/entry/topic" />
38
© 2008 IBM Corporation
© 2008 ISE Corporation
WebSphere sMash ハンズオン
【参考】 Dojoアプリケーションのテスト
Firefox ＋ Firebug
– Firebug
• Firefoxのプラグインで、強力な開発支援ツール
–
–
–
–
–
39
リアルタイムなコンテンツの表示／編集
各種モニター
デバッガー
統合コンソール出力
DOMの内容表示
© 2008 IBM Corporation
© 2008 ISE Corporation