Apache Tapisserie - Vorlagen

Betrachten wir die Tapestry XML-Vorlage in diesem Abschnitt. XML-Vorlage ist ein wohlgeformtes XML-Dokument. Die Präsentationsschicht (Benutzeroberfläche) einer Seite ist eine XML-Vorlage. Eine XML-Vorlage verfügt zusätzlich zu den unten angegebenen Elementen über ein normales HTML-Markup.

  • Tapisserie-Namespace
  • Expansions
  • Elements
  • Components

Lassen Sie uns sie jetzt im Detail diskutieren.

Tapisserie-Namespace

Tapisserie-Namespaces sind nichts anderes als XML-Namespaces. Namespaces sollten im Stammelement der Vorlage definiert werden. Es wird verwendet, um Tapisseriekomponenten und komponentenbezogene Informationen in die Vorlage aufzunehmen. Die am häufigsten verwendeten Namespaces sind:

  • xmlns: t = "https://tapestry.apache.org/schema/tapestry_5_4.xsd" - Wird verwendet, um die Elemente, Komponenten und Attribute von Tapestry zu identifizieren.

  • xmlns: p = "tapestry: parameter" - Wird verwendet, um beliebige Codestücke an Komponenten zu übergeben.

Ein Beispiel für einen Tapisserie-Namespace lautet wie folgt:

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

Erweiterungen

Die Erweiterung ist eine einfache und effiziente Methode, um die XML-Vorlage während der Renderphase der Seite dynamisch zu ändern. Die Erweiterung verwendet die Syntax $ {<Name>}. Es gibt viele Optionen, um die Erweiterung in der XML-Vorlage auszudrücken. Lassen Sie uns einige der am häufigsten verwendeten Optionen sehen -

Immobilienerweiterungen

Es ordnet die in der entsprechenden Page-Klasse definierte Eigenschaft zu. Es folgt der Java Bean-Spezifikation für die Eigenschaftsdefinition in einer Java-Klasse. Es geht noch einen Schritt weiter, indem die Fälle für den Eigenschaftsnamen ignoriert werden. Lassen Sie uns das Beispiel „Hallo Welt“ mithilfe der Eigenschaftenerweiterung ändern. Der folgende Codeblock ist die geänderte Seitenklasse.

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

Ändern Sie dann die entsprechende XML-Vorlage wie unten gezeigt.

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

Hier haben wir definiert name wie Java Bean Property in der Page-Klasse und verarbeitet sie dynamisch in der XML-Vorlage mithilfe der Erweiterung ${name}.

Nachrichtenerweiterung

Jeder Seitenklasse kann eine Eigenschaftendatei zugeordnet sein oder nicht. «page_name».propertiesim Ressourcenordner. Die Eigenschaftendateien sind Nur-Text-Dateien mit einem einzelnen Schlüssel / Wert-Paar (Nachricht) pro Zeile. Erstellen wir eine Eigenschaftendatei für die HelloWorld-Seite unter -

"/Src/main/resources/com/example/MyFirstApplication/pages/helloworld.properties" und fügen Sie eine "Gruß" -Nachricht hinzu.

Greeting = Hello

