Создание форм с помощью Webix Framework — 4 практических примера

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

Что такое Webix?

Webix — это JavaScript библиотека для создания пользовательского интерфейса, содержащая HTML5 компоненты, предназначенные специально для мобильных и десктопных приложений. Спектр компонент действительно велик и разнообразен: от самых простых кнопок до виджета SpreadSheet, позволяющего создавать интерфейсы типа Excel. Помимо коллекций, компонент пользовательского интерфейса, доступен механизм обработки событий, поддержка offline режима и куча других фишек. Вы так же можете создать свою тему оформления с помощью skin builder, воспользоваться инструментом visual designer для создания интерфейсов с помощью техники drag-and-drop, а так же поэкспериментировать с кодом в виртуальной песочнице. Помимо этого, возможности фрэймфорка подробно расписаны в документации.

Ранее мы уже рассказывали об основах работы с Webix.

Подключение Webix

Существует несколько способов подключения JavaScript и CSS файлов к вашему проекту. Если вы скачаете библиотеку, то вышеупомянутые файлы сможете найти в папке codebase. Их можно подключить следующим способом:

<link rel="stylesheet" href="./codebase/webix.css">
<script src="./codebase/webix.js"></script>

Если не хотите париться с локальным файлами, то можете воспользоваться CDN:

<link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css">
<script src="http://cdn.webix.com/edge/webix.js"></script>

Так же можно воспользоваться NuGet-ом:

nuget install Webix

Если же вы работаете в Microsoft Visual Studio, то можете выполнить следующую команду в консоли менеджера пакетами:

install-package Webix

Или попробуйте Bower:

bower install webix

Создание простой формы

Теперь давайте посмотрим как работает виджет для создания форм.

