Tapiz Apache: componentes integrados

Este capítulo explica los componentes integrados que Tapestry tiene con ejemplos adecuados. Tapestry admite más de 65 componentes integrados. También puede crear componentes personalizados. Cubramos algunos de los componentes notables en detalle.

Si componente

El componente if se utiliza para representar un bloque de forma condicional. La condición se verifica mediante un parámetro de prueba.

Crear una pagina IfSample.java como se muestra a continuación -

package com.example.MyFirstApplication.pages;  

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

Ahora, cree un archivo de plantilla correspondiente de la siguiente manera:

<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 la página mostrará el resultado como se muestra a continuación.

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

A menos que y componente delegado

los unless componentes todo lo contrario del componente if que se discutió anteriormente. Mientras que ladelegate componentno realiza ningún renderizado por sí solo. En cambio, normalmente delega el marcado al elemento de bloque. A menos que los componentes puedan usar delegar y bloquear para intercambiar condicionalmente el contenido dinámico.

Crear una pagina Unless.java como sigue.

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

Ahora, cree un archivo de plantilla correspondiente de la siguiente manera:

<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 la página mostrará el resultado como se muestra a continuación.

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

Componente de bucle

El componente de bucle es el componente básico para recorrer los elementos de una colección y representar el cuerpo para cada valor / iteración.

Cree una página de bucle como se muestra a continuación:

Loop.java

package com.example.MyFirstApplication.pages;  

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

Luego, crea la plantilla correspondiente 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>

El componente de bucle tiene los siguientes dos parámetros:

source- Fuente de colección. 1… 5 es una expansión de propiedad que se utiliza para crear una matriz con un rango específico.
var- Variable de renderizado. Se utiliza para representar el valor actual en el cuerpo de la plantilla.

Solicitar la página mostrará el resultado como se muestra a continuación:

Componente PageLink

Un componente PageLink se utiliza para vincular una página de una página a otra. Cree una página de prueba de PageLink como se muestra a continuación:PageLink.java.

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

Luego, cree un archivo de plantilla correspondiente como se muestra a continuación:

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>

El componente PageLink tiene un parámetro de página que debe hacer referencia a la página del tapiz de destino.

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

Componente EventLink

El componente EventLink envía el nombre del evento y el parámetro correspondiente a través de la URL. Cree una clase de página EventsLink como se muestra a continuación.

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

Luego, cree un archivo de plantilla "EventsLink" correspondiente de la siguiente manera:

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 tiene los siguientes dos parámetros:

Event- El nombre del evento que se activará en el componente EventLink. De forma predeterminada, apunta a la identificación del componente.
Context- Es un parámetro opcional. Define el contexto del enlace.

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

Después de hacer clic en el valor de recuento, la página mostrará el nombre del evento en la URL como se muestra en la siguiente captura de pantalla de salida.

Componente ActionLink

El componente ActionLink es similar al componente EventLink, pero solo envía el ID del componente de destino. El nombre del evento predeterminado es acción.

Cree una página "ActivationLinks.java" como se muestra a continuación,

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

Ahora, cree un archivo de plantilla correspondiente como se muestra a continuación:

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>

Aquí el OnActionFromSub se llamará al método al hacer clic en el componente ActionLink.

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

Componente de alerta

Un cuadro de diálogo de alerta se utiliza principalmente para dar un mensaje de advertencia a los usuarios. Por ejemplo, si el campo de entrada requiere algún texto obligatorio pero el usuario no proporciona ninguna entrada, entonces, como parte de la validación, puede usar un cuadro de alerta para dar un mensaje de advertencia.

Cree una página de "Alertas" como se muestra en el siguiente programa.

Alerts.java

package com.example.MyFirstApplication.pages;  

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

Luego, cree un archivo de plantilla correspondiente de la siguiente manera:

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>

Una alerta tiene tres niveles de gravedad, que son:

Info
Warn
Error

La plantilla anterior se crea mediante una alerta de información. Se define comoalert-info. Puede crear otras gravedad según la necesidad.

Solicitar la página producirá el siguiente resultado:

http://localhost:8080/myFirstApplication/Alerts

↰ Previous page Next page ↱