It's demo time

We’re releasing our new Vaadin demo application, QuickTickets Dashboard, to the public today. It’s an application that I’ve been planning to create for some time and I hope that you find it a useful demonstration of what you can do with Vaadin.


Let me discuss a bit about the motivation for the demo before going for the meat, its design.


For quite a long time now, the Sampler has been the main demo application for Vaadin. Originally designed sometime during '07–'08, when Vaadin was still called IT Mill Toolkit, it also had the purpose of being the main source code example repository for developers.

Sampler has fulfilled its part in showcasing Vaadin very well, even though some of the core features are missing from the examples. However, as a demo of what Vaadin is generally intended and used for, it doesn’t really have any value. We have created MobileMail as the main mobile application demo for the Vaadin TouchKit add-on, but we have been lacking in the desktop application demo department for a very long time.

Certainly, we’ve had the Address Book application, but that was designed only as a coding tutorial, not so much as an example of an application that could be accomplished using Vaadin. And let’s face it – it looks quite bad, even though the Runo theme tries its best to make it pretty. And also, it only reflects a very limited set of features of what Vaadin has to offer (no drag’n’drop for instance).

The Vaadin UX

Even though Sampler is currently being redesigned and reimplemented, we’ve had ideas about making a more “real” demo application before. Those ideas haven’t materialised, mainly because of other priorities.

You may have heard the name “QuickTickets” before. It was the fictional name for a movie ticket selling company in our Vaadin scalability study. You can learn about the scalability study from the Dock magazine or the blog post.

So, we thought it would be suitable to continue with the ticket sales theme and consider what an administrator view for the service would look like. Such an application is more in line what Vaadin is typically used for, unlike the front-facing ticket sales site we benchmarked in the scalability study. And what would be more contemporary than a dashboard for management personnel ;).

The initial design was drafted pretty quickly, and it’s mostly what ended up in the final application as well. It was a very blurry-around-the-edges kind of design, and a lot of things ended up being designed ad-hoc when I was implementing it.

The main purpose of the application is to give an idea how a typical Vaadin application might look and feel like to use, and also highlight some of the more advanced Vaadin features. I hope you like it – and if so, you’re welcome to borrow any ideas from it.

Rock it out!

Go and try it out yourself. Feel free to click/drag/poke at anything, you can’t cause any damage with any actions.

There are a few of things you should try out:

The sign in screen is there just to note that most Vaadin applications implement some sort of authentication. You can try giving it any username and password to see a neat little notification about wrong credentials. Use empty values to actually access the application.

In the “Dashboard” view, you can try resizing your browser window and see how different parts of the UI, even the charts, scale accordingly in real time. You can also try the browser zoom (full or text zoom) and see everything scale nicely.

The “Sales” view features the Timeline add-on (now part of the Vaadin Charts add-on), which allows you to browse huge continuous data sets. You can use the selection area at the bottom of the view to change the time range and move through the data. The actual demo data is still a bit scarce, but we’ll implement more fine-grained data in the future, so you can zoom in and out more.

Use the combo box in the top area to add more data sets to the timeline (there are currently only four colors specified for the data sets, so after four the data gets a bit hard to read).

The “Transactions” view lets you scroll through a large amount of tabular data, lazy loaded similarly as with the timeline. When lazy loading the data, the browser only gets the part of the data which is actually visible on the screen, not all of the thousands of items.

You can filter the rows by country and city using the filter field above the table, and then select multiple rows from the table and drag them onto the “Reports” tab to create a new report out of those items. The same can be accomplished by clicking the button in the top right corner or by using the context menu in the table.

In the “Reports” view, you can open a pre-created draft report and edit that, or create a blank report. The editor lets you drag three different types of items onto the canvas/paper (an editable text block, a pre-created table, and a pre-created chart). You can also rearrange the items on the canvas by dragging them around.

You can also click on the title of the report to edit it. The title is updated to the tab caption as you type it.

Finally, the “Schedule” view lets you use the Vaadin Calendar add-on to rearrange the schedule of a movie theater. There are no restrictions on how you can rearrange them, so you could drag all the movies into one day, for instance. You can click on the events to see their details.

A peek at the back-stage

