Apache Tapestry-구성 요소

앞에서 설명한 것처럼 구성 요소와 페이지는 페이지가 루트 구성 요소이고 하나 이상의 하위 구성 요소를 포함한다는 점을 제외하면 동일합니다. 구성 요소는 항상 페이지 내에 있으며 페이지의 거의 모든 동적 기능을 수행합니다.

태피스트리 구성 요소는 다음을 사용하여 복잡한 그리드 기능에 대한 간단한 HTML 링크를 렌더링합니다. interactive AJAX. 구성 요소에는 다른 구성 요소도 포함될 수 있습니다. 태피스트리 구성 요소는 다음 항목으로 구성됩니다.

  • Component Class − 구성 요소의 주요 Java 클래스.

  • XML Template− XML 템플릿은 페이지 템플릿과 유사합니다. 구성 요소 클래스는 템플릿을 최종 출력으로 렌더링합니다. 일부 구성 요소에는 템플릿이 없을 수 있습니다. 이 경우 출력은 다음을 사용하여 구성 요소 클래스 자체에 의해 생성됩니다.MarkupWriter 수업.

  • Body− 페이지 템플릿 내부에 지정된 컴포넌트는 사용자 정의 마크 업을 가질 수 있으며 "컴포넌트 본문"이라고합니다. 구성 요소 템플릿에<body />요소의 경우 <body /> 요소가 구성 요소의 본문으로 대체됩니다. 이는 XML 템플릿 섹션의 앞부분에서 설명한 레이아웃과 유사합니다.

  • Rendering − 렌더링은 컴포넌트의 XML 템플릿과 본문을 컴포넌트의 실제 출력으로 변환하는 프로세스입니다.

  • Parameters − 구성 요소와 페이지 간의 통신을 생성하여 이들간에 데이터를 전달하는 데 사용됩니다.

  • Events− 구성 요소에서 해당 컨테이너 / 부모 (페이지 또는 다른 구성 요소)로 기능을 위임합니다. 페이지 탐색 목적으로 광범위하게 사용됩니다.

표현

구성 요소의 렌더링은 일련의 사전 정의 된 단계에서 수행됩니다. 구성 요소 시스템의 각 단계에는 구성 요소 클래스의 규칙 또는 주석에 의해 정의 된 해당 메서드가 있어야합니다.

// Using annotaion 
@SetupRender 
void initializeValues() { 
   // initialize values 
}

// using convention 
boolean afterRender() { 
   // do logic 
   return true; 
}

단계, 메서드 이름 및 주석이 아래에 나열되어 있습니다.

주석 기본 메소드 이름
@SetupRender setupRender ()
뿡 빵뀨 beginRender ()
안녕하세요. beforeRenderTemplate ()
안녕하세요. beforeRenderBody ()
안녕하세요. afterRenderBody ()
안녕하세요. afterRenderTemplate ()
안녕하세요. afterRender ()
안녕하세요. cleanupRender ()

각 단계에는 특정 목적이 있으며 다음과 같습니다.

SetupRender

SetupRender는 렌더링 프로세스를 시작합니다. 일반적으로 구성 요소의 매개 변수를 설정합니다.

BeginRender

BeginRender는 구성 요소 렌더링을 시작합니다. 일반적으로 구성 요소의 시작 / 시작 태그를 렌더링합니다.

BeforeRenderTemplate

BeforeRenderTemplate은 템플릿 주위에 특별한 마크 업을 추가하여 XML 템플릿을 장식하는 데 사용됩니다. 또한 템플릿 렌더링을 건너 뛰는 옵션도 제공합니다.

BeforeRenderBody

BeforeRenderTemplate은 구성 요소 본문 요소의 렌더링을 건너 뛰는 옵션을 제공합니다.

AfterRenderBody

AfterRenderBody는 구성 요소의 본문이 렌더링 된 후 호출됩니다.

AfterRenderTemplate

