Создание форм с помощью 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
Создание простой формы
Теперь давайте посмотрим как работает виджет для создания форм.
Давайте создадим простую формы авторизации. Нам понадобится два текстовых поля (одно для имени пользователя, другое для пароля), один 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
.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/forms-webix-framework/
Перевел: Станислав Протасевич
Урок создан: 10 Мая 2016
Просмотров: 14196
Правила перепечатки
5 последних уроков рубрики "HTML5"
-
Расширяем возможности HTML за счёт создания собственных тегов
В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.
-
Определение доступности атрибута HTML5 с помощью JavaScript
Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.
-
HTML5: API работы с вибрацией
HTML5 - глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.
-
Знакомство с фрэймворком Webix
В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.
-
Отключение HTML5 валидации
Бесит валидация, которая добавляется к полям формы, если вы пользуетесь HTML5? Её можно без проблем отключить.