打印预览程序架构。
因为规定要将监控的程序按装本系统监控的架构生成一个Tree样式的视图，还需要可以打印等功能。我也在网上找了好多方法没有什么简单方便的方法，要不就用第三方控件来实现，但是这个的花钱，要不就自己来画，来画出Tree的结构，我也试着画了，但是整到还不到一半头就大了，然后选择使用API的方法直接将控件的界面抓到图中，然后打印图形，结果发现这个方法效果太差。 没有办法了最后只有使用Web的方式来做了，因为用网页来实现这些很简单，起码不用我去控制分也什么，于是到网上找，找到一个.js文件，经过简单的改造后就可以很好的实现所要的功能，并且可以通过使用WebBrowse控件来调用IE自带的打印功能打印，下面将这个方法记录下来。
该方法是使用一个叫dtree的js文件，这个文件主要用来生成树的方法，将由程序得到的数据写入到一个xml文件中，然后程序中调用WEbBrowse加载一个html，在该html中使用javascript读取xml文件并调用dtree中的类生成tree的结构。
xml文件的格式为：
<?xml version="1.0" encoding="utf-8" ?>
<Root Name=" RootName" TitleName="RootName" Image="Image\0.png" FontSize="4" FontColor="red" Bold="true" Exp="true">
<TreeItem Name="显示第一个节点 " Image="Image\1.png" FontSize="3" FontColor="Black" Bold="false" Exp="true">
<TreeItem Name="第二个节点 " Image="Image\1.png" FontSize="3" FontColor="Black" Bold="false" Exp="true">
<TreeItem Name="A01 [192.168.0.1]" Image="Image\2.png" FontSize="2" FontColor="Black" Bold="true" Exp="true">
<TreeItem Name="test" Image="Image\5.png" FontSize="2" FontColor="Black" Bold="false" Exp="true">
<TreeItem Name="1111.exe" Image="Image\17.png" FontSize="1" FontColor="red" Bold="false" Exp="true">
<TreeItem Name="程式說明" FontSize="1" FontColor="Black" Bold="true" Exp="true" Image="img\page.gif">
<TreeItem Name="XXXXXX" Image="img\empty.gif" FontColor="Black" Bold="false" Exp="true" FontSize="1" />
</TreeItem>
<TreeItem Name="2 [192.168.0.2]" FontColor="red" Bold="false" Exp="true" FontSize="2" Image="Image\3.png" />
<TreeItem Name="4 [192.168.0.4]" FontColor="red" Bold="false" Exp="true" FontSize="2" Image="Image\3.png" />
<TreeItem Name="6 [192.168.0.6]" FontColor="red" Bold="false" Exp="true" FontSize="2" Image="Image\3.png" />
</TreeItem>
<TreeItem Name="aa [192.168.0.2]" FontColor="red" Bold="false" Exp="true" FontSize="2" Image="Image\3.png" />
</TreeItem>
</Root>
其中没有节点中都有自己的属性，比如Name：要显示的名称，Image：要显示的图标，FontSize：要显示的字体大小 FontColor：要显示的字体的颜色 Bold：是否粗体 Exp：是否可以展开。
HTML文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>eConfigurationManager Tree Print View</title>
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>
<style>
@media print {
.noprint {display:none}
}
.fixedHead
{
position: relative;
top: expression(this.offsetParent.scrollTop - 1);
left: expression(this.offsetParent.scrollLeft - 1);
}
</style>
</head>
<body>
<p>
<table border="0" width="100%" id="table1" class="tb">
<tr>
<td>
<h1 id="Ti" align="center">Title </h1><DIV style="PADDING-BOTTOM: 1px; BORDER-BOTTOM: 1px solid" align="right"><FONT face="宋体" id="tim"></FONT></DIV>
</td>
</tr>
<tr>
<td height="34" style="border-bottom-style: solid; border-bottom- 1px">
<p><a href="javascript: d.openAll();" class="noprint">open all</a><font class="noprint"> | </font><a href="javascript: d.closeAll();" class="noprint">close all</a></p>
<script type="text/javascript">
<!--
var d = new Date();
window.document.all("tim").innerText = "文件產生時間:" + d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
var CurIndex = -1;
var doc = new ActiveXObject("Msxml2.DOMDocument"); //ie5.5+,CreateObject("Microsoft.XMLDOM")
var xmlFile ='data.xml';// window.location.href;
doc.async =false;
doc.load(xmlFile);
var root = doc.selectSingleNode("//Root");
var Title = root.selectSingleNode("@TitleName").text;
window.document.all("Ti").innerText = Title;
d = new dTree('d');
var imagestr = root.selectSingleNode("@Image").text;
var fontsize = root.selectSingleNode("@FontSize").text;
var fontcolor = root.selectSingleNode("@FontColor").text;
var fontBold;
if(root.selectSingleNode("@Bold").text=="true")
fontBold = true;
else
fontBold = false;
var exp;
if(root.selectSingleNode("@Exp").text =="true")
exp = true;
else
exp = false;
var index = GetIndex();
//id, pid, name, url, title, target, icon, iconOpen, open, bold, color,size
d.add(index,-1,root.selectSingleNode("@Name").text,'','','',imagestr,imagestr,exp,fontBold,fontcolor,fontsize);
//获取root下的节点。
var rootChild = root.selectNodes("TreeItem");
var len = rootChild.length;
for(var i=0;i<len;i++)
{
var node = rootChild[i];
CreatNodes(node,index);
}
document.write(d);
function CreatNodes(nodes,Pindex)
{
var namesub = nodes.selectSingleNode("@Name").text;
var imagestrsub = nodes.selectSingleNode("@Image").text;
var fontsizesub = nodes.selectSingleNode("@FontSize").text;
var fontcolorsub = nodes.selectSingleNode("@FontColor").text;
var fontBoldsub;
if(nodes.selectSingleNode("@Bold").text=="true")
fontBoldsub = true;
else
fontBoldsub = false;
var expsub;
if(nodes.selectSingleNode("@Exp").text =="true")
expsub = true;
else
expsub = false;
var indexnode= GetIndex();
//id, pid, name, url, title, target, icon, iconOpen, open, bold, color,size
d.add(indexnode,Pindex,namesub,'','','',imagestrsub,imagestrsub,expsub,fontBoldsub,fontcolorsub,fontsizesub);
var nodesub = nodes.selectNodes("TreeItem");
var len = nodesub.length;
for(var i=0;i<len;i++)
{
var nodex = nodesub[i];
CreatNodes(nodex,indexnode);
}
}
function GetIndex()
{
CurIndex = CurIndex + 1;
return CurIndex;
}
//-->
</script>
</td>
</tr>
</table></p>
<p><b><a class="node" >©2007-2008 </a></b></p>
<!--
<script language='JavaScript'>
if (window.Event)
document.captureEvents(Event.MOUSEUP);
function nocontextmenu()
{
event.cancelBubble = true
event.returnValue = false;
return false;
}
function norightclick(e)
{
if (window.Event)
{
if (e.which == 2 || e.which == 3)
return false;
}
else
if (event.button == 2 || event.button == 3)
{
event.cancelBubble = true
event.returnValue = false;
return false;
}
}
document.oncontextmenu = nocontextmenu; // for IE5+
document.onmousedown = norightclick; // for all others
</script> -->
</body>
</html>
当加载html的时候就会去读取和html同目录下的data.xml文件了，同时调用dtree.js文件并生成tree视图了。
剩下的工作就是使用Window编程将所有的信息保存成xml文件，同时自动获取每个程式的icon图标，并在预览的时候保存一份到img的目录下了，然后调用html就可以显示出来。显示界面效果。
不过这个方法也有一个缺陷，当xml文件资料量过大的时候html加载过慢会照成一些影响。 因为我们监控的公司的程式很多，所以有时要是显示会有问题。不过还没有腾出时间来修改这个部分。我想可以通过重新设计html，可以设计成每次只显示部分，用户要看那个才去取得相关的xml文件，不过这样的话可能需要生成多个xml文件，没有程式对应一个，这样使用javascript读取会快些。
效果图
