使用xml文件生成在线帮助文档_制作.xml帮助文档-优快云博客

本文介绍了如何利用XML文档创建在线帮助文档。首先定义XML结构，然后读取XML内容，以实现实时修改和显示帮助文档的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

得到最后显示结果如下：