Apache Tapestry - Yerleşik Bileşenler

Bu bölüm, Tapestry'nin sahip olduğu yerleşik bileşenleri uygun örneklerle açıklamaktadır. Tapestry, 65'ten fazla yerleşik bileşeni destekler. Ayrıca özel bileşenler de oluşturabilirsiniz. Bazı önemli bileşenleri ayrıntılı olarak ele alalım.

Bileşen ise

İf bileşeni, bir bloğu koşullu olarak oluşturmak için kullanılır. Durum bir test parametresi ile kontrol edilir.

Bir sayfa yarat IfSample.java aşağıda gösterildiği gibi -

package com.example.MyFirstApplication.pages;  

public class Ifsample {
   public String getUser() { 
      return "user1"; 
   } 
}

Şimdi, aşağıdaki gibi ilgili bir şablon dosyası oluşturun -

<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>

Sayfanın istenmesi sonucu aşağıda gösterildiği gibi oluşturacaktır.

Result - http: // localhost: 8080 / MyFirstApplication / ifsample

Değilse ve Bileşen Temsilcisi

unless componentyukarıda tartışılan if bileşeninin tam tersidir. İkendelegate componentkendi başına herhangi bir render yapmaz. Bunun yerine, normalde işaretlemeyi engelleme elemanına devreder. Bileşenler, dinamik içeriği koşullu olarak takas etmek için temsilci ve blok kullanamazsa ve kullanamazsa.

Bir sayfa yarat Unless.java aşağıdaki gibi.

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; 
      } 
   }   
}

Şimdi, aşağıdaki gibi ilgili bir şablon dosyası oluşturun -

<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>

Sayfanın istenmesi sonucu aşağıda gösterildiği gibi oluşturacaktır.

Result - http: // localhost: 8080 / MyFirstApplication / sürece

Döngü Bileşeni

Döngü bileşeni, bir koleksiyon öğeleri üzerinde döngü yapmak ve her değer / yineleme için gövdeyi oluşturmak için temel bileşendir.

Aşağıda gösterildiği gibi bir Döngü sayfası oluşturun -

Loop.java

package com.example.MyFirstApplication.pages;  

import org.apache.tapestry5.annotations.Property;  
public class Loop { 
   @Property 
   private int i; 
}

Ardından, karşılık gelen Loop.tml şablonunu oluşturun

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>

Döngü bileşeni aşağıdaki iki parametreye sahiptir -

source- Koleksiyon kaynağı. 1… 5, belirli bir aralığa sahip bir dizi oluşturmak için kullanılan bir özellik genişletmesidir.
var- Render değişkeni. Şablonun gövdesindeki mevcut değeri oluşturmak için kullanılır.

Sayfanın talep edilmesi sonucu aşağıda gösterildiği gibi oluşturacaktır -

PageLink Bileşeni

Bir sayfayı bir sayfadan diğerine bağlamak için bir PageLink bileşeni kullanılır. Aşağıdaki gibi bir PageLink test sayfası oluşturun -PageLink.java.

package com.example.MyFirstApplication.pages;  
   public class PageLink { 
}

Ardından, aşağıda gösterildiği gibi ilgili bir şablon dosyası oluşturun -

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 bileşeninin, hedef goblen sayfasına başvurması gereken bir sayfa parametresi vardır.

Result - http: // localhost: 8080 / myFirstApplication / pagelink

EventLink Bileşeni

EventLink bileşeni, etkinlik adını ve karşılık gelen parametreyi URL aracılığıyla gönderir. Aşağıda gösterildiği gibi bir EventsLink sayfa sınıfı oluşturun.

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; 
   }   
}

Ardından, aşağıdaki gibi karşılık gelen bir "EventsLink" şablon dosyası oluşturun -

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 aşağıdaki iki parametreye sahiptir -

Event- EventLink bileşeninde tetiklenecek olayın adı. Varsayılan olarak, bileşenin kimliğini gösterir.
Context- Opsiyonel bir parametredir. Bağın bağlamını tanımlar.

Result - http: // localhost: 8080 / myFirstApplication / EventsLink

Sayım değerini tıkladıktan sonra sayfa, aşağıdaki çıktı ekran görüntüsünde gösterildiği gibi URL'deki etkinlik adını gösterecektir.

ActionLink Bileşeni

ActionLink bileşeni, EventLink bileşenine benzer, ancak yalnızca hedef bileşen kimliğini gönderir. Varsayılan olay adı eylemdir.

Aşağıda gösterildiği gibi bir "ActivationLinks.java" sayfası oluşturun,

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; 
   } 
}

Şimdi, aşağıda gösterildiği gibi ilgili bir şablon dosyası oluşturun -

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>

Burada OnActionFromSub ActionLink bileşenine tıklandığında yöntem çağrılacaktır.

Result - http: // localhost: 8080 / myFirstApplication / ActivationsLink

Uyarı Bileşeni

Kullanıcılara bir uyarı mesajı vermek için çoğunlukla bir uyarı iletişim kutusu kullanılır. Örneğin, giriş alanı bazı zorunlu metinler gerektiriyor ancak kullanıcı herhangi bir giriş sağlamıyorsa, doğrulamanın bir parçası olarak, bir uyarı mesajı vermek için bir uyarı kutusu kullanabilirsiniz.

Aşağıdaki programda gösterildiği gibi bir "Uyarılar" sayfası oluşturun.

Alerts.java

package com.example.MyFirstApplication.pages;  

public class Alerts { 
   public String getUser() { 
      return "user1"; 
   } 
}

Ardından, aşağıdaki gibi ilgili bir şablon dosyası oluşturun -

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>

Bir Uyarının üç önem düzeyi vardır, bunlar:

Info
Warn
Error

Yukarıdaki şablon, bir bilgi uyarısı kullanılarak oluşturulur. Olarak tanımlanıralert-info. İhtiyaca bağlı olarak başka önem dereceleri oluşturabilirsiniz.

Sayfayı talep etmek aşağıdaki sonucu verecektir -

http://localhost:8080/myFirstApplication/Alerts