11.01.2020 15:31
Pavlenych 10 6100 Источник


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

Первая задача


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

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


Рис.1

Шаг 1. Настройка рабочего окружения


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

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

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

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

  • скачать при помощи менеджера пакетов npm;
  • загрузить пакет прямо с сайта;
  • при помощи прямых ссылок на файлы Webix CDN (content delivery network) версии 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!».

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

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

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

  1. header,
  2. footer
  3. main (основная часть).

Сюда же подключу встроенную CSS тему.

Код:

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

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


Рис.2

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

Код:

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

Результат:

Рис.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», отображает нужную мне иконку из списка предоставленного документацией.

Результат:


Рис.4

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

Шаг 4. Создаем виджет List


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

Вместо записи 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»}. Результат четвертого шага:


Рис.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» убирает горизонтальный скролл, оставляя только вертикальный. В результате получится таблица, которая может сортироваться при нажатии на заголовок ее столбца.


Рис.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:"…".

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

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


Рис.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 строк кода можно создать страницу со множеством сложных элементов. Готовые решения библиотеки и простота использования её компонентов, позволяют свободно конструировать абсолютно разные макеты страниц, при этом не тратя время на заигрывание со стилями.