您的位置：首页 > 其它

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

2014-09-18 14:15 337 查看

目前，很多系统或工具都会提供相应的在线帮助文档，在线帮助文档包括对各个功能的操作步骤演示、功能说明等。为了能实时对帮助文档进行修改，有些系统提供在线编辑功能，该功能固然好，但实现相比直接采用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 block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航