AfterRenderTemplate은 구성 요소의 템플릿이 렌더링 된 후 호출됩니다.

AfterRender

AfterRender는 BeginRender의 대응 요소이며 일반적으로 닫기 태그를 렌더링합니다.

CleanupRender

CleanupRender는 SetupRender에 해당합니다. 렌더링 과정에서 생성 된 모든 객체를 해제 / 처리합니다.

렌더링 단계의 흐름은 앞으로 만 진행되는 것이 아닙니다. 그것은 단계의 반환 값에 따라 단계 사이를왔다 갔다합니다.

예를 들어 SetupRender 메서드가 false를 반환하면 렌더링이 CleanupRender 단계로 이동하고 그 반대의 경우도 마찬가지입니다. 여러 단계 간의 흐름을 명확하게 이해하려면 아래 다이어그램의 흐름을 확인하십시오.

간단한 구성 요소

"Hello, Tapestry"라는 출력 메시지가있는 간단한 구성 요소 Hello를 만들어 보겠습니다. 다음은 Hello 구성 요소 및 해당 템플릿의 코드입니다.

package com.example.MyFirstApplication.components;  
public class Hello {  
}
<html  
   xmlns:t = "https://tapestry.apache.org/schema/tapestry_5_4.xsd" 
   xmlns:p = "tapestry:parameter"> 
  
   <div> 
      <p>Hello, Tapestry (from component).</p> 
   </div> 
  
</html>

Hello 컴포넌트는 페이지 템플릿에서 다음과 같이 호출 할 수 있습니다.

<html title = "Hello component test page" 
   xmlns:t = "https://tapestry.apache.org/schema/tapestry_5_4.xsd" 
   xmlns:p = "tapestry:parameter"> 
<t:hello />  
</html>

마찬가지로 구성 요소는 아래와 같이 템플릿 대신 MarkupWriter를 사용하여 동일한 출력을 렌더링 할 수 있습니다.

package com.example.MyFirstApplication.components; 
  
import org.apache.tapestry5.MarkupWriter; 
import org.apache.tapestry5.annotations.BeginRender;   

public class Hello { 
   @BeginRender 
   void renderMessage(MarkupWriter writer) { 
      writer.write("<p>Hello, Tapestry (from component)</p>"); 
   } 
}

아래 코드 블록과 같이 구성 요소 템플릿을 변경하고 <body /> 요소를 포함하겠습니다.

<html>  
   xmlns:t = "https://tapestry.apache.org/schema/tapestry_5_4.xsd" 
   xmlns:p = "tapestry:parameter"> 
   
   <div> 
      <t:body /> 
   </div> 
</html>

이제 페이지 템플릿은 아래와 같이 구성 요소 마크 업에 본문을 포함 할 수 있습니다.

<html title = "Hello component test page" 
   xmlns:t = "https://tapestry.apache.org/schema/tapestry_5_4.xsd" 
   xmlns:p = "tapestry:parameter"> 
   
   <t:hello> 
      <p>Hello, Tapestry (from page).</p> 
   </t:hello> 
</html>

출력은 다음과 같습니다.

<html> 
   <div> 
      <p>Hello, Tapestry (from page).</p> 
   </div> 
</html>

매개 변수

이 매개 변수의 주요 목적은 구성 요소의 필드와 페이지의 속성 / 리소스 사이에 연결을 만드는 것입니다. 매개 변수를 사용하여 구성 요소와 해당 페이지는 서로 통신하고 데이터를 전송합니다. 이것은 ... 불리운다Two Way Data Binding.

예를 들어, 사용자 관리 페이지에서 나이를 나타내는 데 사용되는 텍스트 상자 구성 요소는 매개 변수를 통해 초기 값 (데이터베이스에서 사용 가능)을 가져옵니다. 다시 말하지만, 사용자의 나이가 업데이트되고 다시 제출 된 후 구성 요소는 동일한 매개 변수를 통해 업데이트 된 나이를 다시 보냅니다.

