TWaver Web 之入门

    网上找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)