Struts 2 - Temi e modelli

Prima di iniziare il tutorial vero e proprio per questo capitolo, esaminiamo alcune definizioni fornite da https://struts.apache.org-

Suor n Termine e descrizione
1

TAG

Una piccola porzione di codice eseguita dall'interno di JSP, FreeMarker o Velocity.
2

TEMPLATE

Un po 'di codice, solitamente scritto in FreeMarker, che può essere reso da determinati tag (tag HTML).
3

THEME

Una raccolta di modelli confezionati insieme per fornire funzionalità comuni.

Suggerirei anche di passare attraverso il capitolo sulla localizzazione di Struts2 perché prenderemo di nuovo lo stesso esempio per eseguire il nostro esercizio.

Quando usi un file Struts 2tag come <s: submit ...>, <s: textfield ...> ecc nella tua pagina web, il framework Struts 2 genera codice HTML con uno stile e layout preconfigurati. Struts 2 viene fornito con tre temi integrati:

Suor n Tema e descrizione
1

SIMPLE theme

Un tema minimale senza "campane e fischietti". Ad esempio, il tag textfield esegue il rendering del tag HTML <input /> senza etichetta, convalida, segnalazione degli errori o qualsiasi altra formattazione o funzionalità.
2

XHTML theme

Questo è il tema predefinito utilizzato da Struts 2 e fornisce tutte le nozioni di base fornite dal tema semplice e aggiunge diverse funzionalità come il layout della tabella standard a due colonne per l'HTML, le etichette per ciascuno degli HTML, la convalida e la segnalazione degli errori, ecc.
3

CSS_XHTML theme

Questo tema fornisce tutte le nozioni di base fornite dal tema semplice e aggiunge diverse funzionalità come il layout standard basato su CSS a due colonne, utilizzando <div> per i tag HTML Struts, etichette per ciascuno dei tag HTML Struts, posizionato secondo il foglio di stile CSS .

Come accennato in precedenza, se non specifichi un tema, Struts 2 utilizzerà il tema xhtml per impostazione predefinita. Ad esempio, questo tag di selezione di Struts 2:

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

genera il seguente markup 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>

Qui empinfo è il nome dell'azione definito nel file struts.xml.

Selezione di temi

Puoi specificare il tema secondo Struts 2, in base ai tag oppure puoi usare uno dei seguenti metodi per specificare quale tema Struts 2 dovrebbe usare:

  • L'attributo del tema sul tag specifico

  • L'attributo del tema sul tag del modulo circostante a un tag

  • L'attributo con ambito di pagina denominato "tema"

  • L'attributo con ambito di richiesta denominato "tema"

  • L'attributo con ambito di sessione denominato "tema"

  • L'attributo con ambito applicazione denominato "tema"

  • La proprietà struts.ui.theme in struts.properties (il valore predefinito è xhtml)

Di seguito è riportata la sintassi per specificarli a livello di tag se si desidera utilizzare temi diversi per tag diversi:

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

Poiché non è molto pratico utilizzare i temi in base ai tag, quindi è possibile specificare semplicemente la regola in struts.properties file utilizzando i seguenti tag:

# 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

Di seguito è riportato il risultato che abbiamo raccolto dal capitolo sulla localizzazione in cui abbiamo utilizzato il tema predefinito con un'impostazione struts.ui.theme = xhtml in struts-default.properties file che viene fornito per impostazione predefinita nel file struts2-core.xy.z.jar.

Come funziona un tema?

Per un dato tema, ogni tag struts ha un modello associato come s:textfield → text.ftl e s:password → password.ftl eccetera.

Questi file modello vengono compressi nel file struts2-core.xy.z.jar. Questi file modello mantengono un layout HTML predefinito per ogni tag.

In questo modo, Struts 2 framework genera il codice di markup HTML finale utilizzando i tag Sturts e i modelli associati.

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

I modelli predefiniti sono scritti in FreeMarker e hanno un'estensione .ftl.

Puoi anche progettare i tuoi modelli usando velocity o JSP e di conseguenza impostare la configurazione in struts.properties usando struts.ui.templateSuffix e struts.ui.templateDir.

Creazione di nuovi temi

Il modo più semplice per creare un nuovo tema è copiare uno qualsiasi dei file di tema / modello esistenti e apportare le modifiche necessarie.

Cominciamo con la creazione di una cartella chiamata templatein WebContent / WEBINF / classes e una sottocartella con il nome del nostro nuovo tema. Ad esempio, WebContent / WEB-INF / classes / template / mytheme .

Da qui, puoi iniziare a creare modelli da zero oppure puoi anche copiare i modelli dal file Struts2 distribution dove è possibile modificarli come richiesto in futuro.

Stiamo per modificare il modello predefinito esistente xhtmlper scopi di apprendimento. Ora, copiamo il contenuto da struts2-core-xyzjar / template / xhtml alla nostra directory del tema e modifichiamo solo il file WebContent / WEBINF / classes / template / mytheme / control .ftl. Quando apriamo control.ftl che avrà le seguenti righe:

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

Cambiamo file sopra control.ftl avere il seguente contenuto:

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

Se controlli form.ftl allora lo troverai control.ftlè utilizzato in questo file, ma form.ftl fa riferimento a questo file dal tema xhtml. Quindi cambiamolo come segue:

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

Presumo che non avresti molta comprensione del file FreeMarker linguaggio template, puoi comunque avere una buona idea di cosa fare guardando i file .ftl.

Tuttavia, salviamo le modifiche precedenti e torniamo al nostro esempio di localizzazione e creiamo il file WebContent/WEB-INF/classes/struts.properties file con il seguente contenuto

# 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

Ora, dopo questa modifica, fai clic con il pulsante destro del mouse sul nome del progetto e fai clic Export > WAR Fileper creare un file War. Quindi distribuire questo WAR nella directory webapps di Tomcat. Infine, avvia il server Tomcat e prova ad accedere all'URLhttp://localhost:8080/HelloWorldStruts2. Questo produrrà la seguente schermata:

Puoi vedere un bordo attorno al componente del modulo che è il risultato della modifica che abbiamo apportato al tema dopo averlo copiato dal tema xhtml. Se fai poco sforzo nell'apprendimento di FreeMarker, sarai in grado di creare o modificare i tuoi temi molto facilmente.

Spero che ora tu abbia una conoscenza di base su Sturts 2 temi e modelli, non è vero?