Vaadin Timeline

.setValue(cal.getTime());

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

.setValue("Sunday");

}

cal.add(Calendar.DAY_OF_MONTH, 1);

}

return container;

}

As you can see the event container does not differ a whole lot from the marker containers. In use however they differ since they are groupable they can be closely put together and still be usable and you can add click listeners to them so you can catch user events. More on the click listeners later.

So now we have our three data sources ready to be displayed in our application. In the next chapter we will use them with our Timeline and see how they integrate with it.

20.3.3. Create the Vaadin Timeline

Okay, now that we have out data sources lets look at the init-method in our Vaadin Application. Lets start by creating our timeline, so add the following line to the end of the init-method in MytimelinedemoApplication:

Timeline timeline = new Timeline("Our timeline"); timeline.setWidth("100%");

This will create the timeline we want with a 100 percent width. Now lets add our data sources to the timeline:

timeline.addGraphDataSource(createGraphDataSource(),

Timeline.PropertyId.TIMESTAMP,

Timeline.PropertyId.VALUE);

timeline.setMarkerDataSource(createMarkerDataSource(),

Timeline.PropertyId.TIMESTAMP,

Timeline.PropertyId.CAPTION,

Timeline.PropertyId.VALUE);

timeline.setEventDataSource(createEventDataSource(),

Timeline.PropertyId.TIMESTAMP,

Timeline.PropertyId.CAPTION);

And finally add the timeline to the window. Here is the complete init-method:

@Override

public void init() {

Window mainWindow = new Window("Mytimelinedemo Application"); Label label = new Label("Hello Vaadin user"); mainWindow.addComponent(label);

setMainWindow(mainWindow);

// Create the timeline

Timeline timeline = new Timeline("Our timeline");

// Create the data sources

Container.Indexed graphDS = createGraphDataSource(); Container.Indexed markerDS = createMarkerDataSource(); Container.Indexed eventDS = createEventDataSource();

// Add our data sources timeline.addGraphDataSource(graphDS,

Create the Vaadin Timeline

447

Vaadin Timeline

Timeline.PropertyId.TIMESTAMP,

Timeline.PropertyId.VALUE);

timeline.setMarkerDataSource(markerDS,

Timeline.PropertyId.TIMESTAMP,

Timeline.PropertyId.CAPTION,

Timeline.PropertyId.VALUE);

timeline.setEventDataSource(eventDS,

Timeline.PropertyId.TIMESTAMP,

Timeline.PropertyId.CAPTION);

mainWindow.addComponent(timeline);

}

Now you should be able to start the application and browse the timeline. The result is shown in Figure 20.11, “Timeline Example Application”.

Figure 20.11. Timeline Example Application

20.3.4. Final Touches

Now that we have our timeline we would probably like to customize it a bit. There are many things you can do but lets start by giving our graph some style properties and a caption in the legend. This can be done as follows:

//Set the caption of the graph timeline.setGraphLegend(graphDataSource, "Our cool graph");

//Set the color of the graph timeline.setGraphOutlineColor(graphDataSource, Color.RED);

//Set the fill color of the graph timeline.setGraphFillColor(graphDataSource, new Color(255,0,0,128));

//Set the width of the graph timeline.setGraphOutlineThickness(2.0);

Lets do the same to the browser areas graph:

//Set the color of the browser graph timeline.setBrowserOutlineColor(graphDataSource, Color.BLACK);

//Set the fill color of the graph timeline.setBrowserFillColor(graphDataSource,

new Color(0,0,0,128));

And the result looks like this:

448	Final Touches

Vaadin Timeline

Figure 20.12. Styling Timeline

Okay, now that looks different. But there is still something missing. If you look in the upper left corner you will not see any zoom levels. No zoom levels are predefined so we will have to make our own. Since we are dealing with a month of data lets make a zoom level for a day, a week and a month. Zoom levels are given in milliseconds so we will have to calculate how many milliseconds each of the zoom levels are. So lets add them by adding the following lines:

// Add some zoom levels timeline.addZoomLevel("Day", 86400000L); timeline.addZoomLevel("Week", 7 * 86400000L); timeline.addZoomLevel("Month", 2629743830L);

Remember the events we added? You can now see them in the graph but their functionality is still a bit incomplete. We can add an event listener to the graph which will send an event each time the user clicks on one of the event buttons. To demonstrate this feature lets add an event listener which notifies the user what date the Sunday-button represents. Here is the code for that:

// Listen to click events from events timeline.addListener(new Timeline.EventClickListener() {

@Override

public void eventClick(EventButtonClickEvent event) { Item item = eventDataSource.getItem(event.getItemIds()

.iterator().next()); Date sunday = (Date) item.getItemProperty(

Timeline.PropertyId.TIMESTAMP).getValue(); SimpleDateFormat formatter =

new SimpleDateFormat("EEE, MMM d, ''yy");

MyTimelineDemo.this.getMainWindow()

.showNotification(formatter.format(sunday));

}

});

Now try clicking on the events and see what happens!

And here is the final demo application, yours will probably look a bit different since we are using random data.

Final Touches

449

Vaadin Timeline

Figure 20.13. Final Example

Now we hope you have a basic understanding of how the Vaadin Timeline works and how it can be customized. There are still a few features we left out of this tutorial like hiding unnecessary components from the timeline and adding multiple graphs to the timeline, but these are pretty self explanatory features and you probably can look them up in the JavaDoc.

We hope you enjoy the Vaadin Timeline and find it useful in your projects!

450	Final Touches