Joini, adding my +1 - having some or couple of articles about developing a custom themes nuts and bolts would be perfect 
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!
…Henry
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?
Nice one!
Thanks for sharing your work. Always nice to see what people have done with Vaadin. Keep up the good work.
Very nice job done !
Very nice job, indeed.
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.
Great observations & feedback, this is exactly what we need!
Keep up the good work!
Best Regards,
Marc
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…
I completely agree.
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.
John.
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)
Two things: Apache POI seems to be dormant - they never delivered on their promise to support other formats. The second was that ExtenXLS had fairly good documentation and examples, and just worked. I actually used the OpenXLS download (now at version 6)
Haven’t found a simple free equivalent for Word.
Thanks, I’ll take a look at it meanwhile.
Cool application CommunityNews , will probably include some form of rss feed reader in http://cia.sourceforge.net/.
Mostly to include one feed from Swedish parliament and to test my own rss feeds
Pether
Glad to see you enjoyed it, Pether! Hope it’ll give you a head start in your project!
/Jonatan