Sampler rethought

Frameworks are pretty hard to demo - they are just a pile of API that does not look much. It would take quite a while too long to see the beauty of the framework just by looking at the API. In case of UI frameworks, there is also a bunch of UI components, but even they are fairly hard to demo properly.

We first faced this problem in year 2002 when we open-sourced Vaadin (which was called Millstone 3 back then). The solution we came up with was called Feature Browser - a little application literally designed for browsing though the features our framework had.

Predecessor of Sampler from year 2002

Feature Browser immediately became a hit - something that defined how people perceived our framework. It was used for taking the first look into the framework, demoing the framework to others and learning how the features of the framework worked. Later on we started calling this application Sampler - to emphasize that it contains samples of the framework features you can play with.

With Vaadin 7 we decided to re-invent the Sampler. We wanted to find a fresh way of demonstrating the features of the framework, to give you more control over the demonstrated features and to go from demoing just the visual UI components to also revealing what is under the cover. We also built the infrastructure for demoing add-on components inside the Sampler - to be able to show that there are quite a few more features in Vaadin than what is included in the product core.

Built for demos

First of all - we want to get you to say WOW - regardless of whether you try Sampler by yourself or see someone else demoing it. We hope we succeed when you first try it out. After the magic of the animated transitions wears off, you probably start using the built in search functionality more than fly through the menus.

Flying through the samples gives you a taste of what Vaadin can do.

Everything in Sampler takes the center stage. At first it may seem minimalistic to put just one button in the middle of the screen under a spotlight. We want to give you an opportunity to put the features of Vaadin under your undivided focus one by one and to let you torture test them and see if all of the pixels are right. Details matter - these are the building blocks of your application.

Your guide to Vaadin

Sampler is not just a demo. It can also be a learning tool. For this every sample includes a description teaching you about the feature and includes pointers to Book of Vaadin and API. To experiment with the UI components, you can open up the properties dialog and modify the components on the fly and resize the area where the components reside. This should be much faster than trying out the properties in your own application.

You can modify the properties of the UI components to see how they behave.

One of the most powerful features is that the samples include source code - right inside Sampler. In fact, the source is in many cases half of the sample - it gives you an opportunity to study how to accomplish what you see on the screen.

Before you dive into the new Sampler, please remember that this is just the beginning of the new generation. We look forward to adding many new features and add-ons to Sampler later on. And while you are looking at the Sampler, please do us a favor and report the bugs you bump into.

Experience the new Vaadin Sampler!

well, besides the fact it has awesome features. I think I prefer the old one because I like the way it shows all things to see in a tree. Think it takes less time to watch everything.
Posted on 3/15/13 1:12 PM.
I'm sorry but I agree with Cristiano!
Posted on 3/15/13 1:34 PM.
I think that for a new user it's cool to discover the framework.
But it should allow "veterans" to browse the samples with a tree based way which is far easier when searching for something specific.
Posted on 3/15/13 1:59 PM.
Not bad, but please keep a tree based overview for us 'veterans' !
Posted on 3/15/13 2:10 PM.
as a new user - i just can say: wow :-)
Posted on 3/15/13 2:20 PM.
WOW emoticon

However, as a vaadin developer, I think that older vaadin sampler was more functional and usefull. I often use old sampler as a development tool as well.

Is it possible to have both samplers available?

Anyway, congrats, is fantastic!
Posted on 3/15/13 2:29 PM.
The tree is not only helpful for veterans, it also made it much easier for me to see what types of things Vaadin could do when I was evaluating whether I wanted to use it. The new demo is much harder to see and quickly explore what widgets are available -- I'd have been less likely to choose Vaadin for my project based on this new demo.
Posted on 3/15/13 2:52 PM.
The previous Sampler version is still accessible (and will be for the foreseeable future):

Apparently the search/sitemap isn't nearly as findable as it should be (the magnifier icon in the top right corner).

The new version contains all the old samples as well, but just structured in a different way (for example the layout samples we're combined into just different layout types, but they offer more functionality than the previous ones combined). The source codes for the samples are still available, but they don't yet adapt to the configuration you apply with the property editor, which is a feature we would like to add as soon as possible.
Posted on 3/15/13 3:17 PM in reply to Nathan Tolbert.
BTW, if someone want's to take a nostalgia trip back to 2002, I put the old feature browser on my Community Cloud server emoticon
Posted on 3/15/13 3:19 PM.
jeje, a lot of water has flowed under the bridge since then.
Posted on 3/15/13 3:34 PM in reply to Jouni Koivuviita.
We decided to see if people could live with just the sitemap/search - or if they really need (also) a tree view. Would have liked to keep the Sampler simpler - with only minimal set of functions. From this discussions and internal feedback it starts to sound like there is a clear demand for a complementary tree view.

Added a design task ticket for this: to implement this in the future. Meanwhile - try to embrace the search/sitemap.

If you think that tree view would be unnecessary if we could somehow make sitemap more clear, please comment on this thread.
Posted on 3/15/13 6:47 PM.
Yeah, once Jouni drew my attention to the sitemap/search, I see that that accomplished what I used the treeview for. I just didn't expect the magnifying glass icon to do anything but search. Making it more clear would make a huge difference from my perspective.

And thanks for listening to our feedback ...that's surprisingly rare these days ;-)
Posted on 3/15/13 7:04 PM in reply to Joonas Lehtinen.
I'm new to Vaadin - but what happened to the old sampler! That was my saving grace to find out about all the components.
The new thing is very wizzy, but not useful. Sorry.
Posted on 3/15/13 8:07 PM.
New Sampler is very sexy, but not very user friendly. It takes so much time to switch between components and features.
Posted on 3/15/13 9:21 PM.
Cool. I just remember my first ITMill-based application.
Wow. I have been using your framework more then 10 years...
I changed all others but not Vaadin.
Congratulation, guys, you have been creating extremely good framework.
Posted on 3/15/13 9:25 PM in reply to Jouni Koivuviita.
never to understand why ppl touching something that is nice .... it would be nice to have v7 sampler as v6, tnx good for API emoticon
Posted on 3/15/13 9:28 PM.
As a developer that has been teaching myself Vaadin for the past month or two, I found the old sampler really useful as I could see most of my component options with useful pictures all on one page.

I think if the new sampler had pictures (or the option for pictures) next to all the components shown in the sitemap view, that would satisfy me. But just the text makes it much more difficult to really see / navigate.

Also, first one I went to had no source! That confused me for a minute. The Errors one needs source code. (Old sampler had source code for errors.)
Posted on 3/16/13 6:31 AM.
My feelings are related to the other users/developers of vaadin. Older Sampler have a greater simplicity and functionality for me. WOW efect is cool, but if you open Sampler for the thousandth time it becomes annoying. Would be nice if one of the examples will show how to use animations to make such effects. Simple solutions are the best emoticon
PS. In some code examples you are using to much mental shortcuts e.g.
Posted on 3/16/13 8:52 AM.
My next proposition is to add tabs in code sample window that insted of using "..." to separate the relevant sections of each other.

That will be very usefull e.g. here
where you can make tabs like "Initialization", "", "tictactoe-connector.js"
Posted on 3/16/13 9:10 AM.
What a fresh look! Judging by the design of this new sampler, I can't help but feel optimistic about the direction that Vaadin is going. As much as I like the old one, presentation counts, and this one scores very highly.

Is there a chance that the new sampler source code will be made available? Thanks.
Posted on 3/16/13 7:28 PM.