Rapid development of the web interface
I am currently working on a web application that will replace old systems in some office. (very old, like in FoxPro)
My current challenge is to develop a very fast desktop-like user interface, which means we try not to use a mouse at all so that they can grab data pretty quickly and they do it with almost no searching.
They expect things like:
Using the arrow keys to navigate, move to the next field when they are filled with the current one by pressing the enter key in one field and one list with the data they select (using the arrow keys to navigate again), etc.
I can do this with javascript quite easily, but since I was asked to help with this project, because the time frame for its execution is very short,
What libraries, controls, or similar tools can help me get this done quickly?
source to share
You did not mention the browser support you require. This web app sounds like it needs to catch and handle quite a few keyboard events.
Different browsers handle events differently. Thus, you need to keep this in mind.
Yes, it's relatively easy to roll your own Javascript manipulator, but it's definitely better to use a free, publicly available framework like JQuery, Prototype, or Dojo. Rather than suggesting one over the other (the SO community seems to have a dedicated soft corner for jQuery, trust me on that!), I'd say check them all out and solve it yourself.
You can also view pre-built (commercial or other) custom controls that provide the required functionality for your application. For example, if you need a spreadsheet view for data entry, many of the controls are available online.
source to share
To help you save a few minutes, enter the code for the following field when hitting 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;
}
});
source to share
Are you familiar with ExtJS ( http://extjs.com/ )?
I think this is the real structure of web applications. JQuery is more like a "library" with many (very nice) functions.
source to share
Many older FoxPro applications have been optimized for user productivity. I don't think I've seen "user productivity" used as a benchmark for evaluating a software tool for a long time. Especially not for browsers.
First you need some way to measure. Puzzles in a minute and shapes processed in a minute have been used to be fairly common ways to do this. But throwing AJAX at it is going to slow it down - javascript is not a high-speed execution language at the moment. even with chrome.
your best bets are probably flexible and silver.
source to share
Learn how to use tab and shift-tab to go back. Enter - to enter information, not "next". Just be very careful about the tab indices in your forms and it should carry over well for your users.
Bring them an interface that will bring them to the present, rather than having a jury swearing in a system that translates all these horrible conventions from DOS and text systems into a web interface.
source to share