Tapisserie Apache - Modèles

Considérons le modèle XML Tapestry dans cette section. Le modèle XML est un document XML bien formé. La couche de présentation (interface utilisateur) d'une page est un modèle XML. Un modèle XML a un balisage HTML normal en plus des éléments donnés ci-dessous -

  • Espace de noms Tapestry
  • Expansions
  • Elements
  • Components

Parlons-en maintenant en détail.

Espace de noms Tapestry

Les espaces de noms Tapestry ne sont rien d'autre que des espaces de noms XML. Les espaces de noms doivent être définis dans l'élément racine du modèle. Il est utilisé pour inclure les composants Tapestry et les informations relatives aux composants dans le modèle. Les espaces de noms les plus couramment utilisés sont les suivants -

  • xmlns: t = “https://tapestry.apache.org/schema/tapestry_5_4.xsd” - Il est utilisé pour identifier les éléments, composants et attributs de Tapestry.

  • xmlns: p = «tapestry: parameter» - Il est utilisé pour transmettre des morceaux de code arbitraires aux composants.

Un exemple d'espace de noms Tapestry est le suivant -

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

Extensions

L'expansion est une méthode simple et efficace pour modifier dynamiquement le modèle XML pendant la phase de rendu de la page. L'expansion utilise la syntaxe $ {<nom>}. Il existe de nombreuses options pour exprimer l'expansion dans le modèle XML. Voyons quelques-unes des options les plus couramment utilisées -

Expansions de propriété

Il mappe la propriété définie dans la classe Page correspondante. Il suit la spécification Java Bean pour la définition de propriété dans une classe Java. Il va plus loin en ignorant les cas du nom de propriété. Modifions l'exemple «Hello World» en utilisant l'expansion des propriétés. Le bloc de code suivant est la classe Page modifiée.

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

Ensuite, modifiez le modèle XML correspondant comme indiqué ci-dessous.

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

Ici, nous avons défini name comme Java Bean Property dans la classe Page et l'a traitée dynamiquement dans un modèle XML à l'aide de l'expansion ${name}.

Expansion des messages

Chaque classe de page peut avoir ou non un fichier de propriétés associé - «page_name».propertiesdans le dossier des ressources. Les fichiers de propriétés sont des fichiers de texte brut ayant une seule paire clé / valeur (message) par ligne. Créons un fichier de propriétés pour HelloWorld Page à -

«/Src/main/resources/com/example/MyFirstApplication/pages/helloworld.properties» et ajoutez un message «Greeting».

Greeting = Hello

