浅谈MVC框架中View层的优雅设计及实例

　　　　　作者：EasyJF开源团队 大峡

　　在基于B/S的应用程序开发中，从基本的技术分工上来说就是两大块，一是软件显示界面，另一个是程序逻辑。在N年前的脚本语言时代，无论是asp、php还是jsp，我们基本是都是把这两者柔和在一起的。尽管我们想方设法做好很多函数或者包含文件来努力达到软件的复用，但仍然无法满足多变的用户需求,这主要是因为以前的纯脚本编码方式无法很好支持及应用面向对象(OO)领域中的强大功能。

　　在常见的B/S软件项目中，界面的设计包括html界面、Wap界面及其它由文本字符协议为基本表示的界面等。以我们接触最多的html页面为例子，在做这些界面的时候往往需要美工先使用photoshop或fireworks等图形界面设计工具进行全局设计，然后再使用进行Dreamweaver等html页面制作工具进行加工制作。而强大的程序逻辑及后台处理都是由服务器端程序完成，这些程序具有较高的稳定性，其开发工具如JBuilder、Eclipse等对View层的界面无法很好的支持(当然那些用记事本写界面的应用除外)，这就使得很多MVC框架的设计都无法两全齐美。

　　作位一个比较友好的MVC的框架，在简化服务器应用开发的同时，还需要在View这一层设计上不要过多的影响到界面人员的工作，最基本的要求就是不要过多的加入一些设计软件不支持的标签等元素(如Struts的很多标签在Dreamweaver中都不支持)。这里我们以EasyJWeb为例，探讨在View层如何实现比较合理的设计。

　　EasyJWeb作为一个快速Java Web MVC框架，其设计目标不尽是要简化软件开发人员的代码书写工作，更是要能方便界面设计人员的工作。

　　当然，要使界面能跟后台程序逻辑能融合，显示界面及程序逻辑之间需要一定的对话协议在所难免。EasyJWeb作为一个MVC框架，同样也存在着这样的对话协议，这就是EasyJWeb中的界面模板标识语言。

　　在当前发布的版本中，EasyJWeb界面模板标识语言使用的是Apache开源的Velocity模板引擎(template engine)，当然以后会根据际需要加入更多的模板引擎以供框架应用者选择。

　　Velocity是一个基于java的模板引擎（template engine），它允许任何人仅仅简单的使用模板语言（template language）来引用由java代码定义的对象。作为一个比较完善的模板引擎，Velocity的功能是比较强大的，但强大的同时也增加了应用复杂性。

　　理论上你可以在EasyjWeb模板使用所有Velocity的脚本及功能，但我们不推荐你在界面模板中使用过多过复杂的脚本表达方式，在万不得已的情况下，不要在界面模板中加入任何复杂的逻辑，更不要在界面模板中加入变量声明、逻辑运算符等等。

　　在EasyJWeb中，我们提供了四条基本的模板脚本语句，基本上就能满足所有应用模板的要求。这四条模板语句很简单，可以直接由界面设计人员来添加。在当前很多EasyJWeb的应用实践中，我们看到，所有界面模板中归纳起来只有下面四种简单模板脚本语句即可实现：

　　1、$!obj 　直接返回对象结果。
　　
　　如：在html标签中显示java对象msg的值。<p>$!msg</p>
　　　　在html标签中显示经过HtmlUtil对象处理过后的msg对象的值.<p>$!HtmlUtil.doSomething($!msg)</p>

　　2、#if($!obj) #else #end 判断语句

　　如：在EasyJWeb各种开源应用中，我们经常看到的用于弹出提示信息msg的例子。
　　#if($msg)
　　<script>
　　alert('$!msg');
　　</script>
　　#end
   上面的脚本表示当对象msg对象存在时，输出<script>等后面的内容。

　　3、#foreach( $info in $list) $info.something #end　　循环读取集合list中的对象，并作相应的处理。
　　
　　如：EasyJF开源论坛系统中论坛首页显示热门主题的html界面模板脚本

 　　#foreach( $info in $hotList1)                
      <a href="/bbsdoc.ejf?easyJWebCommand=show&&cid=$!info.cid"  target="_blank">$!info.title</a><br>
　　　#end     
　　上面的脚本表示循环遍历hotList1集合中的对象，并输出对象的相关内容。
　　
　　4、#macro(macroName)#end 脚本函数(宏)调用，不推荐在界面模板中大量使用。

　　如：在EasyJF简易订销管等系统中经常看到的一个排序状态显示的模板内容。
　　函数(宏)定义，一般放在最前面
　　#macro(orderPic $type)
　　#if ($orderField.equals($type))
　　<img src="/images/ico/${orderType}.gif"> 
　　#end
　　#end

   具体的调用如：<font color="#FFFFFF">头衔#orderPic("title")</font> 
　　
　　　　
　　总结：　
　　当然，在实际应用项目中，为了实现界面的更加友好、人性化，会出现很多复、易变的需求。如根据对象的不同状态，显示不同的提示颜色、提示语音等功能。在这种时候，仍然要慎用太多的模板脚本功能，大多数需求都可以通过变通的方式解决，有些信息可以直接在对象中增加逻辑转化信息，有些界面要求可以通过在界面中使用与特定界面有关的表达方式来实现，如html页面中使用javascript、css，Wap页面中使用WMLScript等等。只有，这样才能确保证你的系统核心不受界面的的影响及控制，才能更好的扩展及维护。

　　我们希望你能成为真正的程序高手，而不只是精通某个处于表层的脚本语言，因此也不希望广大Java开发人员在View层消耗太多的时间。

　　由于水平有限，本文所谈的内容有N多不合理或者需要改进的地方，恳请大家指正！
 

　　附：EasyJWeb简介

　　EasyJWeb是基于java技术，应用于WEB应用程序快速开发的MVC框架，框架设计构思来源于国内众多项目实践，充分借签了当前主流的开源Web框架（Struts、JSF、Tapestry 、Webwork等），吸取了其优点及精华，利用Velocity作为模板页面引擎，是一个实现了页面及代码完全分离的MVC开发框架，是一个旨在于为中小型Web应用系统提供快速开发实践的简易Web框架。

　　EasyJF开源团队于2006年初才开始建设，因此当前整个开发团队组建以及所发布的作品，都显得极不成熟。EasyJWeb仍然处于测试阶段，请广大的Java爱好者多多批评及建议,同时也非常欢迎您能加入到我们的国产开源队伍中。

　　EasyJWeb官方网址：www.easyjf.com
　　EasyJF团队官方网址：www.easyjf.com

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=651403