The application is built using Vaadin 7 RC1, which allowed me to use all the great new layouts and Sass features that are most welcome for a theme developer like myself. Adjusting white-space and aligning components was always kind of tedious in Vaadin 6, but that’s definitely not the case with Vaadin 7. You can throw pretty much any CSS at the layouts and they work as you’d expect. Also, the lighter DOM structure and cleaner CSS class names give you plenty of hooks to which you can apply the styling easily.

I should probably also mention that by leaving the support for our beloved IE 6 & 7 behind in Vaadin 7, you can now focus on the actual look of the application and not on CSS tricks and hacks.

When I started implementing the demo during the first beta release of Vaadin 7, the Sass compiler implementation in Vaadin was at its early stages at that time. The demo worked as a kind of a proving ground for the compiler. I stumbled upon many issues during the development, most of which are now happily resolved.

Because of this, I didn’t end up using as much Sass as I would have wanted to (didn’t have time to refactor the stuff I developed early on). Nevertheless, sprinkling even small bits and pieces of Sass shows the power and flexibility it offers in styling Vaadin applications – the border-radius mixin alone is enough to save a couple of dozen lines of CSS to write. I can’t really imagine going back anymore!

As I already pointed out, the app used a couple of Vaadin add-ons, on top of the vanilla Vaadin:

The movie data is fetched using the Rotten Tomatoes API, the country and city names are stored in a text file, and all other data is generated randomly.

The application supports all the browsers Vaadin 7 supports. Some of the CSS won’t work in older browsers, but the application degrades quite gracefully in those situations. As a side note, I can count the browser specific CSS fixes on the fingers of one hand, which really gives you an idea how pleasant it is to work with Vaadin and modern browsers.

Even though the application was designed purely for desktop use, you can try it on a new iPad and see that it works just fine without any modifications.


The after-party

In all of its glory, this demo isn’t without issues. There are a couple of things that are still bugging me and things that I want to clarify to all of you.

In my previous blog post, I explained a bit about the process of the upcoming Vaadin 7 theme and its design. The demo application which I mentioned there was indeed QuickTickets Dashboard. Even though the demo has been a playground for ideas about the upcoming theme, none of it has been set in stone yet, so do not expect the Vaadin 7 theme to look anything like this application. It might look a lot, a bit or nothing like it, I give no guarantees.

This project has been pretty much my solo effort (apart from the core and add-ons and testing), so there are possibly some bugs lurking around the corners. Don’t panic if you encounter one – instead, report it, and I will be plenty happy (you can use the comment section in this blog).

And because of the ad-hoc design, as I mentioned earlier, the use cases are a bit bogus and unrealistic, and the application flow isn’t completely what I hoped it would be. Plenty of ideas were left unimplemented, which I hope to correct in the next iteration.

As this is an example of a Vaadin user experience, not in coding style, I did not put the source code available. I might share it later on if I can find time to clean it up. (Source is available now, see below)

There you have it. Show it to your friends and family to impress them and show what a Vaadin application can do in the browser, without any browser plugins. Comments and questions are again welcome, just add yours below.

>> Try the demo

PS. This is also a good showcase on what kind of apps the Vaadin team builds for their customers. If we could be of any help, please be in touch.

Update 2/20/13

The source code is now available on GitHub.

