Блог

Новый генератор форм — Webix Form Builder

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

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

Webix Form Builder Tool

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

Ниже вы видите группу контролов, которые задают лайаут формы. Нажав на кнопку “Generate”, вы увидите предварительный вид будущей формы.

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

form builder property sheet

Чтобы получить финальный вариант кода, кликните на таб в генераторе форм “Generated code”. Данный код имеет конфигурацию Webix UI в формате JSON, и может использоваться вместе с командой webix.ui, чтобы создать такой же пользовательский интерфейс, как тот, что вы видите в табе предварительного просмотра.

generated in form builder code

Если запутались, просто кликните на иконку с вопросом и изучите небольшой туториал по приложению. Такие встроенные подсказки возможны благодаря использованию библиотеки EnjoyHint.

enjoy hint in webix form builder

Мы надеемся, что этот новый инструмент упростит процесс веб-разработки, освободив вас от рутины при написании кода.

Автор
The following two tabs change content below.
Veronika Lindorenko

Veronika Lindorenko

Менеджер продукта Webix с 2012. Интересуется SMM и юзабилити. Создавая качественный и привлекательный контент, она стремится делать мир онлайна лучше.
Veronika Lindorenko

Latest posts by Veronika Lindorenko (see all)

Share on Google Plus Share on Twitter Share on Facebook Share on Stumbleupon Share on LinkedIn VK Vote on Reddit