Das Greeting Nachricht kann in der XML-Vorlage als verwendet werden ${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>

Elemente

Tapisserie enthält eine kleine Reihe von Elementen, die in XML-Vorlagen verwendet werden können. Elemente sind vordefinierte Tags, die unter dem Tapestry-Namespace definiert sind.

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

Jedes Element wird für einen bestimmten Zweck erstellt. Die verfügbaren Wandteppichelemente sind wie folgt:

<t: body>

Wenn zwei Komponenten verschachtelt sind, muss die Vorlage der übergeordneten Komponente möglicherweise die Vorlage der untergeordneten Komponente umschließen. Das Element <t: body> ist in dieser Situation nützlich. Eine der Verwendungsmöglichkeiten von <t: body> ist das Vorlagenlayout.

Im Allgemeinen verfügt die Benutzeroberfläche einer Webanwendung über eine gemeinsame Kopf- und Fußzeile, ein gemeinsames Menü usw. Diese allgemeinen Elemente werden in einer XML-Vorlage definiert und als Vorlagenlayout oder Layoutkomponente bezeichnet. In Tapestry muss es von einem Anwendungsentwickler erstellt werden. Eine Layoutkomponente ist nur eine weitere Komponente und wird unter dem Komponentenordner abgelegt, der den folgenden Pfad enthält:src/main/«java|resources»/«package_name»/components.

Lassen Sie uns eine einfache Layoutkomponente namens erstellen MyCustomLayout. Der Code für MyCustomLayout lautet wie folgt:

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

In der MyCustomLayout-Komponentenklasse haben wir ein Titelfeld deklariert und es mithilfe von Anmerkungen obligatorisch gemacht. Ändern Sie nun die Vorlage HelloWorld.html, um unser benutzerdefiniertes Layout zu verwenden, wie im folgenden Codeblock gezeigt.

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

Wir können hier sehen, dass die XML-Vorlage keine Kopf- und Körper-Tags enthält. Tapisserie sammelt diese Details aus der Layoutkomponente und das <t: body> der Layoutkomponente wird durch die HelloWorld-Vorlage ersetzt. Sobald alles erledigt ist, gibt Tapestry ein ähnliches Markup wie unten angegeben aus -

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

Layouts können verschachtelt werden. Beispielsweise können wir unser benutzerdefiniertes Layout um Verwaltungsfunktionen erweitern und es wie unten angegeben für den Administratorbereich verwenden.

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

<t: container>

Der <t: container> ist ein Element der obersten Ebene und enthält einen Tapisserie-Namespace. Dies wird verwendet, um den dynamischen Abschnitt einer Komponente anzugeben.

Beispielsweise benötigt eine Rasterkomponente möglicherweise eine Vorlage, um zu identifizieren, wie ihre Zeilen - tr (und Spalte td) in einer HTML-Tabelle gerendert werden.

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

<t: block>

Der <t: block> ist ein Platzhalter für einen dynamischen Abschnitt in der Vorlage. Im Allgemeinen wird das Blockelement nicht gerendert. Nur in der Vorlage definierte Komponenten verwenden Blockelemente. Komponenten fügen Daten dynamisch in das Blockelement ein und rendern sie. Einer der beliebtesten Anwendungsfälle istAJAX.

Das Blockelement liefert die genaue Position und das Markup für die zu rendernden dynamischen Daten. Jedes Blockelement sollte eine entsprechende Java-Eigenschaft haben. Nur dann kann es dynamisch gerendert werden. Die ID des Blockelements sollte den Regeln für Java-Variablenkennungen entsprechen. Die Teilprobe ist unten angegeben.

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

Das Element <t: content> wird verwendet, um den tatsächlichen Inhalt der Vorlage anzugeben. Im Allgemeinen wird das gesamte Markup als Teil der Vorlage betrachtet. Wenn <t: content> angegeben ist, wird nur das darin enthaltene Markup berücksichtigt. Diese Funktion wird von Designern verwendet, um eine Seite ohne Layoutkomponente zu entwerfen.

<t: entfernen>

Das <t: remove> ist genau das Gegenteil des Inhaltselements. Das Markup innerhalb des Elements "Entfernen" wird nicht als Teil der Vorlage betrachtet. Es kann nur für Serverkommentare und für Entwurfszwecke verwendet werden.

Vermögenswerte

Assets sind statische Ressourcendateien wie Stylesheets, Bilder und JavaScript-Dateien. Im Allgemeinen werden Assets im Stammverzeichnis der Webanwendung abgelegt/src/main/webapp.

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

Tapisserie behandelt auch Dateien, die im gespeichert sind Java Classpathals Vermögenswerte. Tapisserie bietet erweiterte Optionen, um Assets durch Erweiterungsoption in die Vorlage aufzunehmen.

  • Context - Option, Assets im Webkontext verfügbar zu machen.

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

asset- Komponenten speichern normalerweise ihre eigenen Assets zusammen mit Java-Klassen in der JAR-Datei. Ab Tapestry 5.4 lautet der Standardpfad zum Speichern von Assets im KlassenpfadMETA-INF/assets. Für Bibliotheken lautet der Standardpfad zum Speichern von AssetsMETA-INF/assets/«library_name»/. asset: kann auch anrufen context: Erweiterung, um Assets aus dem Webkontext zu erhalten.

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

Assets können mithilfe der Inject- und Path-Annotation in die Tapisserie-Seite oder -Komponente eingefügt werden. Der Parameter für die Pfadanmerkung ist der relative Pfad der Assets.

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

Das Path parameter kann auch Tapisseriesymbole enthalten, die in der AppModule.java Sektion.

Zum Beispiel können wir ein Symbol definieren, skin.root mit dem Wertekontext: skins / basic und es wie unten gezeigt verwenden -

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

Lokalisierung

Das Einbeziehen von Ressourcen durch Wandteppiche bietet zusätzliche Funktionen. Eine solche Funktionalität ist "Lokalisierung". Tapisserie überprüft das aktuelle Gebietsschema und enthält die richtigen Ressourcen.

Zum Beispiel, wenn das aktuelle Gebietsschema als festgelegt ist de, dann edit_de.png wird anstelle von edit.png enthalten sein.

CSS

Tapisserie verfügt über eine integrierte Stylesheet-Unterstützung. Tapisserie wird spritzentapestry.cssals Teil des Kern-Javascript-Stacks. Ab Tapisserie 5.4 enthält Tapisseriebootstrap css frameworkauch. Wir können unser eigenes Stylesheet mit einem normalen Link-Tag einfügen. In diesem Fall sollten sich die Stylesheets im Webstammverzeichnis befinden -/src/main/webapp/.

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

Tapisserie bietet erweiterte Optionen zum Einfügen von Stylesheets in die Vorlage durch Erweiterungsoption, wie bereits erläutert.

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

Tapestry bietet auch Annotationen zum Importieren, um Stylesheets direkt in die Java-Klassen aufzunehmen.

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

Tapisserie bietet viele Optionen zum Verwalten von Stylesheets über AppModule.java. Einige der wichtigen Optionen sind -

  • Das Standard-Stylesheet für Wandteppiche kann entfernt werden.

@Contribute(MarkupRenderer.class) 

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

  • Bootstrap kann auch deaktiviert werden, indem der Pfad überschrieben wird.

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

  • Aktivieren Sie die dynamische Minimierung der Assets (CSS und JavaScript). Wir müssen einbeziehentapestry-webresources Abhängigkeit (in pom.xml) ebenfalls.

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

Clientseitiges JavaScript

Die aktuelle Generation von Webanwendungen hängt stark von JavaScript ab, um eine umfassende clientseitige Erfahrung zu bieten. Tapestry erkennt dies an und bietet erstklassige Unterstützung für JavaScript. Die JavaScript-Unterstützung ist tief im Wandteppich verankert und in jeder Phase der Programmierung verfügbar.

Früher unterstützte Tapestry nur Prototype und Scriptaculous. Ab Version 5.4 hat Tapestry die JavaScript-Ebene jedoch vollständig neu geschrieben, um sie so allgemein wie möglich zu gestalten und JQuery, die De-facto-Bibliothek für JavaScript, erstklassig zu unterstützen. Tapisserie fördert außerdem die modulbasierte JavaScript-Programmierung und unterstützt RequireJS, eine beliebte clientseitige Implementierung von AMD (Asynchrone Moduldefinition - JavaScript-Spezifikation zur Unterstützung von Modulen und deren Abhängigkeit auf asynchrone Weise).

Ort

JavaScript-Dateien sind Assets der Tapestry-Anwendung. In Übereinstimmung mit den Asset-Regeln werden JavaScript-Dateien entweder im Webkontext platziert./sr/main/webapp/ oder in das Glas darunter gestellt META-INF/assets/ location.

Verknüpfen von JavaScript-Dateien

Die einfachste Möglichkeit, JavaScript-Dateien in der XML-Vorlage zu verknüpfen, besteht darin, direkt das Skript-Tag zu verwenden. <script language = "javascript" src = "relative/path/to/js"></script>. Tapisserie empfiehlt diese Ansätze jedoch nicht. Tapisserie bietet verschiedene Optionen zum Verknüpfen von JavaScript-Dateien direkt auf der Seite / Komponente. Einige davon sind unten angegeben.

  • @import annotation- Die Annotation @import bietet die Möglichkeit, mehrere JavaScript-Bibliotheken mithilfe des Kontextausdrucks zu verknüpfen. Es kann sowohl auf die Page-Klasse als auch auf ihre Methode angewendet werden. Wenn es auf eine Page-Klasse angewendet wird, gilt es für alle ihre Methoden. Wenn es auf die Methode einer Seite angewendet wird, gilt es nur für diese Methode, und Tapestry verknüpft die JavaScript-Bibliothek nur, wenn die Methode aufgerufen wird.

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

public class MyComponent { 
   // ... 
}

  • JavaScriptSupport interface - Der JavaScriptSupport ist eine durch Tapisserie definierte Schnittstelle und verfügt über eine Methode: importJavaScriptLibraryum JavaScript-Dateien zu importieren. Das JavScriptSupport-Objekt kann einfach durch Deklarieren und Kommentieren mit @ Umwelt-Annotation erstellt werden.

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

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

  • JavaScripSupport kann nur mit dem in eine Komponente eingefügt werden @EnvironmentalAnmerkung. Für Dienstleistungen müssen wir eine verwenden@Inject Annotation oder fügen Sie es als Argument in die Servicekonstruktormethode ein.

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

  • addScript method - Dies ähnelt der JavaScriptSupport-Oberfläche, verwendet jedoch die addScript Methode und der Code wird direkt zur Ausgabe am Ende der Seite hinzugefügt.

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

JavaScript-Stapel

Mit Tapisserie können eine Gruppe von JavaScript-Dateien und zugehörigen Stylesheets kombiniert und als eine Einheit verwendet werden. Derzeit enthält Tapestry Prototyp- und JQuery-basierte Stapel.

Ein Entwickler kann seine eigenen Stacks entwickeln, indem er das implementiert JavaScriptStack Schnittstelle und registrieren Sie es in der AppModule.java. Nach der Registrierung kann der Stapel mit dem importiert werden@import Anmerkung.

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

@Import(stack = "MyStack") 
public class myPage { 
}
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved