WEBIX JAVASCRIPT LIBRARY BLOG

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

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

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

Как создать рабочий стол в браузере с помощью Webix

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

webix_new_demo

Что это?

Демо показывает, как можно создать рабочий стол в браузере на основе Webix компонента.

Такая оболочка может использоваться удаленными пользователями, поскольку она предоставляет среду, подобную десктопной, где пользователи могут получить доступ к удаленным данным и работать с ними. Пользователи могут запускать внутренние приложения, организовать их размещение на экране, а также переключаться между ними. Все эти действия можно производить с обычными десктопными приложениями. Кроме того, представленная оболочка работает в любом браузере (даже в IE8!).

Import/Export в Webix 3.0

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

Как экспортировать данные из веб-приложения

Очень легко. С Webix 3.0 у вас есть две мощные команды для экспорта:

webix.toPNG($$("chart"))
webix.toExcel($$("datatable"));

export to png

Эти функции позволяют экспортировать Webix компонент в PNG или Excel файл. В случае экспорта в PNG вы можете использовать API не только с Webix компонентами, но и с любым HTML контентом.

// export the whole page to an image
webix.toPNG(document.body);

Работа с вложенными данными в Webix UI

Всем нравится пользоваться простыми приложениями с интуитивно понятным интерфейсом. Pецепт такого приложения прост: возьмите немного HTML-тегов, добавьте подходящий фреймворк, например, Bootstrap, и ваше приложение готово. В повседневной разработке все происходит немного по-другому. Бизнес-приложения работают со сложными данными, поэтому для их представления требуется более продвинутый интерфейс. Одним из таких кейсов является использование вложенных данных. Готового решения для отображения в HTML или Bootstrap пока нет. Но решить проблему можно с помощью Webix UI.

Tree

Простейший виджет, который можно использовать для отрисовки вложенных данных — это Tree. Этот элемент интерфейса, который довольно часто используется в десктопных приложениях, но редко встречается в веб-версиях. Webix Tree обладает полной функицональностью виджета tree. Он позволяет представлять иерархические данные в виде дерева, ветки которого можно развернуть или свернуть. Webix Tree работает быстро, отрисовывая тысячи элементов менее, чем за секунду. Если этого мало, можно использовать динамическую загрузку данных.

webix.ui({
view: "tree", data: nested_data
});

Webix-Tree

Webix Jet — как построить отличное приложение

Делать приложения должно быть просто. 

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

Однако этого было недостаточно. Разрабатывая новые приложения, мы ломали голову, как нам хранить код, как организовать навигацию, как работать с серверным кодом, решали массу других скучных задач. Где-то раз на 15й нам это надоело, и мы решили объединить все лучшие практики по разработке на Webix в микро-фреймворк. Так появился Webix Jet.

webix jet micro framework

Так что же это — Webix Jet

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

Весит он совсем ничего (менее 10кб кода), работает с любым серверным языком (NodeJs, PHP, .Net) и может быть использован как для десктопных, так и для мобильных приложений.

На пути к Webix 4.0

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

Webix_4.0

 

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

Компоненты Webix

В версию 3.1 (релиз намечен на конец ноября), войдут долгожданный компонент side-menu и возможность автоматического изменения размера меню и кнопок (это обязательное требование при разработке многоязычных приложений).

Кроме этого, в следующей версии появятся возможность размещать компоненты с абсолютным позиционированием, и компонент data-map, который позволит визуализировать комплексные данные следующим образом:

1 2 3 4 5