Страницы

среда, 25 января 2012 г.

Finite-state machine GUI с помощью JavaScript

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

Текущий gui имеет все необходимые кнопки, но пользоваться им cмогу только я - посторонний человек очень долго будет разбираться как оно работает, что за чем нужно нажимать, какие кнопки не нужно трогать, даже если они доступны. Проще говоря нужно сделать так, чтобы все, что в данной ситуации нельзя трогать было выключено, спрятано и закопано на заднем дворе, подальше от юзера.
Задача поставлена, дело за решением, и первое что приходит в голову:
Вариант "в лоб" - каждая кнопка имеет что-то привязанное на onclick - можно туда дописать необходимые включатели/отключатели.
Но лично у меня от такой перспективы сводит челюсть. Аргументов почему это, кхм, не очень хорошая идея можно привести много (сам, только что, стер небольшой реферат на эту тему :) ). Как минимум мне это не нравится потому, что "полезная" логика (запросы к серверу и т.п.) смешивается в одну кучу с логичкой обработки GUI. Вторая причина - такой интерфейс легко делать только до тех пор, пока он имеет очень мало элементов, которые нужно переключать (штуки 3 можно удержать в голове, в явную прописав в обработчике onclick каждого что-то наподобии "Клик по кнопке №1. Гасим кнопки №2 и №3!". Но когда их становиться больше десятка - это копец!).

Вариант который я хотел реализовать - GUI, построенный конечном автомате. Его огромный плюс - если система описана конечным автоматом, то никуда она от него не денеться, никакая кнопка не зависнет посреди окна из-за того, что для нее забыли прописать "style.display = 'none'". Но по причине своего ужасного характера мне было недостаточно руками прописать таблицу состояний для текущего интерфейса и оставить это - я решил сделать JavaScrip framework :).

Ключевая идея:
я хотел чтобы можно было сделать сложный интерфейс, выполнив 3 простых шага:
  1. Создать элементы gui,  разбить элементы по группам
    (должно быть не сложнее, чем описание простым html); 
  2. Описать возможные состояния всех групп/отдельных элементов
    (эта часть должна предельно четко и ясно показывать для каждого элемента его состояние - button1 : enabled, button2 : disabled, button3 : hidden и т.д. - чтобы сразу  можно было  понять как будет выглядеть GUI в этом состоянии);
  3. Описать инструкции: в какое состояние должен переходить GUI после нажатия на определенные элементы
    (также должно записываться быть предельно просто и понятно, наподобии "... onclick=mainFunction nextState=State2 ...")
И поставленные требования удалось выполнить! Результат можете попробовать сами, я его выложил на GitHub(ссылка на репозиторий):
guiBuilder.js - код библиотеки
test.html - пример использования, постарался дать подробные коментарии.

2 комментария:

  1. Глеб, не гони выкладывать код в гуглодоках - на крайняк есть pastebin.com, на нормальный не спешный случай - github. Критика офтопная и вообще так делать невоспитанно (: Но просто удивительно видеть код в гуглодокументах

    ОтветитьУдалить
  2. Ок, теперь я есть и на github, можешь рисовать еще одну звезду на фюзеляже :)
    Ссылки на код соответственно обновил (и добавил описание не только "зачем было нужно", но и "что именно хотел сделать" - вчера поспешил выкладывать).
    P.S За pastebin.com спасибо, буду знать что есть такая штука.

    ОтветитьУдалить