Rapid Web UI Development

Question

I am currently working on a web app that will replace old systems in some office. (very old as in they are in FoxPro)

My current task is to develop a very desktop-like fast UI, meaning like, trying not to use the mouse at all, so they can capture data fairly quickly and they do it almost without even looking.

They expect things like:

Using the arrow keys to navigate, jumping to the next field when they are done filling the current one, pressing enter at one field and one list with data come up for them to choose (using arrow keys to navigate again), etc.

I can get this done with javascript fairly easy, but since I was asked to help with this project because the time frame to get it done is very short,

What libraries, controls, or similar tools can help me to do this quickly?

Answer 1

Use JQuery... And forget about cross browser DOM handling. JQuery has great support in VS.Net.

Answer 2

I recommend Dojo -- I realize it's not QUITE as popular as JQuery (number of hits on Google: dojo 13 millions, jquery 13.4) -- but it IS better architected and designed!

Answer 3

Many old FoxPro apps were optimized for user productivity. I don't think I've seen "user productivity" used as a software tool evaluation parameter for a long time. Especially not for browser-based applications.

First you'll need some way to measure. Keystrokes per minute and forms processed per minute used to be pretty common ways to do that. But throwing AJAX into it is going to slow it up - javascript is just not a high-speed-execution language at this point. even with chrome.

your best bets are probably flex and silverlight.

Answer 4

You haven't mentioned the kind of browser support you require. This web app sounds like it will need to catch and handle quite a few keyboard events.

Different browsers handle events differently. So, you will need to keep that in mind.

Yes, it is relatively straightforward to roll your own Key handling Javascript, but it is definitely better to use a free public framework like JQuery, Prototype or Dojo. Rather than suggesting one over the other (the SO community seems to have a special soft corner for JQuery, trust me on this!), I would say, check them all out and decide on your own.

You may also want to look into pre-built(commercial or otherwise) custom controls that provide the kind of application functionality you need. For instance, if you require a spreadsheet kind of data entry interface, many controls are available on the web.

Answer 5

Teach them how to use tab and shift-tab to go back. Enter is for "enter"ing information, not "next". Just be really cognisent of tab indexes in your forms and it should flow nicely for your users

Bring them an interface that brings them into the present instead of jury-rigging a system that takes all those horrible conventions from DOS and text based systems into a web based one.

Answer 6

To help you save some minutes, here's code for the "next field on pressing enter": (You need JQuery tho)

$.fn.focusNextInputField = function() {
    return this.each(function() {
       var fields = $(this).parents('form:eq(0),body').find('button,input,textarea,select');
       var index = fields.index(this);
       if (index > -1 && (index + 1) < fields.length) {
          this.blur();
          fields.eq(index + 1).focus();
       }
       return false;
    });
};


$("button,input,textarea,select").keydown(function(event) {
    switch (event.keyCode) {
        case 13: $(this).focusNextInputField();
            break;
    }
});

Answer 7

Are you familiar with ExtJS (http://extjs.com/)?

I think that is a real web application framework. JQuery is more like a 'library' with a lot of (very nice) functions.