使用xml文件生成在线帮助文档

来源：互联网发布：硬笔书法知乎编辑：程序博客网时间：2024/04/16 17:42

目前，很多系统或工具都会提供相应的在线帮助文档，在线帮助文档包括对各个功能的操作步骤演示、功能说明等。为了能实时对帮助文档进行修改，有些系统提供在线编辑功能，该功能固然好，但实现相比直接采用xml文档存储要复杂。

以下是我采用xml文档实现在线帮助文档的过程：

第一步：定义所需要展示的xml文档结构。

帮助文档一般包括文字描述和图片展示。xml文档以功能为主体，每个功能可以有多段文字描述，每段文字可以附件多幅图片。定义的xml文档结构如下：

<?xml version="1.0" encoding="UTF-8"?><content><function method="功能"><h title="功能描述"><p info="通过该功能可以实现xxx操作，其中需要注意xxx。"><img>app/3.png</img></p></h><h title="操作步骤"><p info="第一步，如何操作。"><img >app/4.png</img></p><p info="第二步，在xxx中找到xxx，确定xxx。"><img >app/5.png</img><img>app/6.png</img></p><p info="第三步，选择'xxx'，点击xxx。"><img>app/7.png</img></p><p info="第四步，xxxx。"><img>app/8.png</img></p><p info="第五步，xxxx。"><img>app/9.png</img></p><p info="第六步，xxxx。"><img>app/10.png</img><img>app/11.png</img></p><p info="最后，退出查看结果。"><img>app/12.png</img></p></h></function></content>

第二步：xml文档读取

xml文档读取之前，需要定义文档存储结构，通过分析以上文档结构可以得到如下结论。一个xml文件中包含多个function，即List<function>。每个function包含多个标题，即List<h>。每个h包含多个p,即List<p>,最后就是每个p包含多个img。如此得到整个xml文档数据结构。

根据结构编写代码如下：

/* * 获取xml文件内容 * */public List<FunctionInfo> getXmlFile(String fileName) throws ParserConfigurationException{DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();DocumentBuilder builder = dbf.newDocumentBuilder();Document doc = null;try {doc = builder.parse(fileName);} catch (SAXException e) {// TODO Auto-generated catch blocke.printStackTrace();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();} // 获取到xml文件  // 下面开始读取List<FunctionInfo> functionInfoList=new ArrayList<FunctionInfo>();Element root = doc.getDocumentElement(); // 获取根元素NodeList nl=root.getChildNodes();//类节点列表for(int i = 0;i<nl.getLength();i++){  FunctionInfo info=new FunctionInfo();  if(nl.item(i).getNodeType() == 1){  Element functionElement = (Element) nl.item(i);  info.setMethod(functionElement.getAttribute("method"));  //info.setFileName(functionElement.getAttribute("fileName"));  NodeList nl1 = nl.item(i).getChildNodes();  List<HInfo> hInfoList = new ArrayList<HInfo>();  for(int j=0;j<nl1.getLength();j++){  if(nl1.item(j).getNodeType() == 1){  Element hElement = (Element) nl1.item(j);  HInfo hinfo = new HInfo();  hinfo.setTitle(hElement.getAttribute("title"));  NodeList hNL = hElement.getChildNodes();  List<PInfo> pInfoList = new ArrayList<PInfo>();  for(int k=0;k<hNL.getLength();k++){  if(hNL.item(k).getNodeType() == 1){  Element pElement = (Element) hNL.item(k);  PInfo pInfo = new PInfo();  pInfo.setInfo(pElement.getAttribute("info"));  NodeList imgNL = pElement.getElementsByTagName("img");  List<String> imgList = new ArrayList<String>();  for(int kk=0;kk<imgNL.getLength();kk++){  imgList.add(imgNL.item(kk).getFirstChild().getNodeValue());  }  pInfo.setImgList(imgList);  pInfoList.add(pInfo);  }  }  hinfo.setpInfoList(pInfoList);  hInfoList.add(hinfo);    }  }  info.sethInfoList(hInfoList);  functionInfoList.add(info);  }  }return functionInfoList;}

过程中需要注意的是：一个Element一定是一个节点，但是一个节点不一定是Element，节点类型除了Element外，还有Text和CDATA。

xml文档内容显示

通过controller层将获取的xml文档信息传递到表示层

@RequestMapping(value="/test.do",produces="text/plain;charset=UTF-8")public ModelAndView test(HttpServletRequest request) throws ParserConfigurationException{ModelAndView model = new ModelAndView("/test");String paraName = RequestUtil.getParameterNullSafe(request, "paraName");List<MenuInfo> list = new ArrayList<MenuInfo>();list.addAll(getMenuList("D:/menu.xml"));String fileName="D:/config.xml";if(!paraName.equals("")){fileName = "D:/"+paraName;}model.addObject("xmlInfo", getXmlFile(fileName));model.addObject("menu", list);if(!paraName.equals("")){model.addObject("fileName", paraName);}else{model.addObject("fileName", "config.xml");}return model;}

表示层代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="uTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><html xmlns="http://www.w3.org/1999/xhtml"><head><%String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";%><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>在线帮助文档 </title><link href="<%=basePath%>css/help.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/jquery-1.3.2.min.js"></script></head><body><div class="header-bar"><h1>在线帮助文档</h1><div class="clear"></div></div><!--.内容中间--><!--/.左边--><div class="main_left" ><div id="leftnav" class="leftnav" style="height:400px;"><h3 align="center">目录导航</h3>           <ul>           <c:forEach items="${menu }" var="menu" varStatus="status">           <li><a href="<%=basePath%>/index.do?paraName=${menu.fileName }"><strong>${ status.index + 1}.${menu.method}</strong></a></li>           <c:if test="${fileName eq menu.fileName }">           <c:forEach items="${xmlInfo }" var="functionInfo" varStatus="status">           <li><a href="#${functionInfo.method }"><font color="blue">${functionInfo.method}</font></a></li>           </c:forEach>           </c:if>           </c:forEach>                  <!--  <li><a href="#"><strong>返回顶部</strong></a></li>-->               </ul></div><div id="left" class="leftnav" style="margin:400px 0 0 0;">           <ul>                  <li><a href="#"><strong>返回顶部</strong></a></li>               </ul></div></div><div class="main_right"><div class="details"><c:forEach items="${xmlInfo }" var="functionInfo" varStatus="status">             <h3>${ status.index + 1}.${functionInfo.method }<a name="${functionInfo.method }"></a></h3>             <c:forEach items="${functionInfo.hInfoList }" var="hInfo">             <h4>${hInfo.title}</h4>             <c:forEach items="${hInfo.pInfoList }" var="pInfo">             <p>${pInfo.info}</p>             <c:forEach items="${pInfo.imgList }" var="img">             <p><img src="<%=basePath%>img/help/${img }"></img></p>             </c:forEach>             </c:forEach>             </c:forEach>            </c:forEach>                          </div><!--  <div class="gg" style="right:300px"><a href="#"><strong>返回顶部</strong></a></div>--></div><script> //回到顶部按钮$(document).ready(function(){var n=0;var x=0;var top_btn = $("<span id='top_btn'><a title='回到顶部' href='#top'></a></span>");$("body").append(top_btn);$("body").attr("id","top");var fe=$("#top_btn");window.onscroll=function(){x=(document.body.scrollTop||document.documentElement.scrollTop)+n;if(x==0){fe.fadeOut(100).hide()}else{fe.fadeIn(100).show()};};});</script></body></html>

得到最后显示结果如下：

代码下载：http://download.csdn.net/detail/happy_life123/7938055

0 0