Setting raw CSS properties

Flow
1

So, I know I’m in the “themes” forum and what I’m asking for is total heresy :slight_smile: But I want to just apply raw CSS properties in some places. That is, I want to bypass the theme, and style.css, and just set explicit properties. (Why? I already have the look-and-feel defined through a different mechanism which I would rather not re-work.)

In HTML, it would be:

<div style="background-color: #CCCCCC">

… as opposed to:

<div class="some-style-name">

Is this possible in Vaadin?

2

I think the closest to what you ask is
this plugin

3

Oh, that is too bad.

To make that work, I would need use the plug-in, and also keep track of what styles have already been injected, so I don’t end up defining the same thing over and over. Somehow I suspect this is just one of many places where I will be fighting against the framework … I know my use-case is non-standard.

I guess I will look for a different framework, something closer to the browser …

4

You’re right about that you’re fighting a bit against the framework. But your use case is probably not that unusual (at least many have wanted this feature for quite a while).

Something like this could end up in Vaadin 7, and with persistent lobbying possibly in Vaadin 6 as well. We already have the “executeJavaScript” method for allowing raw JS to be executed, so adding raw/inline CSS to the mix wouldn’t be far fetched.

Also, an add-on should be able to do this easily, using a similar approach as many other add-ons, having a non-visible component through which these styles would be inserted. Something like this (if I were to add this to the CSSInject add-on):


// Server side API
cssinject.setInlineStyle(component, “background-color: #ccc;”);

// Server side impl.
paintContent(PaintTarget target)... {
   ...
   target.startTag(“styles”);
   for(Component c in componentStyles) {
      target.startTag(“c”);
      target.addAttribute(“id”, c);
      target.addAttribute(“style”, componentStyles.get(c));
      target.endTag(“c”);
   }
   target.endTag(“styles”);
}
// Client side
updateFromUidl(UIDL uidl, ApplicationConnection client) {
   ...
   // Loop through the “styles” child element
   for(...) {
      Paintable p = client.getPaintable(componentUidl.getAttribute(“id”));
      // We should take in to account if there are other styles applied, but for simplicity we’ll skip that
      ((Widget) p).getElement().setAttribute(“style”, componentUidl.get(“style”));
   }
}