Added by Jacques Morel, last edited by Jacques Morel on Aug 10, 2008  (view change) show comment

Labels

 
(None)

Use of DHTML to provide a better user experience

Please read these articles on javascript performance and Javascript memory leaks. Also take care of Graceful Degradation,
The A of Ajax means asynchronous. These best practices help avoid deadly bugs.

Drag and drop ordering and assignment

We are looking at several features that need a rich interact to be very usable:

  • Plan: order story tasks
  • Plan: order iteration stories (note order is different than priority)
  • Plan: move/continue story to iteration
  • Plan assign story to iteration
  • Project setup: assign people to project
  • Project setup: assign role to people for a project

Candidates

  1. openrico
  2. http://dhtmlkitchen.com has a nice DragLib that provides out of the box an example of reordering of a list
  3. DragDrop library provides a very robust set of features
  4. Laszlo
  5. http://tool-man.org/examples/: Great reordering list and in-place editing
  6. http://script.aculo.us/: Sortable list, D&D
  7. Confluence dynamictasklist macro:
tasklist: Malformed row found in task list ' ' on page '/display/XPR/Rich+internet+application+technologies'
Completed Priority Locked CreatedDate CompletedDate Assignee Name
F M F       xzsz
F M F      
F M F      
F M F      
F M F      
F M F      
  1. http://uitags.sourceforge.net/: transfer tag allows a dual list with transfer button and reordering of list

Tables

Multiple view/tabs per entities

Some entities like iteration and story provide an increasing number of views. We need to separate actions and views. A simple mechanism to do that is to provide a tab display with a tab per view.

  1. DHTMLKitchen provides a nice DHTML Tabs library
  2. Ditchnet JSP Tabs Taglib
  3. Yahoo group has a nice tab behavior
  4. ActiveWidget (commercial product. Don't know if they have a OS license. Look native)
  5. DynArch (another commercial product. Looking good though!)

Easier navigation

Recent links, Iteration list for a project... are example of information that could be displayed on a left/right nav in a collapsible tree.

  1. DHTMLKitchen provides AnimTree library
  2. X library provides a floater box
  3. X library has also a nicer menu than the currently used and a floating menu bar here and here that can always be in view removing the need to scroll down to read actions

Show element details/children

We can use accordion to show the content of an iteration in a list for release planning.

  1. openrico has a nice accordion

We can also use a tree view to open the content. This could be a total project view

  1. Subversion Insurrection has a nice AJAX based tree and a nice changeset log that could be the base of our release planning view (can d&d stories across iterations, can expend/collapse iteration to only show the summary and their stats (total budget, budget left...)

Scalable/Resizable progress bar

Using the jsgraphic library, the progress bar could be drawn client side with better support for resizing and font drawing.

Using rich tool tip to show element details

Using Walter Zorn's Javascript Tooltip, details of a story or the list of its tasks could be just a mouse hovering away...

In-place editing

Directly been able to change the value of field is invaluable to reduce the click count.

  1. http://tool-man.org/examples/: Great reordering list and in-place editing

Ajax/dynamic forms

  1. Tudu list

Others

Javascript frameworks

  • Prototype provides effects, ajax wrapper, nice extension a la "extend"
  • Dojo toolkit provides widgets (combox...) and ajax wrapper
  • openrico built on top of prototype supports D&D, accordian, nice effects...
  • X library great effects

XMLHTTPRequest javascript object to update page w/o reloading

Full blown js2java RPC frameworks

Server side validation

This remove the duplication of validation logic between the server and the client. A simple javascript calls the server side validation on onBlur event

Server side creation of DOM

[excerpt from Ruby on Rails 0.11]

This is done by off-loading the creation of DOM elements to the server side, which returns complete constructs that are then injected live through innerHTML. While this method is slightly more verbose than just peddling data across the wire, it's immensely easier to develop.

And especially the ease of development is critical to the success of Ajax. I used the old style of hand-crafting the DOM on the client-side with Ta-da List and was quite disillusioned at the mess of browser differences and the sheer effort it took. Basically, each sliver of Ajax was a project in itself.

With Honey, though, I've been all over the new Ajax style that Rails affords. And what a difference it makes! It's basically no harder to make something Ajaxed than it is not to, which means that the decision is based on whether its a good fit for the user interface ??" not on whether we have time to another Ajax project.

Testing

RIA Testing

Javascript IDE

Javascript references

Interesting articles

Comments  (Hide Comments)

What about Struts Layout?

Posted by Anonymous at May 26, 2005 20:08

Not sure if you looked at it... We have had some pretty good success with Laszlo for rich applications. It works especially well for drag & drop.

Posted by Nick Xidis at Sep 13, 2005 14:04

Yes we looked at it. My first analysis was that the barrier to entry is larger. I will say that I don't have too much hands-on experience with lazlo, just a few demo I looked at.
From that I got that it is much harder with the current state of lazlo to get to the current clean interface. We could use it for a few views like a reorder story tasks or in the upcoming release planning a view to order stories and assign them into iterations. However I still believe that with framework like http://openrico.org you can do D&D very fast and as rich as lazlo (we do it at work).
I believe it is much easier to sprinkle a little bit of DHTML/AJAX to upgrade the current interface. It also allow an easy degraded mode on browser w/o plugins/javascript.

Posted by Jacques Morel at Sep 14, 2005 17:35