Tapiz Apache - Plantillas

Consideremos la plantilla XML Tapestry en esta sección. XML Template es un documento XML bien formado. La capa de presentación (interfaz de usuario) de una página es una plantilla XML. Una plantilla XML tiene marcado HTML normal además de los elementos que se indican a continuación:

  • Espacio de nombres de tapiz
  • Expansions
  • Elements
  • Components

Analicemos ahora en detalle.

Espacio de nombres de tapiz

Los espacios de nombres de tapiz no son más que espacios de nombres XML. Los espacios de nombres deben definirse en el elemento raíz de la plantilla. Se utiliza para incluir componentes de tapiz e información relacionada con los componentes en la plantilla. Los espacios de nombres más utilizados son los siguientes:

  • xmlns: t = “https://tapestry.apache.org/schema/tapestry_5_4.xsd” - Se utiliza para identificar los elementos, componentes y atributos de Tapestry.

  • xmlns: p = "tapestry: parameter": se utiliza para pasar fragmentos arbitrarios de código a los componentes.

Un ejemplo de espacio de nombres Tapestry es el siguiente:

<html xmlns:t = "https://tapestry.apache.org/schema/tapestry_5_3.xsd" 
   xmlns:p = "tapestry:parameter"> 
   
   <head> 
      <title>Hello World Page</title> 
   </head>  
   <body> 
      <h1>Hello World</h1> 
      <t:eventlink page = "Index">refresh page</t:eventlink> 
   </body> 
</html>

Expansiones

La expansión es un método simple y eficiente para cambiar dinámicamente la plantilla XML durante la fase de representación de la página. La expansión usa la sintaxis $ {<name>}. Hay muchas opciones para expresar la expansión en la plantilla XML. Veamos algunas de las opciones más utilizadas:

Expansiones de propiedad

Asigna la propiedad definida en la clase Page correspondiente. Sigue la especificación Java Bean para la definición de propiedades en una clase Java. Va un paso más allá al ignorar los casos del nombre de la propiedad. Cambiemos el ejemplo de "Hola mundo" usando la expansión de propiedad. El siguiente bloque de código es la clase Page modificada.

package com.example.MyFirstApplication.pages; 
public class HelloWorld {   
   // Java Bean Property 
   public String getName { 
      return "World!"; 
   } 
}

Luego, cambie la plantilla XML correspondiente como se muestra a continuación.

<html xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd"> 
   <head> 
      <title>Hello World Page</title> 
   </head> 
   <body> 
      <!-- expansion --> 
      <h1>Hello ${name}</h1> 
   </body> 
</html>

Aquí, hemos definido name como Java Bean Property en la clase Page y lo procesó dinámicamente en una plantilla XML usando expansión ${name}.

Expansión de mensajes

Cada clase de página puede tener o no un archivo de propiedad asociado: «page_name».propertiesen la carpeta de recursos. Los archivos de propiedades son archivos de texto sin formato que tienen un solo par clave / valor (mensaje) por línea. Creemos un archivo de propiedades para la página HelloWorld en -

“/Src/main/resources/com/example/MyFirstApplication/pages/helloworld.properties” y agregue un mensaje de “saludo”.

Greeting = Hello

los Greeting El mensaje se puede utilizar en la plantilla XML como ${message:greeting}

<html xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd"> 
   <head> 
      <title>Hello World Page</title> 
   </head> 
   <body> 
      <!-- expansion --> 
      <h1>${message:greeting} ${name}</h1> 
   </body> 
</html>

Elementos

Tapestry tiene un pequeño conjunto de elementos que se utilizarán en Plantillas XML. Los elementos son etiquetas predefinidas definidas en el espacio de nombres Tapestry:

https://tapestry.apache.org/schema/tapestry_5_4.xsd

Cada elemento se crea para un propósito específico. Los elementos de tapiz disponibles son los siguientes:

<t: cuerpo>

Cuando dos componentes están anidados, es posible que la plantilla del componente principal tenga que envolver la plantilla del componente secundario. El elemento <t: body> es útil en esta situación. Uno de los usos de <t: body> es en el diseño de la plantilla.