Looks good! The transactions table seems to have some encoding issues, though. Special characters in names like Bogotá and São Paulo show up as diamonds with question marks on my Chrome 24 on Mac (check that your Eclipse didn't "help" you by setting your project source encoding to MacRoman).
Posted on 1/24/13 11:26 PM.
thats really awesome. Best part is the theme and skin. How do us vaadin 7 users get a hold of this theme in rc1? Can you release it? Just converting to this theme alone will give a major sense of polish to all our apps.
Posted on 1/25/13 12:08 AM.
Ok this sidebar and thos notification badges are way too awesome. Please let them be part of Vaadin 7.
Posted on 1/25/13 9:35 AM.
Thanks! And thanks for pointing out. Somehow the encoding issue only appeared once I deployed it to our demo server.

The issue should be gone now.
Posted on 1/25/13 1:11 PM in reply to Marcus Hellberg.
About the theme/skin: the plan is to make this publicly available as soon as possible, but I don't know the exact schedule yet.
Posted on 1/25/13 1:16 PM.
Oh my Goshhhh from a vaadin beginner (like me) point of view this is really too Awesome and very very Inspiring, for me not to ask some technical info. I understand that you're not releasing the source today, but for now can you please give some clue or guiding principle for the UI ? For exemple :
- Did you implement some component using client Side Widget ( view, login screen etc ...) ? if yes wich One ?
- Did you for general Layouting, use CustomLayout, CssLayout or VerticalLayout or others Layout ? in particular for all the Login View ( loginscreen + welcome to dashboard tip)

I'm Particularly impressed by the first screen ( eg . Login view ) wow . I mean all the smooth effect . Please i need that wow effect in my app. I really like to know how you bring the login screen with that " fade in effect". I mean did use an addon or not ?

Any tips describing Ui is welcome

Again Thank you for this Inspiring Blog Post

Posted on 1/25/13 2:18 PM in reply to Jouni Koivuviita.
Wow, thats some kind of awesome stuff! Nice seeing the charting in action, and yes, definitively like to see that theme to be shipped with V7!
Posted on 1/25/13 8:59 PM.
esta increible esta demo del dashboard, solo una cosa cuando paso el mouse sobre el menu DASHBOARD me aparece un mensaje emergente con esta inforomacion.

com.vaadin.server.ServerRpcManager$RpcInvocationException: Unable to invoke method click in com.vaadin.shared.ui.button.ButtonServerRpc at com.vaadin.server.ServerRpcManager.applyInvocation( at com.vaadin.server.ServerRpcManager.applyInvocation( at com.vaadin.server.AbstractCommunicationManager.handleBurst( at com.vaadin.server.AbstractCommunicationManager.handleVariables( at com.vaadin.server.AbstractCommunicationManager.handleUidlRequest( at com.vaadin.server.VaadinServlet.service( at com.vaadin.server.VaadinServlet.service( at javax.servlet.http.HttpServlet.service( at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter( at org.apache.catalina.core.ApplicationFilterChain.doFilter( at org.apache.catalina.core.StandardWrapperValve.invoke( at org.apache.catalina.core.StandardContextValve.invoke( at org.apache.catalina.core.StandardHostValve.invoke( at org.apache.catalina.valves.ErrorReportValve.invoke( at org.apache.catalina.core.StandardEngineValve.invoke( at org.apache.catalina.connector.CoyoteAdapter.service( at org.apache.coyote.http11.Http11Processor.process( at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process( at$ at Caused by: java.lang.reflect.InvocationTargetException at sun.reflect.GeneratedMethodAccessor70.invoke(Unknown Source) at sun.reflect.DelegatingMethodAccessorImpl.invoke( at java.lang.reflect.Method.invoke( at com.vaadin.server.ServerRpcManager.applyInvocation( ... 19 more Caused by: com.vaadin.event.ListenerMethod$MethodException: Invocation of method buttonClick in com.vaadin.demo.dashboard.QuickTicketsDashboardUI$5 failed. at com.vaadin.event.ListenerMethod.receiveEvent( at com.vaadin.event.EventRouter.fireEvent( at com.vaadin.server.AbstractClientConnector.fireEvent( at com.vaadin.ui.Button.fireClick( at com.vaadin.ui.Button$ ... 23 more Caused by: java.lang.IndexOutOfBoundsException: Start index exceeds container size! startIndex=10 containerLastItemIndex=0 at at at com.vaadin.demo.dashboard.DashboardView.<init>( at sun.reflect.GeneratedConstructorAccessor71.newInstance(Unknown Source) at sun.reflect.DelegatingConstructorAccessorImpl.newInstance( at java.lang.reflect.Constructor.newInstance( at java.lang.Class.newInstance0( at java.lang.Class.newInstance( at com.vaadin.navigator.Navigator$ClassBasedViewProvider.getView( at com.vaadin.navigator.Navigator.navigateTo( at com.vaadin.demo.dashboard.QuickTicketsDashboardUI$5.buttonClick( at sun.reflect.GeneratedMethodAccessor71.invoke(Unknown Source) at sun.reflect.DelegatingMethodAccessorImpl.invoke( at java.lang.reflect.Method.invoke( at com.vaadin.event.ListenerMethod.receiveEvent( ... 27 more
Posted on 1/26/13 5:45 PM.
The eye candy level on this demo is definitely sufficient :-)

However, for it to be a real reassuring Vaadin-7-is-awesome showcase the performance should be looked at a bit. Several pages on first load appear only after 5+ seconds which is not so nice. Also got the " Unable to invoke method click " exception already mentioned before.
Posted on 1/28/13 8:28 AM.
Yeah, I agree, the perfo is not up to what we would want it to be. There are a couple of things I could do on the theme side to make the loading a bit faster, and the initial widgetset could be optimazed to make the login screen load snappy.

As for the actual bugs, we're looking into them at the moment. The button invocation exception sounds nasty, since it only appears to some users, and seldom.
Posted on 1/28/13 9:17 AM in reply to Jorg Heymans.
The server was experiencing some difficulties over the weekend that resulted in very slow performance for me at least. It seems to be fixed now.
Posted on 1/28/13 4:34 PM in reply to Jorg Heymans.
Looks very impressive.

Just one little visual bug. On the transaction screen, if you click on a header name it sorts ascending/descending. All the sorting works ok. However, if you click on the "Time" header - it appears to double the height of the header component. It is like the up/down triangle doesn't fit quite right. Works ok on the other columns.

(Running firefox 18.0 on linux, also a firefox 16 on windows combination)
Posted on 1/30/13 7:01 AM.
Thanks for pointing that out, the sort indicator should be fixed now.

Also, we found one culprit that was causing bad performance on the server, which should also be fixed now.

I managed to optimize the startup speed a bit at the same time, by using Artur's Widget Set Optimizer add-on. The initial download size went from 590kB to 234kB.

The request count was also reduced by a couple of stylesheet files now that I took the time to concatenate all the possible styles together using the Sass compiler (this was previously not possible because of some bugs in the compiler).
Posted on 1/30/13 8:47 AM in reply to Joe Evans.
There was a bad performance problem in the demo. It is now fixed.
Posted on 1/31/13 5:49 PM in reply to Jorg Heymans.
Great looking demo. Is there any chance to get insights of the scss file and the source code? I'm especially interested how you implemented and styled the dashboard view.

It would be great if you could share it

Thanks a lot in advance
Posted on 1/31/13 9:20 PM.
Aesthetically, this demo is amazing. Sincerely hope that the theme makes it into Vaadin 7 or at least detailed instructions made available on what customisations you've made so we can have a go at blending our own. Seriously nice work.

Also loving the more serious stuff like dragging the transactions into the report window and the use of Vaadin Charts on the dashboard.

On another note, I find demos like this are better than the sampler in some respects - they give you a much better idea of how different components can be implemented, and in what ways they can be tweaked/altered. Whilst the sampler is good for an interactive (and definitely necessary) reference manual, this stuff makes Vaadin shine and really gives it life. Would be great to see it extended further (and further...) and act as a complementary aid to the sampler.

Keep up the good work!

> About the theme/skin: the plan is to make this publicly available as soon as possible, but I don't know the exact schedule yet.

Holding you to this!! emoticon
Posted on 2/3/13 12:34 AM.
Very nice demo. I'd be very interested in having a look at the source code, as this will be very inspiring. Please release the code. No problem if it is not "nice", because only fragments, type of components used, etc... will help a lot for a beginner.
Posted on 2/3/13 10:27 AM.
Oliver, Luke, Die: Thanks!

Luke: That's pretty much how we feel also. So we're still keeping Sampler around and up-to-date (you should expect the new version before before April latest), but the Dashboard demo will be the main point of entry for our demos, and you should expect extensions/iterations to it.

I don't know if it would be a good idea, but we could open source the code for the demo on GitHub, and let you guys suggest ideas through GitHub issues. What do you think?

Luke, Die: Fear not, I'm totally committed into making the source available - in all of its spagetti-horridness if nothing else - and also making blog series about how some aspects in it are achieved/implemented.
Posted on 2/4/13 9:08 AM.
It would be great if you could release it on GitHub and let the community help to improve the demo.
Posted on 2/4/13 9:14 AM in reply to Jouni Koivuviita.
Thanks for the feedback Jouni. And yea publishing it on GitHub would be ideal and I'd definitely take part in any debugging/feature suggestion process as a result. Accompanying blog posts would be perfect!
Posted on 2/4/13 11:06 AM in reply to Jouni Koivuviita.