webix.ui({
  view: "form",
  id: "myForm",
  container: "areaA",
  width: 350,
  elements: [
    { // первый компонент формы },
    { // второй компонент формы },
    { // n-ый компонент формы */}
  ]
});

Всё начинается с вызова метода ui объекта webix и передачи определённых параметров.

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

webix.ui({
  ...
  elements: [
    { view: "text", label: "Username", name: "username" },
    { view: "text", label: "Password", name: "password", type: "password" },
    { view: "checkbox", labelRight: "I accept the terms of use", name: "accept" },
    { view: "button", value: "Submit", width: 150, align: "center", click: submit }
  ]
});

Обратите внимание что мы указываем значение атрибутов name для текстовых полей; type: "password" для пароля чтобы скрыть вводимые символы. Для текстового сопровождения поля используем атрибут label; так же в поле click определяем какой элемент будет использоваться для отправки формы.

Перед тем как перейти к демонстрации мы должны определить обработчика события отправки формы. Я воспользуюсь Webix Message Box для того чтобы отобразить пользователю данные, которые он ввёл:

function submit(){
  webix.message(JSON.stringify($$("myForm").getValues(), null, 2));
}

В данном примере используется Webix метод getValues, который извлекает данные из формы с идентификатором myForm и преобразует в JSON формат, используя JSON.stringify().

Результат:

После ввода данных и клика по кнопке отправки формы выскочит сообщение:

Живой пример

Всё работает как мы и планировали. Давайте приступим к чему-то более интересному.

Множественный выбор и подсказки

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

Заметка: со времени последнего релиза (26 Апреля, 2016) данный компонент доступен только в версии Webix Pro (платная версия).

Представьте что мы создаём страницу генерации CV:

Дадим возможность пользователям удобным образом выбрать языки программирования, которыми они владеют. Реализация будет выглядеть так:

var languages = [
  {id: 1, lang: "JavaScript"},
  {id: 2, lang: "PHP"},
  {id: 3, lang: "Ruby"}
  ...
]

webix.ui({
  ...
  elements: [
    {
      view: "multicombo", name: "skills", label: "Skills", button: true,
      suggest: {
        body: {
          data: languages,
          template: webix.template("#lang#")
        }
      },
    }
  ]
});

В данном листинге мы задействовали свойства button и suggest. button кнопка для подтверждения выбора элемента, а suggest для того чтобы указать элемент множественного выбора. Далее в поле data указываем переменную с массивом всевозможных вариантов языков программирования; в template указываем элемент страницы для отображения элемента. Кстати говоря, можно указать и файл с данными для множественного выбора (пример: suggest: "path/to/file/data.js").

Давайте посмотрим как это будет выглядеть:

Пользователь может как кликнуть на элемент, так и начать ввод в результате чего произойдёт фильтрация:

В данном примере видно в какой форме идентификаторы языков программирования отправятся на сторону сервера:

Живой пример

<з>В качестве альтернативы представленному компоненту можете рассмотреть компоненты Gridsuggest и Dataview Suggest.

Работа с виджетом Tree, как с элементом формы

Webix не ограничивается одними лишь текстовыми полями, кнопками и чекбоксами. В качестве элемента формы можно вставит и виджет. К примеру Tree. Данный элемент изначально не предназначен для использования в формах, поэтому при работе с ним вам будут недоступны методы setValue и getValue. Что же нам делать? Решение состоит в использовании метода protoUI.

webix.protoUI({
  name: "formTree",
  setValue: function(id){ this.select(id); },
  getValue: function(){ return this.getChecked(); }
}, webix.ui.tree);

В представленном коде мы создаём новое представление под названием formTree. Определяем два новых метода для выставления и извлечения значения id. В качестве базового компонента назначаем виджет Tree.

Забьём элемент какой-то информацией:

var treedata = [
  { id: "1", value: "Web", data: [
    { id: "1.1", value: "HTML" },
    { id: "1.2", value: "CSS" },
    ...
  ]},
  { id:"2", value:"Scripting", data: [
    { id: "2.1", value: "Shell" },
    ...
  ]},
  ...
];

Добавляем новый компонент как внеочередной элемент формы:

webix.ui({
  ...
  elements: [
    {
      view: "formTree",
      name: "skills",
      data: treedata,
      height: 150,
      threeState: true,
      template: "{common.icon()} { common.checkbox() }   #value#"
    },
    ...
  ]
});

Настало время познакомиться с новыми свойствами: template добавляет сами чекбоксы, а threeState определяет вариант поведения. Работа с чекбоксами может вестись различными способами:

• при выделении или сбросе значения элемента родителя то же самое произойдёт и с его потомками.
• при выделении или сбросе значения дочернего элемента, какие-либо другие значения затронуты не будут.

Стоит обратить внимание на одну особенность: при выборе нового чекбокса, Webix перерисовывает дерево. Поэтому если вы будете заполнять форму посредством клавиатуры, то при нажатии на пробел (Space) фокусировка потеряется, и вам снова придётся использовать tab для перехода к следующему элементу формы.

Но и эту проблему можно обойти: следует задать обработчик для свойства on. Если задействовать его с событием onItemCheck, то можно задействовать только часть дерева, что исправит проблему с фокусировкой:

on: {
  onItemCheck: function(id){
  var node = this.getItemNode(id);
    if(node){
      checkbox = node.getElementsByTagName("input")[0];
      checkbox.focus();
    }
  }
}

Данное решение должно сработать. Однако и тут проблемы не заканчиваются: WebKit не воспринимает передвижение по чекбоксам посредством нажатия клавиши tab. Чтобы обойти и эту особенность можно через CSS добавить тень на сфокусированном элементе. Пример:

input[type=checkbox]:focus { outline: -webkit-focus-ring-color auto 5px; }

Делаем клик по клавише Submit чтобы увидеть результат:

Передача идентификаторов происходит успешно.

Живой пример

Множественные вкладки и многостраничные формы

Если перед вами стоит задача по сбору целой тонны данных, то лучше разбить форму на секции. Есть два распространённых варианта решения данной задачи: форма с несколькими вкладками или многостраничная форма.

Компонент Tabview

С помощью компонента Tabview можно распределить элементы формы по различным вкладкам.

Пример:

webix.ui({
  ...
  elements: [{
    view:"tabview",
    cells: [
      {
        header:"First tab label",
        body: {
          // first tab content
        }
      },
      {
        header:"Second tab label",
        body: {
          rows:[
            { // first row content },
            { // second row content }
          ]
        }
      },
      ...
    ]
  }]
  ...
});

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

Пример:

webix.ui({
  ...
  elements: [{
    view:"tabview",
    cells: [
      {
        // 1st tab header and content
      },
      {
        // 2nd tab header and content
      },
      {
       view:"button",
       value: "Submit",
       width: 150,
       align:"center",
       click:submit
      }
    ]
  }]
  ...
});

Результат:

Фишка данного подхода в том, что вам не нужно заботиться о том как собрать данные с различных вкладок. Просто подключаете компонент tabview, задаёте значение полям name, и при отправке формы получаете результат:

Навигация по форме с помощью клавиатуры

Если в вашей форме будет большое количество вкладок, то наверняка вы захотите использовать клавишу Tab для перехода по ним. Для этого нужно изменить свойство header:

header: "<button class='webixbutton'>Personal Info</button>"

Чтобы подправить вид кнопок добавим немного CSS:

.webix_item_tab .webixbutton{
  background-color:transparent;
}
.webix_item_tab.webix_selected .webixbutton:focus{
  background-color:#268fd5;
}
.webix_item_tab .webixbutton:focus{
  background-color:#98abb7;
}

В этом же демо-примере мы прикрутим поле выбора даты и времени. Вспомогательный блок должен появляться при нажатии на клавишу Return.

Для реализации данной задачи нам потребуется свойство hotkey. Стоит отметить, что данное свойство срабатывает без всяких нюансов когда прикручено к одному элементу страницы. В нашей форме два элемента выбора даты и времени. Именно по этой причине мы воспользуемся методом addHotKey для назначения обработчика к каждому элементу формы, вышеуказанного типа:

webix.UIManager.addHotKey("enter", function(view){
  view.getPopup().show(view.getInputNode());
}, "datepicker");

Живой пример

Для решения этой же задачи можете попробовать воспользоваться компонент Accordion.

Много-страничные формы

Компонент Multiview позволяет создавать формы, элементы которых можно распределить на “несколько страниц”. Чтобы перейти или вернуться к определённому шагу заполнения формы, нужно будет нажать на соответствующую кнопку.

Прежде всего реализуем две функции для работы кнопок Назад и Вперёд:

function next(){
  var parentCell = this.getParentView().getParentView();
  var index = $$("formContent").index(parentCell);
  var next = $$("formContent").getChildViews()[index+1]
  if(next){
    next.show();
  }
}

function back(){
  $$("formCells").back();
}

Функция next использует метод getParentView для точного определения на какой странице был осуществлён клик по кнопке. Далее с помощью значения id компонента multiview (formContent) вычисляется фрагмент формы, который должен быть показан. Новый фрагмент будет отображён с помощью метода show. Такой же принцип используется в реализации функции back, которая в свою очередь задействует метод back.

Элемент multiview определяется точно так же как и tabview. Однако теперь в каждом фрагменте отображения формы мы должны добавить блок с кнопками.

webix.ui({
  ...
  elements: [{
    view: "multiview",
    id: "formContent",
    cells: [{
      // First step
      rows: [{
        ...
        cols: [
          // Buttons
          {},
          { view: "button", value: "Next", click: next }
        ]
      }]
    },
    {
      // Second step
      rows: [{
        ...
        cols: [
          // Buttons
          { view: "button", value: "Back", click: back },
          { view: "button", value: "Next", click: next }
        ]
      }]
    },
    {
      // Final step
      rows: [{
        ...
        cols: [
          // Buttons
          { view: "button", value: "Back", click: back },
          { view: "button", value: "Submit", click: submit }
        ]
      }]
    }]
    ...
  }]
});

Взглянем на результат:

При клике по кнопке Next нам будет отображён следующий шаг заполнения формы.

Проверяем на работоспособность:

Живой пример

Итог

В этом уроке мы постарались продемонстрировать насколько Webix облегчает процесс создания сложных форм. Данный фрэймворк напичкан целой кучей виджетов. Если какие-то из них не совсем отвечают нашим требованиям, то мы можем изменить их поведение посредством метода protoUI.