En general, la interfaz de usuario de una aplicación web tendrá un encabezado común, pie de página, menú, etc. Estos elementos comunes se definen en una plantilla XML y se denomina diseño de plantilla o componente de diseño. En Tapestry, debe ser creado por un desarrollador de aplicaciones. Un componente de diseño es solo otro componente y se coloca en la carpeta de componentes, que tiene la siguiente ruta:src/main/«java|resources»/«package_name»/components.

Creemos un componente de diseño simple llamado MyCustomLayout. El código de MyCustomLayout es el siguiente:

<!DOCTYPE html> 
<html xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd"> 
   <head> 
      <meta charset = "UTF-8" />
      <title>${title}</title>  
   </head> 
   <body> 
      <div>Sample Web Application</div> 
      <h1>${title}</h1> 
      <t:body/> 
      
      <div>(C) 2016 TutorialsPoint.</div> 
   </body> 
</html>
package com.example.MyFirstApplication.components;  

import org.apache.tapestry5.*; 
import org.apache.tapestry5.annotations.*; 
import org.apache.tapestry5.BindingConstants;  

public class MyCustomLayout { 
   @Property 
   @Parameter(required = true, defaultPrefix = BindingConstants.LITERAL) 
      private String title; 
}

En la clase de componente MyCustomLayout, declaramos un campo de título y, al usar la anotación, lo hemos hecho obligatorio. Ahora, cambie la plantilla HelloWorld.html para usar nuestro diseño personalizado como se muestra en el bloque de código a continuación.

<html>
   t:type = "mycustomlayout" title = "Hello World Test page"
      xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd"> 
   <h1>${message:greeting} ${name}</h1> 
</html>

Podemos ver aquí que la plantilla XML no tiene etiquetas de cabeza y cuerpo. Tapestry recopilará estos detalles del componente de diseño y el <t: body> del componente de diseño será reemplazado por la plantilla HelloWorld. Una vez que todo esté hecho, Tapestry emitirá un marcado similar al que se especifica a continuación:

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset = "UTF-8" /> 
      <title>Hello World Test Page</title> 
   </head> 
   <body> 
      <div>Sample Web Application</div> 
      <h1>Hello World Test Page</h1> 
      <h1>Hello World!</h1> 
      <div>(C) 2016 TutorialsPoint.</div> 
   </body> 
</html>

Los diseños se pueden anidar. Por ejemplo, podemos ampliar nuestro diseño personalizado al incluir la funcionalidad de administración y usarlo para la sección de administración como se especifica a continuación.

<html t:type = "MyCommonLayout" 
   xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd"> 
   
   <div><!-- Admin related items --><div> 
   <t:body/> 
  
</html>

<t: contenedor>

<T: container> es un elemento de nivel superior e incluye un espacio de nombres tapiz. Se utiliza para especificar la sección dinámica de un componente.

Por ejemplo, un componente de cuadrícula puede necesitar una plantilla para identificar cómo representar sus filas - tr (y columna td) dentro de una tabla HTML.

<t:container xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd"> 
   <td>${name}</td> 
   <td>${age}</td> 
</t:container>

<t: block>

<T: block> es un marcador de posición para una sección dinámica en la plantilla. Generalmente, el elemento de bloque no se procesa. Solo los componentes definidos en la plantilla utilizan elementos de bloque. Los componentes inyectarán datos dinámicamente en el elemento de bloque y los renderizarán. Uno de los casos de uso populares esAJAX.

El elemento de bloque proporciona la posición exacta y el marcado para que se rendericen los datos dinámicos. Cada elemento de bloque debe tener una propiedad Java correspondiente. Solo entonces se puede renderizar dinámicamente. La identificación del elemento de bloque debe seguir las reglas de identificación de variables de Java. La muestra parcial se proporciona a continuación.

@Inject 
private Block block;  
<html t:type = "mycustomlayout" title = "block example" 
   xmlns:t = "https://tapestry.apache.org/schema/tapestry_5_4.xsd" 
   xmlns:p = "tapestry:parameter">  
<h1>${title}</h1>  
<!--  
   ... 
   ...  
--> 
<t:block t:id = "block"> 
   <h2>Highly dynamic section</h2> 
   I'v been updated through AJAX call 
   The current time is: <strong>${currentTime}</strong>
</t:block>  
<!--  
   ... 
   ...  
-->  
</html>

<t: contenido>

