Introduction

The timeline component creates a calendar-like view that uses a single x-axis (as opposed to a monthly calendar that uses a new x-axis for each week). As can be seen in the screenshot below it can be decorated with different types of data such as continuous time data (the blue line in the snapshot) and time point data.

The screenshot above shows both the timeline component and a JTable where the JTable has been configured (using the Glazed Lists API) to listen to changes on the time point events on the timeline (the green, yellow and red lines represent a time point event).

Try it

To try the timeline widget for yourself, check it out from subversion and configure the dependencies as needed. If you use Eclipse this should be particularly easy because there is an eclipse .properties file checked in with the project. Once you've added all the jars from the lib directory to the classpath, run the class DemoTimelineAndTableCombined to see the timeline working. Clicking on the blue line will print the tide level at that point in time to standard out. Dragging any of the vertical colored lines will move the time event that those lines correspond to.

Details

Here is some detailed information about the timeline component, in no particular order...

User Interaction

The panning of the timeline is taken care of in TimelineCanvas as is done by shifting the cameras view. The timeline can be panned by dragging the mouse or by using the arrow keys. You can look at the KeyListener in the TimelineCanvas code to see the way the arrow key handling is done (it shifts the timeline one screen width at a time).

The movement of individual events is handled by each event itself, to see this refer to EventNode.java

TimeAndMoney API

When working with Piccolo (or any time you're drawing a representation of some model to screen) it is very useful to have a consistent and easy API for translating from the 2d drawing coordinate space to the data domains coordinate space. In this timeline API the (excellent) TimeAndMoney API is used for the data domain rather than standard java.lang.Date objects. This made it much easier to cleanly perform conversions back and forth between Piccolo's display coordinates and time values. To see how these conversions are handled refer to the Timeline class.