web-dev-qa-db-ja.com

JSFリソースライブラリとは何ですか?またどのように使用するべきですか?

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出力は少し異なります。 /contextnameのURLパターンにマッピングする*.xhtmlおよびFacesServletのコンテキストパスが与えられた場合、前者は要求パラメータとしてライブラリ名を使用して次の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属性はどの程度正確に役立つのでしょうか。

220
BalusC

実際には、 "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" />

それが基本的に共通のライブラリ/モジュール/テーマ名これらのリソースのすべてが一般的に属する場所を表すことを明確にする必要があります。

簡単に識別

こうすれば、それらのリソースがどこに属しているのか、またはどこから来ているのかを指定して区別するのがはるかに簡単になります。自分のWebアプリケーションにprimefaces.cssリソースがあることを想像してみてください。そこでは、PrimeFacesのデフォルトCSSをオーバーライド/微調整しています。 PrimeFacesが自身のprimefaces.cssにライブラリ名を使用しなかった場合、PrimeFaces自身のものはロードされず、代わりにWebアプリケーションが提供するものが表示されなくなります。

また、カスタムの ResourceHandler を使用している場合は、libraryを正しい方法で使用すると、特定のライブラリからのリソースに対してよりきめ細かい制御を適用することもできます。すべてのコンポーネントライブラリがすべてのJSファイルに "js"を使用していたとしたら、それが特定のコンポーネントライブラリから来たものである場合、ResourceHandlerはどのように区別されるのでしょうか。例は、OmniFaces CombinedResourceHandler および GraphicResourceHandler です。チェーン内の次のリソースハンドラに委譲する前にライブラリがチェックされるcreateResource()メソッドをチェックしてください。これにより、目的のためにCombinedResourceまたはGraphicResourceをいつ作成するかがわかります。

RichFacesが間違ったことをしたことに注目すべきです。 libraryをまったく使用せず、その上に別のリソース処理層を自作したため、RichFacesリソースをプログラムで識別することは不可能です。それが、RichFacesリソースでうまく機能させるために OmniFacesCombinedResourceHander を導入する必要がある理由 リフレクションベースのハック です。

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

あなた自身のWebアプリケーションは必ずしもリソースライブラリを必要としません。あなたはそれを省略するのが最善です。

<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ショーケースのソースコード を確認してください。

または、複数のWebアプリケーションで同じリソースを共有し、そのための「共通」プロジェクトを作成した場合 この回答 これはWebアプリケーションの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つの主な利点は、自分のWebアプリケーションによって提供されるリソースに正しい方法でリソースライブラリのバージョン管理を適用できることです(これは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が初めて要求されたときに、キャッシュから同じ名前のものを表示するのではなく、Webブラウザがサーバーから直接リソースを要求するように強制します。このようにして、エンドユーザーは更新されたCSS/JSリソースを取得する必要があるときにハードリフレッシュ(Ctrl + F5など)をする必要はありません。

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

また見なさい:

247
BalusC