項目中如果需要修改產品的某個頁面,使用Zhtml是副作用最小、最便于維護的方式,但有些同事以為只能在織入類中拼JS和HTML,認為特別繁瑣,從而又走上了直接替換整個頁面的不歸老路...


現在介紹一種簡便的織入方法:


1、 在項目中需要在文章編輯器頁面上加兩個選項,我們先使用Eclipse的New菜單或New按鈕,在打開的對話框中選擇“Zhtml織入器”,如圖:

第一步

2、 點“Next”打開Zhtml織入器對話框,填寫內容如下:


第二步

3、 點擊“Finish”,開發工具會自動生成相應的JAVA類,并在相應的插件的配置文件中加上相應的擴展項,JAVA類如下圖所示:


package com.zving.workspace.ui;

import com.zving.framework.ui.weaver.IZhtmlWeaver;
import com.zving.framework.ui.weaver.ZhtmlWeaveHelper;

public class ArticleEditorWeaver implements IZhtmlWeaver {

	@Override
	public String getExtendItemID() {
		return "com.zving.workspace.ui.ArticleEditorWeaver";
	}

	@Override
	public String getExtendItemName() {
		return "文章編輯頁面織入器";
	}

	@Override
	public String getTarget() {
		return "article/articleEditor.zhtml";
	}

	@Override
	public void weave(ZhtmlWeaveHelper w) {
		// todo:在此通過ZhtmlWeaveHelper織入頁面代碼
	}

}


4、 修改weave方法,如下所示:

	@Override
	public void weave(ZhtmlWeaveHelper w) {
		w.includeFile(ZhtmlWeavePosition.BeforeBodyEnd, "../workspace/common.zhtml");
	}


5、 在workspace目錄下創建common.zhtml,內容如下:

<%@include file="../include/init.zhtml"%> 
<div class="extend" style="display:none">
	<div style="padding-left:80px;">
		<div class="z-legend">
		 <b>項目特別選項</b>
		</div>
		<table width="500" border="1" cellpadding="4" cellspacing="0" style="margin:5px 0px 10px 0px;" bordercolor="#eeeeee" class="formTable">
		 <tr>
		  <td width="160">是否是公共內容:</td>
		  <td><z:radio onclick="onCommonFlagClick();" id="CommonFlag" value="${CommonFlag}" code="YesOrNo"/></td>
		 </tr>
		 <tr>
		  <td width="160">自動復制到公共欄目:</td>
		  <td><z:radio id="CommonCatalogCopy" value="${CommonCatalogCopy}" code="YesOrNo"/></td>
		 </tr>
		</table>
	</div>
</div>
<script>
function onCommonFlagClick(){
	alert($NV("#CommonFlag"));//僅演示用
}
	
Page.onLoad(function(){
	$("#DivContent").before($(".extend").html());
});
</script>


6、 重新啟動tomcat,隨便打開一篇文章,結果如下圖所示:

第三步


總結:

這種做法比較簡便,關鍵要點有:

1、 應該在weave()中使用include以避免在JAVA中拼JS和HTML字符串

2、 ZhtmlWeaveHelper的include方法應注意被包含的文件位置是相對于織入目標頁面的相對地址

3、 在被包含頁面中創建一個要織入到指定位置的div,將其設為display:none以默認隱藏。

4、 在一個Page.onLoad方法中將div的html放置到指定位置。