WEBIX BLOG

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

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

Множественные поля ввода

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

По нажатию на иконку ‘+’, в форме создается дополнительное поле ввода. Соответственно, нажав на иконку ‘-’, лишнее поле ввода можно удалить.

Эта статья является последней частью руководства, в котором рассказывалось о разработке сайта с использованием библиотеки Webix UI и Java-фреймворка Struts 2. Если вы еще не знакомы с предыдущими частями руководства, то мы советуем вам прочитать о “Разработке базовой функциональности сайта” и о “Создании страниц и форм” с Webix и Struts 2.

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

Структура базы данных проста (она представлена на изображении ниже). Для хранения событий и докладов будем использовать две таблицы. Каждая запись в таблице speakers содержит идентификатор события event_id, к которому относится доклад.

Эта статья является продолжением туториала, который рассказывает о том, как разрабатывать веб-сайт с WEBIX и Struts 2.

В этой части вы узнаете о том, как создать страницы «Предстоящие события» и «Контакты», а также о том, как добавить информацию о событиях и затем редактировать ее.

Страница с предстоящими событиями будет выглядеть следующим образом:

Мы рады представить вам версию 1.9 JavaScript UI библиотеки Webix для создания быстрых HTML5 веб-приложений. Новая версия включает в себя некоторые изменения пользовательского интерфейса, которые ускоряют разработку веб-приложений, скины, которые стали еще лучше, и исправление некоторых ошибок.

Горячие клавиши для элементов управления

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отличные новости! Установка Webix становится проще. Уже сегодня библиотеку можно установить с помощью инструментов управления зависимостями NuGet или Bower.

NuGet

NuGet – это менеджер пакетов для платформы разработки Microsoft. Вы можете установить Webix при помощи NuGet, выполнив следующую командную строку:

Если вы используете Microsoft Visual Studio, вам нужно запустить следующую команду из Package Manager Console:

Bower

Bower – это менеджер пакетов для веб. Он предоставляет разработчикам комплексное решение проблемы управления пакетами на стороне клиента. Запустите следующую команду, чтобы установить библиотеку Webix с помощью Bower:

Вот и все. Вышеуказанная команда установит последнюю версию Webix в нужное место на жестком диске.

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

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