WEBIX BLOG

Всем нравится пользоваться простыми приложениями с интуитивно понятным интерфейсом. Pецепт такого приложения прост: возьмите немного HTML-тегов, добавьте подходящий фреймворк, например, Bootstrap, и ваше приложение готово. В повседневной разработке все происходит немного по-другому. Бизнес-приложения работают со сложными данными, поэтому для их представления требуется более продвинутый интерфейс. Одним из таких кейсов является использование вложенных данных. Готового решения для отображения в HTML или Bootstrap пока нет. Но решить проблему можно с помощью Webix UI.

Tree

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

Ace — это удобный JavaScript редактор кода. Он сочетает в себе функции и возможности таких популярных редакторов, как Sublime, Vim и TextMate. Cloud9 IDE использует Ace в качестве основного редактора. Кроме того, Ace является преемником проекта Mozilla Skywriter (Bespin).

Теперь Ace можно использовать с Webix.

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

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

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

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

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

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

Библиотека 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.

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