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

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

All the styles in the default style sheet 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 style sheet 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:" or "context:" 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). By contrast, the "asset:" prefix tells Tapestry to look in the class path. See Assets.

Using the @Import annotation

Another approach to adding a style sheet 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 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:

@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:

<!--[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

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):

AppModule.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".

分享到：

【C/C++和指针】类默认生成的四个函数 | Deploy WebLogic12c to Multiple Machines

2012-07-24 14:16
浏览 805
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Apache Tapestry CSS

Cascading Style Sheets

Default style sheet

Adding your own CSS

Using the @Import annotation

Conditionally loading IE-only style sheets

Suppressing the default style sheet

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Apache Tapestry CSS

Cascading Style Sheets

Default style sheet

Adding your own CSS

Using the @Import annotation

Conditionally loading IE-only style sheets

Suppressing the default style sheet

评论

发表评论

相关推荐

最近访客更多访客>>