Рокеры из группы 30 seconds to Mars мечтали добраться до «красной планеты» за 30 секунд, но, к сожалению, современная наука еще не достигла таких высот. По словам знаменитого астрофизика Нила Деграсса Тайсона, нам бы понадобилось около 26 миллионов секунд для этого путешествия.

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

Наше “испытательное” приложение будет состоять из трех частей:

• тулбар с названием
• таблица с данными
• пейджер для навигации между элементами таблицы.

В браузере интерфейс приложения будет выглядеть следующим образом:

В этом приложении наши пользователи смогут:

• сортировать данные при клике по хедеру соответствующего столбца
• менять ширину столбцов
• менять порядок столбцов с помощью перетаскивания
• переключаться между элементами таблицы с помощью пагинации.

С интерфейсом и функционалом мы определились. А теперь давайте посмотрим как реализовать все это в коде за 30 секунд (если это вообще реально).

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

Подготавливаем почву

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

• datatable.js
• toolbar.js
• pager.js
• index.html

Затем, в файле index.html нам нужно подключить ресурсы Webix, чтобы эти компоненты использовать. Наиболее логичный путь подключить ресурсы Webix — скачать архив библиотеки и подключить соответствующие скрипты напрямую. Скачать библиотеку можно здесь.

Но так как мы ограничены во времени (а в запасе у нас только 30 секунд), то удобнее будет использовать CDN ссылки:

Каждый из будущих компонентов приложения мы будем разрабатывать в отдельном файле и сохраним в соответствующую переменную. Они нам понадобятся для построения лейаута.

Далее нам следует подключить ранее созданные файлы, чтобы получить доступ к их компонентам.

Наше приложение нужно где-то инициализировать. Для удобства давайте создадим элемент div и присвоим ему соответствующий id. Его мы будем использовать в конструкторе виджета, чтобы указать точное место инициализации:

Формируем лейаут

В библиотеке Webix каждый компонент — это отдельный JS объект. Чтобы настроить такой компонент, внутри его объекта нам нужно указать основные настройки в виде пар ключ:значение.

Вкладывая подобные объекты друг в друга, мы можем сформировать лейаут приложения. А для инициализации лейаута, нам нужно передать его объект конструктору webix.ui() в качестве параметра.

Основные приготовления сделаны, самое время поставить таймер на 30 секунд. Поехали!

В массиве свойства rows, которое отвечает за ряды лейаута, мы помещаем тулбар и таблицу. Напомню, что они хранятся в переменных toolbar и datatable. Про пейджер мы не забыли, он будет находится в составе таблицы.

Чтобы код начал выполняться после полной загрузки страницы, передадим конструктор webix.ui() методу webix.ready(function(){}).

Вуаля, наш лейаут готов. Как видите, на все про все у нас ушло примерно 5 секунд из 30 доступных. Двигаемся дальше.

Создаем компоненты

Теперь самое время перейти к разработке наших трех компонентов:

• Тулбар
• Таблица
• Пейджер.

И начнем мы, пожалуй, с тулбара.

Тулбар

В файле toolbar.js нам нужно создать «шапку» таблицы и сохранить ее в переменную toolbar, которую мы использовали при построении лейаута. Код виджета будет выглядеть так:

Сам тулбар мы объявляем через выражение view: “toolbar”. Внутри этого компонента мы можем создавать структуру наподобие основного лейаута с соответствующими рядами и столбцами. В нашем конкретном случае, у него будет 1 столбец, где мы разместили лейбл с названием приложения — “MyFirstApp”.

Этот лейбл мы объявляем с помощью отдельного компонента label через выражение view: “label”. Сам текст названия нужно указать через свойство label. Чтобы визуально отделить тулбар от основной части, задаем ему встроенную стилизацию через свойство css.

Еще 10 секунд ушло у нас на создание тулбара. Так держать!

Таблица

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

Таблицу мы объявляем с помощью выражения view: “datatable”. Дальше нам нужно загрузить в него данные о фильмах, которые, в теории, должны находиться на удаленном сервере. По факту же, они хранятся в папке “data” в файле “data.json”.

Чтобы загрузить удаленные данные, нам следует указать свойство url и присвоить ему путь к этим данным. Стоит отметить, что если бы данные находились непосредственно на клиенте, для их парсинга мы бы использовали свойство data.

Виджет мы объявили и загрузили в него данные. Теперь нужно распределить их по соответствующим рядам и столбцам. А за это отвечает свойство autoConfig, которому мы задали значение true. При таком подходе, данные автоматически распределятся по рядам и столбцам.

По умолчанию, ширина всех столбцов кроме первого распределяется поровну. Но в реальной жизни случается так, что в одном из столбцов находится гораздо больше данных, чем в других столбцах. Учитывая это, виджет позволяет менять ширину столбца при перемещении его границы. А за такое поведение отвечает свойство resizeColumn, которому нужно задать значение true.

Чтобы отобразить границы столбцов, которые изначально спрятаны, мы включаем встроенную стилизацию через свойство css.

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

В итоге, мы потратили 20 секунд на описание основных компонентов приложения. И у нас осталось еще 5 секунд на пейджер, нужно торопиться!

Пейджер

Переходим к пейджеру. Он хранится в отдельном файле pager.js в переменной pager. Его конструктор будет выглядеть следующим образом:

С помощью определенных свойств виджета мы можем задать следующие параметры:

• size — количество записей на странице
• group — количество страниц
• page — страница, которая будет отображаться изначально
• template — шаблон отображения.

Давайте чуть детальнее остановимся на шаблоне. Наш будущий пейджер будет выглядеть так:

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

• common.first() — элемент навигации с иконкой в виде двух стрелок влево, который перенаправляет пользователя на первую страницу
• common.prev() — элемент навигации с иконкой в виде стрелки влево, который перенаправляет на предыдущую страницу
• common.pages()— контролы с номерами страниц, которые рассчитываются автоматически в зависимости от количества данных и количества отображаемых элементов на одной странице
• common.next()— элемент навигации со стрелкой вправо, который перенаправляет на следующую страницу
• common.last()— элемент навигации с двумя стрелками вправо, который перенаправляет на последнюю страницу таблицы

Пейджер готов. Теперь нам осталось подключить его к таблице с данными. Для этого у виджета datatable предусмотрено специальное свойстве pager, которому мы задаем название переменной, в которой хранится пейджер (в нашем случае это pager).

Вот и все! Наше приложение готово. На таймере ровно 30 секунд, и вот такой результат мы увидим, если откроем файл index.html в браузере:

Заключение

С кодом готового приложения и живой демкой вы можете ознакомиться здесь.

В этой статье мы создали небольшое приложение для отображения данных в формате таблицы на основе компонентов библиотеки Webix. Узнать больше о возможностях работы с виджетами Webix вы можете в документации библиотеки.