JavaScript библиотека Webix глазами новичка | | ДОСТУПНЫЙ ОТДЫХ
JavaScript библиотека Webix глазами новичка
Интересное

JavaScript библиотека Webix глазами новичка

JavaScript библиотека Webix глазами новичка

Я начинающий JS front-end разработчик. Сейчас я учусь и стажируюсь в одной минской IT компании. Изучение основ web-ui проходит на примере JS библиотеки Webix и я хочу поделиться своим первым опытом и оформить, своего рода учебное пособие по освоению этой элегантной и мощной библиотеки.

Первая задача
Создадим интерфейс веб-приложения с использованием библиотеки Webix. Библиотека сама нам предоставляет встроенные CSS стили. По умолчанию используется Material Design skin, а всего библиотека предлагает 5 различных схем дизайна, что позволит мне практические не прибегать к редактированию CSS.

Ниже на скриншоте представлен эталонный интерфейс — ТЗ, который мне предстоит «собрать» в качестве практического упражнения.

JavaScript библиотека Webix глазами новичка
Рис.1

Шаг 1. Настройка рабочего окружения
Создадим рабочее окружение. Мне понадобятся файлы:

  • index.html;
  • script.js;
  • data.js;
  • style.css;

Файл style.css не является обязательным, и без него можно было бы обойтись, но я учусь работать строго по процессам, поэтому — берем его в работу.

Теперь подключаю библиотеку. В документации, есть руководство по установке Webix, где продемонстрировано три способа подключения.

  • скачать при помощи менеджера пакетов npm / NuGet;
  • загрузить пакет прямо с сайта;
  • при помощи прямых ссылок на файлы Webix SDN версии GPL.

Я использую третий способ, так как он нагляднее и доступен при помощи нескольких строк кода в файле index.html:

<link rel="stylesheet" type="text/css" href="http://cdn.webix.com/edge/webix.css">
<script type="text/javascript" src="http://cdn.webix.com/edge/webix.js"></script>

Здесь же подключаем остальные файлы в том же порядке как указано в примере. Это связано с порядком наследования, и файл script.js будет получать данные из загруженного перед ним.

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="http://cdn.webix.com/edge/webix.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.webix.com/edge/webix.css">

<link rel="stylesheet" href="style.css">
<title>My first page</title>
</head>
<body>

<script src="data.js"></script>
<script src="script.js"></script>
</body>
</html>

Техническое задание (Рис.1) содержит таблицу с данными. Эти данные я буду получать из файла data.js, в который предварительно запишу такой массив объектов:

var small_film_set = [
{ id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2, rank:1, category:"Thriller"},
{ id:2, title:"The Godfather", year:1972, votes:511495, rating:9.2, rank:2, category:"Crime"},
{ id:3, title:"The Godfather: Part II", year:1974, votes:319352, rating:9.0, rank:3, category:"Crime"},
{ id:4, title:"The Good, the Bad and the Ugly", year:1966, votes:213030, rating:8.9, rank:4, category:"Western"},
{ id:5, title:"Pulp fiction", year:1994, votes:533848, rating:8.9, rank:5, category:"Crime"},
{ id:6, title:"12 Angry Men", year:1957, votes:164558, rating:8.9, rank:6, category:"Western"}
];

Шаг 2. Инициализация. Каркас проекта
Всё Webix-конструирование проходит под «капотом» конструктора webix.ui(). Чтобы проверить, что все настроена и работает как надо, выведу на экран строку«Hello world!».

Читать  Заменяем Google Assistant на нейросеть Порфирьевич и троллим Алису

Использую встроенный шаблонизатор «tempalte», который сгенерирует нам готовый компонент с необходимой записью.

webix.ui({
template: "Hello world!"
});

