General question on Themes and styling

General
1

Hello all.
I’m a recent convert to Vaadin from echo2 (as of yesterday). So far, things look promising.

I am considering what would be involved in migrating a sizeable app from echo to vaadin and am building a couple of screens as an example.

Since the programming model is similar things are going well so far, and I’m enjoying Vaadins slightly richer component set.

I have what’s really a code design question.
When you’re styling components on a screen using CSS, what’s the best approach for rendering multiple instances of the same class in different ways ?
I ask because in echo is closer to Swing in this regard (so I could setForeground differently for each one)

For instance, if I have 5 labels all of which are different colours and text styles, what’s the standard Vaadin approach ?

I can see that I can set my own style for v-caption which is a good start, but obviously that’ll only let me set one style for all labels.
What do I do here ? Is there a way of identifying each label individually ? Or do I need to switch themes on different screens ?

cheers,

matt.

2

Hi Matt,

setStyleName(String) and addStyleName(String) are the methods you’re looking for.

Each style name will be added to the components in the following way (using a Label as an example):

myLabel.addStyleName("foo");

// Class names on the label element
.v-label .v-label-foo .foo

// Class names on the caption element of the label (yes, a label can have both a value and a caption)
.v-caption .v-caption-foo

HTH,
Jouni

3

Magic, that’s doing the trick nicely - thanks. Getting close to converting…