WebPart中使用Nvelocity模板引擎来进行呈现

      NVelocity是一套强大的模板引擎，在我之前的随笔中，有过使用它来呈现页面及生成静态页的例子。通过使用它，我们可以达到界面与数据的完成分离（当然需要一些设计手段来支持)。
     我在公司里的工作主要就是在office sharepoint2007的基础上进行一些类型信息系统的门户站点开发。而我所在的组开发出了一套通用的组件库，比如类似163新闻的列表新闻部件、FLASH新闻部件等webpart.目的就在于每建设一个网站时，可以使用这些通用的组件库来进行快速的开发，甚至于我们只需要拖拉+设计css样式就可以完成一个站点的开发。但是，在不断的开发新网站过程中，发现虽然通过更改css样式可以达到控制webpart的呈现样式。

      但是，还是有些需求是无法通过更改css来实现的。当然，这仅仅是对需求的不满足，而我引入模板引擎的另一个想法是：

在指定的目录下，针对每一个webpart都创建它的相应文件夹，在这个文件夹下可以放置多个模板及一个描述模板信息的xml文件。这样，在页面上使用webpart的时候，我们就可以遍历这个模板文件夹，并读取模板信息，以供选择。也就是说，我们可以通过这种方式来实现类似webpart换肤的功能（采用模板达到的功能肯定比换肤更强大了）。
     如果我们将模板文件夹建到_layouts目录下，甚至还可以达到多个站点共用一套webpart模板。
--------------------------
针对这个设想，我对webpart应用nvelocity进行了简单的测试：
Step1:创建webpart，并在其中输出相关数据<需要引用NVelocity.dll，并using 相关的命名空间>

