Новый Webix 11.4 Подробнее Новые возможности Webix Core, Kanban и Rich Text Editor, а также большое обновление SpreadSheet

WEBIX BLOG

Разработка базовой функциональности сайта c Webix и Struts

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

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

Давайте рассмотрим пример того, как можно создать сайт для анонсирования предстоящих конференций по front-end разработке, используя Webix и Java-фреймворк Struts 2.

Вот что у вас должно получится в результате выполнения всех шагов данного туториала:

сайт, сделанный с Struts и Webix

Создание мобильного приложения с PhoneGap и Webix

С Webix вы можете создавать веб-приложения, которые будут работать одинаково хорошо как на мобильных, так и на декстопных устройствах. Однако данные приложения по-прежнему будут html5-приложениями. Для разработки нативных приложений вам понадобится такой инструмент, как PhoneGap.

PhoneGap — бесплатный фреймворк с открытым исходным кодом. С PhoneGap вы можете разрабатывать мобильные приложения со стандартным веб-API для всех используемых вами платформ. Кроме того, Phonegap работает на базе HTML5 и позволяет создавать нативные приложения для всех основных мобильных ОС: IOS, Android, Windows Phone и других.

В этой статье мы опишем процесс создания простого нативного приложения с помощью инструментов Webix и PhoneGap.

Получить окончательный код приложения можно на GitHub.

Создание адаптивных веб-приложений с помощью Webix 1.8

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

Адаптивные веб-приложения

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

В Webix 1.8 мы добавили 2 новые возможности, которые сделают ваше приложение адаптивным и улучшат его юзабилити как на десктопных, так и на мобильных устройствах.

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

Вот как выглядит десктопное веб-приложение:

webix 1.8 reponsive design

При уменьшении окна браузера вкладки компонента Tabbar, которые не вместились в видимую часть экрана, преобразуются в обычную кнопку, к которой прикреплен компонент popup list (вместо кнопки может быть вкладка таббара).

Webix 1.7 : Новый Скин для Десктопных и Мобильных Устройств

Мы рады объявить о выпуске Webix 1.7 с новым дефолтным скином, поддержкой выбора нескольких элементов на тач-устройствах и улучшенным пользовательским интерфейсом. В новой версии были исправлены некоторые ошибки.

718_image_13_01

 

Новый скин эффективно работает как на десктопных, так и на мобильных устройствах. Он выполнен во flat-дизайне, благодаря которому ваши веб-приложения будут стильными и удобными в использовании.

Использование темплейтов Handlebars с Webix UI

JavaScript-библиотека пользовательских компонентов Webix позволяет переопределить внешний вид многих элементов путем использования темплейтов. Например, во view:»tree» мы можем задать внешний вид элемента при помощи следующего темплейта:

webix.ui({
    view:"tree", data:tree_data,
    template:"{common.icon()} #value#"
});

simple template

 

Здесь вы можете видеть два главных компонента темплейтов Webix: вспомогательные средства и плейсхолдеры свойств. Вспомогательные средства — это предопределенные составляющие логики, которые отрисовывают некоторые общие элементы (иконка дерева в вышеприведенном примере). Плейсхолдеры свойств — это маркеры, которые будут заменены данными из связанного с ними объекта данных.

Webix 1.6: Полная поддержка тач-устройств Windows 8 и REST API

Сегодня мы рады сообщить о выпуске новой версии Webix 1.6, компоненты которой корректно работают на тач-устройствах Windows 8, а также поддерживают операции drag-and-drop на любых видах тач-устройств. Кроме того, версия 1.6 включает улучшение пользовательского интерфейса и усовершенствование интеграции с сервером.

win 8 DND

Windows 8

После улучшения работы библиотеки на мобильных устройствах iOS и Android мы перешли к усовершенствованию поддержки Windows 8 тач-устройств компонентами Webix.

DHTMLX Gantt Chart в Веб-приложениях Webix

Современному менеджеру проектов необходим быстрый и удобный в использовании инструмент, который позволил бы ему управлять проектами: добавлять новые задания, устанавливать сроки для них, создавать различные отношения между установленными задачами и т.д.
Обновление от 8 октября, 2020

С выходом версии Webix 8.0, стал доступен собственный JavaScript Gantt Chart компонент. Теперь пользователи Webix могут использовать оригинальный Webix Gantt. Этот компонент создан по всем канонам Webix framework и предназначен для интеграции в любые бизнес-приложения, независимо от их архитектуры и системной платформы.

Webix Gantt

Использование Pivot Chart для анализа данных

Если вы хотите добавить в ваше приложение JavaScript-чарты, обладающие основными функциями Pivot Table, для этого вы можете использовать Webix Pivot Chart. Этот многофункциональный компонент представляет ряды данных, категории и оси диаграмм, так же, как и виджет Charts JS, и, кроме того, обеспечивает вас интерактивными контролами фильтрования для быстрого анализа набора данных.

 pivot-chart

Простая интеграция Webix c dhtmlxScheduler

Все рабочие процессы связаны с разработкой планов и их выполнением. Для того, чтобы организовать события и деловые встречи, а также для управления и отслеживания текущих задач, менеджеры могут использовать интерактивный dhtmlxScheduler.

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

Отличная новость! Вы можете легко использовать Webix с вышеуказанным планировщиком. Такая интеграция наделит ваши веб-приложения многочисленными свойствами Scheduler в дополнение к замечательным функциям Webix.

интеграция Webix с Scheduler

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

Webix 1.5: Улучшенная поддержка мобильных устройств

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

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

тач демка

1 12 13 14 15 16