I am a little confused on how to use CSS well with Vaadin.
What the prefix - “.v” means in style.css file, e.g. .v-button, .v-button-wrap, what UI component it indicates on earth? Many many strings in the style.css, I don’t know what are the reserved keys and what are the string name we define/modify.
In sample code, I saw setTheme, and addTheme method, any difference, for rendering different UI components?
Can I write Java code to dynamically set CSS for UI components (e.g. button, text input, table) just like HTML scripting can do? just assume I like to discard all setting in the default style file. As I like to easily control the GUI style.
Looks like to me, so much stuff in styles.css (under reindeer and runo folders), I am going to miss the direction on how I can set a consistent and customized look&feel on my web application.
The .v- prefix is just to prevent any CSS conflicts with possible other CSS on the same HTML page. E.g. if you embed a Vaadin app inside another HTML page, and that HTML page has styles defined for class “button”, those should not touch the Vaadin components, and vice-versa. Hence all Vaadin component styles are prefixed with a unique identifier.
This is a standard way in most web frameworks to prevent style collisions, like GWT’s “gwt-” prefix, Sencha’s (ExtJS) “x-” prefix etc.
So “v-button” targets the root element of the Button component, “v-nativebutton” targets the root element of the NativeButton component, “v-table” targets the root element of the Table component and so forth.
You probably mean “setStyleName” and “addStyleName”. The former clears all previous style names, and sets just the new one for the targeted component, while the latter adds one additional style name for the targeted component.
Example
We have a Button component which has a style name “test”, and then we call either setStyleName(“test2”) or addStyleName(“test2”):
[b]
Style names before
[/b] [b]
Style names after
[/b]
setStyleName test test2
addStyleName test test test2
Currently, no. There is an enhancement ticket about it, but it’s not implemented yet. There is one add-on, called
CSSInject , that will help somewhat, but you still need to manually target the components you want to style.
To override the default styles, you can inherit a theme in your custom theme (see more from the
Book of Vaadin ).
You don’t necessarily have to override either Reindeer or Runo, you can start from the basics using the Base theme (the theme which both Reindeer and Runo extend from). Just write the following in your custom theme CSS file:
@import "../base/styles.css";
That will get you a barebones theme, which is easy to customize. But you will then probably want write CSS for each and every component you’re going to use in your application. They will work without further customization, but look very plain.
Theme customization / component styling will be simplified/made better in Vaadin 7.