Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


Tapestry CSS Support

Most web applications delegate to Cascading Style Sheets (CSS) is an important technology, even with Tapestry. Tapestry works best when the rendered HTML is simple and semantic – semantic meaning HTML that goes back to its roots, simple, straightforward, with tags used for structure and, as much as possible, details about font, color and layout delegated to CSS.

...

the stylistic details of the page – fonts, colors, margins, borders and alignment. This helps the remaining HTML to remain simple and semantic, which usually makes it easier to read and maintain.

Div
stylefloat:right
titleRelated Articles
classaui-label
Content by Label
showLabelsfalse
showSpacefalse
titleRelated Articles
cqllabel = "assets" and space = currentSpace()

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 style sheet

Tapestry includes a built-in stylesheetstyle sheet, defaulttapestry.css, is in all HTML documents (documents that have an outer <html> element and a nested <head> element), as part of the "core" JavaScript stack. For Tapestry 5.4 and later, the core JavaScript stack also includes the CSS for Bootstrap 3.1.1

Tapestry 5.5.0 and later also includes Bootstrap 4.3.1. To use it, just add @ImportModule(Bootstrap4Module.class) to your application's module class (normal AppModule.java):


Code Block
languagejava
titleAppModule.java (partial)
@ImportModule(Bootstrap4Module.class)
public class AppModule {
. . .


Tapestry 5.5.0 and later also allows you to have Tapestry not provide any CSS at all. To do that, just add @ImportModule(NoBootstrapModule.class) to your module class. In this case, you'll need to set the tapestry.default-stylesheet (SymbolConstants#DEFAULT_STYLESHEET) configuration symbol to tell Tapestry what's your main CSS file. Otherwise, an exception will be thrown and the webapp won't start. The default.css stylesheet is always ordered first ... any additional stylesheets will come after. This allows Tapestry's default styles to be overridden.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 style sheet directly in the markup.

Code Block
java
languagejavaxml

<head>
  <link href="/css/myappsite.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:" or "context:" binding prefix:

Code Block
java
languagejavaxml

<head>
  <link href="${context:css/myappsite.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). By contrast, the "asset:" prefix tells Tapestry to look in the class path. See CSS.

Using the

...

@Import annotation

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

Code Block
languagejava
titleMyComponent.java

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

}

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

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

Conditionally loading IE-only style sheets

For Tapestry 5.2 and later, if you need to load a different style sheet for Internet Explorer browsers, or for certain versions of IE browsers, you can use Tapestry's built-in support for IE conditional comments. Just add something like the following to your page or component (or layout) class:

Code Block
languagejava
@Environmental
private JavaScriptSupport javaScriptSupport;
     
@Inject @Path("context:layout/ie-only.css")
private Asset ieOnlyStylesheet;

// add an IE-only style sheet if browser is IE
void afterRender() {
    javaScriptSupport.importStylesheet(new StylesheetLink(ieOnlyStylesheet, new
                        StylesheetOptions(null, "IE")) );
}

The above will render something like:

Code Block
languagexml
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="/assets/1.0-SNAPSHOT/ctx/layout/ie-only.css"></link>
<![endif]-->

Naturally, the conditional part can be any other IE conditional expression, such as "lt IE 8".

Suppressing the default style sheet (Tapestry 5.3 and earlier)

Though it should be rarely needed, you can prevent Tapestry's default style sheet from loading by overriding the configuration in your application's module (normally AppModule.java):

Code Block
languagejava
titleAppModule.java (partial)
@Contribute(MarkupRenderer.class)
public static void deactiveDefaultCSS(OrderedConfiguration<MarkupRendererFilter> configuration)
{
    configuration.override("InjectDefaultStyleheet", null);
}

Note: In Tapestry 5.3 and later, the misspelled "InjectDefaultStyleheet" is corrected to "InjectDefaultStylesheet".

In Tapestry 5.4, the "core" JavaScript has a configuration into which you may inject overrides.

Overriding Bootstrap (Tapestry 5.4 and later)

The SymbolConstants.BOOTSTRAP_ROOT ("tapestry.bootstrap-root") symbol tells Tapestry where the Bootstrap CSS file is. You can override that symbol (see 85459407) to have it point to your own version of Bootstrap (or even to an empty file if you want to eliminate Bootstrap entirely).

Code Block
languagejava
titleAppModule.java (partial)
configuration.add(SymbolConstants.BOOTSTRAP_ROOT, "classpath:/META-INF/assets");

For the above, your bootstrap.css file would be in your app's META-INF/assets/css folder.