구성 요소 클래스에서 새 매개 변수를 만들려면 필드를 선언하고 @Parameter주석. 이 @Parameter에는 두 개의 선택적 인수가 있습니다.

  • required− 매개 변수를 필수로 만듭니다. 태피스트리가 제공되지 않으면 예외가 발생합니다.

  • value − 매개 변수의 기본값을 지정합니다.

매개 변수는 구성 요소 태그의 속성으로 페이지 템플리트에 지정되어야합니다. 속성 값은 이전 장에서 논의한 Binding Expression / Expansion을 사용하여 지정해야합니다. 이전에 배운 확장 중 일부는 다음과 같습니다.

  • Property expansion (prop:«val») − 페이지 클래스의 속성에서 데이터를 가져옵니다.

  • Message expansion (message:«val») − index.properties 파일에 정의 된 키에서 데이터를 가져옵니다.

  • Context expansion (context:«val») − 웹 컨텍스트 폴더 / src / main / webapp에서 데이터를 가져옵니다.

  • Asset expansion (asset:«val») − jar 파일 / META-INF / assets에 포함 된 리소스에서 데이터를 가져옵니다.

  • Symbol expansion (symbol:«val») − AppModule.java 파일에 정의 된 심볼에서 데이터를 가져옵니다.

태피스트리에는 더 많은 유용한 확장이 있으며, 그중 일부는 아래에 나와 있습니다.

  • Literal expansion (literal:«val») − 리터럴 문자열.

  • Var expansion (var:«val») − 컴포넌트의 렌더링 변수를 읽거나 업데이트 할 수 있습니다.

  • Validate expansion (validate:«val»)− 객체의 유효성 검사 규칙을 지정하는 데 사용되는 특수 문자열. 예를 들어 validate : required, minLength = 5입니다.

  • Translate (translate:«val») − 입력 유효성 검사에서 Translator 클래스 (클라이언트 측을 서버 측 표현으로 변환)를 지정하는 데 사용됩니다.

  • Block (block:«val») − 템플릿 내 블록 요소의 ID.

  • Component (component:«val») − 템플릿 내 다른 구성 요소의 ID.

위의 모든 확장은 속성 확장 및 Var 확장을 제외하고 읽기 전용입니다. 구성 요소에서 페이지와 데이터를 교환하는 데 사용됩니다. 확장을 속성 값으로 사용하는 경우${...}사용해서는 안됩니다. 대신 달러 및 중괄호 기호없이 확장을 사용하십시오.

매개 변수를 사용하는 구성 요소

Hello 구성 요소를 수정하여 메시지를 동적으로 렌더링하도록 수정하여 새 구성 요소 인 HelloWithParameter를 만들어 보겠습니다. name 구성 요소 클래스의 매개 변수를 사용하고 그에 따라 구성 요소 템플릿과 페이지 템플릿을 변경합니다.

  • 새 구성 요소 클래스 만들기 HelloWithParameter.java.

  • 비공개 필드를 추가하고 @Parameter주석. 필수 인수를 사용하여 필수로 만드십시오.

@Parameter(required = true) 
private String name;

  • 개인 필드 추가, 결과 @Propery주석. 결과 속성은 구성 요소 템플릿에서 사용됩니다. 구성 요소 템플릿은 주석이 달린 필드에 액세스 할 수 없습니다.@Parameter 주석이 달린 필드에만 액세스 할 수 있습니다. @Property. 구성 요소 템플릿에서 사용할 수있는 변수를 렌더 변수라고합니다.

@Property 
 private String result;

  • RenderBody 메서드를 추가하고 name 매개 변수의 값을 result 속성에 복사합니다.

@BeginRender 
void initializeValues() { 
   result = name; 
}

  • 새 구성 요소 템플릿 추가 HelloWithParamter.tml 결과 속성을 사용하여 메시지를 렌더링합니다.

<div> Hello, ${result} </div>

  • 테스트 페이지 (testhello.java)에 새 속성 인 Username을 추가합니다.

