As I mentioned in a recent-blog post, we had a internal Vaadin-application competition as a part of our Vaadin 6 launch-party. Here are some highlights from it, more to come later! I’m linking to each programmers own profile-page aswell so you can find them and ask tough questions about what they used and how etc but it’d be nice if you kept the discussion here so others can join :). Links to the applications in question can be found in their profiles aswell so you can try them out for yourself - please note that most of these are proofs of concepts and demos so they can be rough around the edges.
Peter created a very nice Photo Gallery program that has a very clean interface:
We also had a couple of contestants with UI-components that we will surely try to get into the incubator soon! (try them out, they have nice animations)
I am curious to what can be done with Vaadin. We are developing a web app (yes, app, not website) with Wicket and the wicket component model is a bit labourious in parts where you have chained combos and selects, etc. The programmer must manage the ajax refreshs (i.e., which component will be updated after a specific click). Is there similar problem with Vaadin?
Anyways… to the gallery… we are developing a Web App but we want it to have Website-Look-And-Feel. I.e., not swing-look-and-feel Can this be done and how laborious is it to “custom-skin” a Vaadin app?
I would like to see a Gallery of various Vaadin Skins
No need to burden yourself with Ajax refreshes with Vaadin, the framework takes care of all the state changes for you. You just program your app like a desktop app, i.e. composing plain components and listeners into a larger view.
On to the themes then. Me being the main-man theme-wise inside the Vaadin team, I must say doing a complete makeover for Vaadin is not for the faint-of-heart. Getting all nuts and bolts working across all supported browsers really requires you to know your CSS. The new Reindeer theme took on estimate 1 man month to design and code. Buuuut…
That doesn’t mean making a theme for your app would be a mountain of work. If you’re not aiming
too high, you can get pretty amazing results really fast.
For starters, you don’t have to worry about any layout-related CSS, because Vaadin provides really robust and flexible layout components that work consistently across browsers. A good example is the iTunes layout imitation I did a while back, which took me only a day to accomplish, and I really didn’t have to test at all with different browsers. Even IE6 “just worked”. You can read and see
more about the iTunes knock-off from this thread .
So you’re left with the actual component DOM structures, that you must style using plain-old CSS, so you’re not restricted to any predefined look-and-feel. You could point me to a specific website-look-and-feel example, and I might be able to give some more precise pointers to how laborious it would be to achieve it with Vaadin.
We currently don’t have any other themes/skins for Vaadin than the Runo and Reindeer themes that come with the default package. Have you seen both? On top of those, we might be able to strip another theme, though incomplete, from Testing Tools. You can see that theme on the
Testing Tools live demo .
I have been planning on doing a series of blog posts about creating custom widget themes for Vaadin on
my personal page . Haven’t found enough time yet, but if there’s enough interest, I think I could steal some hours from actual product development
Martin, regarding your note about the webapp like a web page, not like a swing, it is easy accomplish with Vaadin by utilizing it’s CutomLayout, where you may use plain old HTML as a web page template. So you’re keeping web page look and feel while keeping ajax application features, automatically handled by the framework for you.
Yes! I take this as a promise and will be reminding you about it atleast once a week! Muahaha. And you’ll be posting on the main blog :). Stay tuned people!
Right, there seems to be some interest for this. Any particular topics you wish I should cover? I haven’t planned this any further, so all suggestions are welcome!
I think, that for the beginning it would be nice to see some more detailed explanation, how the default theme is made internally (based, for instance, on reindeer one) and how to tweak look and feel of some set of most popular controls like label, button, tabsheet, table… by using some examples on each such control. That would be a great starting point for theme tweaking people, wanting to tune up the default theme .
Also, some tips and tricks like IE6 workarounds and separate style sets and other thin things in Vaading css-ing would be great.
A while back I got a couple tweets from Vaadin folds suggesting I post screen shots of the application I was developping. The work was done on rainy afternoons as a pet project, over a three-week span, not bad given I was also using Tomcat, Hibernate, ExtenXLS, H2 and Vaadin for the first time – I wanted this to be fully open source)
The topic is slightly unusual, with some not-so-common challenges. The purpose is to manage an Olympic Weightlifting Competition, and to drive a number of projectors displaying the information to the public, athletes, and officials (two to six projectors, typically each attached to a wireless laptop).
The business need was
to drive screen projectors that display competition information in several formats (3 different formats, with one or more projector showing each). Projectors are attached to WiFi laptops in different rooms.
to provide a shared workspace where officials can update competition information – information entered by two different persons is allowed, and each update changes the order in which athletes perform.
to eventually extend to a fully wireless system where all timekeeping, judging and decision overturning could be done over a software-only setup
in large meets, manage several simultaneous active competition areas (i.e. drive up to 9 projectors, and up to 9 other laptops, in the current configuration, will eventually go up to 25).
(screenshots below)
Technically, the system has a few interesting features (it will made public once the ink has dried up a bit)
The data model embodies the competition rules and somewhat intricate interdependencies. So it was much easier to keep all those dependencies in the Java objects, and make UI objects listen to events fired by the “setters” in the Java model.
In order to make this work (UI listening to BusinessEvents) I had to modify HbnContainer a tiny bit (the resulting approach combines Hibernate “Field” annotations with a @Transient pattern that allows me to use setters without storing the computed values).
In the process of cutting my teeth on events, I created a “safe” version of EventRouter that produces error messages earlier in situations that will cause ConcurrentModificationExceptions and listener loops.
These events also trigger the refresh of JSP pages running on two to six laptops. JSPs were used because they could read the lists that lay underneath my BeanContainers, and were the easiest way to create a dumb look that included colspans. It is rather amusing to see the bemused look of people seeing 4 browser sessions on 4 laptops all changing at once with no user intervention. ProgressListener hack used to do a tiny poll every half-second.
I created a LocalizedSystemMessages class that uses properties files.
I figured out how to match ExtenXLS with Vaadin (including figuring how to use the OutputStream written by ExtenXLS as an input stream for Vaadin so users can download it) – I did not want to kludge with a byte array or a temporary file, so I PipedInputStreams.
etc.
Screenshots:
Two screenshots for administrative editing screens. Information is uploaded from Excel and tweaked interactively. There is half-a-dozen such pages. Errors are highlighted immediately using generated columns with listeners attached to the data model (the example in the book no longer works, and needs fixing).
Next screenshots shows master console. Any entry on the bottom part changes the sort order of the top, and immediately updates various remote projectors. Even the location of the focus (pink cell) is dependent on a bunch of factors. I had to customize error management because errors were being detected in the model and reported as exceptions (haven’t found an elegant way to do this in validators without duplicating a bunch of stuff).
(two sample formats are shown below – the different formats use different sort orders as well). The projectors are driven by JSP paged as EmbeddedResourced; refresh is triggered by a data model UpdateEvent built on top of the Vaadin event model. The JSP pages read the Pojo lists managed by BeanContainers and HbnContainers. The various sessions find the master lists by looking at the shared ServletContext.
Last screenshot shows Excel written by ExtenXLS read back as a source by Vaadin for user download.
Interesting looking app. Thanks for posting screenshots and description!
As it was your first Vaadin app, could you share your experience: what were the pros and cons with learning and working with Vaadin? Is there something that we should change in Vaadin to make the experience better?
This is exactly what I personally like to see. Real-life applications - not just technology demos.
I especially like your idea of using the application to drive the projectors. And the way of using JSPs here.
Overall a very good experience. I am in fact recommending Vaadin for use at work based on this.
Some random observations
Not enough scaffolding. If I build a form or a table where I have Hibernate objects (or whatever equivalent), I should have, in a trivial manner, drop-downs and selects show up without little or noprogramming. Something like a “CollectionsField” that does a bit of inference and is trivial to parameterize. In short, I had to write waaaay too much code to translate my lists of selected items into lists of names. I could now refactor my application to do much of this myself, but it would be great if it came with the Framework. This is the one area where a Ruby on Rails or a Grails beats Vaadin.
On a related front, when using tables, non-trivial apps require many concepts. In my case, I want negative numbers that are computed (GeneratedColumn) or not (FieldFactory) to have brackets instead of a negative number (PropertyFormatter) and show up in a red cell (CellStyleGenerator). I have no way to keep all these aspects of my Item together. And then you have to keep all that straight when editing with the right Validator. – so my suggestion is : add a nice example to show how all these things fit together – I guess I stumbled upon a worse-case scenario.
Vaadin legacy jargon is confusing at first. The fact that an HTTP request somehow is accessed through a Transaction is odd, likewise for Application (which is not the Web Application but rather a session).
Too much work in some areas for localization (SystemMessages in particular); please provide a fully multiligual example.
Too much work setting up menu bars The API is just weird. If I create a MenuItem, I can’t go and insert it inside a menu.
Marc - could you compile the feedback to tickets (where possible)? At least the first observation sounded to be related to bean editor ideas we have been discussing…
Jouni, I suggest that you take a day off. Pretend that you are sick or something like that, stay home, and give us a tutorial on customizing a label, a button and a panel. No rocket science. Put it in the Vaadin book in the Theme chapter, not on a blog. And I think you will start to see more people getting into theming things and contributing back, which will pay off your day invested.
If writing does not inspire you, just record yourself explaining and the community will probably transcript.
Will put our internal tool - this was made for managers team to help them track various web forms from a number of internal and public websites and web sections - they constantly do create/modify/drop different web forms and need to handle field verification, notification submission, etc. So finally we created a tool, to let them do all the job themselves, without IT assistance.
Basically, this application allows to create and manage web forms and also receive later a submissions from them, performing fields validation, captcha code verification and data flow routing - to e-mail notifications, to the database, to CRM system or combined.
Absolutely nothing special in implementation - just plain good Vaadin application and everything was made in just 2 days.
May also say, that new Reindeer theme with it’s subclasses, perfectly fits for such applications, thanks Jouni !
P.S. Jean-François, just wanted to ask - you noted, you’ve used Exten XLS for exporting data into excel document. Is there any special in this library in comparison to Apache POI ? (Just did not use Exten XLS, so just intersting in any feedback)
Can this be done and how laborious is it to “custom-skin” a Vaadin app?
