Project Log – TimeTrack: Part One

For a while now I have been seeking a project that I can begin development of that will allow me to put to use HTML5 alongside some of the rather interesting JavaScript libraries/frameworks out there. My inspiration came from one of my daily grinds at work, time logging.

I’m not sure how many of you out there have to log your hours at work, but for those who do you’ll know the importance of having something that is easy to use and is responsive. Unfortunately the software I use for time logging at my place of work is anything but…

So, with my inspiration in hand I went searching for some nifty little gubbinz with which to begin development.. Earlier in the year I read an article (alongside some videos) in a dot NET magazine that uses Backbone and jQuery mobile to build a rather flashy Notes application, remembering how easy and fun jQuery mobile was to use, I thought I would return to it. With jQuery mobile in hand I began my work.

For those unfamiliar with jQuery mobile, it is a JavaScript Framework based on jQuery optimised for mobile/tablets, oh, and it replicates iOS in its design! It has a large number of features that allow the design of “multi-page” websites using nothing but a single HTML file and some tags in the HTML code for jQuery Mobile to pick up on. So here is part one, as always with any project it will cover its initial design, how it will flow and alongside this, obviously, a very brief introduction to jQuery Mobile. First up, we will need a front page, that will include a way to view tasks entered by Day, Week and Month and we will also need a way for a user to add a new task. So using HTML5 and jQueryMobile here is my initial first screen. As you can see below we have an accordion style list to display all the tasks by Day, Week and Month and if expanded will show a table of tasks. The ‘New Task’ button displays the form in the third image. 

Initial Screen

Expanded Menu

New Task Form

So, with those initial two pages let’s break it down.

To achieve this ‘two-page’ design in our HTML we will be making use of the data-role attribute. In a most basic way of explaining this, it tells jQuery Mobile what’s going on at that point with the HTML code associated with this role.  To declare a new page you can then create a new div tag and use the data-role attribute giving it a value of page. The beauty of jQuery Mobile is this ‘new’ page is hidden until we enter some form of transition or call to that page.  So, as shown below we can declare our home page and a new page that will then be our New Task form as seen in the third image above.

<!-- Home Page -->

<div id="home" data-role="page">

      …

</div>

<!-- New Task Form -->

<div id="new-task" data-role="page">

    …

</div>

Now we have our two pages, we can then flesh out the content within each. Let’s concentrate on the home page for the time being. As you can see in the images above there are a number of different things on the home page, these are the header bar, the New Task button and our accordion list containing our table of data. The header is achieved in much the same way, jQuery Mobile internal pages are structured with a header, content and a footer and use the same data-role attribute to determine these.

So, expanding on our Home Page div, inside we have the following code to produce the header:

<div id="name" data-role="header">

    <h1>

        Time Track

    </h1>

<a href="#new-task" data-rel="dialog" data-icon="plus" class="ui-btn-right" data-role="button" data-transition="pop">New Task </a>

</div>

You can see further use of the data-roles for the header itself and the content within. The header uses the header attribute followed by a button that uses the same data role; for the most part these data roles are self-explanatory.

Coming out of the header now, we come into the content section of the home page, again we create a new div with the content data-role, this is primarily a semantic thing and structures the page well (header, content, footer). Inside our content is where we then put the code for our accordion content / tables.

<div data-role="content">

    <div data-role="collapsible-set">

<div data-role="collapsible" data-collapsed="false" data-theme="b"   data-content-theme="c">

            <h3>

                Day</h3>

            <div class="ui-grid-d" style="text-align: center">

                <div class="ui-block-a">

                    <div class="ui-bar ui-bar-d">

                        Task Title

                    </div>

                </div>

                <div class="ui-block-b">

                    <div class="ui-bar ui-bar-d">

                        Task Description

                    </div>

                </div>

                <div class="ui-block-c">

                    <div class="ui-bar ui-bar-d">

                        Date Started

                    </div>

                </div>

                <div class="ui-block-d">

                    <div class="ui-bar ui-bar-d">

                        Date Completed

                    </div>

                </div>

                <div class="ui-block-e">

                    <div class="ui-bar ui-bar-d">

                        Total Time Spent

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

So, let’s now break this down.

Within our content div, we have our ‘collapsible-set’ this is the data-role we use to tell jQuery Mobile we want this to be a collapsible menu. I have chosen to use this as I want to be able to toggle whether I view my tasks by day, week or month. You can then add each of your collapsible items to the set. In the example above I have only displayed the collapsible for Day, but the code is the same for all items in the set.  We then use the data-grid class to define the table (the letters correspond to the number of grids in the table, d in our case is five going up from a).

Then amongst all this code are all the little extras you can see with the classes, the ui-x. These are purely for styling the elements you put onto your page. You can consult the jQuery documentation to see a list of all them, including previews.

Before we skip onto the navigation of internal pages I will briefly talk about our ‘New Task’ form that we will soon reveal how to navigate to. jQuery Mobile being the clever little thing it is, will format our form to look just like a pop-up by creating a simple html form. That’s all there is to it, create our form and jQuery Mobile does the rest!

<div data-role="content">

    <form action="#" method="post">

        <div data-role="fieldcontain">

            <label for="title">

                Title

            </label>

            <input type="text" id="title" name="title" value="">

        </div>

        <div data-role="fieldcontain">

            <label for="body">

                Description</label>

            <textarea id="body" name="body"></textarea>

        </div>

        <button data-icon="check" data-theme="b">

            Save

        </button>

    </form>

</div>

So, we’ve seen the code for the Home Page, seen how we create our multiple pages, seen the ui theming, data-roles etc. All we need to see now is how we link to internal pages! Again, thanks to the functionality of the library, all we need to do to link to internal pages is link to the page id in our html, as I’ll show below. As with the themes of the content, you can also select from a number of page transitions offered by the library, I have chosen pop simply because I like it. But there are a number of other sliding, switching etc. transitions to experiment with!

<a href="#new-task" data-rel="dialog" data-icon="plus" class="ui-btn-right" data-role="button"

    data-transition="pop">New Task

</a>

The #new-task will then navigate to our New Task form:

<!-- New Task Form -->

<div id="new-task" data-role="page">

    …

</div>

So that’s all there is for Part One. Just a simple introduction to the basics of my project, a look into jQuery Mobile and the amazing features it offers to the user, with great simplicity. Next we will be looking into Backbone.js to add some functionality to our form to persist and read our tasks.