返回首页
当前位置: 主页 > 互联网技术 > 网络安全 >

Apache Tapestry-模板

时间:2020-04-14 16:22来源:电脑教程学习网 www.etwiki.cn 编辑:小山哥

让我们考虑本节中的Tapestry XML模板。XML模板是格式良好的XML文档。页面的表示层(用户界面)是XML模板。XML模板除了下面给出的项目外,还具有普通的HTML标记-

  • 挂毯命名空间
  • 扩展
  • 元素
  • 组件

现在让我们详细讨论它们。

挂毯命名空间

Tapestry命名空间不过是XML命名空间。命名空间应在模板的根元素中定义。它用于在模板中包括Tapestry组件和与组件相关的信息。最常用的名称空间如下-

  • xmlns:t =“ https://tapestry.apache.org/schema/tapestry_5_4.xsd” —用于标识Tapestry的元素,组件和属性。

  • xmlns:p =“ tapestry:参数” —用于将任意代码块传递给组件。

Tapestry命名空间的示例如下-

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

扩展

扩展是一种简单有效的方法,可以在页面的呈现阶段动态更改XML模板。扩展使用$ {<name>}语法。有很多选项可以表示XML模板中的扩展。让我们看看一些最常用的选项-

物业扩展

它映射在相应的Page类中定义的属性。它遵循Java Bean规范中Java类中的属性定义。通过忽略属性名称的大小写,这又向前迈进了一步。让我们使用属性扩展来更改“ Hello World”示例。以下代码块是修改后的Page类。

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

然后,如下所示更改相应的XML模板。

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

在这里,我们在Page类中将名称定义Java Bean属性,并使用扩展$ {name}在XML模板中对其进行动态处理

讯息扩充

每个Page类都可以具有或可以不具有关联的属性文件– 资源文件夹中的«page_name».properties属性文件是纯文本文件,每行具有一个键/值对(消息)。让我们在以下位置为HelloWorld Page创建一个属性文件:

“ /src/main/resources/com/example/MyFirstApplication/pages/helloworld.properties”,并添加“问候”消息。

Greeting = Hello

问候消息可以在XML模板被用作$ {消息:问候}

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

元素

Tapestry有少量要在XML模板中使用的元素。元素是在Tapestry命名空间下定义的预定义标签-

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

每个元素都是为特定目的而创建的。可用的挂毯元素如下-

<t:body>

当两个组件嵌套时,父组件的模板可能必须包装子组件的模板。<t:body>元素在这种情况下很有用。<t:body>的用途之一是在“模板布局”中。

通常,Web应用程序的用户界面将具有公共页眉,页脚,菜单等。这些公共项在XML模板中定义,称为模板布局或布局组件。在Tapestry中,它需要由应用程序开发人员创建。布局组件只是另一个组件,位于组件文件夹下,该文件夹具有以下路径– src / main /«java | resources»/«package_name»/ components

让我们创建一个名为MyCustomLayout的简单布局组件MyCustomLayout的代码如下-

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

在MyCustomLayout组件类中,我们声明了标题字段,并通过使用批注将其强制性化。现在,更改HelloWorld.html模板以使用我们的自定义布局,如下面的代码块所示。

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

我们在这里可以看到XML模板没有head和body标签。Tapestry将从布局组件中收集这些详细信息,并且布局组件的<t:body>将被HelloWorld模板替换。完成所有操作后,Tapestry将发出类似于下面指定的标记-

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

布局可以嵌套。例如,我们可以通过包括管理功能来扩展自定义布局,并将其用于下面指定的admin部分。

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

<t:容器>

<t:container>是一个顶级元素,包括一个挂毯命名空间。这用于指定组件的动态部分。

例如,网格组件可能需要模板来标识如何在HTML表中呈现其行-tr(和列td)。

<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>是模板中动态部分的占位符。通常,块元素不会渲染。仅模板中定义的组件使用块元素。组件会将数据动态注入到block元素中并进行渲染。流行的用例之一是AJAX

块元素为要呈现的动态数据提供确切的位置和标记。每个块元素应具有一个对应的Java属性。只有这样,它才能被动态渲染。block元素的id应该遵循Java变量标识符规则。下面提供了部分样本。

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

<t:content>元素用于指定模板的实际内容。通常,所有标记都被视为模板的一部分。如果指定了<t:content>,则仅考虑其中的标记。设计人员使用此功能来设计没有布局组件的页面。

<t:删除>

<t:remove>与content元素正好相反。remove元素内的标记不视为模板的一部分。它可用于仅服务器注释和用于设计目的。

资产

资产是静态资源文件,例如样式表,图像和JavaScript文件。通常,资产放置在Web应用程序的根目录/ src / main / webapp中

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

Tapestry还将存储在Java类路径中的文件视为资产。Tapestry提供了高级选项,可通过扩展选项将资产包括在模板中。

  • 上下文 -选择在网络上下文中获取资产的选项。

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

资产 -组件通常将自己的资产与Java类一起存储在jar文件中。从Tapestry 5.4开始,将资产存储在类路径中的标准路径是META-INF / assets对于图书馆,存储资产的标准路径是META-INF / assets /«library_name»/。资产:也可以调用上下文:扩展以从Web上下文中获取资产。

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

可以使用“注入”和“路径”注释将资产注入到Tapestry页面或组件中。路径注释的参数是资产的相对路径。

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

Path参数还可以包含在所定义的符号挂毯AppModule.java部。

