Modular CSS

[Philip Borlin]

I am using the vaadin-osgi addon that I downloaded off the Vaadin
site. I was able to get the examples and hack away on a simple
application and it all worked beautifully.

I have a question - how do you add items to CSS in a modular way? The
docs hint that you can add extra css files to your theme (so I would
hope this could be done in the fragment) but I have not figured out
how to get Vaadin to recognize these additional style sheets.

Thanks,
Phil

[Christopher Brind]

Vaadin references a single CSS that is the one associated with your theme.  e.g. if your theme is called "MyTheme" it looks for VAADIN/themes/MyTheme/styles.css

In order to build upon a different theme you can use a css import to reference that theme's CSS.  Which is what I've done:

@import "../chameleon/styles.css";

@import "common.css";

@import "custom.css";

In the above example I used the Chameleon demo to generate a chamelon theme for me ( see http://demo.vaadin.com/chameleontheme ), then I moved the contents of what it generated in to a file called common.css. Custom.css contains styles and classes specific to my application, overriding what was generated for me.  And of course it references back to the "parent" chameleon theme itself.

I haven't even tried to be more modular than that though.  In the work I've done each "application" has it's own theme, but other modules only contribute UI or services, no css or images.

If you wanted this to be more dynamic one idea is to create a servlet and register it at your theme's CSS location.  The servlet could use the whiteboard pattern to allow other modules to contribute CSS dynamically, e.g. have an interface like this:

public interface CSSContrib {

   Strinng getCSS();

}

Then in your servlet get all the services registered with that interface and iterate over them building up a CSS string, and return it from the doGet of a servlet (remembering to set the mime-type to text/css).

Oh, and just one last note... I register static resources in my own application at the location of the theme, not the VAADIN folder since this comes from the Vaadin bundle (I don't know what method you've used to get Vaadin running, but I'm using the one I wrote).  So this simply looks like this:

private static final String VAADIN_THEMES_MYTHEME = "/VAADIN/themes/mytheme";

private static final String VAADIN_THEMES_CHAMELEON = "/VAADIN/themes/chameleon";

service.registerResources(VAADIN_THEMES_CHAMELEON,

VAADIN_THEMES_CHAMELEON, null);

service.registerResources(VAADIN_THEMES_MYTHEME, VAADIN_THEMES_MYTHEME,

null);

Hope that helps.

Cheers,

Chris