Интеграция Struts2 и Twitter Bootstrap, стилизация элементов формы веб-приложения

January 20, 2014 admin Технические статьи, 0

Применяем стили для различных элементов формы

Применяем стили для 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/p/struts2-bootstrap/downloads/list
и положить по пути WEB-INF/lib

Официальная документация для этого плагина: https://code.google.com/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, указать путь к файлу с новыми стилями: