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

WEBIX JAVASCRIPT LIBRARY BLOG

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

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

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

Использование сторонних библиотек с 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 еще раз, поскольку они уже находятся в кэше.

File Manager — новый виджет для управления файлами

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

Сегодня мы рады представить вам новый Webix виджет, созданный для удобной организации ваших данных в интернете — File Manager. Это JavaScript и HTML5 компонент, который позволяет управлять иерархическими данными, а именно файлами и папками, в вашем приложении.

Webix File Manager виджет

1 31 32 33 34 35 42