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



Я начинающий 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 версии 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 использует данные, которые подключены в data.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({
    rows:[
        {template:"Header"},
        {template:"Main"},
        {template:"Footer"}
    ]
});

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


Рис.2

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

Код:

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

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

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

    +8
    я так понимаю хабр опускается до уровня публикации рефератов?
      0
      надо же студентам где-то публиковаться :)
        +1

        Я в школе трактор на бэйсике рисовал. Если поднять его код, отрефакторить, получится тема более сложная, чем в треде. Но, в отличие от треда, абсолютно не нужная бизнесу.

          +1
          Так опубликуйте. Я б почитала.
            +1
            предполагаю Blitz3D )
          +2

          Декларативный методология ограничивает разработчика в рамки, которые заложены в библиотеку. Создается вау эффект, что-то слегка написал и вот крутой результат. Для реальных проектов, с реальными заказчиками это не живой вариант. Часто требуют чего-то специфического)

            0
            С одной стороны ограничивает, с другой ускоряет. Я стажируюсь в компании где много разработки на Webix, для коммерческих проектов. Лично мне интересен опыт бизнес-анализа и прототипирования, когда можно быстро собрать симпатичный работающий интерфейс. На чем будет идти сама разработка — это уже другой вопрос.
              0
              Если стоит задача клепать единообразное(клиентов все устраивает), то спору нет. Это больше тема для outsourcing, которые хотят сильно экономить на программистах. Подобные библиотеки имеют низкий порог вхождения. За пару дней можешь заклепать приличное приложение и сдать проект. Для вас как стажера — это минус. Слабо развивается абстракционное мышление, мышление как строить архитектуру приложения.

              Понятие симпатичный дизайн относительно. Из опыта. Дизайн приложения ~material. Но клиента не устраивало, говорил что это не дизайн, ему не нравится. Долго не понимали в чем причина. Оказалось, что для него таблицы в стиле 90ых — это настоящий стиль ).
                0

                Насколько я знаю, в вебиксе есть несколько поддерживаемых скинов (флэт
                скин скорее 2000-style, но уже более олдскульно выглядит как для меня),
                а на гитхабе валяется куча старых, и вот там можно вполне себе нарыть
                что-то под 90-ые. под новые компоненты там нет стилей, правда, и
                придется чутка покреативить.

            0

            я сразу вспомнил про extjs – вагон файликов с кучей параметров конфигурации, если пытаться делать по документации – ничего не работает как надо, отладить нереально – одна «магия», творящаяся где-то под капотом, в DOM творится какая-то дичь… и вдобавок если активна вкладка, хром кушает 30% на core i7.


            видимо вебикс – из той же оперы.


            я понимаю необходимость в специализированных решениях для фронта CRM-like систем – они же все как одна, сплошные датагриды и формы, но я бы всё же взялся за react-admin в таком случае. там нормальный датагрид из коробки, данные подтягиваются через стандартизированные дата-коннекторы (пишется на коленке за 15 минут), весь ui – стандартный material. а если чего-то не хватило – ну так это же реакт, просто возьми и добавь…


            зачем для такой задачи браться за какой-то чёрный ящик непонятного качества и без возможности расширения – я не понимаю…

              0
              Спасибо за комментарий. «Не в бровь а в глаз!»

              C extjs знаком крайне поверхностно, и отпугнуло от него то, что он заметно сложнее и то, что «хром кушает 30% на core i7» (На webix такого не наблюдается совсем).
              По поводу документации — проблем не возникало. У меня конечно задачи не очень сложные, и мне более чем хватает штатной документации и примеров.

              отладить нереально

              Не пробовал дебажить exjs, но у Webix есть хорошее руководство как дебажить под не минифицированной версией библиотеки, там же можно читать исходник, и не такой он уже и черный ящик. Даже «с листа» все читается очень ровно и стройно, этакое JS ООП.

              react-admin

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

              А я хотел бы сказать спасибо за этот реферат. Информация в нём так же самая, что и в официальных видеотуториалах, и ее даже меньше, но это яичко как раз пришлось мне к обеду. То, что я, туповатый, реализовывал (некачественно) более месяца, тут решается реально 10 строками. И вау-эффект есть. И мою crud задачу мне выполнить помогает. И да, несмотря на "чёрный ящик", его можно кастомизировать почти полностью.

                0
                Очень рад, что пошло на пользу)
                +1
                спасибо за тюториал, очень интересно. работаю на Vue.JS, и в простых формах предпочитаю partial view ajax в asp.net, но этот фреймворк заинтересовал тем что может решить сразу сложные задачи. у него JQuery или чтото своё?
                  0
                  Нет, это не JQuery. Что-то своё.
                  0

                  Оставив в стороне сложность темы и содержания: изложению малость не хватает задора и огоньку. Это ж хабр. С ними практически любая примитивная тема воспринималась бы не просто, как отчет по лабе (и была бы, вероятно, интересна не только другим джунам). Хотя автору, поскольку он ещё студент и джун, явно еще не до шуток над сабжем. Кто знает, может потренируется — и хотя бы к 5ой статье читать будет интересно просто как занятное описание чьего-то опыта.

                    0
                    Пробовали ли вы испольлзовать webix в качестве ui библиотеки для написания гибридного приложения? На оф сайте уже давно содержится информация о поддержке мобильных приложений, однако нет реализации компонентов под конкретные платформы, нет плагинов
                    из коробки для работы c cистемными штуками типа геолокации, нет готового решения для роутинга страниц, а в качестве примеров 2а демо приложения 5летней давности без исходного кода, как минимум с багом(https://webix.com/demos/touch/, нажмите на all persons results). На ios не прокликивается инпут с первого раза, из-за чего каждый раз приходится лишний раз кликать, чтобы выходила клавиатура. На android не учитываются системный статус бар сверху из-за чего едет вёрстка. Компонент для комментариев работает плохо, попробуйте удалить большое сообщение в весь экран, так у вас вниз ничего автоматически не проскролится а будет белый экран. Расширять компоненты с помощью protoui, не понятно, один единственный пример с editable, поэтому если у вас сложный интерфейс не ясно как вы будете реализовывать собственные компоненты типа карусели с блоками.
                      0
                      В описании формы опечатка — менять надо template:Form. А в коде ошибка — click:addItem сломает отображение.

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

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