WEBIX JAVASCRIPT LIBRARY BLOG

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

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

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

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

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

Carousel, MultiView, TabView

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

Code of demo

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

Konva.js

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

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

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

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

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

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

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

Демо