web-dev-qa-db-ja.com

FaceletsテンプレートでCSS / JS / imageリソースを参照するにはどうすればよいですか？

Faceletsのテンプレートに関するチュートリアル を実行しました。

ここで、テンプレートと同じディレクトリにないページを作成しようとしました。スタイルは次のように相対パスで参照されるため、ページスタイルに問題があります。

<link rel="stylesheet" href="style_resource_path.css" />

/で開始することにより、絶対参照を使用できます。

<link rel="stylesheet" href="/project_root_path/style_resource_path.css" />

しかし、これにより、アプリケーションを別のコンテキストに移動するときに問題が発生します。

だから私はFaceletsでCSS（およびJSと画像）リソースを参照する最良の方法は何だろうと思っていますか？

jsfresourcesjsf-2faceletstemplating
52
kravemir

前書き

適切なJSF 2.xの方法は、 _<h:outputStylesheet>_ 、 _<h:outputScript>_ および _<h:graphicImage>_ をnameとともに使用することです。 webappの_/resources_フォルダーへの相対パスを参照します。これにより、JSF 1.xの場合のようにコンテキストパスを心配する必要がなくなります。 JSF 1.xでコンテキストパスに関連するCSSを含める方法 も参照してください。

フォルダー構造

以下のように、パブリックWebコンテンツの_/resources_フォルダーにCSS/JS/imageファイルをドロップします（_/WEB-INF_および_/META-INF_と同じレベルに存在しない場合は作成します）。

_WebContent
 |-- resources
 |    |-- css
 |    |    |-- other.css
 |    |    `-- style.css
 |    |-- js
 |    |    `-- script.js
 |    `-- images
 |         |-- background.png
 |         |-- favicon.ico
 |         `-- logo.png
 |-- META-INF
 |    `-- MANIFEST.MF
 |-- WEB-INF
 |    |-- faces-config.xml
 |    `-- web.xml
 |-- page.xhtml
 :
_

Mavenの場合、それは_/main/webapp/resources_にあるため、not_/main/resources_（これらはJavaリソース（properties/xml/text/configファイル）は、webcontentではなく、実行時クラスパスで終わる必要があります）。 MSFとJSF webapp構造、JSFリソースを正確に配置する場所 も参照してください。

Faceletsでの参照

最終的に、これらのリソースは、相対パスをいじる必要なく、どこでも利用できます。

_<h:head>
    ...
    <h:outputStylesheet name="css/style.css" />
    <h:outputScript name="js/script.js" />
</h:head>
<h:body>
    ...
    <h:graphicImage name="images/logo.png" />
    ...
</h:body>
_

name属性は、_/resources_フォルダーに対する相対パスを表す必要があります。 _/_で始める必要はありません。 PrimeFacesなどのコンポーネントライブラリまたは複数のWebアプリケーションで共有される共通モジュールJARファイルを開発しない限り、notはlibrary属性を必要とします。

追加の_<h:outputStylesheet>_を必要とせずに、テンプレートクライアントの_<ui:define>_でも、どこでも_<h:head>_を参照できます。マスターテンプレートの_<h:head>_コンポーネントを介して、自動的に生成された_<head>_になります。

_<ui:define name="...">
    <h:outputStylesheet name="css/style.css" />
    ...
</ui:define>
_

_<h:outputScript>_もどこでも参照できますが、デフォルトでは、宣言した場所でHTMLになります。 _<head>_を介して_<h:head>_にする場合は、_target="head"_属性を追加します。

_<ui:define name="...">
    <h:outputScript name="js/script.js" target="head" />
    ...
</ui:define>
_

または、_<body>_の最後に配置する場合（_</body>_の直前、たとえば_window.onload_および$(document).ready()などは不要です） _<h:body>_、次に_target="body"_属性を追加します。

_<ui:define name="...">
    <h:outputScript name="js/script.js" target="body" />
    ...
</ui:define>
_

PrimeFaces HeadRenderer

PrimeFacesを使用している場合、そのHeadRendererは、上記のデフォルトの_<h:head>_スクリプトの順序を乱します。基本的に、PrimeFaces固有の_<f:facet name="first|middle|last">_を介して順序を強制する必要があります。これは、面倒で「テンプレート化できない」コードになる可能性があります。 this answer で説明されているように、これをオフにすることもできます。

