WHOOOO HOOOOOOO! I have finally completed a project that has been in the works for the past 2 years. Unfortunately though it is for internal use by one of my customers, so I don't have anything I can give you to check it out. But, I can talk about some of the challenges and successes I encountered, as well as some of the tools that helped me get there.
We call this project "Crew Tracker". It's purpose is to assign and track tasks for teams. Needless to say the types of tasks and the way the teams are setup are very specific to this application (otherwise a "canned" solution could have been used). But this introduced a large number of challenges.
When I was developing the first version of this project, my research suggested it just couldn't be done in a web based application. But I could picture ways it could be accomplished. Well, that first draft is still in use today (but should be removed in the next day or so). It's not perfect, but it did meet the requirements and pushed my idea of a web page WAY beyond the simple thing most people think about when they hear the phrase "web page". But of course, the first version was lacking in a lot of ways. It was too slow, it had odd behavior issues depending what browser you used, it had memory leaks, and the list goes on. As a developer I shudder when I see this list, but it was functional and the customer had other priorities that needed addressing.
And there is the core reason this project has taken so long. We've known this work was needed, but with something functional already in place it just wasn't as critical as some of the other changes needed to the overall application. So Crew Tracker kept getting put aside in favor of other tasks. (Not that I'm complaining - I agree with the priorities. but it sure is nice to focus on one task for a while... :)
The only points that Crew Tracker does not do at the moment (but should) is drag and drop and fixed table headers. The drag and drop was a requirement in version one, as the idea was to make it very easy for a computer neophyte to use the tool to manage the teams/tasks. We had a form of the drag/drop in place in version one, but it was one of those points that suffered in different browsers. In IE6 we couldn't see what we were dragging. IE7 or Firefox we could. But after a year of use, we noticed that the drag/drop just wasn't being used. So for version two we dropped that need (for now) in favor of simplifying the code. The fixed header row would be a nice to have, as we have 50ish rows of data with each row being approx. 80 pixels high. This quickly exceeds the visible area of the screen resulting in scrolling. When you scroll to the bottom, you no longer have any indication what column is what. Sure, we *could* use a table footer that duplicates the header information, but that doesn't help us for the middle rows where we can't see the footer OR header. After a lot of research into fixed table headers, I can say that this is not an easy task. There are CSS approaches, and there are JavaScript approaches. But all have some issues or limitations. The CSS methods obviously have to deal with browser issues. The JavaScript methods uncover some of the nasty bits about how tables work, and result in a lot of effort needed. Throw into this the fact that our table is anything but simple, and it makes the whole task challenging to say the least. I *know* there is a solution out there, but I think I will need to do some browser detection and handle it one way for IE based browsers and another way for other browsers (those that actually support CSS properly).
Crew Tracker was the reason I got to know jQuery. I found jQuery shortly after I had written version one of Crew Tracker. Right away I could see where I could make massive improvements to my Ajax code, and even in the dynamic generation routines. Now I've been working with jQuery for a year and some and don't regret it at all. To meet the needs of Crew Tracker, I was able to make use of a number of jQuery's plugins:
- ui.tabs - This plugin allows for a quick and easy way to set up tabs on your web page, and give them added functionality - like intercepting when a tab has been clicked and taking required actions (in addition to the default of showing the tabs corresponding DIV), or enabling/disabling tabs.
- Tablesorter 2.0 - this is a great plugin for offering sorting capabilities to your tables. Click the column header once, and you have sorted by that column in ascending order. Click it again and you are now in descending order. And one line of code needed:
$("#mytable").tablsorter();
Of course you can add some options here, like zebra striping for your table (alternating row colors). Writing this code myself would have taken a couple days to get everything right, and even then it would be tightly tied to my particular project.
- autocomplete - I've written a bit about this one is a previous post. It's still a little rough around the edges but I'm seeing great interest and potential in this tool on the jQuery mailing list. I've written my own autocomplete in the past so know of the difficulties that are involved. Jorn has made a good crack at this one, and it'll only get better.
- bgiframe - this plugin is used by the autocomplete plugin, as well as Cluetip. It provides a "fix" for the way IE treats drop down lists making them appear above DIVs that may be overlapping the select lists. This becomes a problem with layered menus, autocomplete lists (which use a div to show the results), dialog boxes, and anything else that a div might be used for.
- clueTip - This is a great plugin that offers a way to provide customized "tooltip" type interfaces. With little effort, these tips can become a tool that can be interacted with. I wrote about this in my last post. In my case I needed a way to show details for a task when the summary information was hovered over. ClueTip offered a nice simple method for achieving this without having to dive into my own code for creating popup DIVs - and all the gotchas that go along with that. I had written this type of code for version one of Crew Tracker, but it had issues and was a pain to maintain. ClueTip now allows me to focus on the needed job and ignore the popup DIV gotchas.
- Dimensions - Dimensions is a great plugin that tells you the EXACT position of your element on the page, as well as it's height/width. It even takes into account scrollbars when needed. The bulk of this functionality has been rolled into jQuery directly, but some plugins still rely on Dimensions - in my case it's the Autocomplete plugin.
- hoverIntent - what an amazing tool! Instead of reacting to EVERY mouseover event, you can now capture the one that matters. Before using this, if a user moused over my task summary area, the clueTip popup would immediately be triggered. By using hoverIntent (which clueTip is built to work with if it's available) the popup isn't triggered until the user pauses for a short bit over the desired element. Of course the length of the required pause is configurable.
- mousewheel - I love this plugin. It makes some interface items a breeze to resolve. In my case, I needed a way to allow the user to pick a date range quickly. Using two date pickers IS part of that, but it was so much easier to allow the user to scroll their wheel on the date fields, and then just shift the dates up/down by one period (defined by the current date values). So now instead of having to hit BACK or NEXT to move forward/backward date periods and wait for the resulting data to load for each period, they can select the period they want, hit my Refresh link, and be there MUCH quicker.
- ui.datepicker - (aka jQuery.Calendar). This is a great datepicker tool that allows you to do many things with it. It's grown up a lot in the past year too. When I first looked at jQuery Calendar, it was lacking a way to format the dates to the formats my application was using. But it now has this capability - and more even. Because of this, my jquery.dates plugin will be dropping the date picker part. I don't want to recreate the wheel, and Marc is doing great keeping his up to date.
All of these are available via jQuery's Plugin page.
I can honestly say that if I needed to write these tools myself, I would have been looking at 3 or 4 times as much code (I already have some 1200+ lines of JavaScript, nevermind the corresponding 1000 or so of server side code, and then the 1000 or so of html and css... :), and about another month or so before everything was done. So I offer my thanks to all the jQuery plugin authors for their efforts, as well as John Resig (author of jQuery) and the other jQuery maintainers.
Taking on a large project like this is a LOT of work, but can also be very gratifying. I've already had good comments from my customer when I gave them a sneak peak (to prove that I WAS working, and not just billing them for hot air...:). It's amazingly faster than version one, and looks very professional (thanks in most part due to the plugins - I just glued it all together.. ). More importantly, I get to build on what I've learned and can now take on tougher projects. Hmmm... I wonder what else a web page isn't supposed to do... :)
Now with Crew Tracker delivered, I can move onto my next project. Once I figure out what that is. I'm fully expecting the usual reports of bugs, or interface changes that go with the release of a new project, but that will not take anywhere near as much of my time as just completing the project did. I can now say Crew Tracker is in maintenance mode. What a relief.. :)