There is a GWT wrapper available to use the Timeline inside Google Web Toolkit (GWT). This documentation assumes you have Eclipse installed, and have GWT installed in Eclipse.
To use the GWT version of the Timeline, create a GWT project. Put a copy of the modules gwt-links-timeline.jar and gwt-visualization.jar in a subfolder of your project (for example lib), and add both jar-modules to your project via "Build path", "Add external archives...". Then, add the following lines to the module file MyProject.gwt.xml:
<!-- Other module inherits --> <inherits name='com.google.gwt.visualization.Visualization'/> <inherits name='com.chap.links.Timeline'/> <!-- External stylesheets --> <!-- Include at least one stylesheet, else the stylesheets in --> <!-- external modules like Timeline.jar are not loaded...(bug?) --> <stylesheet src=""></stylesheet>Thats all, now you can use the Timeline.
First, we start create a new, default Web Application Project, and strip off all unneeded code and files.
<!-- Servlets -->
such that you have
the following contents remaining:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app
PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
<!-- Servlets -->
<!-- Default page to serve -->
<welcome-file-list>
<welcome-file>TimelineDemo1.html</welcome-file>
</welcome-file-list>
</web-app>
package com.chap.links.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
/**
* Entry point classes define onModuleLoad().
*/
public class TimelineDemo1 implements EntryPoint {
/**
* This is the entry point method.
*/
public void onModuleLoad() {
final TextBox txtName = new TextBox();
final Button btnHelloWorld = new Button("Click me");
txtName.setText("user");
// Add the button to the RootPanel
RootPanel.get("txtName").add(txtName);
RootPanel.get("btnHelloWorld").add(btnHelloWorld);
txtName.setFocus(true);
txtName.selectAll();
// Add a handler to close the DialogBox
btnHelloWorld.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
Window.alert("Hello " + txtName.getText() + "!");
}
});
}
}
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="TimelineDemo1.css">
<title>Timeline Demo 1</title>
<script type="text/javascript" language="javascript"
src="timelinedemo1/timelinedemo1.nocache.js"></script>
</head>
<body>
<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'
style="position:absolute;width:0;height:0;border:0"></iframe>
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<noscript>
<div style="color: red;">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
<h1>Timeline Demo 1</h1>
Enter your name: <span id="txtName"></span> <span id="btnHelloWorld"></span>
</body>
</html>
body {
font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
width: 800px;
}
h1 {
font-size: 150%;
font-weight: bold;
padding: 0;
margin: 1em 0 0 .3em;
}
h2 {
font-size: 110%;
}
Run the application and check if it works. Enter your name, and press the button. See if you get a message window saying "Hello name!". If everything works correct, you are ready to implement a Timeline.
Now we will add everything needed to use the Google Visualization Tools.
<!-- Other module inherits --> <inherits name='com.google.gwt.visualization.Visualization'/>
Check if your program still compiles after you restart your application (nothing is yet changed in the interface though).
<!-- Other module inherits --> <inherits name='com.google.gwt.visualization.Visualization'/> <inherits name='com.chap.links.Timeline'/> <!-- External stylesheets --> <!-- Include at least one stylesheet, else the stylesheets in --> <!-- external modules like Timeline.jar are not loaded...(bug?) --> <stylesheet src=""></stylesheet>
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="TimelineDemo1.css">
<title>Timeline Demo 1</title>
<script type="text/javascript" language="javascript"
src="timelinedemo1/timelinedemo1.nocache.js"></script>
<script type="text/javascript" language="javascript" src="timeline.js"></script>
</head>
<body>
<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'
style="position:absolute;width:0;height:0;border:0"></iframe>
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<noscript>
<div style="color: red;">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
<h1>Timeline Demo 1</h1>
<div id="mytimeline"></div>
</body>
</html>
package com.chap.links.client;
import com.chap.links.client.Timeline;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.visualization.client.DataTable;
import com.google.gwt.visualization.client.VisualizationUtils;
/**
* Entry point classes define onModuleLoad().
*/
public class TimelineDemo1 implements EntryPoint {
Timeline timeline = 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 a data table
DataTable data = DataTable.create();
data.addColumn(DataTable.ColumnType.DATETIME, "start");
data.addColumn(DataTable.ColumnType.DATETIME, "end");
data.addColumn(DataTable.ColumnType.STRING, "content");
DateTimeFormat dtf = DateTimeFormat.getFormat("yyyy-MM-dd");
// fill the table with some data
data.addRow();
data.setValue(0, 0, dtf.parse("2010-08-23"));
data.setValue(0, 1, dtf.parse("2010-08-30"));
data.setValue(0, 2, "Project A");
data.addRow();
data.setValue(1, 0, dtf.parse("2010-08-28"));
data.setValue(1, 2, "Meeting");
data.addRow();
data.setValue(2, 0, dtf.parse("2010-09-02"));
data.setValue(2, 2, "Phone Call");
data.addRow();
data.setValue(3, 0, dtf.parse("2010-09-03"));
data.setValue(3, 2, "Finished");
// create options
Timeline.Options options = Timeline.Options.create();
options.setWidth("100%");
options.setHeight("200px");
options.setStyle(Timeline.Options.STYLE.BOX);
options.setEditable(true);
// create the timeline, with data and options
timeline = new Timeline(data, options);
RootPanel.get("mytimeline").add(timeline);
}
};
// Load the visualization api, passing the onLoadCallback to be called
// when loading is done.
VisualizationUtils.loadVisualizationApi(onLoadCallback);
}
}
The style of the Timeline can be changed by applying a customized stylesheet.
This stylesheet cannot be referenced in the main HTML page of your project,
because the stylesheet must be loaded after the timeline is loaded.
Therefore, the stylesheet must be placed in a folder public, which must be
located in the same folder as the module file MyProject.gwt.xml and the
folders client, server, and shared.
To let GWT load the stylesheet, add a reference to the stylesheet in
the module file MyProject.gwt.xml:
<!-- Other module inherits --> <inherits name='com.google.gwt.visualization.Visualization'/> <inherits name='com.chap.links.Timeline'/> <!-- Customized stylesheet for the Timeline --> <stylesheet src="myCustomStylesheet.css"></stylesheet>
At the moment there is no documentation available for the GWT version of the Timeline. Please use the javascript documentation, which describes the available methods, data format, options, events, and styles.
http://code.google.com/p/gwt-google-apis/wiki/VisualizationGettingStarted