WEBIX BLOG

Новый генератор форм — Webix Form Builder

Одной из самых скучных задач в веб-разработке считается создание формы. Сегодня практически любое веб-приложение содержит по крайней мере одну форму. Процесс постоянного создания новых форм не особо воодушевляет. Поэтому мы создали генератор форм Form Builder.

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

Webix Form Builder Tool

Webix 1.10: Новая документация и совместимость с IE12

Настало время выпуска ежемесячного обновления Webix. В новой версии 1.10 нет каких-либо значительных нововведений. Она включает только исправления некоторых ошибок и небольшие обновления. Полный список изменений вы можете найти здесь.

updated webix documentation

Хотя мы не можем похвастаться множеством новых возможностей, у нас есть две важные новости.

Начиная с версии 1.10, Webix совместим с IE12. Несмотря на то, что данная версия IE еще не была выпущена, все виджеты Webix UI уже поддерживают ее.

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

Скачать последнюю версию Webix можно по этой ссылке.

Анонс Webix 2.0: Множественные поля ввода, расширенная локализация и не только

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

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

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

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

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

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

Интеграция сайта на Struts и Webix c базой данных

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

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

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

webix and struts database

Создание страниц и форм сайта на Struts с помощью Webix

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

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

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

страница предстоящих событий

Webix 1.9: Горячие клавиши для элементов управления и другие улучшения UI

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

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

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

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

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

Разработка базовой функциональности сайта 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-дизайне, благодаря которому ваши веб-приложения будут стильными и удобными в использовании.

1 16 17 18 19 20 21