public String getUsername() { 
   return "User1"; 
}

  • 페이지 템플릿에서 새로 생성 된 구성 요소를 사용하고 다음의 name 매개 변수에 Username 속성을 설정합니다. HelloWithParameter 구성 요소.

<t:helloWithParameter name = "username" />

전체 목록은 다음과 같습니다-

package com.example.MyFirstApplication.components;  

import org.apache.tapestry5.annotations.*;  
public class HelloWithParameter { 
   @Parameter(required = true) 
   private String name; 
     
   @Property 
   private String result; 
   
   @BeginRender 
   void initializeValues() { 
      result = name; 
   } 
}
<html  
   xmlns:t = "https://tapestry.apache.org/schema/tapestry_5_4.xsd" 
   xmlns:p = "tapestry:parameter"> 
   
   <div> Hello, ${result} </div> 
  
</html>
package com.example.MyFirstApplication.pages;  

import org.apache.tapestry5.annotations.*;  
public class TestHello { 
   public String getUsername() { 
      return "User1"; 
   } 
}
<html title = "Hello component test page" 
   xmlns:t = "https://tapestry.apache.org/schema/tapestry_5_4.xsd" 
   xmlns:p = "tapestry:parameter"> 
   <t:helloWithParameter name = "username" />
   
</html>

결과는 다음과 같습니다.

<div> Hello, User1 </div>

고급 매개 변수

이전 장에서는 사용자 컴포넌트에서 간단한 매개 변수를 생성하고 사용하는 방법을 분석했습니다. 고급 매개 변수에는 완전한 마크 업도 포함될 수 있습니다. 이 경우 페이지 템플릿의 하위 섹션과 같은 구성 요소 태그 내에 마크 업을 지정해야합니다. 기본 제공 if 구성 요소에는 성공 및 실패 조건에 대한 마크 업이 있습니다. 성공 마크 업은 구성 요소 태그의 본문으로 지정되고 실패 마크 업은elseparameter.

사용 방법을 살펴 보겠습니다. if구성 요소. if 구성 요소에는 두 개의 매개 변수가 있습니다.

  • test − 단순 속성 기반 매개 변수.

  • Else − 조건이 실패 할 경우 대체 마크 업을 지정하는 데 사용되는 고급 매개 변수

Tapestry는 다음 논리를 사용하여 테스트 속성의 값을 확인하고 true 또는 false를 반환합니다. 이것은 ... 불리운다Type Coercion, 한 유형의 객체를 동일한 내용을 가진 다른 유형으로 변환하는 방법입니다.

  • 데이터 유형이 String, 공백이 아니고 리터럴 문자열 "False"가 아닌 경우 "True"(대소 문자 구분 안 함).

  • 데이터 유형이 Number, 0이 아니면 True.

  • 데이터 유형이 Collection, 비어 있지 않으면 True입니다.

  • 데이터 유형이 Object, True (null이 아닌 경우).

조건이 통과되면 구성 요소는 본문을 렌더링합니다. 그렇지 않으면 else 매개 변수의 본문을 렌더링합니다.

전체 목록은 다음과 같습니다-

package com.example.MyFirstApplication.pages; 
public class TestIf { 
   public String getUser() { 
      return "User1"; 
   } 
}

<html title = "If Test Page" 
   xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd" 
   xmlns:p = "tapestry:parameter">  
   
   <body> 
      <h1>Welcome!</h1>  
      <t:if test = "user"> 
         Welcome back, ${user} 
         <p:else>
            Please <t:pagelink page = "login">Login</t:pagelink>  
         </p:else> 
      </t:if>
   </body>
   
</html>

구성 요소 이벤트 / 페이지 탐색