[Guid("09a3886f-ccb9-44ed-8838-82969522c37b")] public class NVelocityTestPart : System.Web.UI.WebControls.WebParts.WebPart,ICallbackEventHandler { public NVelocityTestPart() { this.ExportMode = WebPartExportMode.All; this.ChromeType = PartChromeType.None; } //可以写个EditorPart，用于从指定的文件夹中循环列出模板文件，让使用者选择 //并且创建一个对应的xml文件，用于给模板添加描述信息等。 private string vmPath = "NvelocityDir"; [ WebBrowsable(true), WebDescription("模板文件夹路径"), WebDisplayName("模板文件夹路径"), Personalizable(true) ] public string VmPath { get { return vmPath; } set { vmPath = value; } } private string OutputAjaxFunction() { System.Text.StringBuilder sb = new System.Text.StringBuilder(); sb.Append("<mce:script type=/"text/javascript/" language=/"javascript/"><!--"); sb.Append("/r/n function callServer(cName)/r/n {"); sb.Append(this.Page.ClientScript.GetCallbackEventReference(this, "cName", "callbackHandler", "")+";"); sb.Append("/r/n }"); sb.Append("/r/n // --></mce:script>"); return sb.ToString(); } public string CallbackHandle() { System.Text.StringBuilder sb = new System.Text.StringBuilder(); sb.Append("<mce:script type=/"text/javascript/" language=/"javascript/"><!--"); sb.Append("function callbackHandler(rResult)"); sb.Append("{"); sb.Append("document.getElementById('callbackContainer').innerText=rResult;"); sb.Append("}"); sb.Append("// --></mce:script>"); return sb.ToString(); } protected override void OnInit(EventArgs e) { //base.OnInit(e); this.Page.ClientScript.RegisterStartupScript(this.GetType(), "AjaxFunc", OutputAjaxFunction()); } protected override void RenderContents(HtmlTextWriter writer) { base.RenderContents(writer); if (!System.IO.Directory.Exists(this.Page.Server.MapPath(vmPath))) { writer.Write("模板文件夹不存在！"); return; } try { Author a = new Author(); a.Name = "xu zhi ze"; a.Age = 24; Author a1 = new Author(); a1.Name = "McJeremy"; a1.Age = 25; System.Collections.Generic.List<Author> us = new System.Collections.Generic.List<Author>(); us.Add(a); us.Add(a1); VelocityEngine vEngine = new VelocityEngine(); ExtendedProperties props = new ExtendedProperties(); props.AddProperty(RuntimeConstants.RESOURCE_LOADER, "file"); //props.AddProperty(RuntimeConstants.FILE_RESOURCE_LOADER_PATH, System.IO.Path.GetDirectoryName(this.Page.Request.PhysicalPath)); props.AddProperty(RuntimeConstants.FILE_RESOURCE_LOADER_PATH,this.Page.Server.MapPath(this.vmPath)); props.AddProperty(RuntimeConstants.INPUT_ENCODING, "gb2312"); props.AddProperty(RuntimeConstants.OUTPUT_ENCODING, "gb2312"); vEngine.Init(props); Template tmp = vEngine.GetTemplate("default.vm"); IContext vContext = new VelocityContext(); vContext.Put("Version", "1.0.0.0"); vContext.Put("Author", a); vContext.Put("Users", us); vContext.Put("Instance", this); System.IO.StringWriter sw = new System.IO.StringWriter(); tmp.Merge(vContext, sw); writer.Write(sw.ToString()); } catch (System.Exception ex) { writer.Write(ex.Message); } } #region ICallbackEventHandler 成员 string rResult = string.Empty; string ICallbackEventHandler.GetCallbackResult() { return rResult; } void ICallbackEventHandler.RaiseCallbackEvent(string eventArgument) { if (string.IsNullOrEmpty(eventArgument)) rResult = "调用ajax时，传递的值为空！"; else rResult = "调用ajax时，传递的值为：" + eventArgument; } #endregion } Step2:创建模板文件 default.vm，并写呈现逻辑：

<pre> /******************************** /* A Test of NVelocity in WebPart /* www.cnblogs.com/mcjeremy /******************************** <h1>This is a test!</h1> Version: ${Version} Author : ${Author.Name} Age : ${Author.Age} <h3>NVelocity Test</h3>Version: $!Version Author : $Author.Name Age : $Author.Age #set($company="Mcjeremy'company")Copyright By <span style="color:red;" mce_style="color:red;"> ${company}</span> Users Are: #set($userNum=1) #foreach($user in $Users) <div style="margin:0px;padding:0px;border:1px dashed blue;width:200px;font-size:14px;font-weight:bold;"> User $userNum Name: $user.Name Age: $user.Age #set($userNum=$userNum+1) </div> #end<h3>异步测试</h3><!--$Instance -->$Instance.CallbackHandle()<span style="cursor:pointer;color:red;" mce_style="cursor:pointer;color:red;" onclick="callServer('xu zhi ze')">点击我</span><div id="callbackContainer" style="border:1px dotted silver;width:300px;height:50px;"></div></pre> 

Step3:查看的运行效果如下：


很显然，在webpart中使用nvelocity是可行的，而且非常简单。
接下来要做的事就是
1、实现在一个目录下放置多个模板文件，
2、编写xml文件来描述这些模板，
3、编写一个editorpart来读取这个目录下的模板描述xml，并生成模板的列表，以供使用者选择。
---
实际上，模板选择的工作难点在于写editorpart时的xml读取和分析（实际上，这也并不难，毕竟是基础知识的运用而已）
有了使用nvelocity的方法，再加上模板选择的功能应该就容易多了。

 

========================================================================

测试：

       原理很简单：在EditorPart中指定WebPart模板所在的文件夹（相对路径），并通过输入的文件夹路径获取该文件夹下的templates.xml(即模板描述文件）。
然后列出该模板描述文件中的模板列表供选择。模板描述文件格式及内容如下（如果要在项目中应用，可能还需要作相应的更改）：

<?xml version="1.0" encoding="utf-8" standalone="yes" ?> <TemplateFiles> <TemplateFile> <FileName> <!--[CDATA[default.vm]]> </FileName> <TemplateName>默认</TemplateName> <Description>描述111111</Description> <Author>pcitxzz</Author> <CreateDate>2009-08-18</CreateDate> </TemplateFile> <TemplateFile> <FileName><![CDATA[new2.vm]]--></FileName> <!--文件名--> <TemplateName>新的</TemplateName><!--模板名--> <Description>描述2222</Description><!--模板描述--> <Author>pcitxzz</Author><!--创建者--> <CreateDate>2009-08-18</CreateDate><!--创建日期--> </TemplateFile></TemplateFiles> 

在编写EditorPart时，读取这个xml文件并分析即可。
完成EditorPart的编写后，就可以在webpart中进行应用了。
------------------------------------------
以下是我测试的相关截图：
No1：EditorPart中选择模板的效果：

No2:使用默认模板时的效果：

No3：使用“新的”模板时的效果：


可以看出，通过这种方式为同一个webpart应用不同的模板十分方便。
尤其是在实现CSS样式无法实现的布局时或需要一些特殊功能时，您可以考虑这种实现方式。
----
相关源码：/Files/McJeremy/NVelocityTestPart.rar
----
出处：http://www.cnblogs.com/mcjeremy