Skip to content

Latest commit

 

History

History
40 lines (30 loc) · 2.14 KB

tutorial-include-css.asciidoc

File metadata and controls

40 lines (30 loc) · 2.14 KB
Raw

Including Style Sheets

For styling the application you typically need to include a style sheet. The framework is creating the initial HTML page so you need to tell it which style sheets you need. This can be done in your UI class using:

@Override
protected void init(VaadinRequest request) {
  // Loaded from "styles.css" in your context root
  getPage().addStyleSheet("styles.css");

  // Loaded from "/root.css" regardless of how your application is deployed
  getPage().addStyleSheet("/root.css");

  // Loaded from "http://example.com/example.css" regardless of how your application is deployed
  getPage().addStyleSheet("http://example.com/example.css");
}

You can place style sheets and other static resources in any folder inside your WAR file except for /VAADIN which is reserved for framework internal use. VaadinServlet handles static resource requests if you have mapped it to /* . Otherwise, the servlet container will take care of static resource requests.

By using relative URLs you are not dependent on whether the application is deployed in the root context (e.g. http://mysite.com/) or in a sub context (e.g. http://mysite.com/myapp/). Relative URLs are resolved using the page base URI, which is always set to match the servlet URL.

Tip

If you are using a servlet path for the servlet, e.g. http://mysite.com/myapp/myservlet/ then you will need to take the servlet path into account when including resources. This is needed because the base URI is http://mysite.com/myapp/myservlet/ but static resources are deployed in http://mysite.com/myapp/.

You can use the special protocol context:// with e.g. Page.addStyleSheet to ensure a URL relative to the context path but this is only supported when including resources.

When you configure an element, e.g setting the src attribute for an <img>, you cannot use the context:// protocol. Your options are then:

  • Cancel out the servlet path, e.g. ../images/logo.png.

  • Use an absolute URL, e.g. /myapp/images/logo.png

  • Deploy your static resources in a directory matching the servlet path, e.g. /myservlet/.