| Current File : /home/jvzmxxx/wiki/extensions/InteractiveTimeline/chap-links-library/gwt/src/Network/doc/index.html |
<html>
<head>
<title>Network GWT documentation</title>
<link rel='stylesheet' href='default.css' type='text/css'>
<link href="prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<h1>Network GWT documentation</h1>
<p>
There is a GWT wrapper available to use the Network inside Google Web
Toolkit (GWT).
This documentation assumes you have Eclipse installed, and have GWT
installed in Eclipse.
</p>
<h2>Short guide</h2>
<p>
To use the GWT version of the Network, create a GWT project. Put a copy of the
modules <b><a href="http://almende.github.com/chap-links-library/downloads.html">gwt-links-network.jar</a></b> and
<b><a href="http://code.google.com/p/gwt-google-apis/downloads/" target="_blank">gwt-visualization.jar</a></b>
in a subfolder of your project (for example lib),
and add both jar-modules to your project via "Build path", "Configure Build Path...", "Add JARs...".
Then, add the following lines to the module file YourProject.gwt.xml:
</p>
<pre class="prettyprint lang-html"><!-- Other module inherits -->
<inherits name='com.google.gwt.visualization.Visualization'/>
<inherits name='com.chap.links.Network'/>
</pre>
<p>
Thats all, now you can use the Network visualization.
</p>
<p>
Open the main HTML file of your project, located in the directory war
(typically war/YourProject.html). In there, create a DIV the id "mynetwork".
</p>
<pre class="prettyprint lang-html">
<html>
<head>
...
</head>
<body>
...
<div id="mynetwork"></div>
...
</body>
</html> </pre>
<p>
Open the entry point java file of your project (typically YourProject.java),
and add code to create a datatable with nodes, create a datatable with links,
specify some options, and create a Network widget.
</p>
<pre class="prettyprint lang-java">
package com.yourproject.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.visualization.client.DataTable;
import com.google.gwt.visualization.client.VisualizationUtils;
import com.chap.links.client.Network;
/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class YourProject implements EntryPoint {
Network network = null;
/**
* This is the entry point method.
*/
public void onModuleLoad() {
// Create a callback to be called when the visualization API
// has been loaded.
Runnable onLoadCallback = new Runnable() {
public void run() {
// Create nodes table with some data
DataTable nodes = DataTable.create();
nodes.addColumn(DataTable.ColumnType.NUMBER, "id");
nodes.addColumn(DataTable.ColumnType.STRING, "text");
nodes.addRow();
int i = 0;
nodes.setValue(i, 0, 1);
nodes.setValue(i, 1, "Node 1");
nodes.addRow();
i++;
nodes.setValue(i, 0, 2);
nodes.setValue(i, 1, "Node 2");
nodes.addRow();
i++;
nodes.setValue(i, 0, 3);
nodes.setValue(i, 1, "Node 3");
// Create links table with some data
DataTable links = DataTable.create();
links.addColumn(DataTable.ColumnType.NUMBER, "from");
links.addColumn(DataTable.ColumnType.NUMBER, "to");
links.addRow();
i = 0;
links.setValue(i, 0, 1);
links.setValue(i, 1, 2);
links.addRow();
i++;
links.setValue(i, 0, 1);
links.setValue(i, 1, 3);
links.addRow();
i++;
links.setValue(i, 0, 2);
links.setValue(i, 1, 3);
// Create options
Network.Options options = Network.Options.create();
options.setWidth("300px");
options.setHeight("300px");
// create the visualization, with data and options
network = new Network(nodes, links, options);
RootPanel.get("mynetwork").add(network);
}
};
// Load the visualization api, passing the onLoadCallback to be called
// when loading is done.
VisualizationUtils.loadVisualizationApi(onLoadCallback);
}
}</pre>
<h2>Documentation</h2>
<p>
At the moment there is no documentation available for the GWT version of the
Network.
Please use the javascript documentation, which describes the
available methods, data format, options, events, and styles.
</p>
<p>
<a href="http://links.sf.net/network/js/doc">Javascript documentation</a>
</p>
<h2>Reference sites</h2>
<p><a href="http://code.google.com/p/gwt-google-apis/wiki/VisualizationGettingStarted" target="_blank">http://code.google.com/p/gwt-google-apis/wiki/VisualizationGettingStarted</a></p>
<div style="height:50px;"></div>
</body>
</html>