태피스트리 응용 프로그램은 collection of Pages서로 상호 작용합니다. 지금까지 통신없이 개별 페이지를 만드는 방법을 배웠습니다. 구성 요소 이벤트의 주요 목적은 서버 측 이벤트를 사용하여 페이지 (페이지 내에서도) 간의 상호 작용을 제공하는 것입니다. 대부분의 구성 요소 이벤트는 클라이언트 측 이벤트에서 발생합니다.

예를 들어, 사용자가 페이지의 링크를 클릭하면 Tapestry는 대상 페이지를 호출하는 대신 대상 정보와 함께 동일한 페이지를 호출하고 서버 측 이벤트를 발생시킵니다. Tapestry 페이지는 이벤트를 캡처하고 대상 정보를 처리하며 서버 측에서 대상 페이지로 리디렉션합니다.

태피스트리는 Post/Redirect/Get (RPG) design pattern페이지 탐색을 위해. RPG에서 사용자가 양식을 제출하여 게시 요청을하면 서버가 게시 된 데이터를 처리하지만 직접 응답을 반환하지는 않습니다. 대신 다른 페이지로 클라이언트 측 리디렉션을 수행하여 결과를 출력합니다. RPG 패턴은 브라우저 뒤로 버튼, 브라우저 새로 고침 버튼 등을 통한 중복 양식 제출을 방지하기 위해 사용되며, Tapestry는 다음 두 가지 유형의 요청을 제공하여 RPG 패턴을 제공합니다.

  • Component Event Request−이 유형의 요청은 페이지의 특정 구성 요소를 대상으로하고 구성 요소 내에서 이벤트를 발생시킵니다. 이 요청은 리디렉션 만 수행하고 응답을 출력하지 않습니다.

  • Render Request − 이러한 유형의 요청은 페이지를 대상으로하고 응답을 클라이언트로 다시 스트리밍합니다.

구성 요소 이벤트 및 페이지 탐색을 이해하려면 태피스트리 요청의 URL 패턴을 알아야합니다. 두 유형의 요청에 대한 URL 패턴은 다음과 같습니다.

  • Component Event Requests −

/<<page_name_with_path>>.<<component_id|event_id>>/<<context_information>>

  • Render Request −

/<<page_name_with_path>>/<<context_information>>

URL 패턴의 몇 가지 예는 다음과 같습니다.

  • 색인 페이지는 다음에서 요청할 수 있습니다. https://«domain»/«app»/index.

  • 색인 페이지가 하위 폴더 관리자 아래에있는 경우 다음에서 요청할 수 있습니다. https://«domain»/«app»/admin/index.

  • 사용자가 ActionLink component 와 id test 색인 페이지에서 URL은 https://«domain»/«app»/index.test.

이벤트

기본적으로 태피스트리는 OnPassivate 과 OnActivate모든 요청에 ​​대한 이벤트. 구성 요소 이벤트 요청 유형의 경우 태피스트리는 구성 요소에 따라 하나 이상의 추가 이벤트를 발생시킵니다. ActionLink 구성 요소는 Action 이벤트를 발생시키는 반면 Form 구성 요소는 다음과 같은 여러 이벤트를 발생시킵니다.Validate, Success등

이벤트는 해당 메서드 핸들러를 사용하여 페이지 클래스에서 처리 할 수 ​​있습니다. 메소드 핸들러는 메소드 이름 지정 규칙을 통해 또는@OnEvent주석. 메서드 명명 규칙의 형식은 다음과 같습니다.On«EventName»From«ComponentId».

ActionLink 구성 요소의 작업 이벤트 id test 다음 방법 중 하나로 처리 할 수 ​​있습니다.

void OnActionFromTest() { 
}  
@OnEvent(component = "test", name = "action") 
void CustomFunctionName() { 
}

메서드 이름에 특정 구성 요소가 없으면 일치하는 이벤트가있는 모든 구성 요소에 대해 메서드가 호출됩니다.

void OnAction() { 
}

OnPassivate 및 OnActivate 이벤트