例如,我们可以使用值context:skins / basic定义符号skin.root,并如下所示使用它-

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

本土化

通过挂毯包含资源可提供额外的功能。一种这样的功能是“本地化”。Tapestry将检查当前语言环境并包括适当的资源。

例如,如果当前区域被设定为DE,然后edit_de.png将被包括,而不是edit.png。

的CSS

Tapestry具有内置的样式表支持。Tapestry将注入tapestry.css作为核心Javascript堆栈的一部分。从Tapestry 5.4开始,tapestry还包括bootstrap css框架我们可以使用常规链接标签包含自己的样式表。在这种情况下,样式表应位于Web根目录– / src / main / webapp /中

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

Tapestry提供了高级选项,以通过扩展选项将样式表包括在模板中,如前所述。

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

Tapestry还提供了Import批注,以将样式表直接包括到Java类中。

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

Tapestry提供了许多通过AppModule.java管理样式表的选项。一些重要的选择是-

  • 挂毯默认样式表可能会被删除。

@Contribute(MarkupRenderer.class) 

public static void 
deactiveDefaultCSS(OrderedConfiguration<MarkupRendererFilter> configuration) { 
   configuration.override("InjectDefaultStyleheet", null); 
} 
  • 引导程序也可以通过覆盖其路径来禁用。

configuration.add(SymbolConstants.BOOTSTRAP_ROOT, "classpath:/METAINF/assets");
  • 启用资产(CSS和JavaScript)的动态最小化。我们还需要包括tapestry-webresources依赖项(在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

当前一代的Web应用程序严重依赖JavaScript来提供丰富的客户端体验。Tapestry承认这一点,并为JavaScript提供了一流的支持。JavaScript支持已深入到挂毯中,并在编程的每个阶段都可用。

之前,Tapestry过去仅支持原型和脚本。但是,从5.4版开始,Tapestry完全重写了JavaScript层,使其尽可能通用,并为JQuery(事实上的JavaScript库)提供了一流的支持。另外,Tapestry鼓励基于模块的JavaScript编程,并支持RequireJS,这是AMD的一种流行的客户端实现(异步模块定义-JavaScript规范,以异步方式支持模块及其依赖性)。

位置

JavaScript文件是Tapestry应用程序的资产。根据资产规则,将JavaScript文件放在Web上下文/ sr / main / webapp /下,或放在META-INF / assets / location下的jar中

链接JavaScript文件

在XML模板中链接JavaScript文件的最简单方法是直接使用script标记- <script language =“ javascript” src =“ relative / path / to / js”> </ script>但是,挂毯不建议使用这些方法。Tapestry提供了几个选项,可以在页面/组件本身中链接JavaScript文件。其中一些在下面给出。

  • @import批注 -@import批注提供使用上下文表达式链接多个JavaScript库的选项。它可以应用于Page类及其方法。如果应用于Page类,则它将应用于其所有方法。如果应用于页面的方法,则仅应用于该方法,然后Tapestry仅在调用该方法时链接JavaScript库。

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

public class MyComponent { 
   // ... 
}
  • JavaScriptSupport接口-JavaScriptSupport是由挂毯定义的接口,它具有方法importJavaScriptLibrary来导入JavaScript文件。通过简单地使用@Environmental注释进行声明和注释,可以轻松创建JavScriptSupport对象。

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

@Environmental 
private JavaScriptSupport javaScriptSupport;  
void setupRender() { 
   javaScriptSupport.importJavaScriptLibrary(myEffects); 
}
  • JavaScripSupport只能使用@Environmental注释注入到组件中对于服务,我们需要使用@Inject批注或将其添加为服务构造函数方法中的参数。

@Inject 
private JavaScriptSupport javaScriptSupport; 
public MyServiceImpl(JavaScriptSupport support) { 
   // ... 
}
  • addScript方法 -除了使用addScript方法并将代码直接添加到页面底部的输出外,这类似于JavaScriptSupport接口

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

JavaScript堆栈

Tapestry允许将一组JavaScript文件和相关样式表组合在一起并用作一个单一实体。当前,Tapestry包括基于原型和基于JQuery的堆栈。

开发人员可以通过实现JavaScriptStack接口来开发自己的堆栈,并将其注册到AppModule.java中注册后,可以使用@import批注导入堆栈

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

@Import(stack = "MyStack") 
public class myPage { 
}
 上一页  打印页面

------分隔线----------------------------
标签(Tag):
------分隔线----------------------------
推荐内容
  • Apache Tapestry-模板

    让我们考虑本节中的Tapestry XML模板。 XML模板是格式良好的XML文档。 页面的表示层(...

  • Apache Tapestry-页面和组件

    apestry应用程序只是Tapestry页面的集合。 它们一起形成一个定义明确的Web应用程序。 ...

  • 约定优于配置

    Apache Tapestry 在编程的每个方面都 遵循 约定优于配置 。 框架的每个功能确实都有合...

  • Apache Tapestry-项目布局

    这是由 Maven Quickstart CLI 创建的源代码的布局 。 同样,这是标准Tapestry应用程序...

  • Apache Tapestry-快速入门

    在Tapestry安装之后,让我们使用Maven创建一个新的初始项目,如下所示- $ mvn archety...

  • Apache Tapestry-安装

    在本章中,我们将讨论如何在计算机上安装Tapestry。 先决条件 Tapestry的唯一依赖项是...

猜你感兴趣