Inline Styling

I am sure I am tainted by my 4 years of dev using Echo2 but I am having a real hard time adopting the Vaadin methodology of using CSS files to achieve all look-and-feel.

The main issue I have is that CSS requires a certain skill and experience I don’t have. Even if I had the skill and experience, you still need to kinda understand the entire Vaadin component hierarchy and the special selector codes and the CSS inheritance you’re dealing with. I know none of that. So I can’t even get a simple menu to look the way I want it.

The reason I bring up Echo2 is because they made it easy. Putting our philosophies aside for a moment, every Component had getter & setter methods to set whatever you needed to set. Everything from insets to alignment to background color to foreground color to background image to font family to font size was at your immediate disposal to be set in JAVA. I know this results in DOM bloat because of all the inline styling but if I have to choose between a slightly fatter UI payload that looks exactly like I want it with no CSS skill required vs. a thinner payload but I need a CSS guy AND double my project timeline to have enough time to get everything to look the way I want it to look, I’ll take the inline styles.

Please note I am not asking for “CSS Injection” if it means I can dynamically generate a CSS file or add a global CSS tag to the HEAD of my HTML file. I am asking for the ability to set colors & fonts & insets on a component-by-component basis with regular setter methods.

I know some folks are philisophically opposed to this but I don’t see the harm in giving developers the choice.

Please advise. Is there any way to style my components in pure Java? Please don’t make me learn CSS…

Thansk for the good articulated opinion. I’ve been in the opposing group before, but I’ve been converting lately to allowing such a thing enter the framework. We all have different needs, and if the added complexity is not too high, why not add it, if there are benefits to certain use cases?

I don’t think we want to add many new methods, like “setFontColor”, “setBackgroundColor” etc. Instead I see just on method added, something that takes a raw CSS string and just bluntly forces that into the inline style of the root element of a component. This could work for simpler components, but for more complex things, where the component has many different elements inside it which also contain lots of styling (like the Table or Panel, depending on the theme of course), setting the inline style of the root element rarely helps anything: you still need to reference the inner elements somehow. And that’s the job for CSS/theme.

And there, I think, is the underlying issue. Flash doesn’t want to touch CSS; I suspect setFontColor, setBackgroundColor etc are
what he wants! The trouble is, how far do you go? Flash mentions color, font and insets (I’m assuming css margins/padding) - but there are huge numbers of things one can and would want to change; maintaining those would take a fair amount of work and would possibly be setting up an expectation that would ultimately not be sustainable.

Personally, I don’t think it makes any sense. Ultimately, Vaadin is (now) a web application framework. I’m not sure that it is desirable to abstract away CSS any further, which is what adding mutators for presentation aspects to the components will do. Ultimately, if one wants to change the appearance of a web application, you need to know CSS!

I can see the point of changing Component#setStyle(String) to do precisely that (map to the style attribute of the root HTML element), but only just!

Just my 2c’s worth.



I agree:
setInlineStyle(String cssInlineStyle)
addInlineStyle(String cssInlineStyle)
removeInlineStyle(String cssInlineStyle)

and already existing
setStyleName(String), addStyleName(String), removeStyleName(String), getStyleName()

are good enough.

Adding setColor,etc is ugly bloat way