The goal of this blog entry is to describe how you can create custom data sources which you can use with
the controls in
the WinJS library. In particular, I explain how you can create an IndexedDbDataSource which you can use to store and retrieve data from an IndexedDB database.
If you want to skip ahead, and ignore all of
the fascinating content in-between, I’ve included
the complete code for
the IndexedDbDataSource at
the very bottom of this blog entry.
What is IndexedDB?
IndexedDB is a database in
the browser. You can use
the IndexedDB API with all modern browsers including Firefox, Chrome, and Internet Explorer 10. And, of course, you can use IndexedDB with Metro style apps written with JavaScript.
If you need to persist data in a Metro style app written with JavaScript then IndexedDB is a good option. Each Metro app can only interact with its own IndexedDB databases. And, IndexedDB provides you with transactions, indices, and cursors –
the elements of
any modern database.
An IndexedDB database might be different than
the type of database that you normally use. An IndexedDB database is an object-oriented database and not a relational database. Instead of storing data in tables, you store data in object stores. You store JavaScript objects in an IndexedDB object store.
You create new IndexedDB object stores by handling
the upgradeneeded event when you attempt to open a connection to an IndexedDB database. For example, here’s how you would both open a connection to an existing database named TasksDB and create
the TasksDB database when it
does not already exist:
var reqOpen = window.indexedDB.open(“TasksDB”, 2);
reqOpen.onupgradeneeded = function (evt) {
var newDB = evt.target.result;
newDB.createObjectStore("tasks", { keyPath: "id", autoIncrement: true });
};
reqOpen.onsuccess = function () {
var db = reqOpen.result;
// Do something with db
};
When you call window.indexedDB.open(), and
the database
does not already exist, then
the upgradeneeded event is raised. In
the code above,
the upgradeneeded handler creates a new object store named tasks.
The new object store has an auto-increment column named id which acts as
the primary key column.
If
the database already exists with
the right version, and you call window.indexedDB.open(), then
the success event is raised. At that point, you have an open connection to
the existing database and you can start doing something with
the database.
You use asynchronous methods to interact with an IndexedDB database. For example,
the following code illustrates how you would add a new object to
the tasks object store:
var transaction = db.transaction(“tasks”, “readwrite”);
var reqAdd = transaction.objectStore(“tasks”).add({
name: “Feed
the dog”
});
reqAdd.onsuccess = function() {
// Tasks added successfully
};
The code above creates a new database transaction, adds a new task to
the tasks object store, and handles
the success event. If
the new task gets added successfully then
the success event is raised.
Creating a WinJS IndexedDbDataSource
The most powerful
control in
the WinJS library is
the ListView
control. This is
the control that you use to display a collection of items.
If you want to display data with a ListView
control, you need to bind
the control to a data source.
The WinJS library includes two objects which you can use as a data source:
the List object and
the StorageDataSource object.
The List object enables you to represent a JavaScript array as a data source and
the StorageDataSource enables you to represent
the file system as a data source.
If you want to bind an IndexedDB database to a ListView then you have a choice. You can either dump
the items from
the IndexedDB database into a List object or you can create a custom data source. I explored
the first approach in a previous blog entry. In this blog entry, I explain how you can create a custom IndexedDB data source.
Implementing
the IListDataSource Interface
You create a custom data source by implementing
the IListDataSource interface. This interface contains
the contract for
the methods which
the ListView needs to interact with a data source.
The easiest way to implement
the IListDataSource interface is to derive a new object from
the base VirtualizedDataSource object.
The VirtualizedDataSource object requires a data adapter which implements
the IListDataAdapter interface.
Yes, because of
the number of objects involved, this is a little confusing. Your code ends up looking something like this:
var IndexedDbDataSource = WinJS.Class.derive(
WinJS.UI.VirtualizedDataSource,
function (dbName, dbVersion, objectStoreName, upgrade, error) {
this._adapter = new IndexedDbDataAdapter(dbName, dbVersion, objectStoreName, upgrade, error);
this._baseDataSourceConstructor(this._adapter);
},
{
nuke: function () {
this._adapter.nuke();
},
remove: function (key) {
this._adapter.removeInternal(key);
}
}
);
The code above is used to create a new class named IndexedDbDataSource which derives from
the base VirtualizedDataSource class. In
the constructor for
the new class,
the base class _baseDataSourceConstructor() method is called. A data adapter is passed to
the _baseDataSourceConstructor() method.
The code above creates a new method exposed by
the IndexedDbDataSource named nuke().
The nuke() method deletes all of
the objects from an object store.
The code above also overrides a method named remove(). Our derived remove() method accepts
any type of key and removes
the matching item from
the object store.
Almost all of
the work of creating a custom data source goes into building
the data adapter class.
The data adapter class implements
the IListDataAdapter interface which contains
the following methods:
· change()
· getCount()
· insertAfter()
· insertAtEnd()
· insertAtStart()
· insertBefore()
· itemsFromDescription()
· itemsFromEnd()
· itemsFromIndex()
· itemsFromKey()
· itemsFromStart()
· itemSignature()
· moveAfter()
· moveBefore()
· moveToEnd()
· moveToStart()
· remove()
· setNotificationHandler()
· compareByIdentity
Fortunately, you are not required to implement all of these methods. You only need to implement
the methods that you actually need.
In
the case of
the IndexedDbDataSource, I implemented
the getCount(), itemsFromIndex(), insertAtEnd(), and remove() methods. If you are creating a read-only data source then you really only need to implement
the getCount() and itemsFromIndex() methods.
Implementing
the getCount() Method
The getCount() method returns
the total number of items from
the data source. So, if you are storing 10,000 items in an object store then this method would return
the value 10,000.
Here’s how I implemented
the getCount() method:
getCount: function () {
var that = this;
return new WinJS.Promise(function (complete, error) {
that._getObjectStore().then(function (store) {
var reqCount = store.count();
reqCount.onerror = that._error;
reqCount.onsuccess = function (evt) {
complete(evt.target.result);
};
});
});
}
The first thing that you should notice is that
the getCount() method returns a WinJS promise. This is a requirement.
The getCount() method is asynchronous which is a good thing because all of
the IndexedDB methods (at least
the methods implemented in current browsers) are also asynchronous.
The code above retrieves an object store and then uses
the IndexedDB count() method to get a count of
the items in
the object store.
The value is returned from
the promise by calling complete().
Implementing
the itemsFromIndex method
When a ListView displays its items, it calls
the itemsFromIndex() method. By default, it calls this method multiple times to get different ranges of items.
Three parameters are passed to
the itemsFromIndex() method:
the requestIndex, countBefore, and countAfter parameters.
The requestIndex indicates
the index of
the item from
the database to show.
The countBefore and countAfter parameters represent hints. These are integer values which represent
the number of items before and after
the requestIndex to retrieve. Again, these are only hints and you can return as many items before and after
the request index as you please.
Here’s how I implemented
the itemsFromIndex method:
itemsFromIndex: function (requestIndex, countBefore, countAfter) {
var that = this;
return new WinJS.Promise(function (complete, error) {
that.getCount().then(function (count) {
if (requestIndex >= count) {
return WinJS.Promise.wrapError(new WinJS.ErrorFromName(WinJS.UI.FetchError.doesNotExist));
}
var startIndex = Math.max(0, requestIndex - countBefore);
var endIndex = Math.min(count, requestIndex + countAfter + 1);
that._getObjectStore().then(function (store) {
var index = 0;
var items = [];
var req = store.openCursor();
req.onerror = that._error;
req.onsuccess = function (evt) {
var cursor = evt.target.result;
if (index < startIndex) {
index = startIndex;
cursor.advance(startIndex);
return;
}
if (cursor && index < endIndex) {
index++;
items.push({
key: cursor.value[store.keyPath].toString(),
data: cursor.value
});
cursor.continue();
return;
}
results = {
items: items,
offset: requestIndex - startIndex,
totalCount: count
};
complete(results);
};
});
});
});
}
In
the code above, a cursor is used to iterate through
the objects in an object store. You fetch
the next item in
the cursor by calling either
the cursor.continue() or cursor.advance() method.
The continue() method moves forward by one object and
the advance() method moves forward a specified number of objects.
Each time you call continue() or advance(),
the success event is raised again. If
the cursor is null then you know that you have reached
the end of
the cursor and you can return
the results.
Some things to be careful about here. First,
the return value from
the itemsFromIndex() method must implement
the IFetchResult interface. In particular, you must return an object which has an items, offset, and totalCount property.
Second, each item in
the items array must implement
the IListItem interface. Each item should have a key and a data property.
Implementing
the insertAtEnd() Method
When creating
the IndexedDbDataSource, I wanted to go beyond creating a simple read-only data source and support inserting and deleting objects. If you want to support adding new items with your data source then you need to implement
the insertAtEnd() method.
Here’s how I implemented
the insertAtEnd() method for
the IndexedDbDataSource:
insertAtEnd:function(unused, data) {
var that = this;
return new WinJS.Promise(function (complete, error) {
that._getObjectStore("readwrite").done(function(store) {
var reqAdd = store.add(data);
reqAdd.onerror = that._error;
reqAdd.onsuccess = function (evt) {
var reqGet = store.get(evt.target.result);
reqGet.onerror = that._error;
reqGet.onsuccess = function (evt) {
var newItem = {
key:evt.target.result[store.keyPath].toString(),
data:evt.target.result
}
complete(newItem);
};
};
});
});
}
When implementing
the insertAtEnd() method, you need to be careful to return an object which implements
the IItem interface. In particular, you should return an object that has a key and a data property.
The key must be a string and it uniquely represents
the new item added to
the data source.
The value of
the data property represents
the new item itself.
Implementing
the remove() Method
Finally, you use
the remove() method to remove an item from
the data source. You call
the remove() method with
the key of
the item which you want to remove.
Implementing
the remove() method in
the case of
the IndexedDbDataSource was a little tricky.
The problem is that an IndexedDB object store uses an integer key and
the VirtualizedDataSource requires a string key. For that reason, I needed to override
the remove() method in
the derived IndexedDbDataSource class like this:
var IndexedDbDataSource = WinJS.Class.derive(
WinJS.UI.VirtualizedDataSource,
function (dbName, dbVersion, objectStoreName, upgrade, error) {
this._adapter = new IndexedDbDataAdapter(dbName, dbVersion, objectStoreName, upgrade, error);
this._baseDataSourceConstructor(this._adapter);
},
{
nuke: function () {
this._adapter.nuke();
},
remove: function (key) {
this._adapter.removeInternal(key);
}
}
);
When you call remove(), you end up calling a method of
the IndexedDbDataAdapter named removeInternal() . Here’s what
the removeInternal() method looks like:
setNotificationHandler: function (notificationHandler) {
this._notificationHandler = notificationHandler;
},
removeInternal: function(key) {
var that = this;
return new WinJS.Promise(function (complete, error) {
that._getObjectStore("readwrite").done(function (store) {
var reqDelete = store.delete (key);
reqDelete.onerror = that._error;
reqDelete.onsuccess = function (evt) {
that._notificationHandler.removed(key.toString());
complete();
};
});
});
}
The removeInternal() method calls
the IndexedDB delete() method to delete an item from
the object store. If
the item is deleted successfully then
the _notificationHandler.remove() method is called.
Because we are not implementing
the standard IListDataAdapter remove() method, we need to notify
the data source (and
the ListView
control bound to
the data source) that an item has been removed.
The way that you notify
the data source is by calling
the _notificationHandler.remove() method.
Notice that we get
the _notificationHandler in
the code above by implementing another method in
the IListDataAdapter interface:
the setNotificationHandler() method. You can
raise the following types of notifications using
the _notificationHandler:
· beginNotifications()
· changed()
· endNotifications()
· inserted()
· invalidateAll()
· moved()
· removed()
· reload()
These methods are all part of
the IListDataNotificationHandler interface in
the WinJS library.
Implementing
the nuke() Method
I wanted to implement a method which would remove all of
the items from an object store. Therefore, I created a method named nuke() which calls
the IndexedDB clear() method:
nuke: function () {
var that = this;
return new WinJS.Promise(function (complete, error) {
that._getObjectStore("readwrite").done(function (store) {
var reqClear = store.clear();
reqClear.onerror = that._error;
reqClear.onsuccess = function (evt) {
that._notificationHandler.reload();
complete();
};
});
});
}
Notice that
the nuke() method calls
the _notificationHandler.reload() method to notify
the ListView to reload all of
the items from its data source. Because we are implementing a custom method here, we need to use
the _notificationHandler to send an update.
Using
the IndexedDbDataSource
To illustrate how you can use
the IndexedDbDataSource, I created a simple task list app. You can add new tasks, delete existing tasks, and nuke all of
the tasks.
You delete an item by selecting an item (swipe or right-click) and clicking
the Delete button.
Here’s
the HTML page which contains
the ListView,
the form for adding new tasks, and
the buttons for deleting and nuking tasks:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DataSources</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
<!-- DataSources references -->
<link href="indexedDb.css" rel="stylesheet" />
<script type="text/javascript" src="indexedDbDataSource.js"></script>
<script src="indexedDb.js"></script>
</head>
<body>
<div id="tmplTask" data-win-control="WinJS.Binding.Template">
<div class="taskItem">
Id: <span data-win-bind="innerText:id"></span>
<br /><br />
Name: <span data-win-bind="innerText:name"></span>
</div>
</div>
<div id="lvTasks"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemTemplate: select('#tmplTask'),
selectionMode: 'single'
}"></div>
<form id="frmAdd">
<fieldset>
<legend>Add Task</legend>
<label>New Task</label>
<input id="inputTaskName" required />
<button>Add</button>
</fieldset>
</form>
<button id="btnNuke">Nuke</button>
<button id="btnDelete">Delete</button>
</body>
</html>
And here is
the JavaScript code for
the TaskList app:
/// <reference path="//Microsoft.WinJS.1.0.RC/js/base.js" />
/// <reference path="//Microsoft.WinJS.1.0.RC/js/ui.js" />
function init() {
WinJS.UI.processAll().done(function () {
var lvTasks = document.getElementById("lvTasks").winControl;
// Bind
the ListView to its data source
var tasksDataSource = new DataSources.IndexedDbDataSource("TasksDB", 1, "tasks", upgrade);
lvTasks.itemDataSource = tasksDataSource;
// Wire-up Add, Delete, Nuke buttons
document.getElementById("frmAdd").addEventListener("submit", function (evt) {
evt.preventDefault();
tasksDataSource.beginEdits();
tasksDataSource.insertAtEnd(null, {
name: document.getElementById("inputTaskName").value
}).done(function (newItem) {
tasksDataSource.endEdits();
document.getElementById("frmAdd").reset();
lvTasks.ensureVisible(newItem.index);
});
});
document.getElementById("btnDelete").addEventListener("click", function () {
if (lvTasks.selection.count() == 1) {
lvTasks.selection.getItems().done(function (items) {
tasksDataSource.remove(items[0].data.id);
});
}
});
document.getElementById("btnNuke").addEventListener("click", function () {
tasksDataSource.nuke();
});
// This method is called to initialize
the IndexedDb database
function upgrade(evt) {
var newDB = evt.target.result;
newDB.createObjectStore("tasks", { keyPath: "id", autoIncrement: true });
}
});
}
document.addEventListener("DOMContentLoaded", init);
The IndexedDbDataSource is created and bound to
the ListView
control with
the following two lines of code:
var tasksDataSource = new DataSources.IndexedDbDataSource("TasksDB", 1, "tasks", upgrade);
lvTasks.itemDataSource = tasksDataSource;
The IndexedDbDataSource is created with four parameters:
the name of
the database to create,
the version of
the database to create,
the name of
the object store to create, and a function which contains code to initialize
the new database.
The upgrade function creates a new object store named tasks with an auto-increment property named id:
function upgrade(evt) {
var newDB = evt.target.result;
newDB.createObjectStore("tasks", { keyPath: "id", autoIncrement: true });
}
The Complete Code for
the IndexedDbDataSource
Here’s
the complete code for
the IndexedDbDataSource:
(function () {
/************************************************
*
The IndexedDBDataAdapter enables you to work
* with a HTML5 IndexedDB database.
*************************************************/
var IndexedDbDataAdapter = WinJS.Class.define(
function (dbName, dbVersion, objectStoreName, upgrade, error) {
this._dbName = dbName; // database name
this._dbVersion = dbVersion; // database version
this._objectStoreName = objectStoreName; // object store name
this._upgrade = upgrade; // database upgrade script
this._error = error || function (evt) { console.log(evt.message); };
},
{
/*******************************************
* IListDataAdapter Interface Methods
********************************************/
getCount: function () {
var that = this;
return new WinJS.Promise(function (complete, error) {
that._getObjectStore().then(function (store) {
var reqCount = store.count();
reqCount.onerror = that._error;
reqCount.onsuccess = function (evt) {
complete(evt.target.result);
};
});
});
},
itemsFromIndex: function (requestIndex, countBefore, countAfter) {
var that = this;
return new WinJS.Promise(function (complete, error) {
that.getCount().then(function (count) {
if (requestIndex >= count) {
return WinJS.Promise.wrapError(new WinJS.ErrorFromName(WinJS.UI.FetchError.doesNotExist));
}
var startIndex = Math.max(0, requestIndex - countBefore);
var endIndex = Math.min(count, requestIndex + countAfter + 1);
that._getObjectStore().then(function (store) {
var index = 0;
var items = [];
var req = store.openCursor();
req.onerror = that._error;
req.onsuccess = function (evt) {
var cursor = evt.target.result;
if (index < startIndex) {
index = startIndex;
cursor.advance(startIndex);
return;
}
if (cursor && index < endIndex) {
index++;
items.push({
key: cursor.value[store.keyPath].toString(),
data: cursor.value
});
cursor.continue();
return;
}
results = {
items: items,
offset: requestIndex - startIndex,
totalCount: count
};
complete(results);
};
});
});
});
},
insertAtEnd:function(unused, data) {
var that = this;
return new WinJS.Promise(function (complete, error) {
that._getObjectStore("readwrite").done(function(store) {
var reqAdd = store.add(data);
reqAdd.onerror = that._error;
reqAdd.onsuccess = function (evt) {
var reqGet = store.get(evt.target.result);
reqGet.onerror = that._error;
reqGet.onsuccess = function (evt) {
var newItem = {
key:evt.target.result[store.keyPath].toString(),
data:evt.target.result
}
complete(newItem);
};
};
});
});
},
setNotificationHandler: function (notificationHandler) {
this._notificationHandler = notificationHandler;
},
/*****************************************
* IndexedDbDataSource Method
******************************************/
removeInternal: function(key) {
var that = this;
return new WinJS.Promise(function (complete, error) {
that._getObjectStore("readwrite").done(function (store) {
var reqDelete = store.delete (key);
reqDelete.onerror = that._error;
reqDelete.onsuccess = function (evt) {
that._notificationHandler.removed(key.toString());
complete();
};
});
});
},
nuke: function () {
var that = this;
return new WinJS.Promise(function (complete, error) {
that._getObjectStore("readwrite").done(function (store) {
var reqClear = store.clear();
reqClear.onerror = that._error;
reqClear.onsuccess = function (evt) {
that._notificationHandler.reload();
complete();
};
});
});
},
/*******************************************
* Private Methods
********************************************/
_ensureDbOpen: function () {
var that = this;
// Try to get cached Db
if (that._cachedDb) {
return WinJS.Promise.wrap(that._cachedDb);
}
// Otherwise, open
the database
return new WinJS.Promise(function (complete, error, progress) {
var reqOpen = window.indexedDB.open(that._dbName, that._dbVersion);
reqOpen.onerror = function (evt) {
error();
};
reqOpen.onupgradeneeded = function (evt) {
that._upgrade(evt);
that._notificationHandler.invalidateAll();
};
reqOpen.onsuccess = function () {
that._cachedDb = reqOpen.result;
complete(that._cachedDb);
};
});
},
_getObjectStore: function (type) {
type = type || "readonly";
var that = this;
return new WinJS.Promise(function (complete, error) {
that._ensureDbOpen().then(function (db) {
var transaction = db.transaction(that._objectStoreName, type);
complete(transaction.objectStore(that._objectStoreName));
});
});
},
_get: function (key) {
return new WinJS.Promise(function (complete, error) {
that._getObjectStore().done(function (store) {
var reqGet = store.get(key);
reqGet.onerror = that._error;
reqGet.onsuccess = function (item) {
complete(item);
};
});
});
}
}
);
var IndexedDbDataSource = WinJS.Class.derive(
WinJS.UI.VirtualizedDataSource,
function (dbName, dbVersion, objectStoreName, upgrade, error) {
this._adapter = new IndexedDbDataAdapter(dbName, dbVersion, objectStoreName, upgrade, error);
this._baseDataSourceConstructor(this._adapter);
},
{
nuke: function () {
this._adapter.nuke();
},
remove: function (key) {
this._adapter.removeInternal(key);
}
}
);
WinJS.Namespace.define("DataSources", {
IndexedDbDataSource: IndexedDbDataSource
});
})();
Summary
In this blog post, I provided an overview of how you can create a new data source which you can use with
the WinJS library. I described how you can create an IndexedDbDataSource which you can use to bind a ListView
control to an IndexedDB database.
While describing how you can create a custom data source, I explained how you can implement
the IListDataAdapter interface. You also learned how to
raise notifications — such as a removed or invalidateAll notification — by taking advantage of
the methods of
the IListDataNotificationHandler interface.
