Velocity練習：使用vm模板生成最簡單的html頁面
這幾天要用到Velocity模板引擎去作一些頁面，因此學習了下這個工具。個人jdk版本爲 1.8.0_25css
須要作的準備工做有：html
一、創建一個Java工程，須要引用Velocity相關的jar包，這些jar包可從apache.org下載到最新版本。 下載地址在：http://velocity.apache.org/download.cgi 。我下載的文件是velocity-tools-2.0.zip，將這些文件導入到項目中，就能夠使用Velocity進行編碼了。java
二、安裝Eclipse上的Velocity插件Veloedit。由於googlecode被gfw牆掉了，沒有條件的朋友們能夠安裝網上下載到的離線安裝版。這裏還有一個須要注意，個人Eclipse版本爲 Luna Service Release 1 (4.4.1)，這個版本必需要先利用Eclipse自帶的update功能，下載「Elipse Tests, Examples, and Extras」。apache
我要用Velocity繪製一個通信錄的聯繫人資料頁面，使用Balsamiq工具繪製的頁面原型以下：app
創建一個JavaProject，取名VelocityTool，裏面新建兩個java文件。ide
其中，VelocityHelper.java包含一個Velocity模板轉換工具類，代碼以下：函數
import java.io.File;
import java.io.FileWriter;
import org.apache.velocity.Template;
import org.apache.velocity.VelocityContext;
import org.apache.velocity.app.Velocity;
import org.apache.velocity.app.VelocityEngine;
/**
*
* @文件名稱 VelocityHelper.java
* @文件做者 Tsybius2014
* @建立時間 2016年5月10日 下午2:14:01
*/
public class VelocityHelper {
/**
* 根據給定的vm模板和上下文生成html頁面
* @param inputVmFilePath vm模板
* @param outputHtmlFilePath 輸出html頁面
* @param context 上下文
* @throws Exception
*/
public static void generateHtml(String inputVmFilePath, String outputHtmlFilePath,
VelocityContext context) throws Exception {
try {
Velocity.init();
VelocityEngine engine = new VelocityEngine();
Template template = engine.getTemplate(inputVmFilePath, "gbk");
File outputFile = new File(outputHtmlFilePath);
FileWriter writer = new FileWriter(outputFile);
template.merge(context, writer);
writer.close();
} catch (Exception ex) {
throw ex;
}
}
}
VelocityTool.java中有main函數，代碼以下：工具
import java.util.HashMap;
import java.util.Vector;
import org.apache.velocity.VelocityContext;
/**
*
* @文件名稱 VelocityTool.java
* @文件做者 Tsybius2014
* @建立時間 2016年5月10日 上午10:03:59
*/
public class VelocityTool {
public static void main(String[] args) {
try {
VelocityContext context= new VelocityContext();
context.put("name", "Kim Jung-un");
context.put("gender", "Male");
context.put("email", "XXX@XXX.gov");
context.put("job", "Chairman of the WPK");
context.put("company", "Workers' Party Of Korea (WPK)");
context.put("address", "XXXXXXXXX, Pyongyang, North Korea");
context.put("portraitPath", "file:///C:/Users/Tsybius/Desktop/kju.jpg");
HashMap<String, String> hashMapContact = new HashMap<String, String>();
hashMapContact.put("Tel", "XXX-XXXXXXXX");
hashMapContact.put("Fax", "XXX-XXXXXXXX");
hashMapContact.put("Mobile", "XXX-XXXX-XXXX");
context.put("contactItems", hashMapContact);
Vector<String> vectorRemark = new Vector<String>();
vectorRemark.add("Kim Jong-un is the Chairman of the Workers' Party of Korea and supreme leader of the Democratic People's Republic of Korea (DPRK), commonly referred to as North Korea.");
vectorRemark.add("Kim is the son of Kim Jong-il (1941–2011) and the grandson of Kim Il-sung (1912–1994).");
vectorRemark.add("Kim obtained two degrees, one in Physics at Kim Il-sung University, and another as an Army officer at the Kim Il-sung Military University.");
vectorRemark.add("Kim was named the World's 46th Most Powerful Person by the Forbes list of The World's Most Powerful People in 2013");
context.put("remarks", vectorRemark);
VelocityHelper.generateHtml(
"velocity_test.vm",
"C:\\Users\\Tsybius\\Desktop\\output.html",
context);
System.out.println("生成完畢");
} catch (Exception ex) {
ex.printStackTrace();
}
}
}
模板velocity_test.vm是一個存儲着人物通信錄的模板，代碼以下：學習
#set($docDesc="VelocityTest")
#set($docAuthor="Tsybius2014")
#set($docDateTime="2016-05-10 14:29:04")
#set($docRemark="none")
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
</style>
<head>
<title>$!{name}</title>
</head>
<body>
<table width="100%">
<tr>
<!-- Title -->
<td align="center"><b>Address Book - $!{name}</b></td>
</tr>
<tr>
<!-- BaseInfo -->
<td>
<table width="100%" height="100%">
<tr>
<td width="10%">Name:</td>
<td width="30%">$!{name}</td>
<td width="10%">Gender:</td>
<td width="30%">$!{gender}</td>
<td width="20%" rowspan="4">
<img src="$!{portraitPath}" height="120" width="100"/>
</td>
</tr>
<tr>
<td width="10%">E-mail:</td>
<td width="30%">$!{email}</td>
<td width="10%">Job:</td>
<td width="30%">$!{job}</td>
</tr>
<tr>
<td width="10%">Company:</td>
<td width="70%" colspan="3">$!{company}</td>
</tr>
<tr>
<td width="10%">Address:</td>
<td width="70%" colspan="3">$!{address}</td>
</tr>
</table>
</td>
</tr>
<tr>
<!-- Contact -->
<td>
<table width="100%" height="100%" >
<tr>
<td width="10%" align="left" valign="top">
Contact:
</td>
<td>
<table width="100%" height="100%" >
<tr>
<th></th>
<th align="left">Contact Type</th>
<th align="left">Contact Code</th>
<th></th>
</tr>
#foreach($contactItem in $contactItems.entrySet())
<tr>
<td align="left" width="5%">$velocityCount</td>
<td align="left" width="20%">$contactItem.key</td>
<td align="left" width="30%">$contactItem.value</td>
<td></td>
</tr>
#end
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<!-- Remarks-->
<td>
<table width="100%" height="100%" >
<tr>
<td width="10%" align="left" valign="top">
Remark:
</td>
<td>
<table width="100%" height="100%" >
#foreach($remark in $remarks)
<tr>
<td>[$velocityCount] $remark</td>
</tr>
#end
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
以JavaApplication的方式運行本工程後，生成的HTML頁面output.html以下：ui
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
</style>
<head>
<title>Kim Jung-un</title>
</head>
<body>
<table width="100%">
<tr>
<!-- Title -->
<td align="center"><b>Address Book - Kim Jung-un</b></td>
</tr>
<tr>
<!-- BaseInfo -->
<td>
<table width="100%" height="100%">
<tr>
<td width="10%">Name:</td>
<td width="30%">Kim Jung-un</td>
<td width="10%">Gender:</td>
<td width="30%">Male</td>
<td width="20%" rowspan="4">
<img src="file:///C:/Users/Tsybius/Desktop/kju.jpg" height="120" width="100"/>
</td>
</tr>
<tr>
<td width="10%">E-mail:</td>
<td width="30%">kim001@northkorea.gov</td>
<td width="10%">Job:</td>
<td width="30%">Chairman of the WPK</td>
</tr>
<tr>
<td width="10%">Company:</td>
<td width="70%" colspan="3">Workers' Party Of Korea (WPK)</td>
</tr>
<tr>
<td width="10%">Address:</td>
<td width="70%" colspan="3">The Dark Side Laboratory, Pyongyang, North Korea</td>
</tr>
</table>
</td>
</tr>
<tr>
<!-- Contact -->
<td>
<table width="100%" height="100%" >
<tr>
<td width="10%" align="left" valign="top">
Contact:
</td>
<td>
<table width="100%" height="100%" >
<tr>
<th></th>
<th align="left">Contact Type</th>
<th align="left">Contact Code</th>
<th></th>
</tr>
<tr>
<td align="left" width="5%">1</td>
<td align="left" width="20%">Tel</td>
<td align="left" width="30%">XXX-XXXXXXXX</td>
<td></td>
</tr>
<tr>
<td align="left" width="5%">2</td>
<td align="left" width="20%">Fax</td>
<td align="left" width="30%">XXX-XXXXXXXX</td>
<td></td>
</tr>
<tr>
<td align="left" width="5%">3</td>
<td align="left" width="20%">Mobile</td>
<td align="left" width="30%">XXX-XXXX-XXXX</td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<!-- Remarks-->
<td>
<table width="100%" height="100%" >
<tr>
<td width="10%" align="left" valign="top">
Remark:
</td>
<td>
<table width="100%" height="100%" >
<tr>
<td>[1] Kim Jong-un is the Chairman of the Workers' Party of Korea and supreme leader of the Democratic People's Republic of Korea (DPRK), commonly referred to as North Korea.</td>
</tr>
<tr>
<td>[2] Kim is the son of Kim Jong-il (1941–2011) and the grandson of Kim Il-sung (1912–1994).</td>
</tr>
<tr>
<td>[3] Kim obtained two degrees, one in Physics at Kim Il-sung University, and another as an Army officer at the Kim Il-sung Military University.</td>
</tr>
<tr>
<td>[4] Kim was named the World's 46th Most Powerful Person by the Forbes list of The World's Most Powerful People in 2013</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
使用 Firefox 46.0.1 打開此頁面後效果圖以下：
（部份內容摘自對應人物的維基百科頁面）
END
相關文章
- 1. 使用Velocity模板引擎生成HTML
- 2. Velocity模板引擎生成頁面
- 3. Velocity模板引擎的簡單使用
- 4. Velocity模板概念及簡單使用
- 5. 使用ASP.NET模板生成HTML靜態頁面
- 6. Java使用FreeMarker模板引擎動態生成html頁面
- 7. Velocity生成靜態頁面
- 8. SpringMVC 學習-如何搭配使用 Velocity 頁面模板
- 9. 用html頁面模板使用django完成我的博客
- 10. velocity的簡單使用
- 更多相關文章...
- • SVG 在 HTML 頁面 - SVG 教程
- • ASP.NET Web Forms - HTML 頁面 - ASP.NET 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Git可視化極簡易教程 — Git GUI使用方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
