Struts 2-테마 및 템플릿

이 장의 실제 튜토리얼을 시작하기 전에 다음과 같이 몇 가지 정의를 살펴 보겠습니다. https://struts.apache.org−

Sr. 아니요 용어 및 설명
1

TAG

JSP, FreeMarker 또는 Velocity 내에서 실행되는 작은 코드입니다.

2

TEMPLATE

일반적으로 FreeMarker로 작성되며 특정 태그 (HTML 태그)로 렌더링 할 수있는 약간의 코드입니다.

THEME

공통 기능을 제공하기 위해 함께 패키지 된 템플릿 모음입니다.

또한 연습을 수행하기 위해 동일한 예제를 다시 사용할 것이므로 Struts2 Localization 장을 살펴볼 것을 제안 합니다.

사용할 때 Struts 2웹 페이지에서 <s : submit ...>, <s : textfield ...> 등과 같은 태그를 사용하면 Struts 2 프레임 워크는 미리 구성된 스타일과 레이아웃으로 HTML 코드를 생성합니다. Struts 2에는 세 가지 기본 제공 테마가 있습니다.

Sr. 아니요 주제 및 설명
1

SIMPLE theme

"종소리와 휘파람"이없는 최소한의 테마. 예를 들어, textfield 태그는 레이블, 유효성 검사, 오류보고 또는 기타 형식이나 기능없이 HTML <input /> 태그를 렌더링합니다.

2

XHTML theme

이것은 Struts 2에서 사용하는 기본 테마이며 간단한 테마가 제공하는 모든 기본 사항을 제공하고 HTML에 대한 표준 2 열 테이블 레이아웃, 각 HTML에 대한 레이블, 유효성 검사 및 오류보고 등과 같은 여러 기능을 추가합니다.

CSS_XHTML theme

이 테마는 간단한 테마가 제공하는 모든 기본 사항을 제공하고 HTML Struts 태그에 <div>를 사용하고 CSS 스타일 시트에 따라 배치 된 각 HTML Struts 태그에 대한 레이블을 사용하여 표준 2 열 CSS 기반 레이아웃과 같은 여러 기능을 추가합니다. .

위에서 언급했듯이 테마를 지정하지 않으면 Struts 2는 기본적으로 xhtml 테마를 사용합니다. 예를 들어,이 Struts 2 select tag −

<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가 사용해야하는 테마를 지정하기 위해 다음 방법 중 하나를 사용할 수 있습니다.

  • 특정 태그의 테마 속성

  • 태그 주변 양식 태그의 테마 속성

  • "theme"라는 페이지 범위 속성

  • "theme"라는 요청 범위 속성

  • "theme"라는 세션 범위 속성

  • "theme"라는 애플리케이션 범위 속성

  • struts.properties의 struts.ui.theme 속성 (기본값은 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 = xhtmlstruts-default.properties struts2-core.xy.z.jar 파일에 기본적으로 제공되는 파일입니다.

테마는 어떻게 작동합니까?

주어진 테마에 대해 모든 struts 태그에는 다음과 같은 연관된 템플릿이 있습니다. s:textfield → text.ftls:password → password.ftl 기타

이러한 템플릿 파일은 struts2-core.xy.z.jar 파일에 압축되어 있습니다. 이러한 템플릿 파일은 각 태그에 대해 미리 정의 된 HTML 레이아웃을 유지합니다.

이런 식으로, Struts 2 프레임 워크는 Sturts 태그 및 관련 템플릿을 사용하여 최종 HTML 마크 업 코드를 생성합니다.

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

기본 템플릿은 FreeMarker로 작성되며 확장자가 있습니다. .ftl.

Velocity 또는 JSP를 사용하여 템플릿을 디자인하고 그에 따라 struts.properties에서 구성을 설정할 수 있습니다. struts.ui.templateSuffixstruts.ui.templateDir.

새로운 테마 만들기

새 테마를 만드는 가장 간단한 방법은 기존 테마 / 템플릿 파일을 복사하고 필요한 수정을 수행하는 것입니다.

라는 폴더를 만드는 것으로 시작하겠습니다. template에서 의 WebContent / WEBINF / 클래스 와 우리의 새로운 테마의 이름을 가진 하위 폴더. 예를 들어 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 FileWar 파일을 만듭니다. 그런 다음 Tomcat의 webapps 디렉토리에이 WAR을 배포합니다. 마지막으로 Tomcat 서버를 시작하고 URL에 액세스하십시오.http://localhost:8080/HelloWorldStruts2. 다음 화면이 생성됩니다.

xhtml 테마에서 복사 한 후 out 테마에서 변경 한 결과 인 양식 구성 요소 주변의 테두리를 볼 수 있습니다. FreeMarker를 배우는 데 약간의 노력을 기울이면 테마를 매우 쉽게 만들거나 수정할 수 있습니다.

이제 기본적인 이해가 되셨기를 바랍니다. Sturts 2 테마와 템플릿, 그렇지 않습니까?