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

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

这里有我们做好的，

你也可以直接编辑

也可以在线运行