Apache Tapestry - Mẫu

Chúng ta hãy xem xét Mẫu XML của Tapestry trong phần này. Mẫu XML là một tài liệu XML được định dạng tốt. Lớp trình bày (Giao diện Người dùng) của một Trang là Mẫu XML. Mẫu XML có đánh dấu HTML bình thường ngoài các mục được cung cấp bên dưới -

Không gian tên tấm thảm
Expansions
Elements
Components

Bây giờ chúng ta hãy thảo luận chi tiết về chúng.

Không gian tên tấm thảm

Tapestry Không gian tên không là gì khác ngoài Không gian tên XML. Không gian tên phải được xác định trong phần tử gốc của mẫu. Nó được sử dụng để bao gồm các Thành phần Tapestry và thông tin liên quan đến thành phần trong Mẫu. Các không gian tên được sử dụng phổ biến nhất như sau:

xmlns: t = “https://tapestry.apache.org/schema/tapestry_5_4.xsd” - Nó được sử dụng để xác định các Phần tử, Thành phần và Thuộc tính của Tapestry.
xmlns: p = “tapestry: tham số” - Nó được sử dụng để truyền các đoạn mã tùy ý cho các thành phần.

Ví dụ về Tapestry Namespace như sau:

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

Mở rộng

Mở rộng là phương pháp đơn giản và hiệu quả để thay đổi động Mẫu XML trong giai đoạn kết xuất của Trang. Mở rộng sử dụng cú pháp $ {<name>}. Có nhiều tùy chọn để thể hiện sự mở rộng trong Mẫu XML. Hãy để chúng tôi xem một số tùy chọn thường được sử dụng nhất -

Mở rộng tài sản

Nó ánh xạ thuộc tính được xác định trong lớp Trang tương ứng. Nó tuân theo Đặc tả Java Bean để định nghĩa thuộc tính trong một lớp Java. Nó tiến thêm một bước nữa bằng cách bỏ qua các trường hợp tên tài sản. Hãy để chúng tôi thay đổi ví dụ “Hello World” bằng cách sử dụng mở rộng thuộc tính. Khối mã sau là lớp Trang đã sửa đổi.

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

Sau đó, thay đổi Mẫu XML tương ứng như hình dưới đây.

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

Ở đây, chúng tôi đã xác định name như Java Bean Property trong lớp Trang và xử lý động nó trong Mẫu XML bằng cách sử dụng mở rộng ${name}.

Mở rộng tin nhắn

Mỗi lớp Trang có thể có hoặc không có tệp Thuộc tính được liên kết - «page_name».propertiestrong thư mục tài nguyên. Tệp thuộc tính là tệp văn bản thuần túy có một cặp khóa / giá trị (thông báo) trên mỗi dòng. Hãy để chúng tôi tạo tệp thuộc tính cho Trang HelloWorld tại -

“/Src/main/resources/com/example/MyFirstApplication/pages/helloworld.properties” và thêm thông báo “Lời chào”.

Greeting = Hello

