Интеграция 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 подключить зависимость для плагина:
Или скачать данный плагин по ссылке: https://code.google.com/p/struts2-bootstrap/downloads/list
и положить по пути WEB-INF/lib
Официальная документация для этого плагина: https://code.google.com/p/struts2-bootstrap/
Применяем стили для различных элементов формы
Для применения стилей на странице необходимо обязательно подключить библиотеку тегов в JSP:
Далее загрузить необходимые ресурсы и темы для struts-тегов:
Данный тег может содержать следующие атрибуты:
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
Свяжитесь с нами!
Продажи: sales@jazzteam.org
Карьера: talent@jazzteam.org
Info: alena@jazzteam.org
CEO: zmicer@jazzteam.org
Skype: dzmitry_harachka
Phone: +37529 753 10 41
Представительство в Нидерландах:
Graaf Florisstraat 102b
3021CM, Rotterdam
Phone: +3164 742 23 10
Skype: peter_reitsma
E-mail: netherlands@jazzteam.org
Представительство в США:
Software and Support Services, Inc.
208 Canoe Court,
Redwood City, CA 94065
Phone: +1650 817 51 00
E-mail: usa@jazzteam.org
Мы в социальных сетях
 |
 |
 |
 |
 |