网上找TWaver Web资料真是少之又少，经过努力终于写出一个hello world。
TWaver是专门做电信业务图形的一个组件，有很多版本，有java的，flex的，web的等等。我这里讲的是如何在web中实现。
TWaver Java要用到twaver.jar，这里有一个很重要的组件那就是TDataBox:TDataBox是用来绑定数据的一个容器，可以将它理解成一个数据集，也可以理解成一个pojo，总之如果TDataBox里边的数据用来被前台解析，就可以实现拓扑图形。
基本步骤：1 后台制作几个twaver的组件(节点 node 连接 link)等，放入TDataBox里边。
2 SVGContext，它是一个twaver的上下文，用它加载TDataBox对象，转换成SVG格式（可以支持twaver的解析），用流的形式发送数据到前台。
3 前台解析展示拓扑图形（或者其他）。
准备工作：twaver.jar(java用到的), twaver.rar(js用到的)。
按照上述步骤，我们来逐一实现：
1 建立一个servlet HelloNetwork.java
public class HelloNetwork extends HttpServlet {
private TDataBox box;
private TSVGNetwork network;//拓扑图组件
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
box = new TDataBox();
//创建拓扑图组件，用于生成SVG拓扑图形
network = new TSVGNetwork(box);
//下面添加两个节点一条连线到dataBox
// 添加节点1
Node server1 = new Node();
server1.setName("Server 1");
server1.setLocation(100, 100);
box.addElement(server1);//这一步很重要，所有待展示图形必须放到TDatabox对象里边
// 添加节点2
Node server2 = new Node();
server2.setName("Server 2");
server2.setLocation(200, 200);
box.addElement(server2);
// 添加连线
Link link = new Link(server1, server2);
link.setName("Hello TWaver");
box.addElement(link);
//第二步实现
}
2 在改java类中添加如下代码：
SVGContext svgContext = new SVGContext();
svgContext.setSizeByImageBackgroundSize(true);
svgContext.setSvgHeader(false);
StringBuffer result = new StringBuffer();
result.append("<?xml version='1.0' encoding='utf-8'?>\n");
result.append("<twaver>\n");
result.append("<twaver.network>\n");
result.append(network.toSVG(svgContext) + "\n");
result.append("</twaver.network>\n");
result.append("</twaver>\n");
response.addHeader("Content-Type", "text/xml; charset=utf-8");
response.addHeader("Cache-Control", "no-cache, no-store");
response.getWriter().write(result.toString());
这里拼接的字符串不用我多说大家可以看出是一个xml，对，它是一种标准，可以被解析成各种形式的，如果是twaver.network则是拓扑图形，还可以是树形菜单等等。
3 解压twavber.rar文件 将twaver文件放在工程根路径下，建立一个jsp页面。index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="twaver/resource/twaver.css"/>
<script type="text/javascript" src="twaver/twaver-all-min.js"></script>
<script type="text/javascript">
function fn_init() {
var url = 'http://localhost:8080/hello_network/helloNetwork';//这里根据实际情况传入你要请求的url。
var databox = new TWaver.DataBox(url);//通过这个url在天台建立一个databox，前台的用法不是java范畴的，而是TWaver Web的东西，所以要用到解压文件中的TWaver-min-all.js。它可以和后台的东西交互。组件完全是一样的，只不过一个是java的，一个是javascript的。
var network = new TWaver.SVGNetwork(databox, document.getElementById('network'));//告诉浏览器这是一个拓扑对象，要用到databox里的数据，显示在div network中。
network.canvas.style.overflow = 'auto';
databox.update();//发送请求，加载组件到页面中。
}
</script>
</head>
<body onload="fn_init();">
<div>This is my JSP page. </div>
<div id='network'></div>
</body>
</html>
分享到：
相关推荐
twaver web结合extjs源码学习资料
Twaver Web SVG 开发说明文档，花钱买的。希望大家对开发电信网管的WEB模式有帮助！
TWaver Web SVG是由赛瓦软件（SERVA Software）提供的一套Web 客户端解决方案。用户可以方便的运用TWaver开发包提供的Java接口，实现拓扑，机架板和图表在Web上以SVG的方式实现，并以AJAX的方式进行交互，通讯以及用...
关于flex中Twaver的详细入门知识
Twaver+Web+SVG+开发说明文档
TWaver_Web_4.0中文开发手册 包含twaver web的开发技术，适合初级，中级，高级开发者使用！
很好的Twaver WEB学习资料，里面有相关的例子
twaver示例可直接放到jetty下运行，含twaver.js alarm.html资源。
twaver-flex开发入门。对于使用flex开发人员有较大帮助。
TWaver-flex的库TWaver.swc
TWaver是美国Serva Software公司的产品，是应用最为广泛的电信专业图形界面开发工具包，在电信行业应用非常广泛。TWaver关注于数据的图形展示，它是面向开发人员的，需要进行二次开发。 TWaver的图形组件库中提供了...
twaver for flex 开发手册
twaver-java-3.7 文档
最新的TWaver可视化学习开发包，用TWaver做出更炫更美的界面。
我希望说点特别的东西，更有价值的东西，不只是为TWaver用户，更包括所有从事GUI开发的人和团队，提供对产品设计有借鉴意义的内容，于是我修改了提纲，精简了TWaver功能点的内容，增加了更多TWaver设计思想与产品...
Twaver学习案例的例子
Twaver java开发帮助文档，英文版的。
TWaver-java的库TWaver.jar