Tiger blog

Блог тигра

Упрощаем жизнь разработчикам при помощи Webix UI и работы с формами

Для того чтобы приложение имело высокий рейтинг среди пользователей, оно должно быть максимально простым и практичным для работы. Что такое простой и понятный функционал приложения? Это когда процесс работы приложения состоит из, сведенного до минимума количества команд! Так что же необходимо для написания простого в работе приложения?

Предлагаем рассмотреть пример библиотеки Webix и ее характеристик

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

А именно:

  • Механизм обработки действий;
  • Способы работы с информацией;
  • Взаимодействие с системой (сервером).

Как реализовать форму заказа с помощью компонентов Webix? Лучше всего это сделать на примере простого одностраничного приложения.
Для начала рассмотрим самые простые, базовые настройки.

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

После базовых настроек переходим к изучению разработки самого приложения.

Приложение может состоять из устройств:

  • Перечень товаров;
  • Характеристика интересующего товара;
  • Личные данные;
  • Платежная информация.

Информационная архитектура состоит в свою очередь из блоков. В каждом отдельном блоке, имеется основная информация о товаре и система оформление покупки.
Любая форма должна содержать поля ввода информации, выбора товара, переключение и прочее.
Особое место, если не главное, занимает — форма оформления заказа.
Обычно форма для заполнения заказа имеет два блока: в первом — поля для ввода информации, а во втором — информация о доставке покупки.
Функции "Back" и "Next" используются для навигации.

"Back" возвращает к списку товаров, а "Next" отображает поля для ввода данных о клиенте. Для сбора данных предусмотрен целый ряд свойств.

Форма регистрации имеет несколько наименований полей:

  • Наименование продукта;
  • Количества товаров;
  • Дисконтная или скидочной карта;
  • Ценой заказа, выбор способа для получения товара;
  • Delivery information;
  • Выбор страны;
  • Пояснение адреса доставки;
  • Определение даты отправки;
  • Дополнительные данные; страхование;
  • Выбор цвета;
  • Настройка навигации.

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

Основная информация для предоставления личных данных:

  • Личные данные пользователя (ФИО);
  • Возраст;
  • Пол;
  • Контактная информация: электронная почта и номер телефона.

После предоставления, в строке ввода своих личных данных, следует указать номер и срок действия кредитной карты. Информация необходима для оформления оплаты через платежный сервис.

После того, как создали форму ввода данных, о карте расчета, получаем следующую необходимую информацию:

  • Номер карты владельца;
  • Имя владельца;
  • Срок действия карты;
  • CVV код карты.

После ввода всех данных необходимо, чтобы приложение начало работать.

Инструменты:

  • Перечень товаров (через определенные свойство on Click виджета dataview);
  • Определение цены заказа;
  • Навигация между формами (кнопки Back и Next);
  • Валидация форм;
  • Оформление покупки.

В заключении:

В материале приведены основные термины и процессы разработки, необходимы для создания приложения с помощью библиотеки Webix:

  • Подключение библиотеки;
  • Описание UI компонентов с использованием json синтаксиса;
  • Использование методов компонентов;
  • Установка обработки на действия.

Данный материал поясняет, как работать с формами Webix. Объясняет, как использовать различные контролы и применять на практике методы для управления формой.

Наименование всех команд, их методов и свойств, понятны и просты в разработке приложений.

Начнем охоту
Нацарапайте свои контакты, мы свяжемся с вами в ближайшее время.
Ваше имя
Телефон
Царапнуть заявку
Нажимая на кнопку «Царапнуть заявку», вы соглашаетесь с правилами сайта.
T i g e r
h u n t i n g