CSS(カスケーディング・スタイル・シート)をJSFに組み込む方法
JSF 2.0では、 `<h:outputStylesheet/>`を使用してCSSファイルを出力できます。
例えば、
<h:outputStylesheet library="css" name="style.css" />
それは、次のHTML出力を生成します…
<link type="text/css" rel="stylesheet" href="/JavaServerFaces/faces/javax.faces.resource/style.css?ln=css"/>
JSF出力スタイルシートの例
“style.css”ファイルをレンダリングするためのJSF 2 `<h:outputStylesheet/>`の使用例を示す例は、 “resources/css`”フォルダにあります。
JSFファイル
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" > <h:head></h:head> <h:body> <h1>JSF 2 outputStylesheet example</h1> <h:outputStylesheet library="css" name="style.css" /> <div class="red">This is red color</div> </h:body> </html>
次のHTML出力を生成します
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link type="text/css" rel="stylesheet" href="/JavaServerFaces/faces/javax.faces.resource/style.css?ln=css"/> </head> <body> <h1>JSF 2 outputStylesheet example</h1> <div class="red">This is red color</div> </body> </html>
ソースコードをダウンロードする
ダウンロード – リンク://wp-content/uploads/2010/10/JSF-2-outputStylesheet-Example.zip[JSF-2-出力スタイルシート – サンプル.zip](9KB)
参考文献
<h:outputStylesheet/> JavaDoc]。
JSF 2リソースライブラリ