• HTML5 App实战(5):待办(TODO)


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

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

    1

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

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

    2

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

    3

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

    1

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

    2

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

    3

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

    这里有我们做好的,

    你也可以直接编辑

    也可以在线运行

  • 相关阅读:
    Design Thinking 设计思维
    SELECT小技巧
    网站架构
    代码生成器重构
    如何监控你的鼠标
    Asp.net超轻异步框架
    跨线程修改UI控件
    NPOI组件
    浅析Linux计算机工作机制
    VS2010单元测试
  • 原文地址:https://www.cnblogs.com/zhangyunlin/p/6167369.html
Copyright © 2020-2023  润新知