238

JSFおよびコンポーネントには<h:outputStylesheet>属性があります。これは何ですか、これはどのように使用する必要がありますか? 使用されるタグに応じて、一般的な content/file type および (または ) をライブラリ名として次のように使用する Web 上の多くの例があります。<h:outputScript><h:graphicImage>librarycssjsimgimage

<h:outputStylesheet library="css" name="style.css" />
<h:outputScript library="js" name="script.js" />
<h:graphicImage library="img" name="logo.png" />

どのように便利ですか?これらの例のlibrary値は、タグ名ですでに表されているものを繰り返しているようです。a の<h:outputStylesheet>場合、「CSS ライブラリ」を表すことはすでに明らかなタグ名に基づいています。同じように機能する次のものとの違いは何ですか?

<h:outputStylesheet name="css/style.css" />
<h:outputScript name="js/script.js" />
<h:graphicImage name="img/logo.png" />

また、生成された HTML 出力は少し異なります。のコンテキスト パスと の URL パターンへのマッピングが与えられると/contextnameFacesServlet前者*.xhtmlはライブラリ名をリクエスト パラメータとして次の HTML を生成します。

<link rel="stylesheet" type="text/css" href="/contextname/javax.faces.resource/style.css.xhtml?ln=css" />
<script type="text/javascript" src="/contextname/javax.faces.resource/script.js.xhtml?ln=js"></script>
<img src="/contextname/javax.faces.resource/logo.png.xhtml?ln=img" alt="" />

後者は、URI のパスにライブラリ名を含む次の HTML を生成します。

<link rel="stylesheet" type="text/css" href="/contextname/javax.faces.resource/css/style.css.xhtml" />
<script type="text/javascript" src="/contextname/javax.faces.resource/js/script.js.xhtml"></script>
<img src="/contextname/javax.faces.resource/img/logo.png.xhtml" alt="" />

後者のアプローチは、後から考えると、前者のアプローチよりも理にかなっています。libraryその属性はどの程度正確に役立つのでしょうか?

4

1 に答える 1

266

実際、「js」、「css」、「img」などの一般的なコンテンツ/ファイル タイプがライブラリ名として使用されている Web 上の例はすべて誤解を招くものです。

実際の例

