Apache Tapestry - Template

Mari kita pertimbangkan Template XML Permadani di bagian ini. Template XML adalah dokumen XML yang dibentuk dengan baik. Lapisan presentasi (Antarmuka Pengguna) dari Halaman adalah Template XML. Template XML memiliki markup HTML biasa sebagai tambahan dari item yang diberikan di bawah ini -

  • Ruang Nama Permadani
  • Expansions
  • Elements
  • Components

Sekarang mari kita bahas secara rinci.

Ruang Nama Permadani

Tapestry Namespaces tidak lain adalah XML Namespaces. Namespaces harus ditentukan dalam elemen root template. Ini digunakan untuk memasukkan Komponen Permadani dan informasi terkait komponen di Templat. Ruang nama yang paling umum digunakan adalah sebagai berikut -

  • xmlns: t = “https://tapestry.apache.org/schema/tapestry_5_4.xsd” - Ini digunakan untuk mengidentifikasi Elemen, Komponen, dan Atribut Tapestry.

  • xmlns: p = "tapestry: parameter" - Ini digunakan untuk meneruskan potongan kode yang berubah-ubah ke komponen.

Contoh Tapestry Namespace adalah sebagai berikut -

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

Perluasan

Perluasan adalah metode sederhana dan efisien untuk mengubah Template XML secara dinamis selama fase rendering Halaman. Ekspansi menggunakan sintaks $ {<name>}. Ada banyak opsi untuk mengekspresikan perluasan dalam Template XML. Mari kita lihat beberapa opsi yang paling umum digunakan -

Perluasan Properti

Ini memetakan properti yang ditentukan di kelas Halaman terkait. Ini mengikuti Spesifikasi Java Bean untuk definisi properti di kelas Java. Ini melangkah lebih jauh dengan mengabaikan kasus untuk nama properti. Mari kita ubah contoh "Hello World" menggunakan perluasan properti. Blok kode berikut adalah kelas Halaman yang dimodifikasi.

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

Kemudian, ubah Template XML yang sesuai seperti yang ditunjukkan di bawah ini.

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

Di sini, kami telah menentukan name sebagai Java Bean Property di kelas Halaman dan secara dinamis memprosesnya dalam Template XML menggunakan perluasan ${name}.

Perluasan Pesan

Setiap kelas Halaman mungkin memiliki atau tidak memiliki file Properti terkait - «page_name».propertiesdi folder sumber daya. File properti adalah file teks biasa yang memiliki pasangan kunci / nilai tunggal (pesan) per baris. Mari kita buat file properti untuk Halaman HelloWorld di -

“/Src/main/resources/com/example/MyFirstApplication/pages/helloworld.properties” dan tambahkan pesan “Greeting”.

Greeting = Hello