JARでのパッケージ化

リソースをJARファイルにパッケージ化することもできます。 共有コードを使用した複数のJSFプロジェクトの構造 も参照してください。

ELでの参照

ELでは_#{resource}_マッピングを使用して、JSFが基本的に_/context/javax.faces.resource/folder/file.ext.xhtml?ln=library_のようなリソースURLを印刷できるようにして、たとえばCSS背景画像またはファビコン。唯一の要件は、CSSファイル自体もJSFリソースとして提供されることです。そうでない場合、EL式は評価されません。 JSF画像リソースをCSS背景画像urlとして参照する方法 も参照してください。

_.some {
    background-image: url("#{resource['images/background.png']}");
}
_

以下は_@import_の例です。

_@import url("#{resource['css/other.css']}");
_

これがファビコンの例です。 ファビコンをJSFプロジェクトに追加し、<link>で参照する も参照してください。

_<link rel="shortcut icon" href="#{resource['images/favicon.ico']}" />
_

SCSSコンパイラを使用している場合（例： Maven用のSassコンパイラプラグイン ）、SCSSプロセッサが_#_を特殊文字として解釈する可能性があることに注意してください。その場合、_\_でエスケープする必要があります。

_.some {
    background-image: url("\#{resource['images/background.png']}");
}
_

サードパーティのCSSファイルを参照する

_<h:outputStylesheet>_を介してロードされるサードパーティのCSSファイルは、前のセクションで説明したように_#{resource}_式を使用するように変更する必要がある場合があり、そうでない場合はUnmappedResourceHandlerをインストールする必要がありますJSFを使用してサービスを提供できます。 a.oも参照してください。 Bootsfacesページはスタイリングなしでブラウザに表示されます および JSFでFont Awesome 4.x CSSファイルを使用する方法？ブラウザはフォントファイルを見つけることができません 。

/ WEB-INFに非表示

_/resources_フォルダー全体を_/WEB-INF_に移動してリソースをパブリックアクセスから非表示にする場合、JSF 2.2以降では、オプションで新しい_web.xml_コンテキストパラメーターを使用してwebcontent相対パスを変更できます次のように：

_<context-param>
    <param-name>javax.faces.WEBAPP_RESOURCES_DIRECTORY</param-name>
    <param-value>/WEB-INF/resources</param-value>
</context-param>
_

古いJSFバージョンでは、これは不可能です。

こちらもご覧ください：

108
BalusC

Webアプリケーションのサブディレクトリで実行しているとします。あなたはこのように試すことができます：

 <link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>

'${facesContext.externalContext.requestContextPath}/'リンクを使用すると、コンテキストのルートにすぐに戻ることができます。

相対URLでは、先頭のスラッシュ/はドメインルートを指します。たとえば、JSFページが http://example.com/context/page.jsf によってリクエストされた場合、CSS URLは http://example.com/ styles/decoration.css 。有効な相対URLを知るには、JSFページとCSSファイルの両方の絶対URLを知り、一方を他方から抽出する必要があります。

あなたのCSSファイルが実際に http://example.com/context/styles/decoration.css にあると推測してみましょう（page.jspの1つ）：

<link rel="stylesheet" type="text/css" href="styles/decoration.css" />
7
Abimaran Kugathasan

これらの回答は、同じ問題を解決するのに役立ちました。 SASSとGULPを使用していたため、私の問題はより複雑でしたが。

変更しなければなりませんでした（＃の前の「\」に注意してください。おそらくgulpの副作用です。

 <h:outputStylesheet library="my_theme" name="css/default.css"/>  

 background: $blue url("\#{resource['my_theme/images/background-homepage-h1.png']}");
2
Mircea Stanciu

Resourcehandlers.UnmappedResourceHandlerは、JSFリソースを/javax.faces.resource/*のURLパターンにマップするのに役立ちます。

私にとっては、faces-config.xmlの次の2つのxml構成：org.omnifaces.resourcehandler.UnmappedResourceHandler

およびweb.xmlで：

<servlet-mapping>
<servlet-name>facesServlet</servlet-name>
<url-pattern>/javax.faces.resource/*</url-pattern>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>

cSSと画像を助けました。

0
Behruz Zaripov