Главная особенность библиотеки, это компонент «Layout», позволяющая разделить страницу на строки и столбцы из других компонент. С её помощью я определю каркас нашей страницы, состоящей из трех строк:

  • header,
  • footer
  • main (основная часть).
  • Сюда же подключу встроенную CSS тему.

    Код:

    webix.ui({
    css:"webix_dark",
    rows:[
    {template:"Header"},
    {template:"Main"},
    {template:"Footer"}
    ]
    });

    Ниже скриншот того, что получилось. С помощью массива rows мы создали три строки.

    JavaScript библиотека Webix глазами новичка
    Рис.2

    Основная часть интерфейса будет состоять из трех столбцов:
    — список,
    — таблица
    — форма.
    Для её отрисовки я применю массив cols, и создам нужные колонки.

    Код:

    webix.ui({
    css:"webix_dark",
    rows:[
    {template:"Header"},
    {cols:[
    {template:"List"},
    {template:"Table"},
    {template:"Form"}
    ]},
    {template:"Footer"}
    ]
    });

    Результат:
    JavaScript библиотека Webix глазами новичка
    Рис.3

    Шаг 3. Создаем Header
    Каркас страницы создан, и осталось его заполнить нужным содержанием. В моем ТЗ header содержит в себе различные элементы управления, поэтому, вместо template:«Header» я использую контейнер «toolbar». С его помощью создаются нужные мне элементы в которых я могу разместить заголовок и кнопку.

    view:"toolbar",
    css:"webix_dark",
    cols:[
    { view:"label", label:"My app"},
    {},
    {height: 40, type:"icon", icon:"wxi-user", view:"button", label:"Profile", width:100, css:"webix_transparent"}
    ]

    Далее, при помощи массива cols, создаются три столбца. В первом столбце компонент — view:«label», создает статический текст, а ключ label отображает текстовый заголовок.

    Второй столбец — spacer. Он заполняет всё свободное пространство, и прижимает первый и последний элемент к краям страницы.

    Третий столбец — кнопка, создается при помощи компоненты view:«button». Ключи width и height устанавливаю высоту и ширину кнопки в пикселях, а связка type:«icon» и icon:«wxi-user», отображает нужную мне иконку из списка предоставленного документацией.

    Результат:

    JavaScript библиотека Webix глазами новичка
    Рис.4

    Так как все кнопки имеют дефолтные стили, мы используем встроенные возможности библиотеки для придания ей прозрачности — css:«webix_transparent».

    Шаг 4. Создаем виджет List
    Виджет List является стандартным виджетом Webix, и будет использоваться для создания меню. Моя задача — сделать его кликабельным, при помощи свойства select:true. Также, в этом виджете я использую свои изменения стиля при помощи класса — css:«list_color».

    Читать  Талантливый художник создаёт фотореалистичные карандашные рисунки (5 фото + 3 видео)

    Вместо записи template:«List» пишем следующий код:

    {
    view: "list",
    id:’mylist’,
    scroll:false,
    select:true,
    width:200,
    css:’list_color’,
    data:[
    {value:’Dashboard’,},
    {value:’Users’},
    {value:’Products’},
    {value:’Location’}
    ]
    },
    {view: "resizer"},
    {template:"Table"},
    {template:"Form"}

    В виджете list, по умолчанию используется скролл, который я отключу командой — scroll:false.

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

    .list_color{
    background-color: #EEEEEE;
    font-weight: 500;
    }
    .list_color .webix_selected{
    background-color: #dddfe2;
    }

    Фон виджета по умолчанию — белым, и обойтись записью .list_color{…}. Но когда понадобится установить стиль для его элементов, после названия нашего класса нужно будет указать дефолтный класс элемента.

    Последним штрихом в виджете list, мы установим между ним и столбцом Table, перетаскиваемую границу — { view:«resizer»}. Результат четвертого шага:

    JavaScript библиотека Webix глазами новичка
    Рис.5

    Шаг 5. Создаем таблицу и извлекаем данные из другого файла
    Напомню, что данные берутся из файла data.js. Чтобы вывести их в виде таблицы, вместо строки template:«Table» пишу такой код:

    view:"datatable",
    id:"film_list",
    scroll:"y",
    autoConfig: true,
    data:small_film_set

    Код работает следующим образом: view:«datatable» создаёт таблицу, и при помощи autoConfig:«true» конфигурирует столбцы на основе данных созданного в самом начале массива small_film_set. Путь к этому массиву, указан строкой — data:smal_film_set.

    Стока scroll:«y» убирает горизонтальный скролл, оставляя только вертикальный. В результате получится таблица, которая может сортироваться при нажатии на заголовок ее столбца.

    JavaScript библиотека Webix глазами новичка
    Рис.6

    Шаг 6. Форма
    Свойство view:«form» — создает виджет «форма». По ТЗ, она состоит из полей ввода и кнопок, которые размещаются в массиве elements:[ {…}, … ].

    Заменяю строку template:«Table» на следующий код:

    view:"form", id:’film_form’, width: 350,
    elements:[
    { type:"section", template:"EDIT FILMS"},
    { view:"text", name:"title", label:"Title" },
    { view:"text", name:"year", label:"Year" },
    { view:"text", name:"rating", label:"Rating" },
    { view:"text", name:"votes", label:"Votes" },
    {
    margin:10,
    cols:[
    { view:"button", id:"btn_add", minWidth:65, value:"Add new", css:"webix_primary", click:addItem},
    { view:"button", id:"btn_clear", minWidth:65, value:"Clear", click:clearForm}
    ]
    },
    {}
    ]

    Строка со свойством type:«section», это заголовок формы. Поля ввода, устанавливаются свойством — view:«text», название поля записываю в label. В дальнейшем форма должна передавать значения, для этого в связке со свойством view:«text», устанавливается свойство name:"…".

    Читать  Пишем приложение на Flutter в связке с Redux

    Виджет кнопка, устанавливается свойством view:«button». Кнопка не является неотъемлемой частью формы, и может использоваться как самостоятельный элемент. Как и в стандартном HTML-теге input, название кнопки присваивается свойством value. Голубой цвет устанавливается встроенным стилем css:«webix_primary».

    Последний элемент массива — spacer, заполняющий свободное пространство до footer’a, который будет прижат к нижней части экрана. Он использован по причине дефолтной высоты элементов формы, к которым прижимаются все последующие элементы. Результат кода:

    JavaScript библиотека Webix глазами новичка
    Рис.7

    Завершающий шаг
    Страница почти готова, осталось только создать footer. Заменяем строку template:«Footer», на следующий код:

    cols:[
    {height: 30, template:"The software is provided by <a href=’#’>webix.com</a>. All rights reserved (c)", css:"center_text"}
    ]

    Из кода видно, что свойство template помимо текста позволяет устанавливать HTML-теги. Для размещения текста по центру я использовал пользовательский css-класс — «center_text».

    .center_text{
    text-align:center;
    }

    Конечный результат страницы, должен полностью соответствовать заявленному в ТЗ (рис.1).

    Обобщение
    В данном примере была использована только малая часть возможностей Webix. Результат показывает, что всего за 60 строк кода можно создать страницу со множеством сложных элементов. Готовые решения библиотеки и простота использования её компонентов, позволяют свободно конструировать абсолютно разные макеты страниц, при этом не тратя время на заигрывание со стилями.
    Источник

    I heart FeedBurner