Tutoriel JSF2 N°3 : Gestion des ressources (css, js, img)

Avec Objis, spécialiste formation JSF, découvrez la gestion de ressources de type css, javascript, images,avec JSF 2. Comprenez l’utilisation de h:outputStylesheet , h:outputScript et h:graphicImage.

Objectifs

- Comprendre la gestion des ressources avec JSF 2
- Mettre en oeuvre la mise en place d’une ressource de type image.

Programme

- Contexte et objectifs
- Partie 1 : convention d’accès css, images, javascript avec JSF 2
- Partie 2 : Mise en œuvre affichage d’une image

Durée

20 min.

Contexte :

Vous souhaitez accéder à une feuille de style, une image ou un fichier javascript à partir de vos vues JSF .

Partie 1 : convention d’accès aux ressources

- Créez un répertoire ’resources’ . C’est dans ce répertoire que JSF attendra (par défaut) les resources que vous allez demander.

- Dans ce répertoire , créez les sous-répertoires pour vos ressources . Ci-dessous, le sous-répertoire ’css’ contient une feuille de style et les sous-répertoires ’images’ et ’javascript’ viennent d’être créés.

PNG - 13.9 ko
Capture d’écran 2012-11-16 à 14.01.04

Prise en charge css

— h:outputStylesheet library="css" name="styles.css" target="body"/ , avec

— > library : répertoire qui contient le fichier css,
— > name : nom du fichier css
— > target : partie qui initialisera le fichier css au moment de son chargement, ici donc corps de la page jsf.

Prise en charge css

— h:outputScript library="javascript" name="util.js" target="head"/

- Pour la prise en charge des fichiers java script, les spécifications sont les mêmes que pour la prise en charge du fichier css.

Prise en charge images

- Pour ce qui concerne la prise en charge des images au sein des pages jsf, nous pouvons utiliser deux différente approches

1. L’utilisation du champ valeur en écrivant suivant la syntaxe suivante resource[’LIBRARY:NAME’]

— h:graphicImage value="#resource[’images:cloudy.gif’]"/

2. ou encore la syntaxe suivante aussi :
— h:graphicImage library="images" name="logo-objis.png"/

Partie 2 : Mise en œuvre la mise en place d’une ressource de type image

- Téléchargez le logo d’objis

Zip - 3.5 ko
logo-objis.png-3

- copiez-le dans le dossier images de votre projet eclipse.

- Modifiez la vue header.xhtml contenu dans le dossier template comme ci-dessous :

PNG - 56.4 ko
header.xhtml modifié

rendu

PNG - 45.5 ko
intégration d’une image dans le template

PROJET

Zip - 2.7 Mo
Jsf2ObjisFormation-TP5

Conclusion

Dans ce tutoriel, vous compris et mis en œuvre, le mécanisme simple de gestion de ressources fourni par JSF 2.

Formation JSF

Le chemin le plus court pour avoir les réflexes et la méthodologie du bon développeur JSF : Formation JSF

PNG - 82.7 ko
programme détaillé JSF 2