Rapid Web UI Development

Question

В настоящее время я работаю над веб-приложением, которое заменит старые системы в некоторых офисах. (очень старые, как в FoxPro)

Моя текущая задача - разработать очень быстрый пользовательский интерфейс, похожий на десктоп, то есть, например, пытаться вообще не использовать мышь, чтобы они могли довольно быстро собирать данные и делать это практически, даже не глядя.

Они ожидают таких вещей, как:

Использование клавиш со стрелками для навигации, переход к следующему полю, когда они заполнены, заполнение текущего, нажатие клавиши ввода в одном поле и один список с данными для выбора (использование клавиш со стрелками для повторной навигации) и т. Д. .

Я могу сделать это с помощью javascript довольно легко, но, поскольку меня попросили помочь с этим проектом, потому что сроки его выполнения очень короткие,

Какие библиотеки, элементы управления или подобные инструменты могут помочь мне сделать это быстро?

Answer 1

Используйте JQuery ... И забудьте о кросс-браузерной обработке DOM. JQuery имеет большую поддержку в VS.Net.

Answer 2

Чтобы помочь вам сэкономить несколько минут, вот код для «следующего поля при нажатии enter»: (Вам нужен 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 3

Вы знакомы с ExtJS (http://extjs.com/)?

Я думаю, что это настоящий фреймворк для веб-приложений. JQuery больше похож на «библиотеку» с большим количеством (очень хороших) функций.

Answer 4

Вы не упомянули, какую поддержку браузера вам требуется. Это веб-приложение звучит так, как будто оно должно ловить и обрабатывать довольно много событий клавиатуры.

Различные браузеры обрабатывают события по-разному. Поэтому вам нужно помнить об этом.

Да, довольно просто накатить свой собственный Javascript для обработки ключей, но определенно лучше использовать бесплатный общедоступный фреймворк, такой как JQuery, Prototype или Dojo. Вместо того, чтобы предлагать одно за другим (у сообщества SO, похоже, есть специальный мягкий уголок для JQuery, поверьте мне!), Я бы сказал, проверь их все и приму решение самостоятельно.

Возможно, вы также захотите взглянуть на готовые (коммерческие или иные) пользовательские элементы управления, которые предоставляют необходимый вам тип приложения. Например, если вам требуется интерфейс ввода данных в виде электронной таблицы, в Интернете доступно множество элементов управления.

Answer 5

Научите их, как использовать tab и shift-tab для возврата. Ввод предназначен для «ввода» информации, а не «далее». Просто хорошо разбирайтесь в индексах вкладок в ваших формах, и они должны хорошо работать для ваших пользователей

Принесите им интерфейс, который переносит их в настоящее, вместо того, чтобы пристрастить систему, которая переносит все эти ужасные соглашения из DOS и текстовых систем в сетевую.

Answer 6

Многие старые приложения FoxPro были оптимизированы для повышения производительности пользователей. Я не думаю, что я видел, как «производительность пользователя» использовалась в качестве параметра оценки программного инструмента в течение длительного времени. Особенно не для браузерных приложений.

Сначала вам понадобится способ измерения. Клавиши в минуту и ​​формы, обрабатываемые в минуту, были довольно распространенными способами сделать это. Но добавление AJAX замедлит его - на данном этапе javascript не является языком с высокой скоростью исполнения. даже с хромом.

Ваши лучшие ставки, вероятно, гибкие и светлые.

Answer 7

Я рекомендую Dojo - я понимаю, что он не настолько популярен, как JQuery (количество обращений в Google: dojo 13 миллионов, jquery 13.4) - но он лучше спроектирован и спроектирован!