ДОСТУПНА НОВАЯ ВЕРСИЯ! Webix 11 Подробнее Обновления в Core, SpreadSheet, File Manager и Report Manager и многое другое

WEBIX JAVASCRIPT LIBRARY BLOG

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

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

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

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

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

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

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

webix and struts database

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

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

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

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

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

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

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

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

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

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

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

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

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

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

simple template

 

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

Создание веб-чата с помощью Webix и WebSockets API

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

webix-based-chat

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

 

1 2 3 4 5