Vaadin 7 video timeline


In my Vaadin app I need a 1 sec. resolution timeline component with drag-and-drop (from table to timeline, and also in timeline itself), resizing timeline contents and timebarmarker features, something like Adobe Premiere or Adobe After Effects timeline. I know that there is add-on called “Event Timeline”, but it has no drag-and-drop feature and it doesn’t support Vaadin 7. I’m looking for widget that will be Vaadin substitute of timeline from Jaret Timebars Package for Swing - . It’s already implemented in desktop version of our application. I attach a screenshot from this app.

I’m wondering what’s the best approach to my problem , I was thinking about rotating Vaadin Calendar widget in CSS, or maybe integrating Smart GWT Calendar widget into Vaadin. Have you ever encountered similar problem? If I had a Vaadin Pro account, would Vaadin devs help me get missing features of Vaadin Charts/Timeline?

Thanks in advance.

While this might be doable with tweaking e.g. the Calendar, I would recommend implementing a custom client side component instead. That way, you get full control over the features with less overhead and can tweak it further.

You could start with a CssLayout and DDCssLayout from the
add-on, then customize the client side to match your requirements. You can also take a look at the sources of other add-ons implementing drag and drop for inspiration and examples (
, Calendar etc.).

I know others have done somewhat similar views based on CssLayout and some customization and themeing. Getting the static view set up and a nice server side API should not be a big job, tweaking drag and drop functionality to behave exactly as you want (possibly shifting other entries while dragging, insertions, possible animations etc.) would probably be most of the work.

Sorry for not responding, we had to take care of other issues in our project unexpectedly. Thanks a lot, now we are trying to develop custom component, just like you said.

We would like to know how to make resizable panels on timeline, like JQuery resizable (, or some elements in Vaadin Sampler, ie. possibility of changing event duration in Vaadin Calendar. Unfortunately there is no source code avalible. Is there any standard way to do this, or there is necessity to extend standard elements with JavaScript?