Struts 2 - Темы и шаблоны

Прежде чем приступить к практическому руководству по этой главе, давайте рассмотрим несколько определений, которые дает https://struts.apache.org-

Старший Нет	Срок и описание
1	TAG Небольшой фрагмент кода, выполняемый из JSP, FreeMarker или Velocity.
2	TEMPLATE Немного кода, обычно написанного на FreeMarker, который может отображаться с помощью определенных тегов (тегов HTML).
3	THEME Набор шаблонов, объединенных вместе для обеспечения общей функциональности.

Я также предлагаю пройти через главу «Локализация Struts2», потому что мы еще раз возьмем тот же пример для выполнения нашего упражнения.

Когда вы используете Struts 2на вашей веб-странице, например <s: submit ...>, <s: textfield ...> и т. д., структура Struts 2 генерирует HTML-код с предварительно настроенным стилем и макетом. Struts 2 поставляется с тремя встроенными темами -

Старший Нет	Тема и описание
1	SIMPLE theme Минималистичная тема без "наворотов". Например, тег текстового поля отображает тег HTML <input /> без метки, проверки, сообщения об ошибках или любого другого форматирования или функций.
2	XHTML theme Это тема по умолчанию, используемая Struts 2, она предоставляет все основы, которые предоставляет простая тема, и добавляет несколько функций, таких как стандартный макет таблицы с двумя столбцами для HTML, метки для каждого из HTML, проверка и отчеты об ошибках и т. Д.
3	CSS_XHTML theme Эта тема предоставляет все основы, которые предоставляет простая тема, и добавляет несколько функций, таких как стандартный двухколоночный макет на основе CSS, с использованием <div> для тегов HTML Struts, меток для каждого из тегов HTML Struts, размещенных в соответствии с таблицей стилей CSS. .

Как упоминалось выше, если вы не укажете тему, Struts 2 будет использовать тему xhtml по умолчанию. Например, этот тег выбора Struts 2 -

<s:textfield name = "name" label = "Name" />

генерирует следующую разметку HTML -

<tr>

   <td class="tdLabel">
      <label for = "empinfo_name" class="label">Name:</label>
   </td>
   <td>
      <input type = "text" name = "name" value = "" id = "empinfo_name"/>
   </td>

</tr>

Вот empinfo имя действия, определенное в файле struts.xml.

Выбор тем

Вы можете указать тему в соответствии с Struts 2, на основе тегов или вы можете использовать один из следующих методов, чтобы указать, какую тему Struts 2 должен использовать:

• Атрибут темы в конкретном теге

• Атрибут темы в теге окружающей формы тега

• Атрибут области страницы с именем "тема"

• Атрибут области запроса с именем "тема"

• Атрибут области сеанса с именем "тема"

• Атрибут области приложения с именем "тема"

• Свойство struts.ui.theme в struts.properties (по умолчанию xhtml)

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

<s:textfield name = "name" label = "Name" theme="xhtml"/>

Поскольку использовать темы для каждого тега не очень практично, мы можем просто указать правило в struts.properties файл, используя следующие теги -

# Standard UI theme
struts.ui.theme = xhtml
# Directory where theme template resides
struts.ui.templateDir = template
# Sets the default template type. Either ftl, vm, or jsp
struts.ui.templateSuffix = ftl

Ниже приводится результат, который мы взяли из главы о локализации, где мы использовали тему по умолчанию с настройкой struts.ui.theme = xhtml в struts-default.properties файл, который по умолчанию находится в файле struts2-core.xy.z.jar.

Как работает тема?

Для данной темы каждый тег struts имеет связанный шаблон, например s:textfield → text.ftl и s:password → password.ftl и т.п.

Эти файлы шаблонов заархивированы в файл struts2-core.xy.z.jar. Эти файлы шаблонов содержат предварительно определенный макет HTML для каждого тега.

Таким образом, Struts 2 framework генерирует окончательный код разметки HTML с помощью тегов Sturts и связанных шаблонов.

Struts 2 tags + Associated template file = Final HTML markup code.

Шаблоны по умолчанию написаны в FreeMarker и имеют расширение .ftl.

Вы также можете создавать свои шаблоны, используя скорость или JSP, и соответственно устанавливать конфигурацию в struts.properties, используя struts.ui.templateSuffix и struts.ui.templateDir.

Создание новых тем

Самый простой способ создать новую тему - скопировать любой из существующих файлов темы / шаблона и внести необходимые изменения.

Начнем с создания папки под названием templateв WebContent / WEBINF / classes и подпапку с названием нашей новой темы. Например, WebContent / WEB-INF / classes / template / mytheme .

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

Мы собираемся изменить существующий шаблон по умолчанию xhtmlдля учебных целей. Теперь давайте скопируем содержимое из struts2-core-xyzjar / template / xhtml в каталог нашей темы и изменим только файл WebContent / WEBINF / classes / template / mytheme / control .ftl. Когда мы открываем control.ftl, который будет иметь следующие строки -

<table class="${parameters.cssClass?default('wwFormTable')?html}"<#rt/>
<#if parameters.cssStyle??> style="${parameters.cssStyle?html}"<#rt/>
</#if>
>

Давайте изменим вышеуказанный файл control.ftl иметь следующий контент -

<table style = "border:1px solid black;">

Если вы проверите form.ftl тогда вы обнаружите, что control.ftlиспользуется в этом файле, но form.ftl ссылается на этот файл из темы xhtml. Итак, давайте изменим его следующим образом -

<#include "/${parameters.templateDir}/xhtml/form-validate.ftl" />
<#include "/${parameters.templateDir}/simple/form-common.ftl" />
<#if (parameters.validate?default(false))>
   onreset = "${parameters.onreset?default('clearErrorMessages(this);\
   clearErrorLabels(this);')}"
   
<#else>
   <#if parameters.onreset??>
      onreset="${parameters.onreset?html}"
   </#if>
</#if>
#include "/${parameters.templateDir}/mytheme/control.ftl" />

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

Однако давайте сохраним указанные выше изменения и вернемся к нашему примеру локализации и создадим WebContent/WEB-INF/classes/struts.properties файл со следующим содержанием

# Customized them
struts.ui.theme = mytheme
# Directory where theme template resides
struts.ui.templateDir = template
# Sets the template type to ftl.
struts.ui.templateSuffix = ftl

Теперь после этого изменения щелкните правой кнопкой мыши имя проекта и нажмите Export > WAR Fileдля создания файла War. Затем разверните эту WAR в каталоге веб-приложений Tomcat. Наконец, запустите сервер Tomcat и попробуйте получить доступ к URL-адресуhttp://localhost:8080/HelloWorldStruts2. Это создаст следующий экран -

Вы можете увидеть рамку вокруг компонента формы, которая является результатом изменения, которое мы внесли в нашу тему после ее копирования из темы xhtml. Если вы приложите немного усилий для изучения FreeMarker, вы сможете очень легко создавать или изменять свои темы.

Я надеюсь, что теперь у вас есть базовое понимание Sturts 2 темы и шаблоны, не так ли?