JavaScript библиотека Webix глазами новичка. Часть 3. Модули, диаграммы, древовидные таблицы
- четверг, 30 января 2020 г. в 00:25:18
habrahabr
https://habr.com/ru/post/486050/
Я — начинающий front-end разработчик. Сейчас я учусь и стажируюсь в одной минской IT компании. Изучение основ web-ui проходит на примере JS библиотеки Webix и я хочу поделиться своим скромным опытом и сохранить его в виде небольшого учебного пособия по этой интересной UI библиотеки.
Я продолжаю развивать функционал приложения созданного при помощи библиотеки Webix. В прошлых статьях я разбирался как создавать интерфейс приложения и как взаимодействовать с формой. В этой статье я рассматриваю следующие задачи:
Работа виджетов List и Layout была описана в предыдущих статьях.
Скачать исходники можно по ссылке.
С готовым приложением можно ознакомиться тут.
Чтобы избежать путаницы в коде, проект надежнее разбить на модули. Для этого я создам следующие файлы и перенесу в них код виджетов:
В новых файлах описание конфигураций виджета происходит в переменной…
Созданные файлы подключаются в файле index.html в следующем порядке:
Полученные модули комбинируются в файле script.js, который теперь содержит простой и лаконичный код инициализации приложения.
В случаях когда свободного места на странице не хватает, либо требуется тематически разделить содержимое приложения — логично использовать вкладки.
Переключение между вкладками осуществляется компонентом Multiview. Этот компонент позволяет создать в приложении необходимое количество вкладок и отображает только одну в определенный момент времени.
Мультивью создам в файле aside.js:
В массиве cells находится код вкладок. Каждой вкладке нужно добавить id, чтобы к ней можно было обратиться и отобразить. Сейчас Multiview содержит три вкладки, в первую из которых перемещены, созданные до этого, таблица и форма.
В файле script.js виджеты Table и Form я заменяю на модуль Multi.
Роль переключателя между вкладками исполняет виджет List. Мне нужно, чтобы по клику на его элементы открывалась соответствующая вкладка.
Для удобства работы, элементам виджета List я задам те же id, что и вкладкам мультивью.
При клике на элемент виджета List срабатывает onAfterSelect, внутри обработчика которого мы получаем id выбранного элемента и показываем одноименную вкладку, обращаясь к ней по id — они, как вы помните, совпадают.
Пример:
До этого момента в проекте использовалась таблица, поля которой генерировались автоматически. В случае когда требуется удалить колонку, либо добавить новую, используются настройки таблицы. Для этого в виджете Datatable свойство autoConfig:true нужно заменить на массив columns c настройками для каждой колонки.
В таблице использованы пользовательские CSS настройки: для строк установлен hover а первой колонке изменен фон. Все настройки заранее определены в файле style.css и нужно только вставить название классов.
Также мне для таблицы понадобится больше данных, поэтому я загружу их из data/data.js указав к нему путь с помощью свойства url.
Результат:
Во второй вкладке я создам список и диаграмму. Для этого во втором элементе Multiview я укажу название модуля — “users”.
Для самих виджетов я создам новый файл users_module.js.
Список. Под списком понимается виджет List, ранее он был использован при создании меню. Строки списка должны состоять из имен пользователей и названий стран.
Код виджета List:
Массив rows использован для разделения рабочей области на две части. Вторая часть будет использована для диаграммы.
В свойстве template, между знаками # указывается поле, значение которого берется из элемента данных, который подгружается из файла users.js.
Результат:
Диаграмма. Библиотека поддерживает распространенные типы диаграмм: линия, круг, радар, пончик, столбец и пр. Все они создаются виджетом "chart". То как диаграмма будет выглядеть определяет свойство type.
Заменяю настройку
Результат отрисовки списка и диаграммы:
Для инициализации этого компонента я создам файл products_module.js, а в третьем элементе виджета Multiview укажу название модуля “products”.
Для построения древовидной таблицы используется виджет Treetable. Одна из колонок виджета должна содержать обязательный шаблон — {common.treetable()}, иначе мы получим стандартную таблицу вместо древовидной. Шаблон позволяет сразу отрисовать характерные элементы:
Компонент treetable заполняется иерархическими данными, которые я получу из файла products.js.
Результат:
С получившимся приложением можно ознакомиться тут.
Шаг за шагом приложение дополняется новыми функциями. Важной стадией было разделение кода на модули. Разделение помогло избежать путаницы в коде и помогло организовать мультистраничный интерфейс. Интересным было освоение новых виджетов Webix в виде диаграмм и свободно редактируемых списков таблиц. Всё также было просто, всё также гармонично.
- Разработка веб-сайтов
- JavaScript
- Программирование
- HTML
Я — начинающий 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 в виде диаграмм и свободно редактируемых списков таблиц. Всё также было просто, всё также гармонично.