TODO是一个很常用的应用程序,这里用“画app吧”开发一个简单而实用的TODO应用程序吧:
1.用支持HTML5的浏览器(Chrome/Firefox/Safari/IE9+)打开http://www.drawapp8.com/appedit.php。
选择”新建“创建一个新的app,缺省情况下的设备是iphone5(或者其它设备)。
2.现在我们把设备切换成FirefoxOS的手机。双击设备打开设备的属性对话框,在设备列表中选择firefoxOS的手机。
3.选择“确定”之后,我们就可以看到iphone5变成了FirefoxOS手机了。我们不需要上面的toolbar,把它删除掉。
4.现在我们向窗口上重新放一个toolbar,并在上面放一个单行编辑器和一个按钮。
单行编辑器上的I Want...提示可以在属性对话框中设置。
5.现在我们向窗口上放一个listview,并调整上面的控件如下图。
6.现在我们开始写代码:
在窗口的onOpen事件里写些代码(这些代码其实应该放到独立的js文件,不过代码不多,我们先放在这里吧):
var win = this;
var appInfo = {};
appInfo.todos = [];
appInfo.save = function() {
localStorage.todos = JSON.stringify(this.todos);
return;
}
appInfo.load = function() {
var str = localStorage.todos;
if(str) {
this.todos = JSON.parse(str);
}
return;
}
appInfo.showTodos = function() {
var list = win.findChildByName("ui-list-view", true);
var srcNormal = this.srcNormal;
var srcHigh = this.srcHigh;
var srcDone = this.srcDone;
var srcDelete = this.srcDelete;
var data = {children:[]};
for(var i = 0; i < this.todos.length; i++) {
var todo = this.todos[i];
var item = {children:[]};
item.userData = todo.id;
if(todo.priority) {
item.children.push({image: srcHigh});
}
else {
item.children.push({image: srcNormal});
}
item.children.push({text: todo.content});
var subItem = {children:[]};
if(todo.done) {
subItem.children.push({image: srcDelete});
}
else {
subItem.children.push({image: srcDone});
}
item.children.push(subItem);
data.children.push(item);
}
list.bindData(data, "default", true);
return;
}
appInfo.addTodo = function(text) {
var todo = {};
todo.time = (new Date()).getTime();
todo.id = todo.time;
todo.priority = 0;
todo.done = 0;
todo.content = text;
this.todos.insert(0, todo);
this.save();
var list = win.findChildByName("ui-list-view", true);
var child = list.dupTemplateChild();
child.setValueOf("ui-image-priority", this.srcNormal);
child.setValueOf("ui-image-button", this.srcDone);
child.setValueOf("ui-label", text);
child.setUserData(todo.id);
child.y = -child.h;
list.addChild(child, 0);
list.relayoutChildren("default");
return todo;
}
appInfo.findTodo = function(id) {
for(var i = 0; i < this.todos.length; i++) {
var todo = this.todos[i];
if(todo.id === id) {
return todo;
}
}
return null;
}
appInfo.triggerPriorityMark = function(id) {
var todo = this.findTodo(id);
if(todo) {
todo.priority = !todo.priority;
}
this.save();
this.showTodos();
return todo;
}
appInfo.makeTodoDone = function(id) {
var todo = this.findTodo(id);
if(todo) {
todo.done = (new Date()).getTime();
this.todos.remove(todo);
this.todos.push(todo);
}
this.save();
this.showTodos();
return todo;
}
appInfo.removeTodo = function(id) {
var todo = this.findTodo(id);
if(todo) {
this.todos.remove(todo);
}
this.save();
this.showTodos();
return todo;
}
appInfo.init = function() {
var list = win.findChildByName("ui-list-view", true);
var template = list.getTemplateChild();
var image = template.findChildByName("ui-image-priority", true);
var srcNormal = image.getImageSrc();
var srcHigh = srcNormal.replace(/normal.png/, "hign.png");
srcNormal = srcHigh.replace(/hign.png/, "normal.png");
image = template.findChildByName("ui-image-button", true);
var srcDone = image.getImageSrc();
var srcDelete = srcDone.replace(/done.png/, "delete.png");
srcDone = srcDelete.replace(/delete.png/, "done.png");
this.srcDone = srcDone;
this.srcDelete = srcDelete;
this.srcNormal = srcNormal;
this.srcHigh = srcHigh;
this.load();
this.showTodos();
return;
}
win.appInfo = appInfo;
appInfo.init();
为单行编辑器的onChanged 事件编写代码,这里增加一条TODO事项。
var win = this.getWindow();
var appInfo = win.appInfo;
var edit = win.findChildByName("ui-edit", true);
var text = edit.getText();
if(text) {
appInfo.addTodo(text);
}
edit.setText("");
为“增加”按钮编写事件处理代码(和上面的代码是一样的,都是增加一条TODO事项):
var win = this.getWindow();
var appInfo = win.appInfo;
var edit = win.findChildByName("ui-edit", true);
var text = edit.getText();
if(text) {
appInfo.addTodo(text);
}
edit.setText("");
为设置优先级的按钮编写事件处理代码:
var win = this.getWindow();
var appInfo = win.appInfo;
var id = this.getParent("ui-list-item").userData;
var todo = appInfo.triggerPriorityMark(id);
为”完成/删除“按钮编写事件处理代码:
var win = this.getWindow();
var appInfo = win.appInfo;
var id = this.getParent("ui-list-item").userData;
var todo = appInfo.findTodo(id);
if(todo.done) {
appInfo.removeTodo(id);
}
else {
appInfo.makeTodoDone(id);
}
7.差不多了,我们点击设备上的"预览"按钮,看看实际的运行效果。
8.我们通过菜单"文件“/”在设备上预览“生成一个URL,在实际的设备上看看效果如何。
9.最后当然是生成安装包了,菜单“云编译”/"编译FirefoxOS安装包"。
这里有我们做好的,
你也可以直接编辑
也可以在线运行