MyFaces 1.1.0（tomahawk）をS2JSFで使う (newspaperTable編2)

Java Seasar

　ではでは、昨日の続き。
　昨日のようにただだらだら出してもしょうがないですね。せめて列と列の間に何かセパレータ（区切り）を入れたいものです。例えば縦棒「|」を入れてみましょう。それにはf:facetを使います。f:facetはJSFの各UIコンポーネントで使われる「追加設定」的な意味を持つ汎用タグです。ですので、使用するときはname属性が必須です。列と列の間に文字を入れたいときは、「spacer」という属性値を与えます。下の例では、間にf:verbatimを使っていますが、バリューバインディングでもOKです。ただし、ただ何か書いただけでは適用されません（「この部分はtomahawkを使うためプレビューできません。」というのが無視されるのと同じです）。f:verbatimのタグにはさまれた内容はそのまま出力されてしまいますのでHTMLタグを自由に使えますが、タグの閉じ忘れやXSSの脆弱性の作りこみに注意してください。

<html xmlns:m="http://www.seasar.org/maya" m:action="#{newspaperAction.initialize}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-31J">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>newspaper</title>
</head>
<body>
  <div m:inject="t:newspaperTable" m:newspaperColumns="3"
    m:value="#{dtoList}" m:var="e">
    この部分はtomahawkを使うためプレビューできません。
    <div m:inject="f:facet" m:name="spacer">
      <span m:inject="f:verbatim">|</span>
    </div>
    <div m:inject="h:column">
      <span m:value="#{e.name}">県名</span>
    </div>
    <div m:inject="h:column">
      <span m:value="#{e.value}">県庁所在地</span>
    </div>
  </div>
</body>
</html>

各列に表題もつけられます。それぞれの列（h:column）にheaderの名前でf:facetで指定します。

<html xmlns:m="http://www.seasar.org/maya" m:action="#{newspaperAction.initialize}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-31J">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>newspaper</title>
</head>
<body>
  <div m:inject="t:newspaperTable" m:newspaperColumns="3"
    m:value="#{dtoList}" m:var="e">
    この部分はtomahawkを使うためプレビューできません。
    <div m:inject="f:facet" m:name="spacer"><span m:inject="f:verbatim">|</span></div>
    <div m:inject="h:column">
      <div m:inject="f:facet" m:name="header">
        <span m:value="県名">県名</span>
      </div>
      <span m:value="#{e.name}">県名</span>
    </div>
    <div m:inject="h:column">
      <div m:inject="f:facet" m:name="header">
        <span m:value="県庁所在地">県庁所在地</span>
      </div>
      <span m:value="#{e.value}">県庁所在地</span>
    </div>
  </div>
</body>
</html>

これで出力されるのが↓です。だせぇ……



さて、この激しくダサい状態を打開するにはどうしたらいいか？
そうです。スタイルシートです。スタイルシートはt:newspaperTableをinjectしているダグに以下の属性で指定します。

属性名 意味
styleClass tableタグのclass属性
headerClass ヘッダ（thタグ）のclass属性
footerClass フッタ（thタグ）のclass属性
rowClasses 行（trタグ）のclass属性
columnClasses 列（tdタグ）のclass属性