Table of Contents
This chapter provides details about using and creating themes that control the visual look of web applications. Themes consist of Cascading Style Sheets (CSS) and other theme resources such as images. We provide an introduction to CSS, especially concerning the styling of HTML by element classes.
Vaadin separates the appearance of the user interface from its logic using
themes. Themes can include CSS style sheets, custom HTML
layouts, and any necessary graphics. Theme resources can also be accessed from
an application as ThemeResource
objects.
Custom themes are placed under the
WebContent/VAADIN/themes/
folder of the web application.
This location is fixed -- the VAADIN
folder specifies
that these are static resources specific to Vaadin. The folder should normally
contain also the built-in themes, although you can let them be loaded
dynamically from the Vaadin JAR (even though that is somewhat inefficient).
Figure 8.1, “Contents of a Theme” illustrates the contents of a
theme.
The name of a theme folder defines the name of the theme. The name is used in
the setTheme()
call. A theme must contain the
styles.css
stylesheet, but other contents have free
naming. We suggest a convention for naming the folders as
img
for images, layouts
for custom
layouts, and css
for additional stylesheets.
Custom themes that use an existing complete theme need to inherit the theme. See Section 8.3.2, “Built-in Themes” and Section 8.3.4, “Theme Inheritance” for details on inheriting a theme. Copying and modifying a complete theme is also possible, but it may need more work to maintain if the modifications are small.
You use a theme with a simple setTheme()
method call
for the Application
object as follows:
public class MyApplication extends com.vaadin.Application { public void init() { setTheme("demo"); ... } }
An application can use different themes for different users and switch between themes during execution. For smaller changes, a theme can contain alternate styles for user interface components, which can be changed as needed.
In addition to style sheets, a theme can contain HTML templates for custom
layouts used with CustomLayout
. See Section 6.13, “Custom Layouts” for details.
Resources provided in a theme can also be accessed using the
ThemeResource
class, as described in Section 4.5.4, “Theme Resources”. This allows using theme resources, such
as images, for example in Embedded
objects and other
objects that allow inclusion of images using resources.