Новый Webix 11.2 Подробнее Методы динамических массивов в SpreadSheet, touch-ресайз колонок в Grid и другие фичи.

WEBIX BLOG

Релиз Webix 3.1

Уже на этой неделе мы прощаемся с дождливой осенью и встречаем наш новый релиз Webix 3.1! Меньше двух месяцев прошло с последнего крупного обновления Webix 3.0, а нам снова есть что вам показать.

Webix-release-3-1

 

Наша библиотека пополнилась двумя новыми виджетами — SideMenu и TreeMap. Добавим ко всему еще один новый компонент — Sidebar, который не входит в стандартный пакет, но который можно загрузить уже прямо сейчас.

Сегодня на повестке дня:

  1. TreeMap;
  2. Sidebar;
  3. Sidemenu;
  4. автоматические размеры для меню и кнопок.

Комплексный контент в DataTable

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

Давайте посмотрим, как это можно сделать.

Чекбоксы и радиокнопки

Самый распространенный вариант использования — это добавление чекбокса в ячейку DataTable. Поскольку этот сценарий используется довольно часто, мы сделали для него готовое решение. Вам просто нужно задать его в качестве значения темплейта ячейки вот так:

template:"{common.checkbox()}"

и вы получите полноценный чекбокс.

Data table

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 3.0: Webix Jet, визуальный дизайнер и новая функциональность

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

Релиз Webix 3.0

 

Начнем с двух крупных обновлений.

Webix Jet

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

Встречайте обновленный Skin Builder

Сразу после релиза Webix 2.5 мы обновили наш онлайн инструмент для веб-разработки Webix Skin Builder. С последним обновлением он обзавелся встроенным Material скином, а также стал еще более удобным в использовании.

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

Material Skin

Когда мы впервые анонсировали возможность использования Material Skin в приложении, написанном на Webix, этот скин еще не был включен в пакет библиотеки. Чтобы его скачать, нужно было перейти в специальный репозиторий на github.com. Теперь скин доступен прямо из нашего инструмента Skin Builder.

 

skin-builder-fade

 

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

Webix 2.5: поддержка браузера MS Edge, улучшения Pivot и Kanban

Мы рады сообщить вам о нашем небольшом, но весьма эффектном обновлении Webix — версия 2.5! Этот релиз принес следующие изменения: поддержка нового дефолтного браузера Windows 10 Microsoft Edge, улучшения существующих Kanban и Pivot виджетов, а также добавления новых функциональностей в компоненте Calendar. Конечно, как всегда новая версия включает в себя исправления багов и мелкие UI обновления.

Если у вас совсем нет времени на прочтение поста, вы можете скачать новую версию прямо сейчас по этой ссылке.

Поддержка Microsoft Edge

Итак, теперь все виджеты Webix отлично работают в новом браузере Microsoft Edge. Это значит, что приложения, созданные при помощи нашей библиотеки, будут поддерживать Edge на 100%

Webix with MS Edge support

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

1 2