Dojo offline初体验-local store实现
国内关注dojo的开发者甚少,而dojox offline更是尤为陌生。本文适合那些尝过google gears离线应用的朋友,dojo offline包装了gears,使开发者更轻便简易地coding。但随着gears api的不断完善,dojo offline尚处于alpha期(本人认为),很多不成熟的地方,希望各位只是尝试,做个test玩玩即可,用于application就显得过于草率。
首先要先下载0.9或以上版本的dojo源码,解压后的文件里含有4个目录dijit,dojo,dojox,util。本人在这里将此4个目录放置dojo-js文件夹中,web app的包结构如下:
dojo-js 内含4个文件
WEB-INF 含有lib 和web.xml,此例中不涉及这些东西,可忽略。
test.html 测试网页,源码如下:
Dojo test
djConfig="parseOnLoad: true">
//dojox storage
var car = {type: "Nissan", color: "white", price: 20000, optional:"air-conditioner, stereo"};
dojox.storage.put("complexKey", car);
var car = dojox.storage.get("complexKey");
if(car){
alert(car.type);
}
//dojox sql
//Create a table
dojox.sql("CREATE TABLE IF NOT EXISTS EMPLOYEE ("
+ "SN VARCHAR(50) NOT NULL, "
+ "name VARCHAR(300) NOT NULL,"
+" card VARCHAR(20) NOT NULL) ");
function submit(){
var sn = dojo.byId("SN");
var name = dojo.byId("name");
var card = dojo.byId("card");
if(sn.value=="" || name.value=="") {
alert("Please enter your SN or name!");
return;
}
//insert data
dojox.sql("INSERT INTO EMPLOYEE (SN, name,card) VALUES (?, ?, ?)",
sn.value, name.value, card.value);
sn.value="";
name.value="";
card.value="";
}
function clearAll(){
var sn = dojo.byId("SN");
var name = dojo.byId("name");
var card = dojo.byId("card");
sn.value="";
name.value="";
card.value="";
dojox.sql("DELETE FROM EMPLOYEE");
}
function show(){
var results = dojox.sql("SELECT SN,name,card FROM EMPLOYEE");
if(results){
for(var i=0;i alert('row '+(i+1)+':'+results[i].SN+'-'+results[i].name+'-'+results[i].card);
}
}
}
解释:
1,local store的实现dojo使用两种方法,一种是使用dojox.storage,另一种则是使用dojox.sql。先介绍一下dojox.storage
//dojox storage
var car = {type: "Nissan", color: "white", price: 20000, optional:"air-conditioner, stereo"};
dojox.storage.put("complexKey", car);
var car = dojox.storage.get("complexKey");
if(car){
alert(car.type);
}
上述代码是将一个对象car放置如dojox.storage里,并从dojox.storage里获得。非常easy
2,dojox.sql的使用要复杂一些,但是相比Gears的sql显然要方便很多。首先要为用户现在访问的网页(即test.html)创建一张表,注意这里的表是处于客户端的。
//dojox sql
//Create a table
dojox.sql("CREATE TABLE IF NOT EXISTS EMPLOYEE ("
+ "SN VARCHAR(50) NOT NULL, "
+ "name VARCHAR(300) NOT NULL,"
+" card VARCHAR(20) NOT NULL) ");
当用户键入sn name card三个输入框并提交时,调用submit(),获得输入的数据并插入刚建好的表中。
function submit(){
var sn = dojo.byId("SN");
var name = dojo.byId("name");
var card = dojo.byId("card");
if(sn.value=="" || name.value=="") {
alert("Please enter your SN or name!");
return;
}
//insert data
dojox.sql("INSERT INTO EMPLOYEE (SN, name,card) VALUES (?, ?, ?)",
sn.value, name.value, card.value);
sn.value="";
name.value="";
card.value="";
}
3,显示插入的数据。很简单,见代码:
function show(){
var results = dojox.sql("SELECT SN,name,card FROM EMPLOYEE");
if(results){
for(var i=0;i alert('row '+(i+1)+':'+results[i].SN+'-'+results[i].name+'-'+results[i].card);
}
}
}
这里需要注意的是 返回的result是一个对象数组,数组里的对象是一行数据。results[i]表示第i+1行数据。
呵呵,各位是不是觉得比gears的纯手工开发要清爽很多,仿佛从手工业时期进入了工业时期。接下来,本人还会介绍dojo offline如何实现离线访问和在线同步。wait for minutes and take coffee.
国内关注dojo的开发者甚少,而dojox offline更是尤为陌生。本文适合那些尝过google gears离线应用的朋友,dojo offline包装了gears,使开发者更轻便简易地coding。但随着gears api的不断完善,dojo offline尚处于alpha期(本人认为),很多不成熟的地方,希望各位只是尝试,做个test玩玩即可,用于application就显得过于草率。
首先要先下载0.9或以上版本的dojo源码,解压后的文件里含有4个目录dijit,dojo,dojox,util。本人在这里将此4个目录放置dojo-js文件夹中,web app的包结构如下:
dojo-js 内含4个文件
WEB-INF 含有lib 和web.xml,此例中不涉及这些东西,可忽略。
test.html 测试网页,源码如下:
Dojo test
djConfig="parseOnLoad: true">
//dojox storage
var car = {type: "Nissan", color: "white", price: 20000, optional:"air-conditioner, stereo"};
dojox.storage.put("complexKey", car);
var car = dojox.storage.get("complexKey");
if(car){
alert(car.type);
}
//dojox sql
//Create a table
dojox.sql("CREATE TABLE IF NOT EXISTS EMPLOYEE ("
+ "SN VARCHAR(50) NOT NULL, "
+ "name VARCHAR(300) NOT NULL,"
+" card VARCHAR(20) NOT NULL) ");
function submit(){
var sn = dojo.byId("SN");
var name = dojo.byId("name");
var card = dojo.byId("card");
if(sn.value=="" || name.value=="") {
alert("Please enter your SN or name!");
return;
}
//insert data
dojox.sql("INSERT INTO EMPLOYEE (SN, name,card) VALUES (?, ?, ?)",
sn.value, name.value, card.value);
sn.value="";
name.value="";
card.value="";
}
function clearAll(){
var sn = dojo.byId("SN");
var name = dojo.byId("name");
var card = dojo.byId("card");
sn.value="";
name.value="";
card.value="";
dojox.sql("DELETE FROM EMPLOYEE");
}
function show(){
var results = dojox.sql("SELECT SN,name,card FROM EMPLOYEE");
if(results){
for(var i=0;i alert('row '+(i+1)+':'+results[i].SN+'-'+results[i].name+'-'+results[i].card);
}
}
}
SN: | |
name: | |
card: |
解释:
1,local store的实现dojo使用两种方法,一种是使用dojox.storage,另一种则是使用dojox.sql。先介绍一下dojox.storage
//dojox storage
var car = {type: "Nissan", color: "white", price: 20000, optional:"air-conditioner, stereo"};
dojox.storage.put("complexKey", car);
var car = dojox.storage.get("complexKey");
if(car){
alert(car.type);
}
上述代码是将一个对象car放置如dojox.storage里,并从dojox.storage里获得。非常easy
2,dojox.sql的使用要复杂一些,但是相比Gears的sql显然要方便很多。首先要为用户现在访问的网页(即test.html)创建一张表,注意这里的表是处于客户端的。
//dojox sql
//Create a table
dojox.sql("CREATE TABLE IF NOT EXISTS EMPLOYEE ("
+ "SN VARCHAR(50) NOT NULL, "
+ "name VARCHAR(300) NOT NULL,"
+" card VARCHAR(20) NOT NULL) ");
当用户键入sn name card三个输入框并提交时,调用submit(),获得输入的数据并插入刚建好的表中。
function submit(){
var sn = dojo.byId("SN");
var name = dojo.byId("name");
var card = dojo.byId("card");
if(sn.value=="" || name.value=="") {
alert("Please enter your SN or name!");
return;
}
//insert data
dojox.sql("INSERT INTO EMPLOYEE (SN, name,card) VALUES (?, ?, ?)",
sn.value, name.value, card.value);
sn.value="";
name.value="";
card.value="";
}
3,显示插入的数据。很简单,见代码:
function show(){
var results = dojox.sql("SELECT SN,name,card FROM EMPLOYEE");
if(results){
for(var i=0;i alert('row '+(i+1)+':'+results[i].SN+'-'+results[i].name+'-'+results[i].card);
}
}
}
这里需要注意的是 返回的result是一个对象数组,数组里的对象是一行数据。results[i]表示第i+1行数据。
呵呵,各位是不是觉得比gears的纯手工开发要清爽很多,仿佛从手工业时期进入了工业时期。接下来,本人还会介绍dojo offline如何实现离线访问和在线同步。wait for minutes and take coffee.
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/9929735/viewspace-202049/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/9929735/viewspace-202049/