El elemento <t: content> se utiliza para especificar el contenido real de la plantilla. En general, todo el marcado se considera parte de la plantilla. Si se especifica <t: content>, solo se considerará el marcado dentro de él. Los diseñadores utilizan esta función para diseñar una página sin un componente de diseño.

<t: eliminar>

<T: remove> es justo lo opuesto al elemento de contenido. El marcado dentro del elemento de eliminación no se considera parte de la plantilla. Se puede utilizar solo para comentarios del servidor y para fines de diseño.

Bienes

Los activos son archivos de recursos estáticos, como hojas de estilo, imágenes y archivos JavaScript. Generalmente, los activos se colocan en el directorio raíz de la aplicación web./src/main/webapp.

<head> 
   <link href = "/css/site.css" rel = "stylesheet" type = "text/css"/>

Tapestry también trata los archivos almacenados en el Java Classpathcomo Activo. Tapestry ofrece opciones avanzadas para incluir activos en la plantilla a través de la opción de expansión.

  • Context - Opción para obtener activos disponibles en contexto web.

<img src = "${context:image/tapestry_banner.gif}" alt = "Banner"/>

asset- Los componentes suelen almacenar sus propios activos dentro del archivo jar junto con las clases de Java. A partir de Tapestry 5.4, la ruta estándar para almacenar activos en classpath esMETA-INF/assets. Para las bibliotecas, la ruta estándar para almacenar activos esMETA-INF/assets/«library_name»/. asset: también puede llamar context: expansión para obtener activos del contexto web.

<img src = "${asset:context:image/tapestry_banner.gif}" alt = "Banner"/>

Los activos se pueden inyectar en la página de tapiz o en el componente mediante la anotación de inyección y ruta. El parámetro para la anotación de ruta es la ruta relativa de los activos.

@Inject 
@Path("images/edit.png") 
private Asset icon;

los Path parameter también puede contener símbolos de tapiz definidos en el AppModule.java sección.

Por ejemplo, podemos definir un símbolo, skin.root con el valor context: skins / basic y usarlo como se muestra a continuación:

@Inject 
@Path("${skin.root}/style.css") 
private Asset style;

Localización

La inclusión de recursos a través de tapices proporciona una funcionalidad adicional. Una de esas funciones es la "localización". Tapestry verificará la configuración regional actual e incluirá los recursos adecuados.

Por ejemplo, si la configuración regional actual se establece como de, luego edit_de.png se incluirá en lugar de edit.png.

CSS

Tapestry tiene soporte para hojas de estilo incorporado. El tapiz inyectarátapestry.csscomo parte de la pila central de Javascript. Desde Tapestry 5.4, tapestry incluyebootstrap css frameworktambién. Podemos incluir nuestra propia hoja de estilo usando una etiqueta de enlace normal. En este caso, las hojas de estilo deben estar en el directorio raíz de la web:/src/main/webapp/.

<head> 
   <link href = "/css/site.css" rel = "stylesheet" type = "text/css"/>

Tapestry proporciona opciones avanzadas para incluir hojas de estilo en la plantilla a través de la opción de expansión como se discutió anteriormente.

<head> 
   <link href = "${context:css/site.css}" rel = "stylesheet" type = "text/css"/>

Tapestry también proporciona anotaciones de importación para incluir hojas de estilo directamente en las clases de Java.

@Import(stylesheet="context:css/site.css") 
public class MyCommonLayout { 
}

Tapestry proporciona muchas opciones para administrar la hoja de estilo a través de AppModule.java. Algunas de las opciones importantes son:

  • Es posible que se elimine la hoja de estilo predeterminada del tapiz.

@Contribute(MarkupRenderer.class) 

public static void 
deactiveDefaultCSS(OrderedConfiguration<MarkupRendererFilter> configuration) { 
   configuration.override("InjectDefaultStyleheet", null); 
}

  • Bootstrap también se puede desactivar anulando su ruta.

configuration.add(SymbolConstants.BOOTSTRAP_ROOT, "classpath:/METAINF/assets");

  • Habilite la minimización dinámica de los activos (CSS y JavaScript). Necesitamos incluirtapestry-webresources dependencia (en pom.xml) también.

@Contribute(SymbolProvider.class) 
@ApplicationDefaults 

