WEBIX JAVASCRIPT LIBRARY BLOG

Новости, релизы, помощь и советы по разработке web UI, новейшие тенденции и know-how практики по JavaScript программированию. Создавайте web интерфейсы быстрее и качественнее.

Подписывайтесь:

Пишите для нас: guest posts guidelines.

Релиз Webix 4.1: новый виджет-датчик и функционал для интернета вещей

Мы рады сообщить о выпуске очередного релиза JavaScript библиотеки Webix. В версии 4.1 вас ждут новый виджет-датчик Gаge и удобный контрол RichText для редактирования текстов. Кроме того, виджет Chart обзавелся динамическим режимом и новым типом отображения данных — SplineArea Chart.
При подготовке Webix 4.1 разработчики учли растущую популярность интернета вещей, а также актуальную потребность в динамическом отображении данных. Теперь вы сможете создать интерфейс веб приложения, который сможет воспроизвести любую панель управления: от автомобиля до метеостанции.
JavaScript библиотека Webix с новыми виджетами и контролами

TreeMap — вся мощь визуализации в одном виджете

Webix предлагает множество возможностей визуализации линейных данных c помощью различных видов чартов — bar, pie, area, scatter и radar. Но что делать с иерархическими данными? Первое, что может прийти в голову — это Webix Tree, поскольку он отлично отображает связи между родительскими и дочерними элементами. Но на этом возможности визуализации этого компонента заканчиваются.

Чтобы найти что-то более мощное, нам нужно заглянуть в пакет с PRO-виджетами. Здесь мы видим Organogram (диаграмму на основе Tree), а также TreeMap. Давайте рассмотрим второй виджет повнимательнее. Он умеет отображать иерархические данные в красивой и компактной форме.

Самый простой код инициализации довольно лаконичен:

webix.ui({
     view:"treemap", value:”#value#”,  
     template: function(item){  return item.label||""; },
     data:data
});

Результат будет следующим:

TreeMap_Basic

 

Демо

В инстаграмме жизни нет, Organogram — вот наш ответ!

Я помню как во время учебы в школе мне довелось провести несколько долгих вечеров за составлением семейного дерева. Тогда я впервые в жизни столкнулась с неизбежными последствиями плохо спланированной работы: место на листе неожиданно закончилось и мне пришлось перерисовывать всю схему с самого начала. Это был полный провал!

Organogram

 

Прошло время, и в нашу жизнь вошли новые технологии, которые предлагают множество инструментов для решения этой, в общем-то, банальной задачи. Также я поняла, что все вокруг в мире работает на основе на одних и тех же многоуровневых схем, которые используются повсюду: от простых организационных ИТ-диаграмм, до иерархической структуры компаний, имеющих множество отделов.

Sidebar vs. Sidemenu. Выбери свой способ навигации

Всем привет! Давайте сегодня рассмотрим, какие решения предлагает Webix, чтобы сделать навигацию в приложении действительно удобной. Могу поспорить, что мы найдем что-то действительно стоящее! С самых первых дней своего существования библиотека предоставляет пользователям стандартное Меню, которое позволяет размещать элементы горизонтально или вертикально (и это слишком просто). Недавно разработчики библиотеки пошли дальше и создали два симпатичных виджета — Sidebar и Sidemenu, которые призваны сделать навигацию удобной для пользователей.

Давайте разберемся в функциональности этих виджетов и рассмотрим сценарии использования, подходящие для каждого из них.

Чтобы инициализировать Sidebar, достаточно вот такого простого кода:

webix.ui({
      view: "sidebar",
      data: [
           {id: "dashboard", icon: "dashboard", value: "Dashboards",  data:[
               { id: "dashboard1", value: "Dashboard 1"},
               { id: "dashboard2", value: "Dashboard 2"}
        ]},
         ...
        ]
});

В результате, вы получите вот такой виджет:

sidebar

 

Демо

Оскар для ДиКаприо — Визуальный дизайнер для Вас!

Всем привет!

За окном последний месяц зимы, а до крупнейшей церемонии Оскар осталось всего 25 дней.

Мы не могли пройти мимо такого события. И если вы также, как и мы, верите и надеетесь, что именно ДиКаприо, а вовсе не медведь, возьмет заветную статуэтку, то смело ставьте “лайк” и делитесь постом с друзьями.

Визуальный дизайнер

 

В конце месяца, в случае, если это талантливый актер победит, все участники получат годовой доступ к Pro Версии нашего Визуального дизайнера, выпуск которого запланирован как раз на конец февраля — а у нас есть, что показать!

1 2 3 4