TWaver Web 之入门 -

bianrongxin

浏览: 102705 次
性别:

最近访客更多访客>>

坏坏小菜

jiajia6120

1310002415

feel_围脖

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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>

<title>My JSP 'index.jsp' starting page</title>

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>

</html>

twaver.jar (1.7 MB)
下载次数: 841

twaver.rar (32.1 KB)
下载次数: 596

分享到：

字符串批量替换小工具(java版) | Java 如何同步顺序执行多个线程

2012-04-05 17:17
浏览 15376
评论(14)
分类:行业应用
查看更多

14 楼 lliu_dt18 2015-11-20

13 楼 lliu_dt18 2015-11-19

12 楼 f123132 2015-03-11

index.jsp中报错TWaver未定义，无法解析，该如何解决？能否把这个工程文件发我邮箱，谢谢！970833801@qq.com

11 楼 f123132 2015-03-11

index.jsp中报错TWaver未定义，无法解析，该如何解决？

10 楼 lzycxy 2015-01-16

可以跑起来，很好，很感谢！

9 楼 Rfiy 2013-08-16

目前正在研究twaver的用法，非常有用，感激不尽!

8 楼 xiaonihaoa 2013-07-17

很好很强大

7 楼 habwn 2013-05-21

不错，运行出来了，就是不太美观

6 楼 ~音乐盒~ 2012-12-03

您好，twaver-all-min.js 这个引用路径没有问题的，但脚本报“拒绝访问”的错误，不知道你的例子那里运行可以吗。可以吧你的例子发我分吗273683437@qq.com

5 楼 ~音乐盒~ 2012-12-03

您好，我在jsp中twaver-all-min.js引用这个了，但运行时还是报脚本错误，说TWaver未定义，为什么呢。

4 楼 PLA 2012-11-21

谢谢分享

3 楼 shit_wp 2012-11-06

太感谢了，正在找这样的资料

2 楼 duxitao 2012-08-30

官方网站资料不少啊，不知博主的jar包是哪里下载的是哪个版本的呢

1 楼 weihao11123 2012-08-24

正是我需要的，非常感谢

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

TWaver Web 之入门

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

TWaver Web 之入门

评论

发表评论

相关推荐

字符串批量替换小工具(java版)

Java 如何同步顺序执行多个线程

Java 将List按照指定大小分段

ExtJs4 combobox默认选中值的解决方案

最近访客更多访客>>