CSSのサポート

カスケーディングスタイルシート(CSS)はTapestryにおいても重要な技術のひとつです。 レンダリングされたHTMLがシンプルでセマンティックなときにTapestryは最もうまく動作します -- セマンティックとは、タグは文書構造を記述するために用いるという単純でまっすぐなHTMLのルーツへ還り、 フォントや色やレイアウトの詳細はできる限りCSSに委譲する、ということです。

デフォルトのCSSスタイルシート

Tapestryは組み込みのスタイルシートである default.css を持っており、 (<html>要素があり、その内側に<head>要素がある)全てのHTMLドキュメントに使用されます。 default.css スタイルシートは常に 一番最初 です ... そして他のスタイルシートがそれに続きます。 これにより、Tapestryのデフォルトスタイルを上書きすることができます。

デフォルトスタイルシート内のスタイルは全て、(Tapestry用であることを表す) "t-" が頭に付いています。

独自のCSSを追加する

<head> タグをレンダリングするページまたはコンポーネントは、マークアップ内に直接スタイルシートを追加することができます。

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

Tapestryのローカライズ機能を使いたい場合、式展開と asset: バインディングプリフィックスを使います。

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

"asset:" プリフィックスは式の残りの部分がリソースへのパスであることを示します。"context:" の部分は、 Webアプリケーションのルート(ワークスペース内の src/main/webapp)にあるリソースであることを示します。 "context:" が無い場合はクラスパス内のリソースであり、コンポーネントのJavaクラスからの相対パスとなります。

IncludeStylesheetアノテーションの使用

別の方法として、コンポーネントクラスに IncludeStylesheet アノテーションを付ける方法もあります。

@IncludeStylesheet("context:css/myapp.css")
public class MyComponent
{

}

アノテーションによってスタイルシートをインクルードするコンポーネントが複数あっても、 JavaScriptライブラリの場合と同様に、各スタイルシートは一度しかインクルードされません。