Vaadin theme tester app preview

Because we started to build our own set of themes, the first question raised up is to how to provide an easy tool for a web designer to edit and try css styles on-the-go without diggin into the java code. This way, a skeleton for VaadinThemeTester application has born :slight_smile:

Basically, it allows to define in a property file (inside a theme folder) the list of substyles for every class of widgets, then, when switching to that theme, it automatically create preview widgets for every class described, so web designer can see what she’s a doing on the fly.

Application also scans VAADIN/themes folder and automatically pickups all present themes, making them available for swithing.

Lastly, it allows to download current theme as a zip file :slight_smile:

For now, our designer still uses IDE to edit theme files, however, we plan to plug-in the css editor to this app as well, add image resources management (upload/download/move/delete/etc), so make the new theme construction or existing theme tweaking completely IDEless and browser based for a web designer.

If anyone interested in this, I could post the app project online. Also, any ideas/suggestions would be welcome :slight_smile:

The live app is here:

Jouni, “normdocs” is our first attempt to make a new theme… kind an ugly for now but we’re not finished :slight_smile:

P.S. and sorry, UI texts are in Russian now, just did not plug the i18n


You could also make a tab that contains some of the most used components in one view to give a general idea how an actual application would look like. Something like the light/dark page examples in the

Looks really interesting, great job once again!

We’ve had ideas about adding all of the styles that a theme implements to the Sampler, but I’m still working on it.

And having a working theme editor would be awesome, and I’ve had small plans for a similar concept as well.

I’ll be more than willing to work on this with you guys, since you’ve already got a head start on it, there’s no point in making my own. Let’s focus the effort and refine this into a real beauty :slight_smile: Where can I get the code and what would be the best way for us to collaborate?

Just this morning when walking to work I was thinking about how we should somehow be able to tell developers that certain styles for some components exist. But instead of a properties file, I was thinking something “more Java”. Something involving interfaces and extension. I know, I know, sounds convoluted, but I’ll give it a try, see how it tastes.

As for properties - this is a kind a theme metafile, which describes available substyles in order to let the application to automatically build copies of widgets with all available styles. I think, for the end Vaadin developer just having some reference screenshot with style names and their visual representation woud be fine. Think, such images/pdf could be autogenerated from this app as well :slight_smile:

Great if you wish to join, so I’ll arrange and publish this to some svn, maybe to contrib @ Vaadin for common access.

BTW, juts got an idea on make the header part of the application with fixed theme - it contains controls and buttons, so iy would be nice if changes to development theme would not affect that header. Hoowever, since theme can be set only for the window, not to a layout, I have no idea on how to achieve this.

As a variant (bot not very nice one) is to run two apps in a frames. Upper frame app will act like a header with tools and buttons and will have a fixed, say, Reindeer theme, and the bottom frame will contain a widget samples tabsheet. Upper app can send commands to a lower frame app by opening some URL’s in that frame.

Any more ideas ?

Well, got some time and refactored the themes tester app a bit, converted it to a themes editor :slight_smile:

The goal is to make a stand-alone, web based themes editor, in order to let non java-aware web designer to create/modify/preview new themes using only the web browser.

The app is now pushed to SVN, into the contrib/vte

The live demo is here:

What’s new from the initial sketch:

  • Overall look was polished a bit
  • Main UI theme does not change, only the preview panel reflects the theme being previewed
  • Theme export/import has been added
  • New theme can be created from UI, standalone or from donor (base) theme
  • Custom themes can be deleted
  • App is now i18n aware (only English translations at the moment)

In plans to the next version:

  • online css/resources manager to upload/download files and images, edit css, edit style definitions
  • dashboards for previewing several widgets at once
  • your ideas/thoughts ?

Updated a bit the demo app - added support for theme resources browser and generic text editing (buggy yet).

However, noticed a strange bug with Chrome - when I test locally I do not see it, but when testing the same .war deployed to remote server (
with chrome - document tabs (open theme resources main tab and select a couple of files) do not draw until I refresh the browser. This is only with chrome and only with remote app. Anyone else seeing the same behaviour ?

Yep, seems to be a problem with the TabSheet and WebKit browsers when using the “minimal” style. Created ticket
for this.

Thanks, Artur