使用JGraph在网页上显示拓扑图并添加鼠标事件的问题

Question

小弟现在在用JGraph绘制拓扑图，并要在网页中显示，以下就是我的工程和出现的问题以及期望达到的效果。请各位大虾不吝赐教
目录结构：
AppletTest
|——applet
        |——MouseDome.java
             AppletTest.java
             MouseDome.class
             AppletTest.class
|——jgraph.jar
    AppletTest.jar
    show.html
    myjsp.jsp源码：
AppletTest.java
package applet;
import applet.MouseDemo;import java.awt.*;
import java.awt.event.MouseEvent;
import java.awt.geom.Point2D;
import java.awt.geom.Rectangle2D;
import java.applet.*;
import java.net.MalformedURLException;
import java.net.URL;import javax.swing.JFrame;
import javax.swing.JMenuItem;
import javax.swing.JPopupMenu;
import javax.swing.JScrollPane;import org.jgraph.JGraph;
import org.jgraph.graph.DefaultCellViewFactory;
import org.jgraph.graph.DefaultEdge;
import org.jgraph.graph.DefaultGraphCell;
import org.jgraph.graph.DefaultGraphModel;
import org.jgraph.graph.DefaultPort;
import org.jgraph.graph.GraphConstants;
import org.jgraph.graph.GraphLayoutCache;
import org.jgraph.graph.GraphModel;public class AppletTest extends javax.swing.JApplet { /**
 * 
 */
private static final long serialVersionUID = 8439059306980975871L; public void init() {
try {
java.awt.EventQueue.invokeAndWait(new Runnable() {
public void run() {
showGraph();
}
});
} catch (Exception ex) {
ex.printStackTrace();
}
}

private void showGraph() {
// 创建model和graph实例
GraphModel model = new DefaultGraphModel();
GraphLayoutCache view = new GraphLayoutCache(model,
new DefaultCellViewFactory());
final JGraph graph = new JGraph(model);
graph.setSelectionCell(true);

final DefaultGraphCell[] cells = new DefaultGraphCell[9]; // 创建名为"First"的顶点cells[0]，以及其他各顶点
cells[0] = new DefaultGraphCell("First");
cells[1] = new DefaultGraphCell("Second");
cells[2] = new DefaultGraphCell("Third");
cells[3] = new DefaultGraphCell("Forth");
cells[4] = new DefaultGraphCell("Fifth"); // 依次设置各顶点的属性，包括位置、大小、边框颜色
GraphConstants.setBounds(cells[0].getAttributes(),
new Rectangle2D.Double(80, 20, 60, 60));
GraphConstants.setBorderColor(cells[0].getAttributes(), Color.black);
GraphConstants.setOpaque(cells[0].getAttributes(), true);
GraphConstants.setEditable(cells[0].getAttributes(), false);
GraphConstants.setAutoSize(cells[0].getAttributes(), true);
// 为顶点添加端口
DefaultPort fp = new DefaultPort();
cells[0].add(fp); GraphConstants.setBounds(cells[1].getAttributes(),
new Rectangle2D.Double(10, 180, 60, 60));
GraphConstants.setBorderColor(cells[1].getAttributes(), Color.black);
GraphConstants.setOpaque(cells[1].getAttributes(), true);
GraphConstants.setSizeable(cells[1].getAttributes(), false);
DefaultPort sp = new DefaultPort();
cells[1].add(sp); GraphConstants.setBounds(cells[2].getAttributes(),
new Rectangle2D.Double(160, 180, 60, 60));
GraphConstants.setBorderColor(cells[2].getAttributes(), Color.black);
GraphConstants.setOpaque(cells[2].getAttributes(), true);
DefaultPort thp = new DefaultPort();
cells[2].add(thp); GraphConstants.setBounds(cells[3].getAttributes(),
new Rectangle2D.Double(80, 180, 60, 60));
GraphConstants.setBorderColor(cells[3].getAttributes(), Color.black);
GraphConstants.setOpaque(cells[3].getAttributes(), true);
DefaultPort fop = new DefaultPort();
cells[3].add(fop); GraphConstants.setBounds(cells[4].getAttributes(),
new Rectangle2D.Double(10, 300, 60, 60));
GraphConstants.setBorderColor(cells[4].getAttributes(), Color.black);
GraphConstants.setOpaque(cells[4].getAttributes(), true);
DefaultPort fip = new DefaultPort();
cells[4].add(fip); // 创建边
DefaultEdge edge = new DefaultEdge();
// 设置边的源和目标端点，分别是两个顶点的端口
edge.setSource(cells[0].getChildAt(0));
edge.setTarget(cells[1].getChildAt(0));
// 将边作为一个cell对象装入cells集合中
cells[5] = edge;
// 设置边的属性
int arrow = GraphConstants.ARROW_CLASSIC;
GraphConstants.setLineEnd(edge.getAttributes(), arrow);
GraphConstants.setEndFill(edge.getAttributes(), true);
GraphConstants.setDisconnectable(edge.getAttributes(), false); DefaultEdge edge1 = new DefaultEdge();
edge1.setSource(cells[0].getChildAt(0));
edge1.setTarget(cells[2].getChildAt(0));
cells[6] = edge1;
int arrow1 = GraphConstants.ARROW_CLASSIC;
GraphConstants.setLineEnd(edge1.getAttributes(), arrow1);
GraphConstants.setEndFill(edge1.getAttributes(), true); DefaultEdge edge2 = new DefaultEdge();
edge2.setSource(cells[0].getChildAt(0));
edge2.setTarget(cells[3].getChildAt(0));
cells[7] = edge2;
int arrow2 = GraphConstants.ARROW_CLASSIC;
GraphConstants.setLineEnd(edge2.getAttributes(), arrow2);
GraphConstants.setEndFill(edge2.getAttributes(), true); DefaultEdge edge3 = new DefaultEdge();
edge3.setSource(cells[1].getChildAt(0));
edge3.setTarget(cells[4].getChildAt(0));
cells[8] = edge3;
int arrow4 = GraphConstants.ARROW_CLASSIC;
GraphConstants.setLineEnd(edge3.getAttributes(), arrow4);
GraphConstants.setEndFill(edge3.getAttributes(), true); // 将cells加入到GraphLayoutCache中
graph.getGraphLayoutCache().insert(cells);

        // 添加鼠标事件
graph.addMouseListener(new MouseDemo() {
public void mouseClicked(MouseEvent e) {
int x = e.getX();
int y = e.getY(); cells[0] = (DefaultGraphCell) graph.getSelectionCellAt(new Point2D.Double(x, y));
JScrollPane jsp = new JScrollPane(graph);
JPopupMenu jpm = new JPopupMenu();
JMenuItem jmi = new JMenuItem();
jmi.addActionListener(new java.awt.event.ActionListener() { public void actionPerformed(java.awt.event.ActionEvent evt) {
// TODO Auto-generated method stub
String urlStr = getCodeBase().toString() + "myjsp.jsp";
try {
getAppletContext().showDocument(new URL(urlStr), "_blank");
} catch (MalformedURLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}

});
jpm.add(jmi);
jpm.show(jsp, x, y);
}
}); // 在Frame中显示
JFrame frame = new JFrame();
frame.getContentPane().add(new JScrollPane(graph));
frame.pack();
frame.setVisible(true);

System.out.println(model.getChildCount(cells[0]));
System.out.print(getCodeBase()); }
}MouseDome.java
package applet;import java.awt.event.*;public class MouseDemo implements MouseListener { public void mouseClicked(MouseEvent e) {
// TODO Auto-generated method stub

} public void mouseEntered(MouseEvent e) {
// TODO Auto-generated method stub

} public void mouseExited(MouseEvent e) {
// TODO Auto-generated method stub

} public void mousePressed(MouseEvent e) {
// TODO Auto-generated method stub

} public void mouseReleased(MouseEvent e) {
// TODO Auto-generated method stub

}
};Show.html
<HTML>
<TITLE>HelloWorld! Applet</TITLE>
<APPLET code="applet.AppletTest.class" archive="AppletTest.jar, jgraph.jar" codebase="./" WIDTH=600 HEIGHT=600>
</APPLET>
</HTML>结果：
直接打开show.html文件，applet程序加载正常，绘制的拓扑图在弹出Java的小窗口中独立显示，鼠标点击图中的顶点，没有任何反应。期望：
1. 拓扑图能在网页中显示，而不是在Java的小窗口中显示
2. 点击图中的顶点，比如“First”顶点，可以弹出“myjsp.jsp”网页

Answer 1

按有几个群，你不妨加进去,可以和大家一起讨论啊.........46986340,28039577,4804620                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
在那里看看有无能回答你的,谢谢,LZ,甭忘了给俺分哦,谢谢LZ

Answer 2

呼，以上的问题已经解决了
换个问题，怎样实现自动布局呢？我现在是从数据库里读取数据，动态生成图形，出来时，顶点都是重叠在一起的，怎么实现自动布局呢？JGraph Layout Pro是要收费的，谁还有什么好办法没有？
可以追加分啊，高手现身吧

Answer 3

楼主，你好，你的问题解决了没，我现在遇到了类似的问题，想在jsp页面中显示 jgraph图形，不知道如何实现，你的这种实现方式（applet）我也试过，可是总也出不来图形，不知道什么原因呢，希望楼主给点指点，谢谢，我的QQ1102875406