Apache Tapestry-기본 제공 구성 요소
이 장에서는 적절한 예와 함께 Tapestry에 내장 된 구성 요소에 대해 설명합니다. 태피스트리는 65 개 이상의 내장 구성 요소를 지원합니다. 사용자 지정 구성 요소를 만들 수도 있습니다. 몇 가지 주목할만한 구성 요소를 자세히 살펴 보겠습니다.
If 구성 요소
if 구성 요소는 조건부로 블록을 렌더링하는 데 사용됩니다. 조건은 테스트 매개 변수로 확인됩니다.
페이지 만들기 IfSample.java 아래와 같이-
package com.example.MyFirstApplication.pages;
public class Ifsample {
public String getUser() {
return "user1";
}
}
이제 다음과 같이 해당 템플릿 파일을 만듭니다.
<html t:type = "newlayout" title = "About MyFirstApplication"
xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd"
xmlns:p = "tapestry:parameter">
<h3>If-else component example </h3>
<t:if test = "user">
Hello ${user}
<p:else>
<h4> You are not a Tapestry user </h4>
</p:else>
</t:if>
</html>
페이지를 요청하면 아래와 같은 결과가 표시됩니다.
Result − http : // localhost : 8080 / MyFirstApplication / ifsample
구성 요소를 위임하지 않는 한
그만큼 unless component위에서 논의한 if 컴포넌트의 반대입니다. 동안,delegate component자체적으로 렌더링을 수행하지 않습니다. 대신 일반적으로 마크 업을 블록 요소에 위임합니다. 구성 요소가 대리자 및 차단을 사용하여 동적 콘텐츠를 조건부로 교체 할 수없는 경우.
페이지 만들기 Unless.java 다음과 같이.
package com.example.MyFirstApplication.pages;
import org.apache.tapestry5.Block;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.PersistenceConstants;
import org.apache.tapestry5.annotations.Persist;
public class Unless {
@Property
@Persist(PersistenceConstants.FLASH)
private String value;
@Property
private Boolean bool;
@Inject
Block t, f, n;
public Block getCase() {
if (bool == Boolean.TRUE ) {
return t;
} else {
return f;
}
}
}
이제 다음과 같이 해당 템플릿 파일을 만듭니다.
<html t:type = "newlayout" title = "About MyFirstApplication"
xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd"
xmlns:p = "tapestry:parameter">
<h4> Delegate component </h4>
<div class = "div1">
<t:delegate to = "case"/>
</div>
<h4> If-Unless component </h4>
<div class = "div1">
<t:if test = "bool">
<t:delegate to = "block:t"/>
</t:if>
<t:unless test = "bool">
<t:delegate to = "block:notT"/>
</t:unless>
</div>
<t:block id = "t">
bool == Boolean.TRUE.
</t:block>
<t:block id = "notT">
bool = Boolean.FALSE.
</t:block>
<t:block id = "f">
bool == Boolean.FALSE.
</t:block>
</html>
페이지를 요청하면 아래와 같은 결과가 표시됩니다.
Result − http : // localhost : 8080 / MyFirstApplication / unless
루프 구성 요소
루프 구성 요소는 컬렉션 항목을 반복하고 모든 값 / 반복에 대해 본문을 렌더링하는 기본 구성 요소입니다.
아래와 같이 루프 페이지를 만듭니다-
Loop.java
package com.example.MyFirstApplication.pages;
import org.apache.tapestry5.annotations.Property;
public class Loop {
@Property
private int i;
}
그런 다음 해당 템플릿 Loop.tml을 만듭니다.
Loop.tml
<html t:type = "newlayout" title = "About MyFirstApplication"
xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd"
xmlns:p = "tapestry:parameter">
<p>This is sample parameter rendering example...</p>
<ol>
<li t:type = "loop" source = "1..5" value = "var:i">${var:i}</li>
</ol>
</html>
루프 구성 요소에는 다음 두 가지 매개 변수가 있습니다.
source− 수집 소스. 1… 5는 지정된 범위의 배열을 만드는 데 사용되는 속성 확장입니다.
var− 렌더링 변수. 템플릿 본문의 현재 값을 렌더링하는 데 사용됩니다.
페이지를 요청하면 아래와 같이 결과가 렌더링됩니다.
PageLink 구성 요소
PageLink 구성 요소는 한 페이지에서 다른 페이지로 페이지를 연결하는 데 사용됩니다. 아래와 같이 PageLink 테스트 페이지를 만듭니다.PageLink.java.
package com.example.MyFirstApplication.pages;
public class PageLink {
}
그런 다음 아래와 같이 해당 템플릿 파일을 만듭니다.
PageLink.tml
<html t:type = "newlayout" title = "About MyFirstApplication"
xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd"
xmlns:p = "tapestry:parameter">
<body>
<h3><u>Page Link</u> </h3>
<div class = "page">
<t:pagelink page = "Index">Click here to navigate Index page</t:pagelink>
<br/>
</div>
</body>
</html>
PageLink 구성 요소에는 대상 태피스트리 페이지를 참조해야하는 페이지 매개 변수가 있습니다.
Result − http : // localhost : 8080 / myFirstApplication / pagelink
EventLink 구성 요소
EventLink 구성 요소는 URL을 통해 이벤트 이름과 해당 매개 변수를 보냅니다. 아래와 같이 EventsLink 페이지 클래스를 만듭니다.
EventsLink.java
package com.example.MyFirstApplication.pages;
import org.apache.tapestry5.annotations.Property;
public class EventsLink {
@Property
private int x;
void onActivate(int count) {
this.x = x;
}
int onPassivate() {
return x;
}
void onAdd(int value) {
x += value;
}
}
그런 다음 다음과 같이 해당 "EventsLink"템플릿 파일을 만듭니다.
EventsLink.tml
<html t:type = "newlayout" title = "About MyFirstApplication"
xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd"
xmlns:p = "tapestry:parameter">
<h3> Event link example </h3>
AddedCount = ${x}. <br/>
<t:eventlink t:event = "add" t:context = "literal:1">
Click here to add count
</t:eventlink><br/>
</html>
EventLink에는 다음 두 가지 매개 변수가 있습니다.
Event− EventLink 컴포넌트에서 트리거 될 이벤트의 이름. 기본적으로 구성 요소의 ID를 가리 킵니다.
Context− 선택적 매개 변수입니다. 링크의 컨텍스트를 정의합니다.
Result − http : // localhost : 8080 / myFirstApplication / EventsLink
카운트 값을 클릭하면 다음 출력 스크린 샷과 같이 페이지의 URL에 이벤트 이름이 표시됩니다.
ActionLink 구성 요소
ActionLink 구성 요소는 EventLink 구성 요소와 유사하지만 대상 구성 요소 ID 만 보냅니다. 기본 이벤트 이름은 action입니다.
아래와 같이“ActivationLinks.java”페이지를 생성합니다.
ActivationLinks.java
package com.example.MyFirstApplication.pages;
import org.apache.tapestry5.annotations.Property;
public class ActivationLinks {
@Property
private int x;
void onActivate(int count) {
this.x = x;
}
int onPassivate() {
return x;
}
void onActionFromsub(int value) {
x -= value;
}
}
이제 아래와 같이 해당 템플릿 파일을 만듭니다.
ActivationLinks.tml
<html t:type = "Newlayout" title = "About MyFirstApplication"
xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd"
xmlns:p = "tapestry:parameter">
<div class = "div1">
Count = ${count}. <br/>
<t:actionlink t:id = "sub" t:context = "literal:1">
Decrement
</t:actionlink><br/>
</div>
</html>
여기, OnActionFromSub ActionLink 컴포넌트를 클릭하면 메소드가 호출됩니다.
Result − http : // localhost : 8080 / myFirstApplication / ActivationsLink
경고 구성 요소
경고 대화 상자는 대부분 사용자에게 경고 메시지를 제공하는 데 사용됩니다. 예를 들어 입력 필드에 일부 필수 텍스트가 필요하지만 사용자가 입력을 제공하지 않는 경우 유효성 검사의 일부로 경고 상자를 사용하여 경고 메시지를 제공 할 수 있습니다.
다음 프로그램과 같이 "Alerts"페이지를 만듭니다.
Alerts.java
package com.example.MyFirstApplication.pages;
public class Alerts {
public String getUser() {
return "user1";
}
}
그런 다음 다음과 같이 해당 템플릿 파일을 만듭니다.
Alerts.tml
<html t:type = "Newlayout" title = "About MyFirstApplication"
xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd"
xmlns:p = "tapestry:parameter">
<h3>Alerts</h3>
<div class = "alert alert-info">
<h5> Welcome ${user} </h5>
</div>
</html>
경고에는 세 가지 심각도 수준이 있습니다.
- Info
- Warn
- Error
위의 템플릿은 정보 경고를 사용하여 생성됩니다. 다음과 같이 정의됩니다.alert-info. 필요에 따라 다른 심각도를 생성 할 수 있습니다.
페이지를 요청하면 다음 결과가 생성됩니다.
http://localhost:8080/myFirstApplication/Alerts