CODEWITHSUNDEEP
asp.netjavascriptuser-interface
Francisco Soto
Francisco Soto

Reputation: 10392

Rapid Web UI Development

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?

Upvotes: 1

Views: 1182

Answers (7)

Thomas Stock
Thomas Stock

Reputation: 11256

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;
    }
});

Upvotes: 3

Grad van Horck
Grad van Horck

Reputation: 4506

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.

Upvotes: 1

Aaron
Aaron

Reputation: 382

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.

Upvotes: 0

Cerebrus
Cerebrus

Reputation: 25775

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.

Upvotes: 1

dkretz
dkretz

Reputation: 37645

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.

Upvotes: 0

Alex Martelli
Alex Martelli

Reputation: 881595

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!

Upvotes: 0

Software Enthusiastic
Software Enthusiastic

Reputation: 26425

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

Upvotes: 4

Related Questions