le Greeting message peut être utilisé dans le modèle XML comme ${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>

Éléments

Tapestry a un petit ensemble d'éléments à utiliser dans les modèles XML. Les éléments sont des balises prédéfinies définies sous l'espace de noms Tapestry -

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

Chaque élément est créé dans un but précis. Les éléments de tapisserie disponibles sont les suivants -

<t: corps>

Lorsque deux composants sont imbriqués, le modèle du composant parent peut devoir encapsuler le modèle du composant enfant. L'élément <t: body> est utile dans cette situation. L'une des utilisations de <t: body> est dans la disposition du modèle.

En général, l'interface utilisateur d'une application Web aura un en-tête, un pied de page, un menu, etc. communs. Ces éléments communs sont définis dans un modèle XML et il est appelé disposition de modèle ou composant de disposition. Dans Tapestry, il doit être créé par un développeur d'application. Un composant de mise en page est juste un autre composant et est placé sous le dossier des composants, qui a le chemin suivant -src/main/«java|resources»/«package_name»/components.

Créons un composant de mise en page simple appelé MyCustomLayout. Le code pour MyCustomLayout est le suivant -

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

Dans la classe de composant MyCustomLayout, nous avons déclaré un champ de titre et en utilisant l'annotation, nous l'avons rendu obligatoire. Maintenant, changez le modèle HelloWorld.html pour utiliser notre mise en page personnalisée comme indiqué dans le bloc de code ci-dessous.

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

Nous pouvons voir ici que le modèle XML n'a pas de balises head et body. Tapestry collectera ces détails à partir du composant de mise en page et le <t: body> du composant de mise en page sera remplacé par le modèle HelloWorld. Une fois que tout est fait, Tapestry émettra un balisage similaire à celui spécifié ci-dessous -

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

Les mises en page peuvent être imbriquées. Par exemple, nous pouvons étendre notre mise en page personnalisée en incluant la fonctionnalité d'administration et l'utiliser pour la section d'administration comme spécifié ci-dessous.

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

<t: conteneur>

Le <t: container> est un élément de niveau supérieur et comprend un espace de noms tapestry. Ceci est utilisé pour spécifier la section dynamique d'un composant.

Par exemple, un composant de grille peut avoir besoin d'un modèle pour identifier comment rendre ses lignes - tr (et la colonne td) dans un tableau HTML.

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

<t: block>

Le <t: block> est un espace réservé pour une section dynamique dans le modèle. En règle générale, l'élément de bloc n'est pas rendu. Seuls, les composants définis dans le modèle utilisent un élément de bloc. Les composants injecteront des données dynamiquement dans l'élément de bloc et le rendront. L'un des cas d'utilisation les plus courants estAJAX.

L'élément de bloc fournit la position exacte et le balisage des données dynamiques à rendre. Chaque élément de bloc doit avoir une propriété Java correspondante. Ce n'est qu'alors qu'il peut être rendu dynamiquement. L'identifiant de l'élément de bloc doit suivre les règles d'identificateur de variable Java. L'échantillon partiel est fourni ci-dessous.

@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: content>

L'élément <t: content> est utilisé pour spécifier le contenu réel du modèle. En général, tout le balisage est considéré comme faisant partie du modèle. Si <t: content> est spécifié, seul le balisage à l'intérieur sera pris en compte. Cette fonctionnalité est utilisée par les concepteurs pour concevoir une page sans composant de mise en page.

<t: supprimer>

L'élément <t: remove> est juste l'opposé de l'élément content. Le balisage à l'intérieur de l'élément remove n'est pas considéré comme faisant partie du modèle. Il peut être utilisé uniquement pour les commentaires du serveur et à des fins de conception.

Les atouts

Les actifs sont des fichiers de ressources statiques tels que des feuilles de style, des images et des fichiers JavaScript. En règle générale, les actifs sont placés dans le répertoire racine de l'application Web/src/main/webapp.

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

Tapestry traite également les fichiers stockés dans Java Classpathen tant qu'actifs. Tapestry fournit des options avancées pour inclure des actifs dans le modèle via l'option d'extension.

  • Context - Option pour obtenir des actifs disponibles dans un contexte Web.

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

asset- Les composants stockent généralement leurs propres actifs dans le fichier jar avec les classes Java. À partir de Tapestry 5.4, le chemin standard pour stocker les éléments dans le chemin de classe estMETA-INF/assets. Pour les bibliothèques, le chemin standard pour stocker les actifs estMETA-INF/assets/«library_name»/. asset: peut aussi appeler context: expansion pour obtenir des ressources du contexte Web.

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

Les actifs peuvent être injectés dans la page ou le composant Tapestry à l'aide de l'annotation Inject and Path. Le paramètre de l'annotation Path est le chemin relatif des actifs.

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

le Path parameter peut également contenir des symboles Tapestry définis dans le AppModule.java section.

Par exemple, nous pouvons définir un symbole, skin.root avec la valeur context: skins / basic et l'utiliser comme indiqué ci-dessous -

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

Localisation

L'inclusion de ressources via la tapisserie offre des fonctionnalités supplémentaires. L'une de ces fonctionnalités est la «localisation». Tapestry vérifiera les paramètres régionaux actuels et inclura les ressources appropriées.

Par exemple, si les paramètres régionaux actuels sont définis comme de, puis edit_de.png sera inclus au lieu de edit.png.

CSS

Tapestry a un support de feuille de style intégré. La tapisserie injecteratapestry.cssdans le cadre de la pile Javascript principale. À partir de Tapestry 5.4, la tapisserie comprendbootstrap css frameworkainsi que. Nous pouvons inclure notre propre feuille de style en utilisant une balise de lien normale. Dans ce cas, les feuilles de style doivent se trouver dans le répertoire racine Web -/src/main/webapp/.

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

Tapestry fournit des options avancées pour inclure des feuilles de style dans le modèle via l'option d'extension comme indiqué précédemment.

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

Tapestry fournit également une annotation d'importation pour inclure la feuille de style directement dans les classes Java.

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

Tapestry fournit de nombreuses options pour gérer la feuille de style via AppModule.java. Certaines des options importantes sont -

  • La feuille de style par défaut de la tapisserie peut être supprimée.

@Contribute(MarkupRenderer.class) 

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

  • Bootstrap peut également être désactivé en remplaçant son chemin.

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

  • Activez la minimisation dynamique des actifs (CSS et JavaScript). Nous devons incluretapestry-webresources dépendance (dans pom.xml) également.

@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 côté client

La génération actuelle d'applications Web dépend fortement de JavaScript pour offrir une expérience client riche. Tapestry le reconnaît et fournit un support de première classe pour JavaScript. Le support JavaScript est profondément ancré dans la tapisserie et disponible à chaque phase de la programmation.

Auparavant, Tapestry ne supportait que Prototype et Scriptaculous. Mais, à partir de la version 5.4, tapestry a complètement réécrit la couche JavaScript pour la rendre aussi générique que possible et fournir un support de première classe pour JQuery, la bibliothèque de facto pour JavaScript. En outre, tapestry encourage la programmation JavaScript basée sur les modules et prend en charge RequireJS, une implémentation côté client populaire d'AMD (Asynchronous Module Definition - spécification JavaScript pour prendre en charge les modules et leurs dépendances de manière asynchrone).

Emplacement

Les fichiers JavaScript sont des actifs de l'application Tapestry. Conformément aux règles de l'actif, les fichiers JavaScript sont placés soit sous contexte web,/sr/main/webapp/ ou placé à l'intérieur du pot sous META-INF/assets/ location.

Lier des fichiers JavaScript

Le moyen le plus simple de lier des fichiers JavaScript dans le modèle XML consiste à utiliser directement la balise script, qui est - <script language = "javascript" src = "relative/path/to/js"></script>. Mais, tapestry ne recommande pas ces approches. Tapestry fournit plusieurs options pour lier des fichiers JavaScript directement dans la page / le composant lui-même. Certains d'entre eux sont donnés ci-dessous.

  • @import annotation- L'annotation @import offre la possibilité de lier plusieurs bibliothèques JavaScript à l'aide d'une expression de contexte. Il peut être appliqué à la fois à la classe Page et à sa méthode. S'il est appliqué à une classe Page, il s'applique à toutes ses méthodes. S'il est appliqué à la méthode d'une page, il s'applique uniquement à cette méthode, puis Tapestry lie la bibliothèque JavaScript uniquement lorsque la méthode est appelée.

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

public class MyComponent { 
   // ... 
}

  • JavaScriptSupport interface - Le JavaScriptSupport est une interface définie par tapestry et il a une méthode, importJavaScriptLibrarypour importer des fichiers JavaScript. L'objet JavScriptSupport peut être facilement créé en déclarant et en annotant simplement avec l'annotation @Environmental.

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

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

  • JavaScripSupport ne peut être injecté dans un composant qu'à l'aide du @Environmentalannotation. Pour les services, nous devons utiliser un@Inject annotation ou ajoutez-la comme argument dans la méthode du constructeur de service.

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

  • addScript method - Ceci est similaire à l'interface JavaScriptSupport sauf qu'il utilise le addScript et le code est directement ajouté à la sortie en bas de la page.

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

Pile JavaScript

Tapestry permet à un groupe de fichiers JavaScript et de feuilles de style associés d'être combinés et utilisés comme une seule entité. Actuellement, Tapestry comprend des piles basées sur Prototype et JQuery.

Un développeur peut développer ses propres piles en implémentant le JavaScriptStack et enregistrez-le dans le AppModule.java. Une fois enregistrée, la pile peut être importée à l'aide du@import annotation.

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

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