Project Task Board app in Windows Store Today
Original Version
You have to walk before you can run, and this app was never meant to be more than a simple one: if you have a project with tasks, being able to show them as "cards on a wall" is often useful to project teams. Implementing this would give me a good start on Windows 8 app development, as I'd need to learn app basics like the App Bar, handling different screen sizes and orientations, touch interaction, and styling. And, of course, there's that process of getting into the Windows Store. My goal was to have my app in before the end of 2012. I made it, but not without a certain amount of work.
I had to choose a development language: WinJS/HTML5, C#/XAML, or C++/XAML. I had equally good backgrounds in the first two, but as I've been immersed in HTML5 and JavaScript for the last year it made sense to go the WinJS route. I'm glad I did, because I eventually ran into a problem I don't think I would have been able to resolve in a XAML approach.
The first incarnation of this app was ready a full year ago in January 2012, and I showed it at various venues including a Windows 8 developer event in downtown LA. When Windows 8 went to release and the Windows Store became active, it was time to revisit Task Board and bring it home. I ran into a few hurdles, let's look at them and how they were addressed.
Original Task Board App during Windows 8 Preview Period
Breaking Changes
First, my project would no longer build under the Windows 8 release. That's kind of the chance you take when you jump into pre-release development. My acquaintances at Microsoft did offer to take a look at my project, but I ultimately decided to start with a fresh code base, for a number of reasons beyond API changes: I was better equipped to structure the solution properly now, and I had a problem in that drag-and-drop of cards no longer worked.
Drag and Drop
Drag and drop is an essential aspect of this app: being able to drag cards around is the whole point of its existence. The method I used for drag-and-drop in the original pre-release app simply no longer responded to touch in the release version of Windows 8. I would have to figure something else out.
I started experimenting with other ways to handle drag and drop, also asking Microsoft for suggestions, and ultimately found two promising avenues: jQuery UI, or the IE10 API for touch events. I chose to try jQuery UI first, and that worked just fine. This is where I think you have an advantage in WinJS over the XAML approach: there are a lot of great JavaScript libraries you can leverage, and it's possible to "get under the hood" when you need to.
jQuery UI drag-and-drop is quite simple and does not require a lot of code once you come to understand it, and it's well-documented. Here's what my code looks like to set up and handle drag-and-drop of cards:
function wireupCardsForDragging() {
$(".draggable").draggable({
drag: function (event) {
makeTopMost(this.id);
}
});
$(".draggable").click(function (event) {
editCard(this.id);
});
$(".droppable").droppable({
drop: function (event, ui) {
$(this);
var tileId = ui.draggable[0].id;
if (tileId.substr(0, 4) === "card") {
var cardNumber = parseInt(tileId.substr(4), 10);
cards[cardNumber].left = ui.draggable[0].style.left;
cards[cardNumber].top = ui.draggable[0].style.top;
}
}
});
}
A "card" is a simple entity. In HTML, this small markup renders a card:
<div class="card yellow draggable" id="card1" style="left: 50px; top: 140px;">
<div class="heading">
<span class="taskNumber">1</span>
<span class="title">Ramp-up</span>
<span class="priority">P1</span>
</div>
<div class="desc">Wire up user interface.</div>
</div>
Internally, cards are represented by card objects, indexed by task number:
card = {
top: '120px',
left: '50px',
number: 1,
color: 'yellow',
title: 'Requirements Gathering',
description: 'Analyze requirenents and capture user stories.',
owner: 'dp',
priority: 1,
hours: 80,
status: 'in progress'
};
Arranging, Tiling, and StackingIn the final edition of the app, I wanted the user to be able to drag cards around, but I also wanted an "arrange" command that would nicely glide the cards into an orderly arrangement. I'd implemented this in the prototype as tiling, where each card was fully visible. In the final app, I also added a choice for stacking, where each card is closely overlaid and all you can see are the titles.
Cards Stacked
Tiling or stacking are App Bar commands. To provide the glide effect during arranging the cards, I used jQuery animation.
Preparing for Store Submission
Now to tackle Windows Store submission for the first time.
One area I felt I should address was content: I'd used a green blackboard image as a background in my prototyping, purchased from a stock photo side. It wasn't clear to me if the terms would allow me to use that in app submitted to an app store, so I removed it. This gave Task Board a rather dull look with just a plain green background. Mindful of the approaching end of year and my goal of getting an app in the store before that, I decided to worry about fancier background another time. That meant the app as I submitted it looked like this:
Project Task Board in Windows Store, Release 1
Cloud storage was another area I wanted to address. The original app could save and load a "project file" of tasks from the local file system, but I wanted people to be able to share projects collaboratively. It turns out I didn't need to do anything special, as the file open and save picker dialogs include SkyDrive support. The user can browse to their SkyDrive folders just as easily as to local folders when opening or saving a project.
Store Submission, Release 1
The store submission process for a company first requires you to establish an account and have your corporate identify verified. This takes a bit of time and you need to ensure someone in authority is available to be contacted by Microsoft.
With verification out of the way, you're ready to try submitting an app. The Windows Store dashboard takes you through a nice guided experience where you register a name for your app (I couldn't get Task Board, but Project Task Board was accepted), describe it, upload packages, provide notes to testers, and so on. Here's what some of the application detail looks like, summarized.
Store submission passed on the first try, and my app was in the store!
Release 2
A few weeks later, I decided to upgrade the app. I wanted a more sophisticated background, and I also wanted to give the user a choice of background colors and solid vs .patterned background.
I found a good CSS background to use for a background pattern at the CSS3 Patterns Gallery site. This gave the app the appearance you see at the top of this post.
To allow the user to change the background color and style, I added a flyout to the settings pane. Now, the user can get to an options flyout pane by selecting Windows+C and Settings, then Options.
Options Settings Flyout
My second app submission was accepted, a few hours ago as of this writing, and you can see its Windows Store listing here
.
Summary
Windows 8 has come a long way in the last year, and it doesn't take more than a simple app or two to get your "sea legs" with it. Creating Project Task Board and bringing it to the point where it was accepted in the Windows Store was educational, a bit challenging, and fun. I'm now working on much more sophisticated apps, but this first app was a very necessary exercise in getting started.
No comments:
Post a Comment