Themes

Theme

Separate look & feel with logic using themes

Themes can include

• Saas or CSS style sheets
• custom HTML layouts
• any graphics
• programmatic ThemeResource objects

Custom themes are placed under VAADIN/themes/ folder

• Theme name (used in @Theme annotation)
• style.scss or style.css (style sheets)
• other free naming contents
• convention named folders
  • img
  • layouts
  • css

Using Theme

• @Theme annotate UI class
• CustomLayout <- HTML templates in theme
• resources in theme accessed using ThemeResource

Introducing CSS

(see another page)

• Vaadin uses <div> intensively
• Not recommended to match HTML element in style sheet, only class, as vaadin may choose element freely
• Vaadin does not guarantee order of CSS sheet load

Style class hierarchy of a Vaadin UI

• With HTML inspector (such as Firefox Firebug), can see
  • vaadin applied style class to each element
  • starts with "v-"
  • multiple classes may applied to an element
• many Vaadin components allow STATE BASED matching
  • "over" class added when mouse is over

Saas

Saas is an extension of CSS3

Skipped, unless I find CSS not enough

Creating and Using Themes

Custom themes placed in VAADIN/themes

• use self-compiled CSS (place styles.css)
• on the fly (place styles.scss and css compiled on the fly)
• recommended organisation
  • two SCSS files
    • one styles.scss
    • another the actual theme more uniquely named

Themes SCSS

1. recommend rules should be prefixed with a selector for the theme name, by using Saas mixins

@import "addons.scss"; @import "mytheme.scss";  .mytheme {   @include addons;   @include mytheme; }

2. (the above is for using UI in portlets, each can have own theme, otherwise) just include

@import "addons.scss"; @import "mytheme.scss";  @include addons; @include mytheme;

3. Actual theme should be defined as a mixin that includes the base theme

@import "../valo/valo.scss";  @mixin mytheme {   @include valo;    /* An actual theme rule */   .v-button {     color: blue;   } }

4. Add-on Themes

(skipped)

5. Plain old CSS Themes (skipped)

Styling standard components

Each UI component has a CSS style class, and many have additional sub-elements that allow styling

addStyleName() - add

getStyleName() - only custom style names

do not use set to replace built-in style names

built-in style names are easiest find out by inspector (Firebug)

Built-in Themes

• valo
• reindeer
• chameleon
• runo
• liferay

Creating Theme in Eclipse

File->New->Other... Vaadin/Vaadin Theme

• Project
• Theme name
• Modify application classes to use theme (optional)
  • write a code statement (@Theme annotation) that enables the theme in constructor of selected UI

This wizard creates theme folder, actual sheet as "myname.scss" and the styles.scss files

Font Icons

Font Icon over bitmap

• they are rendered faster
• they are vector graphic (scalable)
• they are text characters (so color etc. can be defined in css)

Loading Icon Fonts:

• @include fonticons; (after importing base theme)
• see more for custom font icons

Basic use:

• use as a resource
• use as a character (there's a unicode)
  • something.setIcon(FontAwesome.USER);

Style the icons:

.v-icon { color: blue; }

Use in HTML: Label l = new Label("I "+FontAwesome.HEART.getHtml()+" vaadin"....

Use in other text: just get the unicode with getCodePoint(), but need to set font family for the text (all of them)

.v-caption-awesomecaption .v-captiontext { font-family: FontAwesome; }

Custom Font Icons

Skipped

Custom Fonts

Skipped

Responsive Themes

Skipped for now

Best Practices

Reference

1. Plan before coding UI (so at least know roughly the right place of components)

2. Name all things (layouts, panels, etc.)

- call addStyleName not "set"

- choose name like variable / class names: semantic, meaningful and independent of components

3. Never pass style names directly as string literals

- always as constants in a single theme class (so the class becomes an API)

4. come up with unique prefix for the app (like "v-" for vaadin)

5. give each unique component a unique ID with setId()

- !!!! developer's responsibility that ID is unique on-screen all the time

6. Keep it simple (use built-in whenever I can)

- custom components are harder to theme than built-in

7. Client-side code should include as little css as possible; all others go to theme

8. Keep complexity of UI code low (prefer shallow component tree)

9. Don't do it too early, stablize views first, focus on functionality first