To build up a little hype for the upcoming 6.0 release this summer (and since this might actually be interesting to someone), I’m posting a small preview of the upcoming theme that I’m currently working on.
It’s still many, many miles away from finished, and the above images are straight from the Photoshop mockup.
As you might notice, I’m planning on making a set of components also with a black base color. Also there will be more than one style for at least buttons, tabsheets and windows.
A documentation of all the features of the theme is also planned, so you won’t have to guess what kind of styles are present and how you should use them to make the most impact.
Lastly I’m planning to share the source files for both the current default theme and this new theme, so anyone with enough skills in Photoshop can use them to whatever purpose needed.
-Jouni
ps. pay no attention to the contents of the actual interface elements, that’s just bogus “lorem ipsum” to fulfill my needs when drawing the theme.
Think this will attract new users even more. I can vision this theme fitting very well “as is” on enterprisey systems. No major theme modifications will be needed for deployers to be happy.
Can you throw an example of combobox which has it’s dropdown box opened. I’d like to see wider “down” and “up” buttons in the dropdown box from which I can show previous and next elements. Current Toolkit contains quite narrow buttons for those actions.
I also feel that window header is quite big, but I’ve always liked more compact UIs than those which have lots of padding and margins…
Plan is, that developers shouldn’t need to do any modifications to the theme to get things done. Using the provided stylenames should be enough.
Making a theme distinctive and the same time usable and flexible enough to fit many types of applications is quite hard. My main objective has been to make this theme generally usable to everyone, hence the “non-distinctive” look. But as Joonas said, the old “default” theme is still included, with a few improvements.
Jani, all in due time. I’ve drawn the combobox dropdown already, but I’m not sharing it yet. You’ll see it when it’s done Thanks for the opinion.
And to both Joonas and Jani: no worries, there will be more than one style for the window.
Now that the new theme is included in the pre-release, I feel that a small disclaimer is in-order.
The included theme is not complete. All components should be working and have some style, but a lot of the styles are still to come. I’ll be continuing hard at work for this week and the next to get the full theme working for the final 6.0 release.
Testing of the new theme is of course encouraged, I’ll take any feedback in with open arms.
And BTW, the new theme will be called “Reindeer”. The old default theme has also received a proper name, and is now called “Runo”.
In case you didn’t know, there is now a new “demo” in the Vaadin package, that demonstrates most of the components and their looks and all the styles that come with them.
That looks great ! Is there any document or small reference, rather than the sourcecode, that references all style names and their meaning for the new theme ?
BTW, I do see, Vaadin download section now changed form pre-prelease to just 6.0.0. Is this the final release ?
Yes Dmitri! Vaadin 6 has indeed been launched for those with sharp eyes and Eclipse-plugins on auto-update :).
Officially to be launched at JavaOne but online now since the R&D-team will be busy at JavaOne with all kinds of other fun stuff than updating the homepage. I have some pictures from our little launch party i’ll be adding soon actually :).
Well, to be honest, the “demo” was supposed to be the reference/documentation, but evidently it is not clear enough.
All the styles are in the component captions, so if a button reads “Primary button”, the correct stylename is “primary”. Or if a tabsheet caption says “Bar style”, the stylename is then “bar”.
The two layout styles that you can toggle in the top of the page apply to almost all layouts currently. Just use setStyleName(“black”) or setStyleName(“blue”) on any layout and see what happens
I probably have to create a more clear documentation (e.g. simple list) of the available styles during JavaOne.
To my mind, black is fine, when used in portions, for instance, I made a black-styled header (toolbar) in our management application and it sits very well there, while other interface elements are in ‘normal’ style.
The blue style is actually exactly the same as the white one, only the background of the layout changes. Nonetheless, should be very usable, as Ville said.
And as Dimitri said, the black style was designed to be used pretty sparingly. So the Reindeer theme demo is not the best example of it, switching the whole application into black. But Ville does have a point, too, the black is quite dark on low contrast displays and video projectors especially. But on a bright modern flatscreen it looks amazing, if I may say
