Adventures in Windows 8: Task Board, Part 1: An HTML5-JavaScript Metro App

I had an opportunity today to demo a Windows 8 Metro app at the Windows 8 Developer event in LA along with my Neudesic colleague Mickey Williams. I’ll describe here in Part 1 the demo app, Task Board, and in subsequent parts we’ll explore how it was built. Task Board is not a fully completed application, but its well along and is the result of only 3 days’ work—a testimony to how quickly you can get proficient at Metro app development. This is also not what I would call a very sophisticated Metro app – in fact it’s my second Metro app ever, and I’m still learning the ropes.

One of the things you notice with tablets today is that while they are really popular, most people use them to consume content (books, video), browse the web, or interact with business-to-consumer apps. There aren’t all that many examples of productivity apps or business apps on tablets yet. This is where I think Windows 8 and Metro have an opportunity to really shine: you’ll be able to get actual work done on Windows 8 tablets.

To have something decent to demo, I decided to create a new Metro application. I chose a task board application, in which you can put “cards on a wall” as an aid in project management. Each card represents a task. A task board is a useful visual aid in project team meetings where you can move cards around and consider "what if's".

Let's take a walk-through of the application.

Tile and Splash Screen

Like all Metro apps, Task Board has a tile in the Start screen. It’s not a “live tile” yet in that the application doesn’t pass any notification information up to the tile, but that’s a behavior that could be added in the future.  

Touching or clicking the tile launches Task Board, which briefly displays this splash screen:

Both the tile and splash screen are simple PNG bitmap images. There are 4 images in all, named logo.png, smalllogo.png, storelogo.png, and splash.png.

Views and Navigation

Task Board has two views (with more to come): Task Board and Rock Wall. Navigation between the views is accomplished with two simple links at top. Down the road you may see this become sections that you can horizontally slide between.

Additional views we’re likely to add in the future might also include an expense view and a workload-per-team member view.

 

Task Board View

Task Board view is the “cards on a wall” surface on which you can drag around cards. Dragging is a good interface for touch devices, but we’ve been careful to make the experience equally good for mouse and keyboard users as well. If you touch or click on a card’s border or task number, it will be selected (indicated with a thick border). If cards overlap, selecting a card brings it topmost.

The cards have fields for title, description, who, hours, and status (to do, in progress, to verify, or completed). The status field controls the card color. A task number is displayed at upper right.

To create a task card, or remove a selected task card, you use the left-side commands on the App Bar. You can bring the App Bar into view by swiping from the top or bottom of the screen; or via the shortcut key Windows + Z. Other App Bar commands include Remove All, which deletes all task cards; and Arrange, which nicely arranges the cards with a smooth animation where they glide into place.

The App Bar is typically shown on the bottom of applications, but I thought it worked better at top in this case. If you find yourself using the App Bar a lot, which you might when heavily editing tasks, you can pin it in place.

Rock Wall View

The Rock Wall is a view of the tasks in terms of size, where tasks are rendered as boulders, rocks, and stones based on the number of hours. Up to 8 hours is a pebble, up to 40 hours is a rock, and anything larger is a boulder. The rocks fall into place in a nice bounce animation.

Background

The default background is a green board, but there are other choices. There’s a drop-down in the App Bar that lets you select other background images or background colors. Below is the “Wood” theme.

Storage
The commands at the right of the App Bar allow new projects to be created, existing projects to be opened, and projects to be saved. There’s also a Sample button which loads a sample project of tasks, making it easy for the application to be demoed.

There’s some additional work to be done here on storage, including project naming and file browsing. What I have in mind is the device/cloud model, as you may have seen in apps like the latest Kindle app for iPad. The idea is your central storage is in the cloud (thus freeing you to change devices whenever you want to), but you can work with the data locally on your device if you choose to. Not in place yet, but coming. This is part of the “personal cloud” concept that I am very much a believer in.

Development Approach

You can develop Metro apps 3 ways: in C++/Xaml, in .NET/Xaml, or in HTML5-JavaScript. I can work in all three, but since I’m investing a lot of time these days in HTML5/JavaScript that was a natural choice for me. Although WinRT (the Windows runtime) is careful to treat all three development approaches as equal-class citizens, there is an advantage I think to the HTML5/JavaScript approach in that you can leverage the mammoth amount of open source libraries that are out there for the web such as jQuery and many others.

This gives you an overview of the application. In Part 2, we’ll take a look at the internals. Stay tuned!