227 votes

Ce qui est la bibliothèque de ressources JSF pour et comment il devrait être utilisé ?

La JSF <h:outputStylesheet>, <h:outputScript> et <h:graphicImage> des composants ont un library d'attribut. Qu'est-ce et comment cela doit-il être utilisé? Il y a beaucoup d'exemples sur le web qui l'utilisent comme suit avec la commune de contenu/type de fichier css, js et img (ou image), de la bibliothèque nom de la fonction sur l'étiquette utilisée:

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

Comment est-il utile? L' library de la valeur dans ces exemples semble être juste répéter ce qui est déjà représenté par le nom de la balise. Pour un <h:outputStylesheet> il est basé sur le nom de la balise déjà évident qu'il représente une "CSS bibliothèque". Quelle est la différence avec celle qui suit, aussi fonctionne de la même façon?

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

Aussi, le code HTML généré en sortie est un peu différent. Dans un contexte donné le chemin de /contextname et FacesServlet cartographie sur un modèle d'URL de *.xhtml, l'ancien génère le code HTML suivant avec le nom de la bibliothèque en tant que paramètre de la requête:

<link rel="stylesheet" type="text/css" href="http://stackoverflow.com/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="" />

Alors que ce dernier génère le code HTML suivant avec le nom de la bibliothèque juste dans le chemin de l'URI:

<link rel="stylesheet" type="text/css" href="http://stackoverflow.com/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="" />

Cette dernière approche permet, avec le recul également plus de sens que la première approche. Comment est - library attribut alors utile?

253voto

BalusC Points 498232

En fait, tous ces exemples sur le web où la commune de contenu/type de fichier comme "js", "css", "img", etc est utilisé comme nom de la bibliothèque sont trompeuses.

Des exemples du monde réel

Pour commencer, regardons comment les JSF implémentations comme Mojarra , et MyFaces et JSF bibliothèques de composants comme PrimeFaces et OmniFaces l'utiliser. Pas un d'entre eux utilisent des ressources des bibliothèques de cette façon. Ils l'utilisent (sous les couvertures, en @ResourceDependency) de la manière suivante:

<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:outputStylesheet library="primefaces" name="primefaces.css" />

Il devrait être clair qu'il représente essentiellement la bibliothèque commune/thème/nom du module , où l'ensemble de ces ressources couramment appartiennent.

Plus facile à identifier

De cette façon, il est tellement plus facile de préciser et de distinguer, lorsque ces ressources appartiennent et/ou de venir de. Imaginez que vous arrive d'avoir un primefaces.css des ressources dans votre propre application web dans lequel vous êtes primordial/affiner certains CSS par défaut de PrimeFaces; si PrimeFaces ne pas utiliser le nom d'une bibliothèque pour ses propres primefaces.css, puis la PrimeFaces propre ne serait pas chargé, mais au lieu de la webapp fourni par un seul, qui serait briser le look'n'feel.

Aussi, lorsque vous êtes en utilisant une coutume ResourceHandler, vous pouvez également appliquer plus en plus fine de contrôle sur les ressources provenant d'une bibliothèque spécifique lors de l' library est utilisé de la bonne façon. Si toutes les bibliothèques de composants aurait utilisé "js" pour l'ensemble de leurs fichiers JS, comment l' ResourceHandler jamais distinguer si cela vient d'un composant spécifique de la bibliothèque? Des exemples sont OmniFaces CombinedResourceHandler et GraphicResourceHandler; vérifier l' createResource() méthode dans laquelle la bibliothèque est cochée avant de déléguer à la ressource suivante gestionnaire de la chaîne. De cette façon, ils savent quand de créer CombinedResource ou GraphicResource pour le but.

A noté devrait être que RichFaces avez fait mal. Il n'a pas utiliser n'importe quel library à tous et homebrewed une autre ressource de la manipulation de la couche sur elle et il est donc impossible à identifier par programme RichFaces ressources. C'est exactement la raison pour laquelle OmniFaces CombinedResourceHander ont dû introduire une fonction de réflexion hack pour le faire fonctionner, de toute façon avec RichFaces ressources.

Votre propre webapp

Votre propre webapp n'a pas nécessairement besoin d'une bibliothèque de ressources. Vous pouvez simplement l'omettre.

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

Ou vous pouvez tout simplement lui donner une plus judicieux nom commun, comme "par défaut".

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

Ou, lorsque les ressources sont spécifiques à certains maître Facelets modèle, vous pouvez aussi lui donner le nom du modèle, de sorte qu'il est plus facile de se rapporter les uns aux autres. En d'autres termes, c'est plus pour les auto-documentaire fins. E. g. en /WEB-INF/templates/layout.xhtml fichier de modèle:

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

Et un /WEB-INF/templates/admin.xhtml fichier de modèle:

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

Pour un exemple réel, vérifier la OmniFaces vitrine de code source.

Ou, si vous souhaitez partager les mêmes ressources sur plusieurs webapps et ont créé un "bien commun" projet pour que basé sur le même exemple que dans cette réponse , qui est à son tour intégré que le POT en webapp de l' /WEB-INF/lib, puis utilisez:

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

Bibliothèque de gestion des versions

L'autre principal avantage est que vous pouvez appliquer bibliothèque de ressources de gestion des versions de la bonne façon sur les ressources fournies par votre propre application web (cela ne fonctionne pas pour les ressources incorporées dans un BOCAL). Vous pouvez créer un enfant direct du sous-dossier dans le dossier de la bibliothèque avec un nom dans l' \d+(_\d+)* motif pour désigner la ressource de version de bibliothèque.

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

Lors de l'utilisation de cette balise:

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

Cela va générer le code HTML suivant avec la version de bibliothèque en tant que v paramètre:

<link rel="stylesheet" type="text/css" href="http://stackoverflow.com/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="" />

Donc, si vous avez édité le fichier/mise à jour de certaines ressources, alors tout ce que vous devez faire est de copier ou renommer le dossier de la version dans une nouvelle valeur. Si vous avez plusieurs versions des dossiers, la JSF ResourceHandler remplira automatiquement la ressource à partir de la version la plus récente numéro, selon l'ordre numérique des règles.

Ainsi, lors de la copie/renommer resources/default/1_0/* le dossier en resources/default/1_1/* comme suit:

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

Puis, le dernier exemple de balisage permettrait de générer le code HTML suivant:

<link rel="stylesheet" type="text/css" href="http://stackoverflow.com/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="" />

Cela va forcer le navigateur à la demande de la ressource directement à partir du serveur au lieu de montrer l'un avec le même nom à partir du cache, lorsque l'URL avec le paramètre modifié est été demandé pour la première fois. De cette façon, les utilisateurs ne sont pas obligés de faire un rafraîchissement (Ctrl+F5 et ainsi de suite) quand ils en ont besoin pour récupérer la mise à jour de CSS/JS des ressources. Ce n'est pas possible en cas de non utilisation de la bibliothèque de ressources.

Veuillez noter que la bibliothèque de la gestion des versions est pas possible pour les ressources enfermé dans un fichier JAR. Vous auriez besoin d'un custom ResourceHandler. Voir aussi Comment utiliser JSF versions pour les ressources dans le bocal.

Voir aussi:

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X