ДОСТУПНА НОВАЯ ВЕРСИЯ! Webix 11 Подробнее Обновления в Core, SpreadSheet, File Manager и Report Manager и многое другое

WEBIX BLOG

Webix 2.4: Portlet, Range Slider и другие UI улучшения

У нас отличные новости для вас! Библиотека Webix была обновлена до версии 2.4, в которую вошли такие улучшения, как новый виджет Portlet и контролы формы MultiCombo и RangeSlider. И это далеко не полный список всех изменений.

Виджет Portlet

Portlet— это layout компонент, с помощью которого вы можете интуитивно создавать макеты портала. Более того, портлеты легко менять местами путем перетаскивания в нужное место место вашей страницы.

webix portlet

Итак, вам не придется писать тонны кода для изменения расположения элементов на странице. Все, что вам нужно будет сделать — это потянуть портлет с встроенным виджетом за специальный хэндлер и переместить его на одно из возможных мест “посадки”, которые будут выделены цветом. Хотите посмотреть, как это работает? Вам поможет это демо.

Редактор кода Ace для Webix UI

Ace — это удобный JavaScript редактор кода. Он сочетает в себе функции и возможности таких популярных редакторов, как Sublime, Vim и TextMate. Cloud9 IDE использует Ace в качестве основного редактора. Кроме того, Ace является преемником проекта Mozilla Skywriter (Bespin).

Теперь Ace можно использовать с Webix.

Использование Webix с редактором кода Ace

Эпоха динамических веб-страниц — FireBase

Firebase adapter for Webix UI

TL; DR Готовый пакет можно скачать с https://github.com/webix-hub/webix-firebase

Динамический веб

Еще не так давно создаваемые приложения были флегматичными и неторопливыми. Для обновления даже небольшой части данных нужно было перезагружать всю страницу. AJAX лишь немного улучшил ситуацию. Вместо перезагрузки всей страницы появилась возможность обновлять отдельные блоки. Не успели мы привыкнуть к этой технике, как произошла новая трансформация веба. Именуется она динамическим вебом, где контент страниц обновляется автоматически.

Элементы динамического веба сегодня можно увидеть на страницах Facebook или Twitter. Данные на них изменяются без нашего участия. Как только кто-то добавил комментарий или ретвитнул запись, изменения тут же отображаются на странице.

Динамический веб имеет в своей основе несколько технологий. Самой важной из них являются веб-сокеты (WebSockets).

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

Webix 2.3: Новые виджеты, Typescript и Material Skin

Весна — время перемен и бесконечных возможностей! Этой весной новая версия Webix 2.3 тоже принесла множество полезных обновлений и новых функций.

Команда Webix усердно трудилась над созданием продвинутого функционала, а также отвечала на множество сообщений, поступающих из Webix сообщества. В версии 2.3 появились совершенно новые компоненты — Органограмма и Баркод, а также свеженький Material скин, поддержка TypeScript и другие полезные улучшения.
Webix Material Skin

Новый Webix CRM упрощает управление вашими клиентами

*Проект приостановлен.

Недавно наша компания XB Software Ltd. выпустила собственную CRM-систему, которая практически полностью создана на основе Webix. Данная система является незаменимым инструментом для компаний, которые занимаются продажей услуг или продуктов, и при этом хотят установить долгосрочные отношения со своими клиентами.

Webix CRM имеет дружественный интерфейс, созданный на основе Material Design скина. Более того, этот продукт позволяет хранить клиентскую базу любого размера. Система хранит историю взаимодействий с заказчиком (email-переписку, телефонные звонки и т.д.), а также позволяет группировать контакты по различным категориям.

webix crm

Давайте подробнее рассмотрим многочисленные функции Webix CRM.

Анимация в Webix UI

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

Carousel, MultiView, TabView

TabView — это один из тех двух компонентов библиотеки, которые имеют встроенную анимацию. Когда вы переключаетесь между табами, смена активного таба происходит с анимацией. Для ее настройки вы можете использовать свойство animate.

Code of demo

Использование сторонних библиотек с Webix

Библиотека Webix предлагает множество готовых виджетов. Но даже это разнообразие меркнет перед обилием различных библиотек, созданных Open Source сообществом. В этой статье я расскажу, как любую стороннюю библиотеку можно превратить в Webix виджет.

Konva.js

В качестве примера я буду использовать Javascript библиотеку Konva.

Материальный Дизайн в Интерфейсе Webix

Материальный Дизайн— это визуальный язык, который был разработан компанией Google и быстрыми темпами набирает популярность в мобильной и веб-разработке. Он значительно повышает юзабилити интерфейсов приложений, делая их простыми и красивыми. Веб-приложения, имеющие такой дизайн, могут быть легко адаптированы под различные типы платформ и все виды устройств.

материальный дизайн в Webix UI

Команда Webix вдохновилась визуальным языком Google Material Design и использовала его спецификацию для создания нового скина.

Чекбоксы в DataTable. Малоизвестные техники

Возможно, вы уже знаете, что внутри контрола DataTable могут быть не только текстовые данные, но и чекбоксы. Они используются как для отображения состояния данных, так и для редактирования.

Основные чекбоксы

Минимальный код для инициализации DataTable с чекбоксами выглядит следующим образом:

webix.ui({
  view:"datatable",
  columns:[
    { id:"status", header:"Is Active", width:80, css:"center",
        template:"{common.checkbox()}"},
    { id:"value", header:"Records", fillspace:1 },
  ],
  data: [
    { status:0, value:"Record A"},
    { status:1, value:"Record B"},
    { status:0, value:"Record C"}
  ]
});

Результатом работы данного кода является симпатичный JavaScript grid, представленный на картинке ниже. Строка “{common.checkbox()}” в темплейте преобразуется в чекбокс контрол.

Basic Webix Checkboxes

 

Демо

Webix CDN для создания быстрых веб-приложений

Отличные новости! Теперь необязательно скачивать пакет с сайта и распаковывать его, чтобы начать пользоваться библиотекой Webix. Вы можете подключить 2 файла Webix прямо из интернета, просто задав ссылки на CDN.

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

Webix использует CDN

Теперь, если конечный пользователь работает, например, с несколькими приложениями, созданными на основе Webix, скорость загрузки второго приложения будет намного выше, чем без использования CDN. Когда пользователь работает с первым приложением, файлы webix.js и webix.css загружаются в кэш и хранятся там. Таким образом, при запуске второго приложения, браузеру не нужно загружать файлы Webix еще раз, поскольку они уже находятся в кэше.

1 14 15 16 17 18 21