Vaadin Timeline

Zoom levels are also fully customizable. Zoom levels are defined as milliseconds and can be added by calling the addZoomLevel() method. A zoom level always has a caption, which is the visible part in the zoom panel, and a millisecond amount.

By default the grid divides the graph into five equally spaced parts with a gray color. However, you can fully customize how the grid is drawn by using setGridColor() and setVerticalGridLines().

20.2.4. Localization

By default the Vaadin Timeline uses English as its primary language for the captions and the default locale for the application to display the dates in the timeline.

You can change the different captions in the Timeline by using their corresponding setters:

•setZoomLevelsCaption() -- The caption appearing before the zoom levels

•setChartModesCaption() -- The caption appearing before the chart modes

Furthermore, you can also change the locale in which the Timeline shows the dates in the horizontal scale by specifying a valid locale using the setLocale() method of the timeline.

You can also configure in what format the dates appear in the horizontal scale or in the date select in the top-right corner by using the getDateFormats()-method which will return a DateFormatInfo object. By using its setters you can set specific formats for each date range in the scale. Please note that if you are using long date formats they might get clipped if the scale does not fit the whole formatted date.

20.3. Code example

20.3.1. Prerequisites

To get started using the Vaadin Timeline component you should first download the Vaadin eclipse plugin and install it. More information on getting it can be found at http://vaadin.com/eclipse.

Once you got the plugin installed create an example project by selecting File New Other and select Vaadin Project. Lets call it MyTimelineDemo.

442	Localization

Vaadin Timeline

Figure 20.8. New Timeline Project

When the project is created you should add the Vaadin Timeline library to your project. This can be done by copying the timeline-*.jar to the projects WebContent/WEB-INF/lib directory. When you copy the library into the folder you might get the message shown in Figure 20.9, “Widget set compilation”.

Figure 20.9. Widget set compilation

You should answer Yes and let the widgetset get compiled. If you do not get the above message or you answer No then you have to compile the widgetset manually by selecting the icon. It might take a while until the widgetset gets compiled depending of how much resources your computer have.

Once the compilation is done the project file structure should look something as shown in Figure 20.10, “Timeline Example Project”.

Prerequisites

443

Vaadin Timeline

Figure 20.10. Timeline Example Project

Now you are ready to start developing with the Vaadin Timeline!

20.3.2. Create the data sources

To use the Vaadin Timeline you need to create some data sources for it. The Vaadin Timeline uses Container.Indexed containers as data sources for both the graphs and the markers and events. So lets start by creating a datasource which represents the graph we want to draw in the timeline.

For the Vaadin Timeline to understand how the data is constructed in the container we need to use specific property ids which describe what kind of data each property represents. For the Vaadin Timeline to work properly we will need to add two property ids, one for when the value was acquired and one for the value itself. The Vaadin Timeline has these both properties predefined as Timeline.PropertyId.TIMESTAMP and Timeline.PropertyId.VALUE. You can use the predefined ones or create your own if you wish.

So, lets create a container which meets the above stated specification. Open the main application class which was automatically created when we created the project (in our case

MytimelinedemoApplication.java) and add the following method.

/**

* Creates a graph container with a month of random data */

public Container.Indexed createGraphDataSource(){

// Create the container

Container.Indexed container = new IndexedContainer();

// Add the required property ids (use the default ones here) container.addContainerProperty(Timeline.PropertyId.TIMESTAMP,

Date.class, null);

444	Create the data sources

Vaadin Timeline

container.addContainerProperty(Timeline.PropertyId.VALUE, Float.class, 0f);

// Add some random data to the container Calendar cal = Calendar.getInstance(); cal.add(Calendar.MONTH, -1);

Date today = new Date();

Random generator = new Random();

while(cal.getTime().before(today)){ // Create a point in time

Item item = container.addItem(cal.getTime());

//Set the timestamp property item.getItemProperty(Timeline.PropertyId.TIMESTAMP)

.setValue(cal.getTime());

//Set the value property item.getItemProperty(Timeline.PropertyId.VALUE)

.setValue(generator.nextFloat());

cal.add(Calendar.DAY_OF_MONTH, 1);

}

return container;

}

This method will create an indexed container with some random points. As you can see we are using an IndexedContainer and define two properties to it which was discussed earlier. Then we just generate some random data in the container. Here we are using the default property ids for the timestamp and value but you could use your own if you wished. We'll see later how you would tell the Timeline which property ids to use if you used your own.

Next, lets add some markers to our graph. Markers are arrow like shapes in the bottom of the timeline with which you can mark some occurrence that happened at that time.To create markers you again have to create a data source for them. I'll first show you how the code to create them and then explain what it all means. Add the following method to the main Application class:

/**

* Creates a marker container with a marker for each seven days */

public Container.Indexed createMarkerDataSource(){

// Create the container

Container.Indexed container = new IndexedContainer();

//Add the required property IDs (use the default ones here) container.addContainerProperty(Timeline.PropertyId.TIMESTAMP,

Date.class, null); container.addContainerProperty(Timeline.PropertyId.CAPTION,

String.class, "Our marker symbol"); container.addContainerProperty(Timeline.PropertyId.VALUE,

String.class, "Our description");

//Add a marker for every seven days

Calendar cal = Calendar.getInstance(); cal.add(Calendar.MONTH, -1);

Date today = new Date(); SimpleDateFormat formatter =

new SimpleDateFormat("EEE, MMM d, ''yy"); while(cal.getTime().before(today)){

// Create a point in time

Item item = container.addItem(cal.getTime());

// Set the timestamp property

Create the data sources

445

Vaadin Timeline

item.getItemProperty(Timeline.PropertyId.TIMESTAMP)

.setValue(cal.getTime());

//Set the caption property item.getItemProperty(Timeline.PropertyId.CAPTION)

.setValue("M");

//Set the value property item.getItemProperty(Timeline.PropertyId.VALUE).

setValue("Today is "+formatter.format(cal.getTime()));

cal.add(Calendar.DAY_OF_MONTH, 7);

}

return container;

}

Here we start the same as in the example with the graph container by creating an indexed container. Remember, all containers must be indexed containers when using the graph component.

We then add the timestamp property, caption property and value property.

The timestamp property is the same as in the graph container but the caption and value property differ. The caption property describes what kind of marker it is. The caption is displayed on top of the arrow shape in the Timeline so it should be a short symbol, preferably only one character long. The class of the caption property must be String.

The value property should also be a string and is displayed when the user hovers the mouse over the marker. This string can be arbitrarily long and normally should represent some kind of description of the marker.

The third kind of data sources are the event data sources. The events are displayed on top of the timeline and supports grouping and are clickable. They are represented as button like icons in the Timeline.

The event data sources are almost identical the to marker data sources except the value property is missing. Lets create an event data source and add events for each Sunday in out graph:

/**

* Creates a event container with a marker for each sunday */

public Container.Indexed createEventDataSource(){

// Create the container

Container.Indexed container = new IndexedContainer();

//Add the required property IDs (use the default ones here) container.addContainerProperty(Timeline.PropertyId.TIMESTAMP, Date.class, null); container.addContainerProperty(Timeline.PropertyId.CAPTION, String.class, "Our marker symbol");

//Add a marker for every seven days

Calendar cal = Calendar.getInstance(); cal.add(Calendar.MONTH, -1);

Date today = new Date(); while(cal.getTime().before(today)){ if(cal.get(Calendar.DAY_OF_WEEK) == Calendar.SUNDAY){

// Create a point in time

Item item = container.addItem(cal.getTime());

// Set the timestamp property item.getItemProperty(Timeline.PropertyId.TIMESTAMP)

446	Create the data sources