Я — начинающий front-end разработчик. Сейчас я учусь и стажируюсь в одной минской IT компании. Изучение основ web-ui проходит на примере JS библиотеки Webix и я хочу поделиться своим скромным опытом и сохранить его в виде небольшого учебного пособия по этой интересной UI библиотеки.
Третья задача
Я продолжаю развивать функционал приложения созданного при помощи библиотеки Webix. В прошлых статьях я разбирался как создавать интерфейс приложения и как взаимодействовать с формой. В этой статье я рассматриваю следующие задачи:
- разделение проекта на модули;
- вкладки и переключение между ними;
- настройка таблицы;
- отрисовка списка и диаграммы;
- создание древовидной таблицы.
Работа виджетов List и Layout была описана в предыдущих статьях.
Скачать исходники можно по ссылке.
С готовым приложением можно ознакомиться тут.
Шаг 1. Разделение проекта на модули
Чтобы избежать путаницы в коде, проект надежнее разбить на модули. Для этого я создам следующие файлы и перенесу в них код виджетов:
- header.js — виджет Toolbar;
- aside.js — виджет List;
- table.js — виджет Datatable;
- form.js — виджет Form;
- footer.js — элемент с текстом: “The software is ...”.
В новых файлах описание конфигураций виджета происходит в переменной…
const footer = { height: 30, template:"The software is provided by <a href='#'>webix.com</a>. All rights reserved (c)", css:"bottom-link" }
Созданные файлы подключаются в файле index.html в следующем порядке:
<body> <script src="functions.js"></script> <script src="users_module.js"></script> <script src="products_module.js"></script> <script src="data.js"></script> <script src="header.js"></script> <script src="table.js"></script> <script src="form.js"></script> <script src="aside.js"></script> <script src="footer.js"></script> <script src="script.js"></script> </body>
Полученные модули комбинируются в файле script.js, который теперь содержит простой и лаконичный код инициализации приложения.
webix.ui({ rows:[ header, { cols:[ aside, {view: "resizer"}, table, form ] }, footer ] });
Шаг 2. Вкладки и переключение между ними
В случаях когда свободного места на странице не хватает, либо требуется тематически разделить содержимое приложения — логично использовать вкладки.
Переключение между вкладками осуществляется компонентом Multiview. Этот компонент позволяет создать в приложении необходимое количество вкладок и отображает только одну в определенный момент времени.
Мультивью создам в файле aside.js:
const multi = { view: "multiview", cells:[ { id:"dashboard", cols:[table, form ] }, { id:"users", template:"Users" }, { id:"products", template:"Products" } ] }
В массиве cells находится код вкладок. Каждой вкладке нужно добавить id, чтобы к ней можно было обратиться и отобразить. Сейчас Multiview содержит три вкладки, в первую из которых перемещены, созданные до этого, таблица и форма.
В файле script.js виджеты Table и Form я заменяю на модуль Multi.
webix.ui({ rows:[ header, { cols:[ aside, {view: "resizer"}, /*table, form*/multi ] }, footer ] });
Роль переключателя между вкладками исполняет виджет List. Мне нужно, чтобы по клику на его элементы открывалась соответствующая вкладка.
Для удобства работы, элементам виджета List я задам те же id, что и вкладкам мультивью.
const aside = { view: "list", id:"mylist", scroll:false, select:true, width:200, css:"list_color", data:[ {value:"Dashboard", id:"dashboard"}, {value:"Users", id:"users"}, {value:"Products", id:"products"} ], on:{ onAfterSelect:function(id){ $$(id).show(); } } }
При клике на элемент виджета List срабатывает onAfterSelect, внутри обработчика которого мы получаем id выбранного элемента и показываем одноименную вкладку, обращаясь к ней по id — они, как вы помните, совпадают.
Пример:
Важно!
Дальнейшие действия с данными будут осуществляться с запущенным локальным сервером.
Шаг 3. Вкладка “Dashboard” — настройка таблицы
До этого момента в проекте использовалась таблица, поля которой генерировались автоматически. В случае когда требуется удалить колонку, либо добавить новую, используются настройки таблицы. Для этого в виджете Datatable свойство autoConfig:true нужно заменить на массив columns c настройками для каждой колонки.
const table = { view:"datatable", id:"film_list", scroll:"y", select:true, url:"data/data.js", hover:"myhover", columns:[ { id:"rank", header:"", width:50, css:"rank"}, { id:"title", header:"Film title", fillspace:true}, { id:"year", header:"Released", width:100}, { id:"votes", header:"Votes", width:100}, { id:"rating", header:"Rating", width:100} ] }
- Значение свойства id указывает на поле элемента данных, которое будет отображено в данной колонке;
- свойство header в элементе — это заголовок столбца;
- всем колонкам задана фиксированная ширина, но во второй из них используется свойство fillspace, которое позволяет колонке title занять все свободное пространство.
В таблице использованы пользовательские CSS настройки: для строк установлен hover а первой колонке изменен фон. Все настройки заранее определены в файле style.css и нужно только вставить название классов.
Также мне для таблицы понадобится больше данных, поэтому я загружу их из data/data.js указав к нему путь с помощью свойства url.
Результат:
Шаг 4. Вкладка “Users” — отрисовка списка и диаграммы
Во второй вкладке я создам список и диаграмму. Для этого во втором элементе Multiview я укажу название модуля — “users”.
const multi = { view: "multiview", cells:[ { id:"dashboard", cols:[table, form ] }, { id:"users", rows:[users] }, { id:"products", template:"Products" } ] }
Для самих виджетов я создам новый файл users_module.js.
Список. Под списком понимается виджет List, ранее он был использован при создании меню. Строки списка должны состоять из имен пользователей и названий стран.
Код виджета List:
const users = { rows:[ { view: "list", id:"user_list", select:true, url:"data/users.js", template:"#name# from #country#" }, { template:"Chart" } ] }
Массив rows использован для разделения рабочей области на две части. Вторая часть будет использована для диаграммы.
В свойстве template, между знаками # указывается поле, значение которого берется из элемента данных, который подгружается из файла users.js.
Результат:
Диаграмма. Библиотека поддерживает распространенные типы диаграмм: линия, круг, радар, пончик, столбец и пр. Все они создаются виджетом "chart". То как диаграмма будет выглядеть определяет свойство type.
Заменяю настройку
template:”Chart” на код виджета:const users = { rows:[ { view: "list", id:"user_list", select:true, url:"data/users.js", template:"#name# from #country#" }, { view:"chart", type:"bar", value:"#age#", url:"data/users.js", xAxis:{ template:"#age#", title:"Age" } } ] }
- Настройка
type: "bar"задает линейчатый тип диаграммы; - в value передаётся имя поля, и указывается оно обязательно в `#...#`. Это особенность виджета Chart;
- настройка xAxis определяет какая информация будет отображена под диаграммой по оси X;
- template указывает на то, что под линиями диаграммы буду цифры возраста;
- title содержит название диаграммы —
"Age".
Результат отрисовки списка и диаграммы:
Шаг 5. Вкладка “Products” — древовидная таблица
Для инициализации этого компонента я создам файл products_module.js, а в третьем элементе виджета Multiview укажу название модуля “products”.
const multi = { view: "multiview", cells:[ { id:"dashboard", cols:[table, form ] }, { id:"users", rows:[users] }, { id:"products", rows:[products] } ] }
Для построения древовидной таблицы используется виджет Treetable. Одна из колонок виджета должна содержать обязательный шаблон — {common.treetable()}, иначе мы получим стандартную таблицу вместо древовидной. Шаблон позволяет сразу отрисовать характерные элементы:
- активную иконку для того, чтобы свернуть/развернуть вложенные записи;
- иконки “файл/папка”;
- отступы в зависимости от уровня записей.
const products = { view:"treetable", scrollX:false, columns:[ { id:"id", header:"", width:50 }, { id:"value", header:"Title", fillspace:true, template:"{common.treetable()} #title#" }, { id:"price", header:"Price", width:200 } ], select:"row", url:"data/products.js" }
Компонент treetable заполняется иерархическими данными, которые я получу из файла products.js.
Результат:
С получившимся приложением можно ознакомиться тут.
Обобщение
Шаг за шагом приложение дополняется новыми функциями. Важной стадией было разделение кода на модули. Разделение помогло избежать путаницы в коде и помогло организовать мультистраничный интерфейс. Интересным было освоение новых виджетов Webix в виде диаграмм и свободно редактируемых списков и таблиц. Всё также было просто, всё также гармонично.