OnPassivate는 OnActivate 이벤트 핸들러에 대한 컨텍스트 정보를 제공하는 데 사용됩니다. 일반적으로 Tapestry는 컨텍스트 정보를 제공하며 OnActivateevent 핸들러에서 인수로 사용할 수 있습니다.

예를 들어, 컨텍스트 정보가 int 유형의 3 인 경우 OnActivate 이벤트는 다음과 같이 호출 될 수 있습니다.

void OnActivate(int id) { 
}

일부 시나리오에서는 컨텍스트 정보를 사용하지 못할 수 있습니다. 이 경우 OnPassivate 이벤트 핸들러를 통해 OnActivate 이벤트 핸들러에 컨텍스트 정보를 제공 할 수 있습니다. OnPassivate 이벤트 처리기의 반환 유형은 OnActivate 이벤트 처리기의 인수로 사용해야합니다.

int OnPassivate() { 
   int id = 3; 
   return id; 
} 
void OnActivate(int id) { 
}

이벤트 처리기 반환 값

Tapestry는 이벤트 핸들러의 반환 값을 기반으로 페이지 리디렉션을 실행합니다. 이벤트 핸들러는 다음 값 중 하나를 반환해야합니다.

  • Null Response− null 값을 반환합니다. Tapestry는 현재 페이지 URL을 구성하고 리디렉션으로 클라이언트에 보냅니다.

public Object onAction() { 
   return null; 
}

  • String Response− 문자열 값을 반환합니다. Tapestry는 값과 일치하는 페이지의 URL을 구성하고 리디렉션으로 클라이언트에 보냅니다.

public String onAction() { 
   return "Index"; 
}

  • Class Response− 페이지 클래스를 반환합니다. Tapestry는 반환 된 페이지 클래스의 URL을 구성하고 리디렉션으로 클라이언트에 보냅니다.

public Object onAction() { 
   return Index.class 
}

  • Page Response− @InjectPage 주석이 달린 필드를 반환합니다. Tapestry는 삽입 된 페이지의 URL을 구성하고 리디렉션으로 클라이언트에 보냅니다.

@InjectPage 
private Index index;  

public Object onAction(){ 
   return index; 
}

  • HttpError− HTTPError 객체를 반환합니다. Tapestry는 클라이언트 측 HTTP 오류를 발행합니다.

public Object onAction(){ 
   return new HttpError(302, "The Error message); 
}

  • Link Response− 링크 인스턴스를 직접 반환합니다. Tapestry는 Link 개체에서 URL을 구성하고 리디렉션으로 클라이언트에 보냅니다.

  • Stream Response − 반환 StreamResponse목적. Tapestry는 클라이언트 브라우저에 대한 응답으로 스트림을 직접 보냅니다. 보고서와 이미지를 직접 생성하여 클라이언트로 보내는 데 사용됩니다.

  • Url Response − 반환 java.net.URL목적. Tapestry는 개체에서 해당 URL을 가져와 클라이언트에 리디렉션으로 보냅니다.

  • Object Response− 위에 지정된 값 이외의 값을 반환합니다. 태피스트리가 오류를 발생시킵니다.

이벤트 컨텍스트

일반적으로 이벤트 핸들러는 인수를 사용하여 컨텍스트 정보를 가져올 수 있습니다. 예를 들어 컨텍스트 정보가 int 유형의 3 인 경우 이벤트 핸들러는 다음과 같습니다.

Object onActionFromTest(int id) {  
}

Tapestry는 컨텍스트 정보를 적절하게 처리하고 인수를 통해 메서드에 제공합니다. 때때로 Tapestry는 프로그래밍의 복잡성으로 인해 제대로 처리하지 못할 수 있습니다. 그 때 우리는 완전한 컨텍스트 정보를 얻고 스스로 처리 할 수 ​​있습니다.

Object onActionFromEdit(EventContext context) { 
   if (context.getCount() > 0) { 
      this.selectedId = context.get(0); 
   } else { 
      alertManager.warn("Please select a document."); 
      return null; 
   } 
}
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved