Struts 2 - Temas e modelos

Antes de iniciar o tutorial real para este capítulo, vamos dar uma olhada em algumas definições dadas por https://struts.apache.org-

Sr. Não	Termo e descrição
1	TAG Um pequeno trecho de código executado de dentro do JSP, FreeMarker ou Velocity.
2	TEMPLATE Um pedaço de código, geralmente escrito em FreeMarker, que pode ser renderizado por certas tags (tags HTML).
3	THEME Uma coleção de modelos agrupados para fornecer funcionalidade comum.

Eu também sugeriria passar pelo capítulo Localização do Struts2 porque usaremos o mesmo exemplo mais uma vez para realizar nosso exercício.

Quando você usa um Struts 2tag como <s: submit ...>, <s: textfield ...> etc em sua página da web, a estrutura do Struts 2 gera código HTML com um estilo e layout pré-configurados. O Struts 2 vem com três temas integrados -

Sr. Não	Tema e descrição
1	SIMPLE theme Um tema minimalista sem "sinos e assobios". Por exemplo, a tag textfield renderiza a tag HTML <input /> sem um rótulo, validação, relatório de erro ou qualquer outra formatação ou funcionalidade.
2	XHTML theme Este é o tema padrão usado pelo Struts 2 e fornece todos os fundamentos que o tema simples fornece e adiciona vários recursos como layout de tabela de duas colunas padrão para o HTML, rótulos para cada um dos HTML, validação e relatório de erros, etc.
3	CSS_XHTML theme Este tema fornece todos os fundamentos que o tema simples fornece e adiciona vários recursos, como layout padrão baseado em CSS de duas colunas, usando <div> para as tags HTML Struts, rótulos para cada uma das tags HTML Struts, colocados de acordo com a folha de estilo CSS .

Conforme mencionado acima, se você não especificar um tema, o Struts 2 usará o tema xhtml por padrão. Por exemplo, esta tag de seleção do Struts 2 -

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

gera a seguinte marcação 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>

Aqui empinfo é o nome da ação definido no arquivo struts.xml.

Selecionando Temas

Você pode especificar o tema de acordo com o Struts 2, base de tag ou pode usar um dos seguintes métodos para especificar qual tema o Struts 2 deve usar -

O atributo de tema na tag específica
O atributo theme em uma tag de formulário circundante
O atributo de escopo de página denominado "tema"
O atributo com escopo de solicitação denominado "theme"
O atributo com escopo de sessão denominado "tema"
O atributo do escopo do aplicativo denominado "theme"
A propriedade struts.ui.theme em struts.properties (o padrão é xhtml)

A seguir está a sintaxe para especificá-los no nível de tag se você estiver disposto a usar temas diferentes para tags diferentes -

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

Porque não é muito prático usar temas por tag, então simplesmente podemos especificar a regra em struts.properties arquivo usando as seguintes tags -

# 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

A seguir está o resultado que pegamos no capítulo de localização, onde usamos o tema padrão com uma configuração struts.ui.theme = xhtml dentro struts-default.properties que vem por padrão no arquivo struts2-core.xy.z.jar.

Como funciona um tema?

Para um determinado tema, cada tag struts tem um modelo associado como s:textfield → text.ftl e s:password → password.ftl etc.

Esses arquivos de modelo vêm compactados no arquivo struts2-core.xy.z.jar. Esses arquivos de modelo mantêm um layout HTML predefinido para cada tag.

Nesse caminho, Struts 2 framework gera código de marcação HTML final usando tags Sturts e modelos associados.

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

Os modelos padrão são escritos no FreeMarker e têm uma extensão .ftl.

Você também pode projetar seus modelos usando velocidade ou JSP e, de acordo com isso, definir a configuração em struts.properties usando struts.ui.templateSuffix e struts.ui.templateDir.

Criação de novos temas

A maneira mais simples de criar um novo tema é copiar qualquer um dos arquivos de tema / modelo existentes e fazer as modificações necessárias.

Vamos começar criando uma pasta chamada templateem WebContent / WEBINF / classes e uma subpasta com o nome do nosso novo tema. Por exemplo, WebContent / WEB-INF / classes / template / mytheme .

A partir daqui, você pode começar a construir modelos do zero, ou também pode copiar os modelos do Struts2 distribution onde você pode modificá-los conforme necessário no futuro.

Vamos modificar o modelo padrão existente xhtmlpara fins de aprendizagem. Agora, vamos copiar o conteúdo de struts2-core-xyzjar / template / xhtml para nosso diretório de tema e modificar apenas o arquivo WebContent / WEBINF / classes / template / mytheme / control .ftl. Quando abrimos control.ftl, que terá as seguintes linhas -

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

Vamos mudar o arquivo acima control.ftl ter o seguinte conteúdo -

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

Se você verificar form.ftl então você vai achar que control.ftlé usado neste arquivo, mas form.ftl está se referindo a este arquivo do xhtml theme. Então, vamos mudá-lo da seguinte maneira -

<#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" />

Eu suponho que você não teria muito entendimento do FreeMarker linguagem de modelo, você ainda pode ter uma boa idéia do que deve ser feito olhando para os arquivos .ftl.

No entanto, vamos salvar as alterações acima e voltar ao nosso exemplo de localização e criar o WebContent/WEB-INF/classes/struts.properties arquivo com o seguinte conteúdo

# 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

Agora, após esta mudança, clique com o botão direito no nome do projeto e clique Export > WAR Filepara criar um arquivo de guerra. Em seguida, implante esse WAR no diretório webapps do Tomcat. Finalmente, inicie o servidor Tomcat e tente acessar o URLhttp://localhost:8080/HelloWorldStruts2. Isso produzirá a seguinte tela -

Você pode ver uma borda ao redor do componente do formulário que é um resultado da mudança que fizemos no nosso tema depois de copiá-lo do xhtml theme. Se você se esforçar pouco para aprender o FreeMarker, poderá criar ou modificar seus temas com muita facilidade.

Espero que agora você tenha um entendimento básico sobre Sturts 2 temas e templates, não é?