JWorld@TW the best professional Java site in Taiwan
      註冊 | 登入 | 全文檢索 | 排行榜  

» JWorld@TW » Web Design 版  

按列印兼容模式列印這個話題 列印話題    把這個話題寄給朋友 寄給朋友    訂閱主題
reply to postflat modego to previous topicgo to next topic
本主題所含的標籤
作者 HTML5Rocks - 使用HTML5 WebDatabases建立待辦清單
kentyeh





發文: 647
積分: 6
於 2010-06-25 19:21 user profilesend a private message to userreply to postreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
翻譯自A Simple TODO list using HTML5 WebDatabases
導論
Web Databases是HTML5新加入的,Web 資料庫存在於用戶端的瀏覽器內,讓新品種的WEB應用程式具有豐富的查詢能力並結合在線與離線的能力
範例程式展示如何建立一個非常簡單的待辦清單管理器,高度展示出HTML5的某些功能。

先決條件
本範例使用一個namespace封裝資料庫邏輯。
1
2
var html5rocks = {};
html5rocks.webdb = {};


非同步與交易
大多數的情況下,您所使用的WEB資料庫支援示同步API,示同步API是一種non-blocking系統,回傳資料無決自返回值中取得,而是透過callback函式傳遞資料。
HTML以交易方式支援WEB資料庫,SQL Statemnet無法在交易外執行,有兩種交易型態:讀/寫交易(transaction()))與唯讀交易(readTransaction()),必須注意的是,讀/寫交易將鎖定整個資料庫。

步驟1.開立資料庫
存取資料前必先開立資料庫,您需要定義資料庫的名稱、版本、描述與大小
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html5rocks.webdb.db = null;
 
html5rocks.webdb.open = function() {
  var dbSize = 5 * 1024 * 1024; // 5MB
  html5rocks.webdb.db = openDatabase('Todo', '1.0', 'todo manager', dbSize);
}
 
html5rocks.webdb.onError = function(tx, e) {
  alert('Something unexpected happened: ' + e.message );
}
 
html5rocks.webdb.onSuccess = function(tx, r) {
  // re-render all the data
  html5rocks.webdb.getAllTodoItems(tx, r);
}

步驟2.建立Table
您可以在transaction內使用CREATE TABLE SQL語法建立Table
我們定義了一個函式在body onload事件時,如果 todo Table尚未建立,則建立包含3個欄位的這個Table
*ID - 漸增連續序號欄位
*todo - 待辦事項文字內容
*added_on - 待辦事項建立時間
1
2
3
4
5
6
html5rocks.webdb.createTable = function() {
html5rocks.webdb.db.transaction(function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS ' + 
              'todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)', []);
  });
}


步驟3.新增資料到Table
我們建立中待辦事項清單管理器最重要的事就是新增待辦事項到資料庫。
建立一個transaction並在此交易內執行一個INSERT到todo Table中。
executeSql使用數個參數執行SQL並將該參數值關聯到此查詢。
1
2
3
4
5
6
7
8
html5rocks.webdb.addTodo = function(todoText) {
  html5rocks.webdb.db.transaction(function(tx){
    tx.executeSql('INSERT INTO todo(todo, added_on) VALUES (?,?)', 
        [todoText, addedOn],
        html5rocks.webdb.onSuccess,
        html5rocks.webdb.onError);
    });
}


步驟4.從Table選出資料
資料庫內已有資料,您只需要一個取回資料的函式。在Chrome,WEB資料庫使用標準的SQLite SELECT 進行查詢
1
2
3
4
5
6
html5rocks.webdb.getAllTodoItems = function(renderFunc) {
  html5rocks.webdb.db.transaction(function(tx) {
    tx.executeSql('SELECT * FROM todo', [], renderFunc, 
        html5rocks.webdb.onError);
  });
}
請注意,範例內的命令都是非同步方式,也就是無法立即由transaction或是executeSql呼叫取得資料,而是透過success callback函式(在此為renderFunc)取得。

步驟4a.呈現Table資料
一旦由Table取得資料,將會呼叫loadTodoItems方法。
onSuccess callback 接受兩個參數,第一個是查詢的transaction,第二個是Resuset,可輕易在資料間移動
1
2
3
4
5
6
7
8
9
10
11
12
13
function loadTodoItems(tx, rs) {
  var rowOutput = "";
  for (var i=0; i < rs.rows.length; i++) {
    rowOutput += renderTodo(rs.rows.item(i));
  }
  var todoItems = document.getElementById('todoItems');
  todoItems.innerHTML = rowOutput;
}
 
function renderTodo(row) {
  return '<li>' + row.ID  +
         '[<a onclick="html5rocks.webdb.deleteTodo(' + row.ID + ');"'>X</a>]</li>';
}
這個方法的效用是將待辦事件清單呈現到一個叫做"todoItems"的DOM Element

步驟5.刪除Table內的資料
1
2
3
4
5
6
html5rocks.webdb.deleteTodo = function(id) {
  html5rocks.webdb.db.transaction(function(tx) {
    tx.executeSql('DELETE FROM todo WHERE ID=?', [id],
        loadTodoItems, html5rocks.webdb.onError);
  });
}


步驟6.組合所有步驟
當頁面載入時,開立資料庫,並建立Table(如果有必要的話),並呈現資料庫內已存在的待辦事項
1
2
3
4
5
6
7
8
9
....
function init() {
  html5rocks.webdb.open();
  html5rocks.webdb.createTable();
  html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
</script>
 
<body onload="init();">

一個取出DOM的資料值,然後叫用html5rocks.webdb.addTodo方法
1
2
3
4
5
6
function addTodo() {
  var todo = document.getElementById('todo');
 
  html5rocks.webdb.addTodo(todo.value);
  todo.value = '';
}


reply to postreply to post
話題樹型展開
人氣 標題 作者 字數 發文時間
1796 HTML5Rocks - 使用HTML5 WebDatabases建立待辦清單 kentyeh 3803 2010-06-25 19:21
» JWorld@TW »  Web Design 版

reply to postflat modego to previous topicgo to next topic
  已讀文章
  新的文章
  被刪除的文章
Jump to the top of page

JWorld@TW 本站商標資訊

Powered by Powerful JuteForum® Version Jute 1.5.8