You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 5 Next »

Tapestry CSS Support

Most web applications delegate to Cascading Style Sheets (CSS) the stylistic details of the page – fonts, colors, margins, borders and alignment. This helps the remaining HTML to be simple and semantic, which usually makes it easier to read and maintain.

Tapestry includes sophisticated support for CSS in the form of annotation-based linking, far-future expire headers, automatic duplicate removal, and other features provided for assets.

Default CSS Stylesheet

Tapestry includes a built-in stylesheet, default.css, in all HTML documents (documents that have an outer <html> element and a nested <head> element). The default.css stylesheet is always ordered first ... any additional stylesheets will come after. This allows you to override Tapestry's default styles with your own.

All the styles in the default stylesheet are prefixed with "t-" (for Tapestry).

Adding your own CSS

A page or component (for example, a layout component) that is rendering the <head> tag can add a stylesheet directly in the markup.

<head>
  <link href="/css/site.css" rel="stylesheet" type="text/css"/>
  . . .

If you want to leverage Tapestry's localization support, you may want to make use of an expansion and the asset: binding prefix:

<head>
  <link href="${context:css/site.css}" rel="stylesheet" type="text/css"/>
  . . .

The "context:" prefix means that the remainder of the expansion is a path to a context asset, a resource in the web application root (src/main/webapp in your workspace).

Using the @Import Annotation

Another approach to adding a stylesheet is to include an @Import annotation (starting with Tapestry 5.2) on your component class:

@Import(stylesheet="context:css/site.css")
public class MyComponent
{

}

(For Tapestry 5.0 and 5.1, use the deprecated @IncludeStyleSheet annotation instead.)

As with included JavaScript libraries, each stylesheet will only be added once, regardless of the number of components that include it via the annotation.

  • No labels