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安装包"。
这里有我们做好的,
你也可以直接编辑
也可以在线运行
分享到:
相关推荐
ToDo 待办事宜的app
all-app是一个待办事项列表,也称为待办事项列表,它是一个非常简单的工具,但是它可以完全改变您管理时间的方式,并使您变得更有生产力。 *注意:此应用是待办事项清单的示例,它不在播放中,仅用于学习目的。特征 ...
ToDo_APP:待办事项列表Java和HTML
使用 Flask 和 Python 的待办事项列表该存储库包含待办事项列表的实现并使用以下技术:Python/Flask、HTML、JS、CSS/Bootstrap、SQLite 和 SQLAlchemy。执行要运行该项目,只需安装requirements.txt文件中包含的依赖...
devEd-todo:待办事项APP JS
Todo:待办事项清单
todo_list 记录待办事宜 todo_list 记录待办事宜 todo_list 记录待办事宜
微信小程序demo:todo:wx.setStorageSync(KEY,DATA) 方法存放数据(源代码+截图)微信小程序demo:todo:wx.setStorageSync(KEY,DATA) 方法存放数据(源代码+截图)微信小程序demo:todo:wx.setStorageSync(KEY,DATA) ...
todo:待办事项
待办事项清单应用 一个Web应用程序,允许您添加,删除和编辑项目到项目列表。 我学到的是 使用基于功能的REACT组件(React挂钩) 使用Firebase进行托管 使用Material UI进行设计 使用最新的es6功能 APP托管在: :/...
TODO:待办事项应用
微信小程序完整demo:Todo(源代码+截图)微信小程序完整demo:Todo(源代码+截图)微信小程序完整demo:Todo(源代码+截图)微信小程序完整demo:Todo(源代码+截图)微信小程序完整demo:Todo(源代码+截图)微信小程序完整...
Simple Todo是一个Android应用程序,它允许构建待办事项列表和基本的待办事项管理功能,包括添加新项目,编辑和删除现有项目。 提交人: Manchit Gupta 花费时间:总共花费8个小时 用户故事 完成以下必需的功能: ...
vue-todo-app:待办事项列表应用程序。用Vue.js和顺风创建
目录概述挑战用户应该能够: 根据设备的屏幕尺寸查看应用的最佳布局查看页面上所有交互元素的悬停状态将新的待办事项添加到列表中将待办事项标记为已完成从列表中删除待办事项按所有/活动/完整待办事项过滤清除所有...
待办事项列表管理器一个Web应用程序,您可以在其中创建和管理待办事项列表。 它还具有与朋友协作公共任务列表的功能。 检查应用程序。截屏建于Angular 5和Bootstrap 4-前端Node.js和Express.js-后端MongoDB-数据库套...
待办事项 待办事项列表应用程序: “ToDo 是你需要完成的任务或你想做的事情的列表”。 列出清单的最重要原因之一是它将帮助我们保持井井有条。 当我们将所有任务写在一个列表中时,它们似乎更易于管理。 当我们完成...
todo-api:待办事项管理API
Todo-app_使用React Native的简单待办事项.zip