Struts 2 - Motywy i szablony

Zanim zaczniemy właściwy tutorial do tego rozdziału, przyjrzyjmy się kilku definicjom podanym przez https://struts.apache.org-

Sr.No	Termin i opis
1	TAG Mały fragment kodu wykonywany z poziomu JSP, FreeMarker lub Velocity.
2	TEMPLATE Fragment kodu, zwykle napisany we FreeMarker, który może być renderowany przez określone tagi (tagi HTML).
3	THEME Zbiór szablonów spakowanych razem, aby zapewnić wspólną funkcjonalność.

Sugerowałbym również przejrzenie rozdziału Lokalizacja Struts2, ponieważ weźmiemy ten sam przykład jeszcze raz, aby wykonać nasze ćwiczenie.

Kiedy używasz Struts 2tag, taki jak <s: submit ...>, <s: textfield ...> itp. na swojej stronie internetowej, framework Struts 2 generuje kod HTML ze wstępnie skonfigurowanym stylem i układem. Struts 2 zawiera trzy wbudowane motywy -

Sr.No	Motyw i opis
1	SIMPLE theme Minimalistyczny motyw bez „dzwonków i gwizdków”. Na przykład tag textfield renderuje tag HTML <input /> bez etykiety, walidacji, raportowania błędów ani żadnego innego formatowania czy funkcji.
2	XHTML theme Jest to domyślny motyw używany w Struts 2 i zapewnia wszystkie podstawowe funkcje, które zapewnia prosty motyw i dodaje kilka funkcji, takich jak standardowy układ dwukolumnowej tabeli dla kodu HTML, etykiety dla każdego kodu HTML, walidacja i raportowanie błędów itp.
3	CSS_XHTML theme Ten motyw zapewnia wszystkie podstawy, które zapewnia prosty motyw i dodaje kilka funkcji, takich jak standardowy dwukolumnowy układ oparty na CSS, używając <div> dla tagów HTML Struts, etykiet dla każdego z tagów HTML Struts, umieszczonych zgodnie z arkuszem stylów CSS .

Jak wspomniano powyżej, jeśli nie określisz motywu, Struts 2 użyje domyślnie motywu xhtml. Na przykład ten znacznik wyboru Struts 2 -

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

generuje następujące znaczniki 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>

Tutaj empinfo to nazwa działania zdefiniowana w pliku struts.xml.

Wybieranie motywów

Możesz określić motyw zgodnie z Struts 2, na podstawie tagów lub możesz użyć jednej z następujących metod, aby określić, jakiego motywu ma używać Struts 2 -

Atrybut motywu na określonym znaczniku
Atrybut motywu na otaczającym znacznik znaczniku formularza
Atrybut o zakresie strony o nazwie „theme”
Atrybut w zakresie żądania o nazwie „theme”
Atrybut o zasięgu sesji o nazwie „theme”
Atrybut w zakresie aplikacji o nazwie „theme”
Właściwość struts.ui.theme w struts.properties (domyślnie xhtml)

Poniżej znajduje się składnia służąca do określania ich na poziomie tagu, jeśli chcesz używać różnych motywów dla różnych tagów -

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

Ponieważ używanie motywów na podstawie tagów nie jest zbyt praktyczne, więc możemy po prostu określić regułę w struts.properties plik przy użyciu następujących tagów -

# 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

Oto wynik, który uzyskaliśmy z rozdziału dotyczącego lokalizacji, w którym użyliśmy domyślnego motywu z ustawieniem struts.ui.theme = xhtml w struts-default.properties domyślny plik struts2-core.xy.z.jar.

Jak działa motyw?

Dla danego motywu każdy znacznik Struts ma powiązany szablon, np. s:textfield → text.ftl i s:password → password.ftl itp.

Te pliki szablonów są spakowane w pliku struts2-core.xy.z.jar. Te pliki szablonów zachowują wstępnie zdefiniowany układ HTML dla każdego znacznika.

W ten sposób, Struts 2 Framework generuje ostateczny kod HTML przy użyciu tagów Sturts i powiązanych szablonów.

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

Domyślne szablony są napisane we FreeMarker i mają rozszerzenie .ftl.

Możesz również zaprojektować swoje szablony za pomocą velocity lub JSP i odpowiednio ustawić konfigurację w struts.properties za pomocą struts.ui.templateSuffix i struts.ui.templateDir.

Tworzenie nowych motywów

Najprostszym sposobem utworzenia nowego motywu jest skopiowanie dowolnego z istniejących plików motywu / szablonu i dokonanie wymaganych modyfikacji.

Zacznijmy od stworzenia folderu o nazwie templatew WebContent / WEBINF / classes i podfolderze z nazwą naszego nowego motywu. Na przykład WebContent / WEB-INF / classes / template / mytheme .

W tym miejscu możesz rozpocząć tworzenie szablonów od zera lub możesz również skopiować szablony z pliku Struts2 distribution gdzie możesz je zmodyfikować zgodnie z wymaganiami w przyszłości.

Zamierzamy zmodyfikować istniejący domyślny szablon xhtmldo celów edukacyjnych. Teraz skopiujmy zawartość z struts2-core-xyzjar / template / xhtml do naszego katalogu z motywami i zmodyfikujmy tylko plik WebContent / WEBINF / classes / template / mytheme / control .ftl. Kiedy otworzymy plik control.ftl, który będzie miał następujące wiersze -

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

Zmieńmy powyższy plik control.ftl mieć następującą zawartość -

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

Jeśli sprawdzisz form.ftl wtedy to znajdziesz control.ftljest używany w tym pliku, ale form.ftl odwołuje się do tego pliku z motywu xhtml. Więc zmieńmy to w następujący sposób -

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

Zakładam, że nie miałbyś zbyt wiele zrozumienia FreeMarker języka szablonów, nadal możesz zorientować się, co należy zrobić, patrząc na pliki .ftl.

Zapiszmy jednak powyższe zmiany i wróćmy do naszego przykładu lokalizacji i utwórzmy plik WebContent/WEB-INF/classes/struts.properties plik z następującą zawartością

# 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

Teraz po tej zmianie kliknij prawym przyciskiem myszy nazwę projektu i kliknij Export > WAR Fileaby utworzyć plik wojny. Następnie wdróż tę WAR w katalogu webapps serwera Tomcat. Na koniec uruchom serwer Tomcat i spróbuj uzyskać dostęp do adresu URLhttp://localhost:8080/HelloWorldStruts2. Spowoduje to wyświetlenie następującego ekranu -

Możesz zobaczyć obramowanie wokół komponentu formularza, które jest wynikiem zmiany, którą wprowadziliśmy w naszym motywie po skopiowaniu go z motywu xhtml. Jeśli włożysz niewielki wysiłek w naukę FreeMarkera, będziesz mógł bardzo łatwo tworzyć lub modyfikować swoje motywy.

Mam nadzieję, że teraz masz podstawowe zrozumienie Sturts 2 motywy i szablony, prawda?