HTML5 App实战(五)：待办(TODO)

HTML5 App实战(5)：待办(TODO)

TODO是一个很常用的应用程序，这里用“画app吧”开发一个简单而实用的TODO应用程序吧:

1.用支持HTML5的浏览器(Chrome/Firefox/Safari/IE9+)打开http://www.drawapp8.com/appedit.php。

选择”新建“创建一个新的app，缺省情况下的设备是iphone5（或者其它设备）。

2.现在我们把设备切换成FirefoxOS的手机。双击设备打开设备的属性对话框，在设备列表中选择firefoxOS的手机。

HTML5 App实战(五)：待办(TODO)

3.选择“确定”之后，我们就可以看到iphone5变成了FirefoxOS手机了。我们不需要上面的toolbar，把它删除掉。

HTML5 App实战(五)：待办(TODO)

4.现在我们向窗口上重新放一个toolbar，并在上面放一个单行编辑器和一个按钮。

HTML5 App实战(五)：待办(TODO)

单行编辑器上的I Want...提示可以在属性对话框中设置。

HTML5 App实战(五)：待办(TODO)

5.现在我们向窗口上放一个listview，并调整上面的控件如下图。

HTML5 App实战(五)：待办(TODO)

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安装包"。

这里有我们做好的，

你也可以直接编辑

也可以在线运行

HTML5 App实战(五)：待办(TODO)

相关推荐