Itu Greeting pesan dapat digunakan dalam Template XML sebagai ${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>

Elemen

Permadani memiliki sekumpulan kecil elemen untuk digunakan dalam Template XML. Elemen adalah tag yang telah ditentukan sebelumnya yang ditentukan di bawah namespace Tapestry -

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

Setiap elemen dibuat untuk tujuan tertentu. Elemen permadani yang tersedia adalah sebagai berikut -

<t: body>

Ketika dua komponen disarangkan, template komponen induk mungkin harus membungkus template komponen anak. Elemen <t: body> berguna dalam situasi ini. Salah satu kegunaan <t: body> ada di Tata Letak Template.

Secara umum, Antarmuka Pengguna aplikasi web akan memiliki Header Umum, Footer, Menu, dll. Item umum ini didefinisikan dalam Template XML dan disebut Tata Letak Template atau Komponen Tata Letak. Di Tapestry, itu perlu dibuat oleh pengembang aplikasi. Komponen Tata Letak hanyalah komponen lain dan ditempatkan di bawah folder komponen, yang memiliki jalur berikut -src/main/«java|resources»/«package_name»/components.

Mari kita buat komponen tata letak sederhana bernama MyCustomLayout. Kode untuk MyCustomLayout adalah sebagai berikut -

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

Di kelas komponen MyCustomLayout, kami mendeklarasikan bidang judul dan dengan menggunakan anotasi, kami membuatnya wajib. Sekarang, ubah template HelloWorld.html untuk menggunakan custom layout seperti yang ditunjukkan pada blok kode di bawah ini.

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

Kita dapat melihat di sini bahwa Template XML tidak memiliki tag kepala dan badan. Tapestry akan mengumpulkan detail ini dari komponen layout dan <t: body> komponen layout akan diganti dengan Template HelloWorld. Setelah semuanya selesai, Permadani akan memancarkan markup serupa seperti yang ditentukan di bawah ini -

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

Tata letak bisa bersarang. Misalnya, kami dapat memperluas tata letak kustom kami dengan memasukkan fungsionalitas administrasi dan menggunakannya untuk bagian admin seperti yang ditentukan di bawah ini.

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

<T: container> adalah elemen tingkat atas dan menyertakan ruang nama permadani. Ini digunakan untuk menentukan bagian dinamis dari sebuah komponen.

Misalnya, komponen grid mungkin memerlukan template untuk mengidentifikasi cara merender barisnya - tr (dan kolom td) di dalam tabel 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> adalah placeholder untuk bagian dinamis dalam template. Umumnya, elemen blok tidak dirender. Hanya saja, komponen yang ditentukan dalam template menggunakan elemen blok. Komponen akan memasukkan data secara dinamis ke dalam elemen blok dan merendernya. Salah satu kasus penggunaan yang populer adalahAJAX.

Elemen blok memberikan posisi dan markup yang tepat untuk data dinamis yang akan dirender. Setiap elemen blok harus memiliki Properti Java yang sesuai. Hanya dengan begitu dapat dirender secara dinamis. Id elemen blok harus mengikuti aturan pengenal variabel Java. Sampel parsial disediakan di bawah ini.

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

Elemen <t: content> digunakan untuk menentukan konten sebenarnya dari template. Secara umum, semua markup dianggap sebagai bagian dari template. Jika <t: content> ditentukan, hanya markup di dalamnya yang akan dipertimbangkan. Fitur ini digunakan oleh desainer untuk mendesain halaman tanpa komponen tata letak.

<t: hapus>

<T: remove> adalah kebalikan dari elemen konten. Markup di dalam elemen hapus tidak dianggap sebagai bagian dari template. Ini dapat digunakan untuk komentar khusus server dan untuk tujuan perancangan.

Aktiva

Aset adalah file sumber daya statis seperti lembar gaya, gambar, dan file JavaScript. Umumnya, aset ditempatkan di direktori root aplikasi web/src/main/webapp.

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

Tapestry juga memperlakukan file yang disimpan di Java Classpathsebagai Aset. Permadani menyediakan opsi lanjutan untuk memasukkan Aset ke dalam templat melalui opsi perluasan.

  • Context - Opsi untuk mendapatkan aset tersedia dalam konteks web.

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

asset- Komponen biasanya menyimpan asetnya sendiri di dalam file jar bersama dengan kelas Java. Mulai dari Tapestry 5.4, jalur standar untuk menyimpan aset di classpath adalahMETA-INF/assets. Untuk perpustakaan, jalur standar untuk menyimpan aset adalahMETA-INF/assets/«library_name»/. asset: bisa juga menelepon context: perluasan untuk mendapatkan aset dari konteks web.

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

Aset dapat disuntikkan ke Halaman Permadani atau Komponen menggunakan anotasi Inject dan Path. Parameter untuk anotasi Jalur adalah jalur relatif dari aset.

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

Itu Path parameter juga dapat berisi simbol Permadani yang ditentukan di AppModule.java bagian.

Misalnya, kita dapat mendefinisikan sebuah simbol, skin.root dengan konteks nilai: skins / basic dan menggunakannya seperti yang ditunjukkan di bawah ini -

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

Lokalisasi

Menyertakan sumber daya melalui permadani menyediakan fungsionalitas tambahan. Salah satu fungsi tersebut adalah "Pelokalan". Permadani akan memeriksa lokasi saat ini dan menyertakan sumber daya yang tepat.

Misalnya, jika lokal saat ini disetel sebagai de, kemudian edit_de.png akan dimasukkan sebagai ganti edit.png.

CSS

Permadani memiliki dukungan lembar gaya bawaan. Permadani akan menyuntikkantapestry.csssebagai bagian dari tumpukan Javascript inti. Dari Tapestry 5.4, tapestry termasukbootstrap css frameworkdemikian juga. Kita bisa memasukkan style sheet kita sendiri menggunakan tag tautan biasa. Dalam kasus ini, style sheets harus berada di direktori root web -/src/main/webapp/.

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

Permadani menyediakan opsi lanjutan untuk memasukkan lembar gaya ke dalam templat melalui opsi perluasan seperti yang dibahas sebelumnya.

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

Tapestry juga menyediakan penjelasan Import untuk memasukkan style sheet secara langsung ke dalam kelas Java.

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

Tapestry menyediakan banyak pilihan untuk mengatur style sheet melalui AppModule.java. Beberapa opsi penting adalah -

  • Style sheet default permadani dapat dihapus.

@Contribute(MarkupRenderer.class) 

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

  • Bootstrap juga dapat dinonaktifkan dengan mengganti jalurnya.

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

  • Aktifkan meminimalkan dinamis aset (CSS dan JavaScript). Kami perlu menyertakantapestry-webresources ketergantungan (di pom.xml) juga.

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

Generasi aplikasi web saat ini sangat bergantung pada JavaScript untuk memberikan pengalaman sisi klien yang kaya. Tapestry mengakuinya dan memberikan dukungan kelas satu untuk JavaScript. Dukungan JavaScript tertanam kuat ke dalam permadani dan tersedia di setiap fase pemrograman.

Sebelumnya, Tapestry hanya mendukung Prototype dan Scriptaculous. Tapi, dari versi 5.4, permadani sepenuhnya menulis ulang lapisan JavaScript untuk membuatnya seumum mungkin dan memberikan dukungan kelas satu untuk JQuery, pustaka de-facto untuk JavaScript. Juga, permadani mendorong pemrograman JavaScript berbasis Modul dan mendukung RequireJS, implementasi sisi klien yang populer dari AMD (Definisi Modul Asinkron - spesifikasi JavaScript untuk mendukung modul dan ketergantungannya secara asinkron).

Lokasi

File JavaScript adalah aset Aplikasi Permadani. Sesuai dengan aturan aset, file JavaScript ditempatkan di bawah konteks web,/sr/main/webapp/ atau ditempatkan di dalam toples di bawah META-INF/assets/ location.

Menautkan File JavaScript

Cara termudah untuk menautkan file JavaScript di Template XML adalah dengan langsung menggunakan tag script, yaitu - <script language = "javascript" src = "relative/path/to/js"></script>. Tapi, permadani tidak merekomendasikan pendekatan ini. Tapestry menyediakan beberapa opsi untuk menautkan file JavaScript langsung di Halaman / Komponen itu sendiri. Beberapa di antaranya diberikan di bawah ini.

  • @import annotation- Anotasi @import menyediakan opsi untuk menautkan beberapa pustaka JavaScript menggunakan ekspresi konteks. Ini dapat diterapkan ke kelas Halaman dan metodenya. Jika diterapkan ke kelas Halaman, itu berlaku untuk semua metodenya. Jika diterapkan ke Halaman Metode, itu hanya berlaku untuk metode itu dan kemudian Tapestry menautkan perpustakaan JavaScript hanya ketika metode tersebut dipanggil.

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

public class MyComponent { 
   // ... 
}

  • JavaScriptSupport interface - Dukungan JavaScript adalah antarmuka yang ditentukan oleh permadani dan memiliki metode, importJavaScriptLibraryuntuk mengimpor file JavaScript. Objek JavScriptSupport dapat dengan mudah dibuat hanya dengan mendeklarasikan dan membuat anotasi dengan anotasi @Environmental.

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

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

  • JavaScripSupport hanya dapat dimasukkan ke dalam komponen menggunakan ekstensi @Environmentalanotasi. Untuk layanan, kita perlu menggunakan file@Inject anotasi atau tambahkan sebagai argumen dalam metode konstruktor layanan.

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

  • addScript method - Ini mirip dengan antarmuka JavaScriptSupport kecuali bahwa ia menggunakan addScript metode dan kode secara langsung ditambahkan ke output di bagian bawah halaman.

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

JavaScript Stack

Tapestry memungkinkan sekelompok file JavaScript dan style sheet terkait untuk digabungkan dan digunakan sebagai satu kesatuan. Saat ini, Tapestry mencakup tumpukan berbasis Prototipe dan JQuery.

Pengembang dapat mengembangkan tumpukan mereka sendiri dengan mengimplementasikan JavaScriptStack antarmuka dan mendaftarkannya di AppModule.java. Setelah terdaftar, tumpukan dapat diimpor menggunakan file@import anotasi.

@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