WEBIX BLOG

TL; DR Готовый пакет можно скачать с https://github.com/webix-hub/webix-firebase

Динамический веб

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

Элементы динамического веба сегодня можно увидеть на страницах Facebook или Twitter. Данные на них изменяются без нашего участия. Как только кто-то добавил комментарий или ретвитнул запись, изменения тут же отображаются на странице.

Динамический веб имеет в своей основе несколько технологий. Самой важной из них являются веб-сокеты (WebSockets).

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

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

Carousel, MultiView, TabView

TabView — это один из тех двух компонентов библиотеки, которые имеют встроенную анимацию. Когда вы переключаетесь между табами, смена активного таба происходит с анимацией. Для ее настройки вы можете использовать свойство animate.

Code of demo

Библиотека Webix предлагает множество готовых виджетов. Но даже это разнообразие меркнет перед обилием различных библиотек, созданных Open Source сообществом. В этой статье я расскажу, как любую стороннюю библиотеку можно превратить в Webix виджет.

Konva.js

В качестве примера я буду использовать Javascript библиотеку Konva.

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

Основные чекбоксы

Минимальный код для инициализации DataTable с чекбоксами выглядит следующим образом:

Результатом работы данного кода является симпатичный JavaScript grid, представленный на картинке ниже. Строка “{common.checkbox()}” в темплейте преобразуется в чекбокс контрол.

Демо

Отличные новости! Теперь необязательно скачивать пакет с сайта и распаковывать его, чтобы начать пользоваться библиотекой Webix. Вы можете подключить 2 файла Webix прямо из интернета, просто задав ссылки на CDN.

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

Теперь, если конечный пользователь работает, например, с несколькими приложениями, созданными на основе Webix, скорость загрузки второго приложения будет намного выше, чем без использования CDN. Когда пользователь работает с первым приложением, файлы webix.js и webix.css загружаются в кэш и хранятся там. Таким образом, при запуске второго приложения, браузеру не нужно загружать файлы Webix еще раз, поскольку они уже находятся в кэше.

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

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

Эта статья является последней частью руководства, в котором рассказывалось о разработке сайта с использованием библиотеки Webix UI и Java-фреймворка Struts 2. Если вы еще не знакомы с предыдущими частями руководства, то мы советуем вам прочитать о “Разработке базовой функциональности сайта” и о “Создании страниц и форм” с Webix и Struts 2.

Никому в настоящее время не интересны статичные данные. Поэтому нам просто необходимо добавить в наше приложение возможность загружать список событий и докладов из базы данных и сохранять внесенные изменения. В качестве базы данных будем использовать MySQL, поскольку она является самой распространенной БД.

Структура базы данных проста (она представлена на изображении ниже). Для хранения событий и докладов будем использовать две таблицы. Каждая запись в таблице speakers содержит идентификатор события event_id, к которому относится доклад.

Эта статья является продолжением туториала, который рассказывает о том, как разрабатывать веб-сайт с WEBIX и Struts 2.

В этой части вы узнаете о том, как создать страницы «Предстоящие события» и «Контакты», а также о том, как добавить информацию о событиях и затем редактировать ее.

Страница с предстоящими событиями будет выглядеть следующим образом:

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

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

Давайте рассмотрим пример того, как можно создать сайт для анонсирования предстоящих конференций по front-end разработке, используя Webix и Java-фреймворк Struts 2.

Вот что у вас должно получится в результате выполнения всех шагов данного туториала:

Отличные новости! Установка Webix становится проще. Уже сегодня библиотеку можно установить с помощью инструментов управления зависимостями NuGet или Bower.

NuGet

NuGet – это менеджер пакетов для платформы разработки Microsoft. Вы можете установить Webix при помощи NuGet, выполнив следующую командную строку:

Если вы используете Microsoft Visual Studio, вам нужно запустить следующую команду из Package Manager Console:

Bower

Bower – это менеджер пакетов для веб. Он предоставляет разработчикам комплексное решение проблемы управления пакетами на стороне клиента. Запустите следующую команду, чтобы установить библиотеку Webix с помощью Bower:

Вот и все. Вышеуказанная команда установит последнюю версию Webix в нужное место на жестком диске.