Интеграция Struts2 и Twitter Bootstrap, стилизация элементов формы веб-приложения
Подключаем плагин для интеграции
Применяем стили для различных элементов формы
Применяем стили для jquery-элементов используемых на форме
Стилизуем сообщения об ошибках валидации
Создаем и применяем собственную схему для стилизации элементов формы
В современном мире для разработки сайтов и веб-приложений существует огромное множество фреймворков и различных инструментов.
В данной статье рассмотрим, как легко и просто можно совместить в одном веб-приложении такие инструменты, как Struts2 и Twitter Bootstrap.
Struts2 — фреймворк для создания веб-приложений на java. Реализует шаблон проектирования MVC, который разделяет модель (бизнес-логику), представление (HTML-страницы) и контроллер (отвечающий за передачу данных от модели к представлению и обратно).
Twitter Bootstrap представляет простой и гибкий HTML, CSS, и JavaScript для популярных компонентов пользовательского интерфейса и их взаимодействия.
Я расскажу как интегрировать эти два инструмента на примерах. Разберем как применить стили Twitter Bootstrap к элементам формы, jquery-элементам, ошибкам валидации, а также создать и подключить собственную схему для стилизации.
Подключаем плагин для интеграции
Для интеграции Struts2 и Twitter Bootstrap нужно воспользоваться специальным плагином struts2-bootstrap-plugin. Подключить его можно следующим образом:
Для maven проекта необходимо в pom.xml подключить зависимость для плагина:
<dependency>
<groupId>com.jgeppert.struts2.bootstrap</groupId>
<artifactId>struts2-bootstrap-plugin</artifactId>
<version>1.6.1</version>
</dependency>
Или скачать данный плагин по ссылке: https://code.google.com/archive/p/struts2-bootstrap/downloads
и положить по пути WEB-INF/lib
Официальная документация для этого плагина: https://code.google.com/archive/p/struts2-bootstrap/
Применяем стили для различных элементов формы
Для применения стилей на странице необходимо обязательно подключить библиотеку тегов в JSP:
<%@ taglib prefix="sb" uri="/struts-bootstrap-tags" %>
Далее загрузить необходимые ресурсы и темы для struts-тегов:
<head>
<sb:head/>
</head>
Данный тег может содержать следующие атрибуты:
compressed (true*/false) — использовать сжатую версию bootstrap ресурсов;
includeStyles (true*/false) — загрузить основной css файл со стилями, будет размещен по пути struts/bootstrap/css/bootstrap.min.css
includeScripts (true*/false) — загрузить основной javascript файл;
includeScriptsValidation (true*/false) — загрузить bootstrap скрипты для валидации;
includeStylesResponsive (true/false*) — загрузить bootstrap стили для создания кастомных тем;
*- значения установлены по умолчанию.
Результатом данной инструкции будут сгенерированные javascript и css файлы:
Необходимо отметить, что bootstrap стили основаны на блочной верстке, поэтому если вы в своем приложении используете табличную верстку, то готовьтесь к некорректному отображению элементов на странице.
Для того чтобы применить стили для элементов формы нужно указать атрибут theme=»bootstrap» только для родительского элемента самой формы <s:form>
По умолчанию, к форме будет применен cssClass=”form-vertical” и на странице будет отображаться так:
Также к форме можно применить cssClass=”form-horizontal” и форма будет иметь вид:
Для элементов формы можно добавлять специальные иконки, подписи как перед элементом так и после него.
Вот некоторые примеры:
Применяем стили для jquery-элементов используемых на форме
Кроме основных элементов формы часто используются jquery элементы, которые относятся к плагину struts2-jquery. К таким элементам также можно применить bootstrap стилизацию.
Для этого помещаем данные элементы в форму с bootstrap темой, и jQuery-элементам указываем атрибут parentTheme=»bootstrap». Также не забываем перед этим на страницу загрузить необходимые ресурсы для struts2-jquery тегов:
Результатом будет следующая страница:
Стилизуем сообщения об ошибках валидации
Очень часто возникает потребность в проверке валидности введенных данных в элементы формы. С помощью Struts2 можно реализовать два вида валидации: серверная и клиентская.
Рассмотрим как стилизовать ошибки валидации с помощью Bootstrap.
Перед формой можно добавить поля, куда будут выводиться все сообщения о случившихся ошибках валидации, а для формы обязательно установить атрибут validate=”true”:
В случае случившихся ошибок валидации на странице они будут отображаться следующим образом:
С темой Bootstrap на форме не работает клиентская валидация. Поэтому вместо нее рассмотрим пример серверной ajax-валидации.
Настраиваем наше приложение для работы с Ajax:
Необходимо подключить зависимости для плагинов: struts2-jquery-plugin, struts2-json-plugin
Далее в файле конфигурации struts.xml определяем тип возвращаемого результата, и к нужному action подключаем перехватчик, который будет возвращать наши ошибки валидации в JSON формате:
Далее описываем подключение валидации на JSP.
В первую очередь загружаем скрипты для валидации:
Далее для формы выставляем уникальную id, внутри формы описываем struts2-jquery элемент кнопку, по которой будет происходит сабмит на сервер. Данную кнопку связываем с формой по атрибуту formIds, включаем валидацию с помощью атрибутов validate и validateFunction:
Нужно отметить, что в таком варианте сообщения об ошибках будут показаны в следующем виде:
Как видно на скриншоте здесь отсутствует поле, где показан список всех ошибок валидации.
Данные поля будут отображаться только в том случае, если проверка валидации будет реализована не через xml файл, а с помощью метода validate непосредственно в action-классе:
Создаем и применяем собственную схему для стилизации элементов формы
Иногда необходимо использовать нестандартные цвета и подсветки, тогда есть очень простое решение — создаем собственную тему для стилизации и подключаем ее.
Для создания собственной темы можно скопировать css-файл, который сгенерирован плагином и отредактировать стили по своему усмотрению, или же самостоятельно создать файл с описанием всех нужных стилей.
Устанавливаем атрибут includeStylesResponsive=true для тега <sb:head>.
Копируем файл со стилями в наше приложении:
Данный файл переименовываем в my-style-bootstrap.css, или можно не переименовывать — это по своему усмотрению. Этот файл и есть наша новая тема, которую теперь можно изменять.
Для того чтобы подключить свою тему нужно, после загрузки необходимых ресурсов для Bootstrap, указать путь к файлу с новыми стилями:
Файл со стилями должен быть размещен в приложении по соответствующему пути:
Зимний корпоратив 2014 Основная структура MVC приложения на ExtJS