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
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
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
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
colorschemedesigner.com .
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 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
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.
Well, got some time and refactored the themes tester app a bit, converted it to a themes editor
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 dev.vaadin.com SVN, into the contrib/vte
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 (
http://demo.stor-m.ru/VaadinThemesEditor 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 ?
