项目总结——技术篇
最近刚刚做完一个项目，现在稍微的总结一下所涉及的相关技术点，以备以后复习与品鉴。
项目是关于SOA方面的，具体的应用是属于ESB。这些暂且搁置，这里我就项目本身、就我本人的工作做一下简单的回顾：我主要是负责项目的一个前端界面展现与控制的部分。说的具体点就是把服务端的xml文件在前台页面做相应的展示，并且要求可以通过界面对xml文件可以做相关的增删改查的操作。下面是具体的技术梳理：
项目前端页面的展现使用的是一个基于JS的框架:DHTMLX，相关的官方网站是：http://www.dhtmlx.com，具体的介绍这里不做赘述，请下载官网文档自行学习。
首先，第一个页面（也是进入系统页面第一个展示的页面），我们使用的.jsp页面。在jsp的开头都有这么几句话：
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort() + path + "/";
String serverPath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort() + "/";
当然在jsp页面中是使用<%%>围起来的，这几句话的意思相信就是获取当前页面的相对路径，也可以说成是获取当前项目的url地址。在完成这一步之后，我们开始引入dhtmlx这个框架使用，使用相应的框架需要我们引入相关的js文件和表示样式的.css文件
<!-- common -->
<script type="text/javascript" src="/dhtmlx/dhtmlxTabbar/dhtmlxTabbar/codebase/dhtmlxcommon.js"></script>
<!-- tabbar -->
<script src="/dhtmlx/dhtmlxTabbar/dhtmlxTabbar/codebase/dhtmlxtabbar.js"></script>
<script src="/dhtmlx/dhtmlxTabbar/dhtmlxTabbar/codebase/dhtmlxtabbar_start.js"></script>
<link rel="stylesheet" type="text/css" href="/dhtmlx/dhtmlxTabbar/dhtmlxTabbar/codebase/dhtmlxtabbar.css">
引入了所需要的文件之后，我们开始使用dhtmlx来创建界面，当点击一个相应的toolBar的时候，出现相关的页面跳转的控制语句是
mytabbar.setContentHref("a9","<%=basePath%>index_system.jsp");
跳转到指定的页面之后，我们需要对此页面进行刷新，刷新语句是：
mytabbar.attachEvent("onSelect", function(id,last_id){
if(id == "a9")
parent.mytabbar.forceLoad("a9");
});
至此跳转到相关的管理界面。
跳转到我负责的模块之后，创建新的Layout，并使用嵌套的方式创建相应的ToolBar和Grid，在ToolBar中创建Button，当使用人员点击
Button之后，会触发相关的处理动作，这里使用的是跳转到相关的servlet，根据传递过来的参数进行相应的处理。这里先暂停说一下关于
servlet的配置问题，在WEB-INF中的web.xml文件中，应该做相关的配置，下面是一个实例：
<servlet>
<description>接入系统管理Servlet</description>
<display-name>DisplaySysServlet</display-name>
<servlet-name>DisplaySysServlet</servlet-name>
<servlet-class>org.ieslab.esb.galaxy.sysDic.DisplaySysServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>DisplaySysServlet</servlet-name>
<url-pattern>/DisplaySysServlet</url-pattern>
</servlet-mapping>
根据以上的配置，Tomcat容器会把所需要的.class文件加载，以便进行处理。在页面展现相关的.xml文件的过程中，根据已经建立好的grid。这里需要的是把相应的grid的cell全部填好，所以在展现的DisplaySysServlet中就出现了gridXmlUtil.setCellData(element.elementText("host"));
这里，对于位于服务端的XML文件的解析，在客户端的引用使用到了Spring的远程调用。既是在服务端配置远程调用接口的接口类和实现类，在客户端配置相应的接口类，这样可以让位于服务端的接口实现类可以把相关的方法暴露给客户端使用，下面是相关的配置：
首先，配置服务端接口类
<!-- add 2012-02-20 外部系统字典模块增加配置 -->
<bean name="/v3/dicForExternalSysService" parent="serviceExporter">
<property name="serviceInterface" value="com.mulesoft.mmc.agent.v3.service.DicForExternalSysService"/>
<property name="service" ref="dicForExternalSysService"/>
</bean>
然后，配置服务端接口的实现类：
<!-- add 2012-02-20 外部系统字典模块增加配置 -->
<bean name="dicForExternalSysService" class="com.mulesoft.mmc.agent.service.impl.DicForExternalSysServiceImpl"/>
最后，在配置一个客户端：
<!-- add 2012-02-20 外部系统字典模块增加配置 -->
<bean name="v3/dicForExternalSysService" parent="abstractRemoteService">
<property name="serviceInterface" value="com.mulesoft.mmc.agent.v3.service.DicForExternalSysService"/>
</bean>
关于他们两者是如何联系在一块的，在Spring的远程服务中有相应的介绍。（这部分可以仔细学习一下~！）
回到对位于服务端的XML文件进行处理的路径上来，在servlet端，可以首先配置一下，如何在servlet端接收远程方法的使用，其实很简单，就是把接口引入，如下所示
org.springframework.context.ApplicationContext ac =
org.springframework.web.context.support.WebApplicationContextUtils.getRequiredWebApplicationContext(request.getSession()
.getServletContext());
com.mulesoft.mmc.agent.v3.service.DicForExternalSysService as =
(com.mulesoft.mmc.agent.v3.service.DicForExternalSysService) ac .getBean("v3/dicForExternalSysService");
这里所需要的远程方法就装在到了as这个对象里面了。基本的展现方法，在代码里面有相应的注释。
做完相关的展示之后，就是对增删改查的操作，基本的流程和展现XML文件的类似，调用servlet，调用远程方法，在页面展现，具体的代码
上面都有展现。
这里着重介绍一下，在书写代码过程中，几点关键的代码段：
1、界面跳转过程中，获得前台界面的参数，其余的在输入框中可以使用dom解析获得
function request(paras){
var url = location.href;
var paraString = url.substring(url.indexOf("?")+1,url.length).split("&");
var paraObj = {};
for (var i=0; j=paraString[i]; i++){
paraObj[j.substring(0,j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=")+1,j.length);
}
var returnValue = paraObj[paras.toLowerCase()];
if(typeof(returnValue)=="undefined"){
return "";
}else{
return returnValue;
}
}
2、关于div的隐藏的问题，因为要根据选择出发对div的隐藏问题，所以就产生了如下的代码
var cz= document.getElementById("direction");;
if(cz.value == "in"){
var name1 = document.getElementById("cz1");
var name2 = document.getElementById("cz2");
name1.style.display = 'block';
name2.style.display = 'none';
}else{
var name1 = document.getElementById("cz1");
var name2 = document.getElementById("cz2");
name2.style.display = 'block';
name1.style.display = 'none';
}
下面是出发时的处理函数
function directionChange(){
if(document.getElementById("direction").value == "in"){
var name1 = document.getElementById("cz1");
var name2 = document.getElementById("cz2");
name1.style.display = 'block';
name2.style.display = 'none';
}else{
var name1 = document.getElementById("cz1");
var name2 = document.getElementById("cz2");
name2.style.display = 'block';
name1.style.display = 'none';
}
}
3、输入框的可扩展的问题，需要一个可以根据输入字符串的长度的大小来自动扩展输入框的长度的处理
var oInput = document.getElementById("address");
var sSize = oInput.getAttribute("size");
oInput.onkeydown = function(){
var sInputValue = oInput.value;
if(sInputValue === "" || sInputValue.length <= sSize || sInputValue.length > 60)
{
return;
}else
{
oInput.setAttribute("size",sInputValue.length);
}
}
这里写的有些模糊，具体的参照代码，就一目了然了~最后，加油！
