Примеры создания форм с помощью Webix Framework

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

  • Свойство view отвечает за тип создаваемого элемента (в нашем примере мы создаём форму, но это может быть навигации или диаграмма).
  • Свойство id отвечает за идентификатор формы.
  • Свойство container определяет идентификатор элемента в который будет помещена форма.
  • Свойство width следует использовать для указания ширины элемента формы.
  • Свойство elements принимает массив компонент, которые по сути будут элементами формы. Вы можете создавать: текстовые поля, кнопки типа radio, checkbox и так далее.

Давайте создадим простую формы авторизации. Нам понадобится два текстовых поля (одно для имени пользователя, другое для пароля), один 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().

Результат:

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

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

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

Живой пример

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

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

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

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

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

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

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

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").

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

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

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

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

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

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

Живой пример

В качестве альтернативы представленному компоненту можете рассмотреть компоненты 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 чтобы увидеть результат:

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

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

Живой пример

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

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

Компонент 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
            }
        ]
    }]
    ...
}); 

Результат:

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

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

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

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

Если в вашей форме будет большое количество вкладок, то наверняка вы захотите использовать клавишу 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 }
                ]
            }]
        }]
        ...
    }]
}); 

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

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

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

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

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

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

Живой пример

Итог

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

Источник урока: http://www.sitepoint.com/forms-webix-framework/
Перевел: Станислав Протасевич, источник перевода

 

Добавить комментарий


Защитный код
Обновить