public static void contributeApplicationDefaults( 
   MappedConfiguration<String, String> configuration) { 
   
   configuration.add(SymbolConstants.MINIFICATION_ENABLED, "true"); 
} 

<dependency> 
   <groupId>org.apache.tapestry</groupId> 
   <artifactId>tapestry-webresources</artifactId> 
   <version>5.4</version> 
</dependency>

JavaScript del lado del cliente

La generación actual de aplicaciones web depende en gran medida de JavaScript para proporcionar una rica experiencia del lado del cliente. Tapestry lo reconoce y proporciona soporte de primera clase para JavaScript. La compatibilidad con JavaScript está profundamente arraigada en el tapiz y está disponible en cada fase de la programación.

Anteriormente, Tapestry solía admitir solo Prototype y Scriptaculous. Pero, a partir de la versión 5.4, tapestry reescribió completamente la capa de JavaScript para hacerla lo más genérica posible y proporcionar soporte de primera clase para JQuery, la biblioteca de facto para JavaScript. Además, tapestry fomenta la programación de JavaScript basada en módulos y admite RequireJS, una popular implementación del lado del cliente de AMD (Definición de módulo asincrónico: especificación de JavaScript para admitir módulos y su dependencia de manera asincrónica).

Ubicación

Los archivos JavaScript son activos de la aplicación Tapestry. De acuerdo con las reglas de activos, los archivos JavaScript se colocan en contexto web,/sr/main/webapp/ o colocado dentro del frasco debajo META-INF/assets/ location.

Vinculación de archivos JavaScript

La forma más sencilla de vincular archivos JavaScript en la plantilla XML es utilizando directamente la etiqueta de secuencia de comandos, que es: <script language = "javascript" src = "relative/path/to/js"></script>. Pero tapiz no recomienda estos enfoques. Tapestry ofrece varias opciones para vincular archivos JavaScript directamente en la propia página / componente. Algunos de estos se dan a continuación.

  • @import annotation- La anotación @import proporciona la opción de vincular varias bibliotecas de JavaScript mediante la expresión de contexto. Se puede aplicar tanto a la clase Page como a su método. Si se aplica a una clase Page, se aplica a todos sus métodos. Si se aplica al método de una página, solo se aplica a ese método y luego Tapestry vincula la biblioteca de JavaScript solo cuando se invoca el método.

@Import(library = {"context:js/jquery.js","context:js/myeffects.js"}) 

public class MyComponent { 
   // ... 
}

  • JavaScriptSupport interface - JavaScriptSupport es una interfaz definida por tapiz y tiene un método, importJavaScriptLibrarypara importar archivos JavaScript. El objeto JavScriptSupport se puede crear fácilmente simplemente declarando y anotando con la anotación @Environmental.

@Inject @Path("context:/js/myeffects.js") 
private Asset myEffects;  

@Environmental 
private JavaScriptSupport javaScriptSupport;  
void setupRender() { 
   javaScriptSupport.importJavaScriptLibrary(myEffects); 
}

  • JavaScripSupport solo se puede inyectar en un componente utilizando el @Environmentalanotación. Para los servicios, necesitamos utilizar un@Inject anotación o agregarlo como un argumento en el método constructor del servicio.

@Inject 
private JavaScriptSupport javaScriptSupport; 
public MyServiceImpl(JavaScriptSupport support) { 
   // ... 
}

  • addScript method - Es similar a la interfaz de JavaScriptSupport, excepto que utiliza el addScript y el código se agrega directamente a la salida en la parte inferior de la página.

void afterRender() { 
   javaScriptSupport.addScript(
      "$('%s').observe('click', hideMe());", container.getClientId()); 
}

Pila de JavaScript

Tapestry permite combinar y usar un grupo de archivos JavaScript y hojas de estilo relacionadas como una sola entidad. Actualmente, Tapestry incluye pilas basadas en Prototype y JQuery.

Un desarrollador puede desarrollar sus propias pilas implementando el JavaScriptStack interfaz y registrarlo en el AppModule.java. Una vez registrado, la pila se puede importar utilizando el@import anotación.

@Contribute(JavaScriptStackSource.class) 
public static void addMyStack(
   MappedConfiguration<String, JavaScriptStack> configuration) { 
   
   configuration.addInstance("MyStack", myStack.class); 
}  

@Import(stack = "MyStack") 
public class myPage { 
}