JSFリソースライブラリとは何ですか、またどのように使用する必要がありますか?


228

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

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

それはどのように役立ちますか?libraryこれらの例の値は、すでにタグ名で表されているものを繰り返すだけのようです。以下のために<h:outputStylesheet>それは、「CSSライブラリ」を表していることをすでに明らかにタグ名に基づいています。同じように機能する次のものとの違いは何ですか?

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

また、生成されるHTML出力は少し異なります。のコンテキストパス/contextnameFacesServletのURLパターンへのマッピングを指定する*.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属性はどの程度正確に役立ちますか?

回答:


256

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

実世界の例

まず、MojarraMyFacesなどの既存のJSF実装と、PrimeFacesOmniFacesなどの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.cssますが、PrimeFacesのいくつかのデフォルトCSSをfinetuning /上書きしている請求項独自のWebアプリケーション内のリソースを。PrimeFacesが独自のライブラリ名を使用しなかった場合primefaces.css読み込まれず、代わりにwebappが提供するものが読み込まれるため、見た目が悪くなります。

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

注目すべきは、RichFacesが間違っていたことです。それはまったく使用せず、その上libraryに別のリソース処理レイヤーを自作したため、RichFacesリソースをプログラムで識別することは不可能です。それが、RichFacesリソースで動作させるために、OmniFaces 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ショーケースのソースコードを確認してください。

または、同じリソースを複数のwebappで共有し、この答えと同じ例に基づいてそのための「共通」プロジェクトを作成し/WEB-INF/lib、それをwebappにJARとして埋め込んだ場合は、それをライブラリーとしても参照します。 (名前は自由に選択できます。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="" />

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

したがって、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が初めて要求されたときに、キャッシュから同じ名前のリソースを表示するのではなく、サーバーに直接リソースを要求します。これにより、エンドユーザーは、更新されたCSS / JSリソースを取得する必要があるときに、ハードリフレッシュ(Ctrl + F5など)を実行する必要がなくなります。

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

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


2
ライブラリにELを使用することは可能ですか?したがって、resources / defaultとresources / feelingFroggyTodayが必要な場合は、library = "#{someLibraryHere}"のようにしてsomeLibraryHereを選択したライブラリにマップし、毎回リソースディレクトリの名前をより高いバージョンに変更する必要がないようにします。変えたかった。
gebuh

library = adminまたはlibray = layoutと言うとき、それらの(adminおよびlayout)フォルダーはリソースフォルダーにありますか?
Koray Tugay 2013年

うーん。非常に興味深いバルス。読み込み中にtheme.cssファイルが空のように見えるWebアプリで問題が発生しています。これは、さまざまな再デプロイ(JBOSS EAPで)後にのみ発生します。cssのURLは次のようになります:/javax.faces.resource/css/theme.css.xhtml?ln=default&v=3_3_0_130416このように宣言されています:<h:outputStylesheet library = "default" name = "css / theme。 css "target =" head "/>。たぶんこの問題はバージョン管理の問題に関連していますか?
Ricardo Vila

2
libraryまたはそれに関連する何かに使用できる文字は、mojarra 2.2.5(2.2.5-jbossorg-3、wildfly 8.0)と2.2.11(2.2.11-jbossorg-1)の間で変更されましたか?リリースノートに何も見つからないようです。stackoverflow.com/questions/35719808/…を
Kukeltje

3
@BalusCに感謝します。残念ながら、Oracle独自のJava EE 7チュートリアルcssでも、8.6 Webリソースの章でライブラリ名を使用し、guessnumber-jsfサンプルアプリケーションの cssと画像で間違った例を示しています
Jesper、2016年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.