JSF - h: graphicImage

La balise h: graphicImage restitue un élément HTML de type "img".

Balise JSF

<h:graphicImage  
   value = "http://www.tutorialspoint.com/images/jsf-mini-logo.png"/>

Sortie rendue

<img src = "http://www.tutorialspoint.com/images/jsf-mini-logo.png" />

Attributs de balise

S. Non	Attribut et description
1	id Identifiant d'un composant
2	binding Référence au composant qui peut être utilisé dans un backing bean
3	rendered Un booléen; false supprime le rendu
4	styleClass Nom de classe de feuille de style en cascade (CSS)
5	value La valeur d'un composant, généralement une liaison de valeur
6	alt Texte alternatif pour les éléments non textuels tels que des images ou des applets
sept	dir Direction du texte. Les valeurs valides sontltr (de gauche à droite) et rtl (de droite à gauche)
8	lang Langue de base des attributs et du texte d'un élément
9	style Informations de style en ligne
dix	tabindex Valeur numérique spécifiant un index de tabulation
11	target Le nom d'un cadre dans lequel un document est ouvert
12	title Un titre, utilisé pour l'accessibilité, qui décrit un élément. Les navigateurs visuels créent généralement des info-bulles pour la valeur du titre
13	usemap Usemap d'un élément
14	url URL de l'image
15	width Largeur d'un élément
16	onblur L'élément perd le focus
17	onchange Changements de valeur de l'élément
18	onclick Le bouton de la souris est cliqué sur l'élément
19	ondblclick Le bouton de la souris est double-cliqué sur l'élément
20	onfocus L'élément reçoit le focus
21	onkeydown La touche est enfoncée
22	onkeypress La touche est enfoncée puis relâchée
23	onkeyup La clé est libérée
24	onmousedown Le bouton de la souris est enfoncé sur l'élément
25	onmousemove La souris se déplace sur l'élément
26	onmouseout La souris quitte la zone de l'élément
27	onmouseover La souris se déplace sur un élément
28	onmouseup Le bouton de la souris est relâché

Exemple d'application

Créons une application JSF de test pour tester la balise ci-dessus.

Étape	La description
1	Créez un projet avec un nom helloworld sous un package com.tutorialspoint.test comme expliqué dans le chapitre JSF - Première application .
2	Modifiez home.xhtml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3	Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.
4	Enfin, créez l'application sous la forme d'un fichier war et déployez-la dans Apache Tomcat Webserver.
5	Lancez votre application Web en utilisant l'URL appropriée, comme expliqué ci-dessous à la dernière étape.

home.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <title>JSF Tutorial!</title>
   </head>
   
   <body>
      <h2>h:graphicImage example</h2>
      <hr />
      
      <h:form>      
         <h3>Image</h3>
         <h:graphicImage value = "/images/jsf-mini-logo.png"/>
      </h:form>
   </body>
</html>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application comme nous l'avons fait dans le chapitre JSF - Première application. Si tout va bien avec votre application, cela produira le résultat suivant.