#parse("header.vm")
#parse($viewName)
#parse("footer.vm")
您可以看到电话本布局是一样的。Velocity 引擎在运行时读取此模板,并且解析标记将呈现作为参数 传递进来的组件。viewName 是由 phonebookVelocityController 在运行时动态传递的。
清单 9 显示了主页的模板代码。
清单 9. 基于 Velocity 的主页的模板代码
#set ($time1 = ${time})
#set ($phonebook = ${phEntries})
<html>
<script type="text/javascript">
function goToAddEntryPage() {
document.myForm.action="/phonebook/addentry.vel";
document.myForm.method="GET";
document.myForm.submit();
}
function setId(entryID, rowID) {
document.myForm.entryID.value = entryID;
document.myForm.rowID.value = rowID;
}
function noRowSelected() {
var entryID = document.myForm.entryID.value;
var rowID = document.myForm.rowID.value;
if (entryID == "" || rowID == "") {
return "true";
} else {
return "false";
}
}
function goToModifyEntryPage() {
if (noRowSelected() == "true") {
alert("Please select an Entry to Modify");
return;
}
document.myForm.action="/phonebook/modifyentry-mvc.act";
document.myForm.method="GET";
document.myForm.submit();
}
function deleteEntry() {
if (noRowSelected() == "true") {
alert("Please select an Entry to Delete");
return;
} else {
var retVal = confirm("Please click OK to confirm your deletion. Click
Cancel otherwise");
if (retVal != true) {
return;
}
}
document.myForm.action="/phonebook/deleteentry-mvc.act";
document.myForm.method="POST";
document.myForm.submit();
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Phone Book - $time1 </title>
</head>
<body>
<!--The Heading of the Phone Book Page-->
<h1 align=center>Phone Book</h1>
<BR>
<BR>
<!-- The table containing phone book contents. -->
<TABLE border="1" width="100%">
<TH width="5%" align=center>Select</TH>
<TH width="25%" align=center>Name</TH>
<TH width="15%" align=center>Home Phone</TH>
<TH width="15%" align=center>Work Phone</TH>
<TH width="15%" align=center>Cell Phone</TH>
<TH width="25%" align=center>Email</TH>
#foreach( $pbEntry in $phonebo
|