まず、 MojarraMyFacesなどの既存の JSF 実装と、 PrimeFacesOmniFacesなどの JSF コンポーネント ライブラリがどのように JSF を使用しているかを見てみましょう。リソース ライブラリをこのように使用する人は誰もいません。彼らはそれを(隠れて、@ResourceDependencyまたはによってUIViewRoot#addComponentResource())次のように使用します。

<h:outputScript library="javax.faces" name="jsf.js" />
<h:outputScript library="primefaces" name="jquery/jquery.js" />
<h:outputScript library="omnifaces" name="omnifaces.js" />
<h:outputScript library="omnifaces" name="fixviewstate.js" />
<h:outputScript library="omnifaces.combined" name="[dynamicname].js" />
<h:outputStylesheet library="primefaces" name="primefaces.css" />
<h:outputStylesheet library="primefaces-aristo" name="theme.css" />
<h:outputStylesheet library="primefaces-vader" name="theme.css" />

基本的に、これらすべてのリソースが共通に属する共通のライブラリ/モジュール/テーマ名を表すことが明らかになるはずです。

より簡単な識別

このようにして、それらのリソースがどこに属しているか、どこから来ているかを指定して区別することが非常に簡単になります。primefaces.cssPrimeFaces のデフォルト CSS をオーバーライド/微調整している独自の webapp にリソースがあると想像してください。PrimeFaces が独自のライブラリ名を使用しなかった場合primefaces.css、PrimeFaces 独自のものは読み込まれず、代わりに webapp が提供するものが読み込まれ、ルック アンド フィールが損なわれます。

また、カスタム を使用しているResourceHandler場合、 を適切に使用すると、特定のライブラリからのリソースをより細かく制御することもできますlibrary。すべてのコンポーネント ライブラリがすべての JS ファイルに「js」を使用していたResourceHandler場合、それが特定のコンポーネント ライブラリから来ているかどうかをどのように区別するのでしょうか? 例としては、OmniFacesCombinedResourceHandlerGraphicResourceHandler; createResource()チェーン内の次のリソース ハンドラに委譲する前にライブラリがチェックされるメソッドをチェックします。CombinedResourceこのようにして、作成するタイミングやGraphicResource目的を知ることができます。

RichFaces が間違っていたことに注意してください。まったく使用せず、そのlibrary上に別のリソース処理レイヤーを自作したため、RichFaces リソースをプログラムで識別することは不可能です。これこそまさに、OmniFaces がRichFaces リソースで動作するようにするために、リフレクション ベースのハックCombinedResourceHanderを導入しなければならなかった理由です。

あなた自身のウェブアプリ

独自の webapp には、必ずしもリソース ライブラリは必要ありません。省略したほうがいいですよね。

<h:outputStylesheet name="css/style.css" />
<h:outputScript name="js/script.js" />
<h:graphicImage name="img/logo.png" />

または、本当に必要な場合は、「デフォルト」や会社名など、より適切な一般名を付けることができます。

<h:outputStylesheet library="default" name="css/style.css" />
<h:outputScript library="default" name="js/script.js" />
<h:graphicImage library="default" name="img/logo.png" />

または、リソースが一部のマスター Facelets テンプレートに固有のものである場合は、テンプレートの名前を付けて、相互の関連付けを容易にすることもできます。言い換えれば、それはセルフドキュメンタリーの目的のためのものです. たとえば、/WEB-INF/templates/layout.xhtmlテンプレート ファイルでは次のようになります。

<h:outputStylesheet library="layout" name="css/style.css" />
<h:outputScript library="layout" name="js/script.js" />

そして/WEB-INF/templates/admin.xhtmlテンプレートファイル:

<h:outputStylesheet library="admin" name="css/style.css" />
<h:outputScript library="admin" name="js/script.js" />

実際の例については、OmniFaces ショーケースのソース コードを確認してください。

または、複数の webapps で同じリソースを共有し、この回答と同じ例に基づいてそのための「共通」プロジェクトを作成し、それが webapp の に JAR として埋め込まれている/WEB-INF/lib場合は、それをライブラリとしても参照します。 (名前は自由に選択できます。OmniFaces や PrimeFaces などのコンポーネント ライブラリも同様に機能します):

<h:outputStylesheet library="common" name="css/style.css" />
<h:outputScript library="common" name="js/script.js" />
<h:graphicImage library="common" name="img/logo.png" />

ライブラリのバージョン管理

もう 1 つの主な利点は、リソース ライブラリのバージョン管理を、独自の webapp によって提供されるリソースに適切な方法で適用できることです (これは、JAR に埋め込まれたリソースには機能しません)。\d+(_\d+)*リソース ライブラリのバージョンを示すパターンの名前を使用して、ライブラリ フォルダーに直接の子サブフォルダーを作成できます。

WebContent
 |-- resources
 |    `-- default
 |         `-- 1_0
 |              |-- css
 |              |    `-- style.css
 |              |-- img
 |              |    `-- logo.png
 |              `-- js
 |                   `-- script.js
 :

このマークアップを使用する場合:

<h:outputStylesheet library="default" name="css/style.css" />
<h:outputScript library="default" name="js/script.js" />
<h:graphicImage library="default" name="img/logo.png" />

vこれにより、ライブラリのバージョンをパラメーターとして使用して、次の HTML が生成されます。

<link rel="stylesheet" type="text/css" href="/contextname/javax.faces.resource/css/style.css.xhtml?ln=default&amp;v=1_0" />
<script type="text/javascript" src="/contextname/javax.faces.resource/js/script.js.xhtml?ln=default&amp;v=1_0"></script>
<img src="/contextname/javax.faces.resource/img/logo.png.xhtml?ln=default&amp;v=1_0" alt="" />

そのため、リソースを編集/更新した場合は、バージョン フォルダーを新しい値にコピーまたは名前変更するだけです。複数のバージョン フォルダがある場合、JSFResourceHandlerは、数値の順序規則に従って、バージョン番号が最も大きいリソースを自動的に提供します。

したがって、resources/default/1_0/*フォルダをresources/default/1_1/*次のようにコピー/名前変更する場合:

WebContent
 |-- resources
 |    `-- default
 |         |-- 1_0
 |         |    :
 |         |
 |         `-- 1_1
 |              |-- css
 |              |    `-- style.css
 |              |-- img
 |              |    `-- logo.png
 |              `-- js
 |                   `-- script.js
 :

次に、最後のマークアップの例では、次の HTML が生成されます。

<link rel="stylesheet" type="text/css" href="/contextname/javax.faces.resource/css/style.css.xhtml?ln=default&amp;v=1_1" />
<script type="text/javascript" src="/contextname/javax.faces.resource/js/script.js.xhtml?ln=default&amp;v=1_1"></script>
<img src="/contextname/javax.faces.resource/img/logo.png.xhtml?ln=default&amp;v=1_1" alt="" />

これにより、パラメーターが変更された URL が初めて要求されたときに、Web ブラウザーはキャッシュから同じ名前のリソースを表示するのではなく、サーバーから直接リソースを要求するようになります。このように、エンドユーザーは、更新された CSS/JS リソースを取得する必要があるときにハード リフレッシュ (Ctrl+F5 など) を行う必要がありません。

JAR ファイルに含まれるリソースについては、ライブラリのバージョン管理ができないことに注意してください。カスタムが必要ですResourceHandlerjar 内のリソースに JSF バージョニングを使用する方法も参照してください。

以下も参照してください。

于 2012-08-16T13:38:19.100 に答える