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

Эта статья была рецензирована Саймоном Кодрингтоном и Мэллори ван Ачтербергом. Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!

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

Что такое Webix?

Webix — это библиотека JavaScript UI компонентов HTML5, которая облегчает создание мобильных и настольных веб-приложений. Он предоставляет вам широкий спектр компонентов от простой кнопки до виджета SpreadSheet, который можно использовать для разработки приложений, подобных Excel. Помимо коллекции компонентов пользовательского интерфейса , есть механизм обработки событий , поддержка автономного режима и множество инструментов разработки . Вы также можете создавать свои собственные скины, используя конструктор скинов, использовать визуальный дизайнер для создания пользовательского интерфейса с помощью перетаскивания и играть с кодом на онлайн-площадке с исходным кодом. Проект также имеет исчерпывающую документацию .

Я уже написал вступительную статью, в которой описываются основные функции и основы использования этой платформы, поэтому не стесняйтесь заранее ознакомиться с ней, если вам интересно.

Включая 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 install webix 

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

Теперь, когда библиотеки установлены, давайте посмотрим, как работает виджет Webix Form .

 webix.ui({ view: "form", id: "myForm", container: "areaA", width: 350, elements: [ { // first form component }, { // second form component}, { // n-th form component */} ] }); 

Мы начнем с вызова метода пользовательского webix объекта webix и передачи ему различных параметров для настройки его вывода.

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

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

 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" установки type: "password" для нашего поля пароля, чтобы маскировать символы при их вводе. Установка свойства label элемента определяет метку для этого элемента, и мы можем использовать свойство click элемента, чтобы определить обработчик события, который будет вызываться при отправке формы. Хотя приятно иметь возможность проверить, что с данными все в порядке, не забывайте, что проверка на стороне клиента должна только дополнять проверку на стороне сервера.

Прежде чем мы сможем запустить эту демонстрацию, нам нужно определить этот обработчик событий. Здесь я использую окно сообщений Webix, чтобы дать пользователю обратную связь относительно того, что было введено:

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

 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#") } }, } ] }); 

 webix.protoUI({ name: "formTree", setValue: function(id){ this.select(id); }, getValue: function(){ return this.getChecked(); } }, webix.ui.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#" }, ... ] }); 

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

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

 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 } ] }] ... }); 

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

 .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; } 

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

 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(); } 

 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 } ] }] }] ... }] });