Tapestry5自定义组件
一、普通组件
1.java文件
2.NavBar.tml
3.页面使用
二、布局模板组件
1.java文件
2.tml文件
3.layout.css
4.使用模板
1.java文件
package com.logcd.tapestry5.myapp.components;
import java.util.ArrayList;
import java.util.List;
import org.apache.tapestry5.ComponentResources;
import org.apache.tapestry5.annotations.Parameter;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.ioc.annotations.Inject;
public class NavBar {
@Parameter(defaultPrefix = "literal", required = true)
private String pages;
@Inject
private ComponentResources resources;
@Property
private Page _pageAttr;
public List<Page> getPageNames() {
List<Page> pageList = new ArrayList<Page>();
String[] pageArr = pages.split(",");
for(int i=0;i<pageArr.length;i++){
Page page=new Page();
page.setName(pageArr[i].split("=")[0]);
page.setUrl(pageArr[i].split("=")[1]);
pageList.add(page);
page=null;
}
return pageList;
}
public String getTabClass() {
if (_pageAttr.name.equalsIgnoreCase(resources.getPageName()))
return "current";
return null;
}
public class Page{
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
private String url;
}
}
2.NavBar.tml
<table class="navigation" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">
<tr>
<t:loop source="pageNames" value="pageAttr">
<td class="${tabClass}">
[<t:pagelink page="${pageAttr.url}">${pageAttr.name}</t:pagelink>]
</td>
</t:loop>
</tr>
</table>
3.页面使用
<span t:type='NavBar' pages="首页=Index,用户管理=user/CreateUser"/>
二、布局模板组件
1.java文件
package com.logcd.tapestry5.myapp.components;
import org.apache.tapestry5.annotations.IncludeStylesheet;
//用 "context:"前缀，如果存储在应用程序(webapp)的目录
//用"classpath:"前缀，如果存储在应用程序的classpath路径下
@IncludeStylesheet("context:styles/layout.css")
public class Layout {
}
2.tml文件
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">
<head>
<title>Tapestry 5 Demo Application</title>
<style type="text/css">
@import url(${asset:context:styles/myapp.css});
</style>
</head>
<body>
<div id="header">
<h1>Tapestry 5 Demo</h1>
<div id="navigator" style="float:right;margin-right:10px;">[<t:pagelink t:page="Index">首页</t:pagelink>]</div>
</div>
<div id="container">
<t:body/>
</div>
<div id="footer">
Design by <a href="#">XXX Design</a>
</div>
</body>
</html>
3.layout.css
div{
text-align:left;
}
#header{
width : 100%;
margin: 2px auto;
text-align:center;
background-color: #FFFFEC;
border:1px solid #f60;
height:10%;
}
#container{
margin:0 auto;
overflow:hidden;
background:#eee;
border:1px solid #f60;
width: 100%;
height:85%;
}
#footer{
clear:both;
width:100%;
margin:2px auto;
text-align:center;
background-color: buttonface;
border:1px solid #f60;
height:5%;
}
4.使用模板
<t:layout xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">
<p> 现在是: ${currentTime}. </p>
[<t:pagelink t:page="Index">refresh</t:pagelink>]
</p>
</t:layout>