JSF - h: graphicImage

Il tag h: graphicImage restituisce un elemento HTML del tipo "img".

Tag JSF

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

Output renderizzato

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

Attributi dei tag

S.No Attributo e descrizione
1

id

Identificatore di un componente

2

binding

Riferimento al componente che può essere utilizzato in un backing bean

3

rendered

Un booleano; false sopprime il rendering

4

styleClass

Nome della classe CSS (Cascading stylesheet)

5

value

Il valore di un componente, in genere un'associazione di valori

6

alt

Testo alternativo per elementi non testuali come immagini o applet

7

dir

Direzione per il testo. I valori validi sonoltr (da sinistra a destra) e rtl (da destra a sinistra)

8

lang

Lingua di base degli attributi e del testo di un elemento

9

style

Informazioni sullo stile in linea

10

tabindex

Valore numerico che specifica un indice di tabulazione

11

target

Il nome di un frame in cui viene aperto un documento

12

title

Un titolo, utilizzato per l'accessibilità, che descrive un elemento. I browser visivi in ​​genere creano suggerimenti per il valore del titolo

13

usemap

Mappa d'uso di un elemento

14

url

Url dell'immagine

15

width

Larghezza di un elemento

16

onblur

L'elemento perde la concentrazione

17

onchange

Il valore dell'elemento cambia

18

onclick

Si fa clic sul pulsante del mouse sull'elemento

19

ondblclick

Si fa doppio clic sul pulsante del mouse sull'elemento

20

onfocus

L'elemento riceve il fuoco

21

onkeydown

Viene premuto il tasto

22

onkeypress

Il tasto viene premuto e successivamente rilasciato

23

onkeyup

La chiave viene rilasciata

24

onmousedown

Il pulsante del mouse viene premuto sull'elemento

25

onmousemove

Il mouse si sposta sull'elemento

26

onmouseout

Il mouse lascia l'area dell'elemento

27

onmouseover

Il mouse si sposta su un elemento

28

onmouseup

Il pulsante del mouse viene rilasciato

Applicazione di esempio

Creiamo un'applicazione JSF di prova per testare il tag precedente.

Passo Descrizione
1 Creare un progetto con un nome helloworld sotto un pacchetto com.tutorialspoint.test come spiegato nel capitolo JSF - Prima applicazione .
2 Modifica home.xhtml come spiegato di seguito. Mantieni invariato il resto dei file.
3 Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti.
4 Infine, crea l'applicazione sotto forma di file war e distribuiscila in Apache Tomcat Webserver.
5 Avvia la tua applicazione web utilizzando l'URL appropriato come spiegato di seguito nell'ultimo passaggio.

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>

Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione come abbiamo fatto nel capitolo JSF - Prima applicazione. Se tutto va bene con la tua applicazione, questo produrrà il seguente risultato.