JavaScript библиотека Webix глазами новичка. Часть 3. Модули, диаграммы, древовидные таблицы

  • Tutorial


Я — начинающий 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 в виде диаграмм и свободно редактируемых списков и таблиц. Всё также было просто, всё также гармонично.
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 6

    0
    Работал с Webix 2 года, CRM системы клепать на нем можно очень быстро, много виджетов разных и много юзер-френдли фич, и это было 3 года назад, за это время уверен стало только лучше.
    Привет разработчикам Webix :)
      0
      Да, стало. Я вот как раз с вебиксом работаю последние пару лет. Тут не только визуально поменялись компоненты, но еще и новые фичи, и работа с сервером стала удобнее. Джет из штуки с пугающим синтаксисом превратился в очень интересный и полезный фреймворк (он и раньше, наверное, был ничего, но функционала там было маловато, по сравнению с теперешним). Он как раз и приходит на помощь, когда надо приложение разбить на модули (а любое достаточно большое приложение надо).
      0

      Стиль письма и логика изложения у вас значительно улучшились, поздравляю с успехом)
      А можно подробнее про "свободно редактируемых списков таблиц"? Это что-то с редакторами прямо в компоненте и будет описано в следующей статье?

        0
        Спасибо!)
        Ответ на вопрос. Тут я больше имел в виду, что мы сами можем определять в каком виде и какие колонки будет иметь таблица либо список. Но вы зрите в корень, в следующей статье я буду рассматривать редактор в самом компоненте.
          0
          Ага, ясно.
          Ну, грустно бы очень было, если бы программисты не могли задавать колонки и их вид…
          Тут было бы интереснее позволить пользователю решать, какие колонки и в каком порядке там будут (и еще желательно сохранять состояние таблицы и восстанавливать его при следующем визите пользователя). Про такое будете писать?)
            0
            Время покажет)

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

      Самое читаемое