Building a Todo app for Firefox OS, part 1

This is the first part out of two in a tutorial series where we will build a Todo app for Firefox OS from scratch. I assume you have some understanding of HTML5, CSS3, JavaScript, jQuery/Zepto, and Backbone.js. In this part we will handcraft a properly structured and semantic UI of a Todo app using best practices for designing UIs for mobile.

Step 2

Step 3

Create a blank project fos-todo-app using `volo create` command.

volo create fos-todo-app

This will create a folder fos-todo-app and copy required volo project files from GitHub.

Remember we will work only with the files in fos-todo-app/www directory. If you have never worked with volo before, [Streamline your Process with Volo](http://net.tutsplus.com/tutorials/javascript-ajax/streamline-your-process-with-volo/) is a recommended read.

Step 4

Make sure you have the latest stable version of Firefox installed. Then [install the Firefox OS simulator add-on](https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/). At the end of this article we will test UI of our app in this simulator.

Step 5

Get the [MozTT font](https://github.com/mozilla-b2g/moztt/tree/master/MozTT) and install it. MozTT is the font used in Firefox OS. It’s an optional step but it’s better to install this font on your system so you can get consistent look and feel in the Firefox OS Simulator and the real phone.

Todo View

The first UI that we will build will show a title in the header, Add/Delete buttons in the footer and a todo list. This view will be used for viewing, editing, mark as complete, and deleting tasks.

Add role="application" attribute to the `body` element and write following HTML for the Todo View.

Each view is assigned a role="region". Within the view, you can have header, footer and any container element having the view-content class which will contain the contents of the view.

In the above view’s content, we have ul[role=list] which contains tasks entered by user. For testing purposes, I added two dummy tasks so you can understand each list item’s (`li[role=listitem]`) structure. Within each list item we have a label element containing a <input type="checkbox"> and a span element containing the text of task. The second element in the list item contains a <input type="text"> element which is initially hidden using attribute aria-hidden="true". Finally the third element is .btn.edit (edit button).

The purpose of placing the label in the list item is to display each task’s text and input[type=text] (which is initially hidden) will be used to edit that text. Any task can enter edit mode when user tap on .btn.edit (edit button). Similarly, tasks are “marked as completed” when user tap on label.

In the footer we have menu[role=toolbar] containing Add/Delete buttons. Later using CSS for these buttons, we will display a svg icon in background and hide an inner span in it.

Add View

The second and final view in our app will be used to add tasks to the todo list.

In this view we have a textbox for entering a task’s text, and a insert contact link will be used to add the contact number using Web Activities. Here’s the HTML for Add View.

Utility Styles

Animations

Following are a few animation effects that we will use to animate our views. Although we will use Zepto.js which on run-time generates CSS3 animations using JavaScript, I prefer to write my own animations using CSS3 and make use of it by applying/removing CSS classes on DOM elements.

Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto. ‐ zeptojs.com

Currently I haven’t added an app icon but don’t worry about it. Firefox OS adds a default app icon if it doesn’t find one mentioned in the manifest file. Now open the simulator tab from Tools > Web Developer > Firefox OS Simulator. Then click Add Directory button and select the manifest file from our app directory. This will add our app in the simulator.

End of part 1

Now you have gotten started with the Todo app and have gotten going with a few easy steps. In next part we will add life in our app using JavaScript (Backbone/Zepto). We will create Todo model, collection, and views and for the sake of simplicity, we will only store our todo collection in IndexedDB. We will also make use of Web Activities to inject contact number in text of todo task.

the reason for using nodejs is beyond the fact that it is a javascript engine. NodeJS has a vibrant ecosystem of libraries and tools (npmjs.org) that can make you more productive. The volo package manager used in this tutorial is built on top of nodejs/npm and thats why it is used in this article. If rhino or a standalone spidermonkey supported the npm libraries, then you could use that. Its not that Mozilla javascript engines don’t meet the need of executing js like node, its just that node has a lot of libraries and a very good ecosystem and Mozilla embraced that in some demos and tools. Node is great and so is spidermonkey.

Looks like there is confusion. I didn’t used Node.js in this tutorial nor I will use in future part. The only thing I used that require node.js is volo which is also a tool from Mozilla’s employee (James Burke). He’s the same guy who developed require.js :)

It depends on how you set it up. If you have a local or remote web server set up running PHP, it will run that within your app just like any web site. It won’t run PHP directly in itself, since the platform/app environment just supports HTML locally.

Basically, like this blog. You could put in https://hacks.mozilla.org/ and it would run this web site within an app, but you couldn’t take the source code from here and run it directly.

However, IF you can’t point to a URL on a server with a .php ending in the Firefox OS Simulator, then that’s a bug: please file that as an issue.

About the Authors

I am a JavaScripter and I love working on single page apps, Firefox OS, PhoneGap based mobile apps, and Node.js/Express.js backend.
Currently I am working for PLUMgrid (SDN related startup) and I am working on HTML5 based GUI of Network Operating System.
Other than that I am Mozillian and in my free time I promote Mozilla products.

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City.
He regularly also blogs at http://robertnyman.com and loves to travel and meet people.