WEBIX JAVASCRIPT LIBRARY BLOG

DataTable — самый популярный виджет библиотеки компонентов Webix. Он быстрый, гибкий и может использоваться в самых разных сценариях. По умолчанию, в ячейках этого компонента отображается только текстовый контент. Тем не менее, вы можете использовать темплейты, чтобы показать более сложный контент в ячейках DataTable. Иконки, кнопки и даже другие виджеты могут использоваться в качестве темплейтов ячеек.

Давайте посмотрим, как это можно сделать.

Чекбоксы и радиокнопки

Самый распространенный вариант использования — это добавление чекбокса в ячейку DataTable. Поскольку этот сценарий используется довольно часто, мы сделали для него готовое решение. Вам просто нужно задать его в качестве значения темплейта ячейки вот так:

и вы получите полноценный чекбокс.

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

Tree

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

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

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

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

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

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

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

С Webix вы можете создавать веб-приложения, которые будут работать одинаково хорошо как на мобильных, так и на декстопных устройствах. Однако данные приложения по-прежнему будут html5-приложениями. Для разработки нативных приложений вам понадобится такой инструмент, как PhoneGap.

PhoneGap — бесплатный фреймворк с открытым исходным кодом. С PhoneGap вы можете разрабатывать мобильные приложения со стандартным веб-API для всех используемых вами платформ. Кроме того, Phonegap работает на базе HTML5 и позволяет создавать нативные приложения для всех основных мобильных ОС: IOS, Android, Windows Phone и других.

В этой статье мы опишем процесс создания простого нативного приложения с помощью инструментов Webix и PhoneGap.

Получить окончательный код приложения можно на GitHub.

JavaScript-библиотека пользовательских компонентов Webix позволяет переопределить внешний вид многих элементов путем использования темплейтов. Например, во view:»tree» мы можем задать внешний вид элемента при помощи следующего темплейта:

Здесь вы можете видеть два главных компонента темплейтов Webix: вспомогательные средства и плейсхолдеры свойств. Вспомогательные средства — это предопределенные составляющие логики, которые отрисовывают некоторые общие элементы (иконка дерева в вышеприведенном примере). Плейсхолдеры свойств — это маркеры, которые будут заменены данными из связанного с ними объекта данных.