Tapeçaria Apache - Componentes integrados

Este capítulo explica sobre os componentes embutidos que Tapestry possui com exemplos adequados. Tapestry oferece suporte a mais de 65 componentes integrados. Você também pode criar componentes personalizados. Vamos cobrir alguns dos componentes notáveis em detalhes.

If Component

O componente if é usado para renderizar um bloco condicionalmente. A condição é verificada por um parâmetro de teste.

Crie uma página IfSample.java como mostrado abaixo -

package com.example.MyFirstApplication.pages;  

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

Agora, crie um arquivo de modelo correspondente da seguinte maneira -

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

Solicitar a página renderizará o resultado conforme mostrado abaixo.

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

A menos e delegar componente

o unless componenté exatamente o oposto do componente if que foi discutido acima. Enquanto odelegate componentnão faz nenhuma renderização por conta própria. Em vez disso, ele normalmente delega a marcação ao elemento de bloco. A menos que e se os componentes podem usar delegado e bloco para trocar condicionalmente o conteúdo dinâmico.

Crie uma página Unless.java do seguinte modo.

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

Agora, crie um arquivo de modelo correspondente da seguinte maneira -

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

Solicitar a página renderizará o resultado conforme mostrado abaixo.

Result - http: // localhost: 8080 / MyFirstApplication / a menos

Componente de Loop

O componente de loop é o componente básico para fazer um loop sobre os itens de uma coleção e renderizar o corpo para cada valor / iteração.

Crie uma página de loop conforme mostrado abaixo -

Loop.java

package com.example.MyFirstApplication.pages;  

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

Em seguida, crie o modelo correspondente 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>

O componente de loop tem os seguintes dois parâmetros -

source- Fonte de coleta. 1 a 5 é uma expansão de propriedade usada para criar uma matriz com um intervalo especificado.
var- Variável de renderização. Usado para renderizar o valor atual no corpo do modelo.

Solicitar a página irá processar o resultado conforme mostrado abaixo -

Componente PageLink

Um componente PageLink é usado para vincular uma página de uma página a outra página. Crie uma página de teste PageLink conforme abaixo -PageLink.java.

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

Em seguida, crie um arquivo de modelo correspondente, conforme mostrado abaixo -

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>

O componente PageLink tem um parâmetro de página que deve se referir à página de tapeçaria de destino.

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

Componente EventLink

O componente EventLink envia o nome do evento e o parâmetro correspondente por meio do URL. Crie uma classe de página EventsLink conforme mostrado abaixo.

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

Em seguida, crie um arquivo de modelo “EventsLink” correspondente da seguinte forma -

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 tem os seguintes dois parâmetros -

Event- O nome do evento a ser disparado no componente EventLink. Por padrão, ele aponta para o id do componente.
Context- É um parâmetro opcional. Ele define o contexto do link.

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

Depois de clicar no valor de contagem, a página exibirá o nome do evento no URL, conforme mostrado na seguinte captura de tela de saída.

Componente ActionLink

O componente ActionLink é semelhante ao componente EventLink, mas envia apenas o ID do componente de destino. O nome do evento padrão é ação.

Crie uma página “ActivationLinks.java” conforme mostrado abaixo,

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

Agora, crie um arquivo de modelo correspondente conforme mostrado abaixo -

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>

Aqui o OnActionFromSub método será chamado ao clicar no componente ActionLink.

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

Componente de Alerta

Uma caixa de diálogo de alerta é usada principalmente para dar uma mensagem de aviso aos usuários. Por exemplo, se o campo de entrada requer algum texto obrigatório, mas o usuário não fornece nenhuma entrada, então, como parte da validação, você pode usar uma caixa de alerta para fornecer uma mensagem de aviso.

Crie uma página “Alertas” conforme mostrado no programa a seguir.

Alerts.java

package com.example.MyFirstApplication.pages;  

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

Em seguida, crie um arquivo de modelo correspondente da seguinte maneira -

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>

Um alerta tem três níveis de gravidade, que são -