Các Greeting thông báo có thể được sử dụng trong Mẫu XML như ${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>

Thành phần

Tấm thảm có một tập hợp nhỏ các phần tử được sử dụng trong Mẫu XML. Phần tử là các thẻ xác định trước được xác định trong không gian tên Tapestry -

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

Mỗi phần tử được tạo ra cho một mục đích cụ thể. Các yếu tố thảm trang trí có sẵn như sau:

<t: body>

Khi hai thành phần được lồng vào nhau, mẫu của thành phần mẹ có thể phải bọc mẫu của thành phần con. Phần tử <t: body> hữu ích trong trường hợp này. Một trong những cách sử dụng <t: body> là trong Bố cục Mẫu.

Nói chung, Giao diện Người dùng của một ứng dụng web sẽ có Đầu trang, Chân trang, Trình đơn chung, v.v. Những mục chung này được định nghĩa trong Mẫu XML và nó được gọi là Bố cục Mẫu hoặc Thành phần Bố cục. Trong Tapestry, nó cần được tạo bởi một nhà phát triển ứng dụng. Thành phần Bố cục chỉ là một thành phần khác và được đặt trong thư mục thành phần, có đường dẫn sau:src/main/«java|resources»/«package_name»/components.

Hãy để chúng tôi tạo một thành phần bố cục đơn giản được gọi là MyCustomLayout. Mã cho MyCustomLayout như sau:

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

Trong lớp thành phần MyCustomLayout, chúng tôi đã khai báo trường tiêu đề và bằng cách sử dụng chú thích, chúng tôi đã đặt nó trở thành trường bắt buộc. Bây giờ, hãy thay đổi mẫu HelloWorld.html để sử dụng bố cục tùy chỉnh của chúng tôi như được hiển thị trong khối mã bên dưới.

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

Ở đây chúng ta có thể thấy rằng Mẫu XML không có thẻ head và body. Tapestry sẽ thu thập các chi tiết này từ thành phần bố cục và <t: body> của thành phần bố cục sẽ được thay thế bằng Mẫu HelloWorld. Sau khi mọi thứ hoàn tất, Tapestry sẽ phát ra đánh dấu tương tự như được chỉ định bên dưới:

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

Các bố cục có thể được lồng vào nhau. Ví dụ: chúng tôi có thể mở rộng bố cục tùy chỉnh của mình bằng cách bao gồm chức năng quản trị và sử dụng nó cho phần quản trị như được chỉ định bên dưới.

<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> là một phần tử cấp cao nhất và bao gồm một không gian tên tấm thảm. Điều này được sử dụng để chỉ định phần động của một thành phần.

Ví dụ: một thành phần lưới có thể cần một mẫu để xác định cách hiển thị các hàng của nó - tr (và cột td) trong bảng 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> là phần giữ chỗ cho phần động trong mẫu. Nói chung, phần tử khối không hiển thị. Chỉ, các thành phần được xác định trong mẫu sử dụng phần tử khối. Các thành phần sẽ đưa dữ liệu động vào phần tử khối và hiển thị nó. Một trong những trường hợp sử dụng phổ biến làAJAX.

Phần tử khối cung cấp vị trí và đánh dấu chính xác cho dữ liệu động sẽ được hiển thị. Mọi phần tử khối phải có một Thuộc tính Java tương ứng. Chỉ khi đó nó mới có thể được hiển thị động. Id của phần tử khối phải tuân theo các quy tắc định danh biến Java. Mẫu một phần được cung cấp bên dưới.

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

Phần tử <t: content> được sử dụng để chỉ định nội dung thực tế của mẫu. Nói chung, tất cả các đánh dấu được coi là một phần của mẫu. Nếu <t: content> được chỉ định, chỉ đánh dấu bên trong nó sẽ được xem xét. Tính năng này được các nhà thiết kế sử dụng để thiết kế một trang không có thành phần bố cục.

<t: remove>

<T: remove> chỉ đối lập với phần tử nội dung. Đánh dấu bên trong phần tử loại bỏ không được coi là một phần của mẫu. Nó chỉ có thể được sử dụng cho các bình luận của máy chủ và cho các mục đích thiết kế.

Tài sản

Nội dung là các tệp tài nguyên tĩnh như biểu định kiểu, hình ảnh và tệp JavaScript. Nói chung, nội dung được đặt trong thư mục gốc của ứng dụng web/src/main/webapp.

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

Tấm thảm cũng xử lý các tệp được lưu trữ trong Java Classpathdưới dạng Tài sản. Tapestry cung cấp các tùy chọn nâng cao để đưa Nội dung vào mẫu thông qua tùy chọn mở rộng.

Context - Tùy chọn để có được nội dung có sẵn trong ngữ cảnh web.

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

asset- Các thành phần thường lưu trữ các tài sản riêng của nó bên trong tệp jar cùng với các lớp Java. Bắt đầu từ Tapestry 5.4, đường dẫn tiêu chuẩn để lưu trữ nội dung trong classpath làMETA-INF/assets. Đối với thư viện, đường dẫn tiêu chuẩn để lưu trữ nội dung làMETA-INF/assets/«library_name»/. asset: cũng có thể gọi context: mở rộng để lấy nội dung từ ngữ cảnh web.

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

Nội dung có thể được đưa vào Trang Tapestry hoặc Thành phần bằng cách sử dụng chú thích Inject và Path. Tham số cho chú thích đường dẫn là đường dẫn tương đối của nội dung.

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

Các Path parameter cũng có thể chứa các biểu tượng Tấm thảm được xác định trong AppModule.java phần.

Ví dụ: chúng ta có thể xác định một biểu tượng, skin.root với ngữ cảnh giá trị: skin / basic và sử dụng nó như hình dưới đây -

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

Bản địa hóa

Bao gồm các nguồn thông qua tấm thảm cung cấp thêm chức năng. Một trong những chức năng như vậy là “Bản địa hóa”. Tấm thảm sẽ kiểm tra ngôn ngữ hiện tại và bao gồm các tài nguyên thích hợp.

Ví dụ: nếu ngôn ngữ hiện tại được đặt là de, sau đó edit_de.png sẽ được bao gồm thay vì edit.png.

CSS

Tấm thảm có hỗ trợ bảng kiểu tích hợp. Tấm thảm sẽ tiêmtapestry.cssnhư một phần của ngăn xếp Javascript cốt lõi. Từ Tapestry 5.4, tấm thảm bao gồmbootstrap css frameworkcũng. Chúng tôi có thể bao gồm bảng kiểu của riêng mình bằng cách sử dụng thẻ liên kết bình thường. Trong trường hợp này, các biểu định kiểu phải nằm trong thư mục gốc của web -/src/main/webapp/.

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

Tapestry cung cấp các tùy chọn nâng cao để đưa các biểu định kiểu vào mẫu thông qua tùy chọn mở rộng như đã thảo luận trước đó.

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

Tapestry cũng cung cấp chú thích Nhập để bao gồm biểu định kiểu trực tiếp vào các lớp Java.

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

Tapestry cung cấp rất nhiều tùy chọn để quản lý style sheet thông qua AppModule.java. Một số tùy chọn quan trọng là -

Biểu định kiểu mặc định của tấm thảm có thể bị xóa.

@Contribute(MarkupRenderer.class) 

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

Bootstrap cũng có thể bị vô hiệu hóa bằng cách ghi đè đường dẫn của nó.

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

Cho phép thu nhỏ nội dung động (CSS và JavaScript). Chúng tôi cần bao gồmtapestry-webresources phụ thuộc (trong pom.xml).

@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 phía máy khách

Thế hệ ứng dụng web hiện tại phụ thuộc nhiều vào JavaScript để cung cấp trải nghiệm phía máy khách phong phú. Tapestry thừa nhận điều đó và cung cấp hỗ trợ hạng nhất cho JavaScript. Hỗ trợ JavaScript đã ăn sâu vào tấm thảm và có sẵn ở mọi giai đoạn của chương trình.

Trước đó, Tapestry chỉ hỗ trợ Prototype và Scriptaculous. Tuy nhiên, từ phiên bản 5.4, tapestry đã viết lại hoàn toàn lớp JavaScript để làm cho nó càng chung chung càng tốt và cung cấp hỗ trợ lớp đầu tiên cho JQuery, thư viện de-facto cho JavaScript. Ngoài ra, tấm thảm khuyến khích lập trình JavaScript dựa trên mô-đun và hỗ trợ RequiJS, một triển khai phía máy khách phổ biến của AMD (Định nghĩa mô-đun không đồng bộ - đặc tả JavaScript để hỗ trợ mô-đun và sự phụ thuộc của nó theo cách không đồng bộ).

Vị trí

Các tệp JavaScript là tài sản của Ứng dụng Tapestry. Theo quy tắc nội dung, tệp JavaScript được đặt trong ngữ cảnh web,/sr/main/webapp/ hoặc đặt bên trong bình dưới META-INF/assets/ location.

Liên kết các tệp JavaScript

Cách đơn giản nhất để liên kết các tệp JavaScript trong Mẫu XML là sử dụng trực tiếp thẻ script, là: <script language = "javascript" src = "relative/path/to/js"></script>. Tuy nhiên, thảm trang trí không khuyến khích các cách tiếp cận này. Tapestry cung cấp một số tùy chọn để liên kết các tệp JavaScript ngay trong chính Trang / Thành phần. Một số trong số này được đưa ra dưới đây.

@import annotation- Chú thích @import cung cấp tùy chọn liên kết nhiều thư viện JavaScript bằng cách sử dụng biểu thức ngữ cảnh. Nó có thể được áp dụng cho cả lớp Page và phương thức của nó. Nếu được áp dụng cho một lớp Trang, nó áp dụng cho tất cả các phương thức của nó. Nếu được áp dụng cho Phương thức của Trang, nó chỉ áp dụng cho phương pháp đó và sau đó Tapestry chỉ liên kết thư viện JavaScript khi phương thức được gọi.

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

public class MyComponent { 
   // ... 
}

JavaScriptSupport interface - JavaScriptSupport là một giao diện được xác định bởi tấm thảm và nó có một phương thức, importJavaScriptLibraryđể nhập các tệp JavaScript. Đối tượng JavScriptSupport có thể được tạo dễ dàng bằng cách khai báo và chú thích đơn giản với chú thích @Enosystemal.

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

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

JavaScripSupport chỉ có thể được đưa vào một thành phần bằng cách sử dụng @Environmentalchú thích. Đối với các dịch vụ, chúng tôi cần sử dụng@Inject chú thích hoặc thêm nó làm đối số trong phương thức của phương thức khởi tạo dịch vụ.

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

addScript method - Giao diện này tương tự như giao diện JavaScriptSupport ngoại trừ việc nó sử dụng addScript và mã được thêm trực tiếp vào đầu ra ở cuối trang.

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

Ngăn xếp JavaScript

Tapestry cho phép một nhóm tệp JavaScript và các biểu định kiểu liên quan được kết hợp và sử dụng như một thực thể duy nhất. Hiện tại, Tapestry bao gồm các ngăn xếp dựa trên Nguyên mẫu và dựa trên JQuery.

Một nhà phát triển có thể phát triển các ngăn xếp của riêng họ bằng cách triển khai JavaScriptStack giao diện và đăng ký nó trong AppModule.java. Sau khi đăng ký, ngăn xếp có thể được nhập bằng cách sử dụng@import chú thích.

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

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