Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Vaadin 6 application competition screenshots!

Henry Hagnäs
1 decade ago Jun 01, 2009 11:48am
Jonatan Kronqvist
1 decade ago Jun 01, 2009 12:06pm
Martin Makundi
1 decade ago Aug 18, 2009 4:05pm
Jouni Koivuviita
1 decade ago Aug 18, 2009 7:34pm

Hi Martin,

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 :)

Dmitri Livotov
1 decade ago Aug 18, 2009 7:43pm
Dmitri Livotov
1 decade ago Aug 18, 2009 7:46pm
Henry Hagnäs
1 decade ago Aug 19, 2009 6:53am
Jouni Koivuviita
1 decade ago Aug 19, 2009 8:05am
Dmitri Livotov
1 decade ago Aug 19, 2009 8:25am

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.

Jean-François Lamy
1 decade ago Aug 20, 2009 12:45am

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.

Last updated on Aug, 20th 2009
Joonas Lehtinen
1 decade ago Aug 20, 2009 6:37am
Ville Ingman
1 decade ago Aug 20, 2009 8:40am
Dmitri Livotov
1 decade ago Aug 20, 2009 2:42pm
Sami Ekblad
1 decade ago Aug 20, 2009 3:58pm
Jean-François Lamy
1 decade ago Aug 20, 2009 4:00pm

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 Englund
1 decade ago Aug 21, 2009 8:54am
Joonas Lehtinen
1 decade ago Aug 21, 2009 12:37pm
John Rizzo
1 decade ago Sep 10, 2009 8:26am

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 .

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.

Dmitri Livotov
1 decade ago Oct 27, 2009 10:24am
Dmitri Livotov
1 decade ago Oct 27, 2009 10:28am
Jean-François Lamy
1 decade ago Oct 27, 2009 11:26am
Dmitri Livotov
1 decade ago Oct 27, 2009 11:34am
Pether Sorling
1 decade ago Oct 27, 2009 12:56pm
Jonatan Kronqvist
1 decade ago Oct 27, 2009 1:33pm