4. dojo.dataを使用したサンプル
では、実際にDojoが提供するデータストアを使った簡単なサンプルアプリケーションを実装してみましょう。今回はデータストアの実装クラスとして、dojo.data.ItemFileWriteStoreを使います。ItemFileWriteStoreは以下のAPIをすべて実装しています。
- dojo.data.api.Identify
- dojo.data.api.Notification
- dojo.data.api.Read
- dojo.data.api.Write
これらのAPIを使って、データストアのアイテム一覧を表示します。アイテムの一覧表示にはデータグリッドを使用します。また、テキストボックスとボタンを使用してアイテムの更新・追加機能を実装します。最後に、アイテムの更新・追加時の通知機能を実装します。
まずデータストアを生成します。ItemFileWriteStoreのインスタンスを生成するには、dojo.require()でItemFileWriteStoreを読み込み、コンストラクタの引数urlにデータファイルのパスを指定します。
dojo.require("dojo.data.ItemFileWriteStore");
var store = new dojo.data.ItemFileWriteStore({url: "data/sample_data.json"});
データファイルとして使用するsample_data.jsonは以下のようになっています。各アイテムは、id属性、sex属性、userName属性およびlabel属性を持っています。
{
identifier: "id",
label: "label",
items: [
{
id: "01",
sex: "男",
userName: "Keisuke Aoki",
label: "青木圭介"
},
{
id: "02",
sex: "男",
userName: "Kenji Tanaka",
label: "田中健二"
},
...
Dojoが提供しているデータグリッドを利用すると、アイテムの一覧を簡単に表示することができます。上記で作成したデータストアのアイテム一覧をデータグリッドで表示するにはHTMLで以下のように記述します。
@import "../dojo-release-1.5.0/dojox/grid/resources/Grid.css";
@import "../dojo-release-1.5.0/dojox/grid/resources/claroGrid.css";
<script type="text/javascript">
...
// dojo.requireでDataGridを読み込む
dojo.require("dojox.grid.DataGrid");
...
// グリッドのレイアウト用オブジェクト
var gridLayout = {
cells: [
{name: "社員番号", field: "_item", width: "30%", formatter: idFormatter},
{name: "ユーザーID", field: "_item", width: "30%", formatter: nameFormatter},
{name: "氏名", field: "_item", formatter: labelFormatter}
]
};
...
</script>
</head>
<body class="claro" style="margin: 5px;">
...
<table dojoType="dojox.grid.DataGrid"
store="store" structure="gridLayout">
</table>
ここではデータグリッドの詳しい使い方については割愛します。データグリッドの使い方については「Dojo ToolkitのDataGridを使いこなす」が参考になります。
アイテムの更新機能を実装しましょう。サンプルでは「更新」ボタンを押すと、テキストボックスに入力された社員番号と同じid属性を持つアイテムを取得し、アイテムのname属性、label属性の値をユーザーID、氏名フィールドの値で更新します。
まずは更新対象となるアイテムを取得します。idから更新対象となるアイテムを取得するにはfetchItemByIdentity()メソッドを使います。引数のidentityにはidの値をセットします。onItem()はアイテムが見つかったときのコールバック関数です。サンプルではonItem()でgetValue()メソッドで得られた既存の値と、引数として渡された新しい値を比較し、更新が必要であればsetValue()メソッドを使用してアイテムの属性値を更新します。更新処理はupdateItem()メソッドで行います。
function updateItem() {
var id = dijit.byId("idField").attr("value");
var userName = dijit.byId("userNameField").attr("value");
var label = dijit.byId("labelField").attr("value");
if(dojo.trim(id) == "") {
alert("データが選択されていません。");
} else if(dojo.trim(userName) == "") {
alert("ユーザーIDがセットされていません。");
} else if(dojo.trim(label) == "") {
alert("氏名がセットされていません。");
} else {
store.fetchItemByIdentity({
identity: id,
onItem: function(item, request) {
if(store.getValue(item, "userName") != userName) {
store.setValue(item, "userName", userName);
_clearFields();
}
if(store.getValue(item, "label") != label) {
store.setValue(item, "label", label);
_clearFields();
}
},
onError: function(errorData, request) {
alert("社員番号が重複しています。");
}
});
}
}
次はアイテムの追加機能を実装します。サンプルでは「追加」ボタンが押されると、フォームに入力された社員番号、ユーザー名、氏名をid属性、name属性、label属性にもつアイテムを作成しデータストアに追加します。
データストアに新しくアイテムを追加するにはnewItem()メソッドを使用します。引数には新しく追加するアイテムの各属性の値をセットします。ここでデータストアのIdentityとして定義したフィールドの値は必須となります。アイテムの追加処理はaddNewItem()メソッドで行います。
function addNewItem() {
var id = dijit.byId("idField").attr("value");
var userName = dijit.byId("userNameField").attr("value");
var label = dijit.byId("labelField").attr("value");
if(dojo.trim(id) == "") {
alert("社員番号がセットされていません。");
} else if(dojo.trim(userName) == "") {
alert("ユーザーIDがセットされていません。");
} else if(dojo.trim(label) == "") {
alert("氏名がセットされていません。");
} else {
try {
store.newItem({
id: id,
userName: userName,
label: label
});
_clearFields();
} catch(e) {
alert("社員番号が重複しています。");
}
}
}
最後にアイテムの更新・追加の通知機能を実装します。更新時の通知機能は、dojo.data.api.NotificationのonSet()にdojo.connect()して実現します。
dojo.connect(store, "onSet",
function(item, attrName, oldVal, newVal) {
alert("データが更新されました。");
});
上記のように記述することで、データストアのonSet()メソッドが呼ばれたときにalert()ダイアログを表示することができます。item, attrName, oldVal, newValを利用すると、より詳細な更新情報を通知することができます。
データの追加時にはdojo.data.api.NotificationのonNew()メソッドが呼ばれます。onNewメソッドにdojo.connect()することでアイテムの追加をダイアログで通知することができます。
dojo.connect(store, "onNew",
function(item) {
alert("データが追加されました。");
});
以下は、これらの機能を実装したサンプルアプリケーションの実行画面です。
