5 простых инструментов сложных Web-интерфейсов

Рубрика: Development, JavaScript/Ajax | 23 November 2007, 00:41 | Vadim Voituk

Около 2х месяцев назад мне поручили разработать систему сбора и первичного анализа данных о поведении пользователей определенных ресурсов.
Само собой стал вопрос о визуализации этих данных и отчетов, построенных по ним.

Для построения полноценного современного web-интерфейса были выбран набор библиотек и компонентов, которым хочу с вами и поделиться.

0. Основа.
Prototype.js – библиотека, существенно упрощающая JavaScript-разработку.
Этот выбор был больше идиологическим, чем практическим, поскольку я знаком с этой библиотекой намного лучше чем с другими.
Ипользование prototype.js, как основы, а также нежелание “тянуть в проект все подряд”, накладывают такие ограничения на выбор других компонентов интерфейса – он должен быть создан на основе prototype.js, в противном случае должен не конфликтовать с нею.
И конечно же такой компонент должен легко принимать вид, соответствующий корпоративному стилю и утверржденному дизайну.

1. Таблицы. Для отображения и манипулированияи табличными данными выбрал TableKit, отличная библиотека, достойная наивысшей оценки.
Очень немаловажным является то, что её использование не требует написания серверного кода – а это в свою очередь позволяет легко и быстро внедрить её в уже существующий проект.
В принципе толком и выбирать было не из чего, да больше ничего и нужно – тут и сортировка с автоопределением типа содержимого, и изменение размера, и встроенное редактирование значений с возможностью реализовать свой редактор значения, – все как во “взрослых” и платных ASP.NET компонентах.
Просмотреть демо

2. Выбор дат
Какое же приложение по анализу без выбора интервалов дат?
После достаточно длительного блуждания по сети выбор пал на DatePicker от Eulerian Technologies. Также как и TableKit, он легко интегрируется в существующий проект без замены серверного кода.
Единственное что прийшлось модифицировать, так это убрать визуальные эффекты (а вместе с ним и зависимость от script.aculo.us), и добавить русскоязычную версию.

Скачать версию с поддержкой русского языка можно здесь.

К сожалению в дальнейшем, в проекте прийшлось заменить DatePicker на “более привычный господам менеджерам” набор select-box-ов, но тут же DatePicker не виноват:)

Если по каким-то причинам DatePicker и вам не пришелся по душе, то стоит обратить внимаение на Scal но IMHO он ещё достаточно “сырой”.
В идеале хотелось бы элемент управления аналогичный том, который используется в Google Analitics.

3. Графики и диаграммы – тоже немаловажная часть любой визуализации
Тут также неоспоримым лидером является Plotr – наверное единственный charting framework на базе prototype.
Если же требуется повышенная переносимость и поддержка относительно древними браузерами, то стоит обратить внимание на, основанный на технологии Flash, Fusion Charts фреймворк.

4. Индикатор прогресса – также достаточно часто применяется для планирования и анализа.
Из того что удалось “нагуглить” самый приятный “взгляду и коду” – это WebAppers Progress Bar

5. Вспомогательные интерфейсные элементы – к ним я отнес небольшие и часто несложные вспомогательные интерфейсные элементы.
Базовый набор предоставляет самый известный (особенно среди пользователей Ruby On Rails) основанный на prototype.js фреймворк script.aculo.us – это инструменты перестаскивания, сортировок, автодополнения, подсказок, inplace-редактирования, меню и тд.

Конечно же данная заметка не претендует на полноценный обзор prototype-based решений для построения интерфейсов, потому хотелось бы услышать об опыте использования других “связок”, основанных на prototype либо аналогах.

Комментариев: 8

8 Responses to “5 простых инструментов сложных Web-интерфейсов”

Комментарии:

  1. dimat

    Мне понравился jQuery за то, что в нем можно выбирать элементы с помощью CSS селекторов и работать сразу со всеми выбранными элементами (например. навесить событие или что-то поменять)

    Так же, к нему существует много плагинов, но пока что не могу сделать такой же обзор.

  2. Vadim Voituk

    Производить выбор по CSS селекторам можно и в prototype, но если требуется что-то большее чем CSS – язык запросв jQuery вне конкуренции.
    Интересным решением мне показалось jQuery UI – но попробовать её в действии пока не удалось.

  3. hipsterJoe

    2 dimat: +1

    Уже больше года являюсь фаном jQuery : он компактней и для него есть куча плагинов, в том числе для решения вышеописаных Вадимом задач. К тому же мне больше нравиться его архитектура и подход к написанию кода с его использованием.

  4. hipsterJoe

    … и в догонку, чуть не забыл: не знаю как prototype сейчас, но jQuery поддерживает xPath (в новіх верссиях с помощью плагина, а раньше этот функционал был в ядре)

    2 dimat: у меня тоже возникала идея написать обзор по сабжу с описанием jQuery ВР, но пока есть срочная работа =(

  5. Vadim Voituk

    Вобщем уговорили – как появится время “покурю jQuery” , а пока жду аналогичных обзоров от вас ))

  6. Anton Naumov

    да, про jQuery я смотрю уже без меня рассказали :) я не являюсь экспертом в AJAX фреймворках. однако сравнивая в своих пилотах prototype.js и jQuery могу сказать только одно — ребятам из prototype.js вечный респект, они The Beatles AJAX, но какой же у них замороченный фреймворк получился….
    а если говорить по теме, то я бы использовал ICEfaces + JBoss Seam. возможно потому, что кроме Java ничего не умею :)

  7. Vadim Voituk

    Антон, поспешу с тобой не согласиться — prototype.js проще чем jQuery (чего только стоит выучить их язык селекторов), prototype более древний, но и возможностей у него на первый вгляд меньше чем у jQuery.
    Против ICEfaces ничего против не имею, но он завязан на J2EE, я же предпочитаю использовать JavaScript-фреймворки не завязанные на серверные технологии.
    Зачем создавать ещё одну ненужную связь между клиентскими и серверными технологиями?

  8. dimat

    А что сложного в этом языке селекторов? Ничего нового не приходится учить потому что это почти то же что и в CSS.

    В прототипе выбор элементов проще (кроме как выбор одного элемента по id)?

Leave a Reply