JSF - h: graphicImage

A tag h: graphicImage renderiza um elemento HTML do tipo "img".

Tag JSF

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

Saída renderizada

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

Atributos de tag

S.No	Atributo e descrição
1	id Identificador para um componente
2	binding Referência ao componente que pode ser usado em um backing bean
3	rendered Um booleano; falso suprime a renderização
4	styleClass Nome da classe da folha de estilo em cascata (CSS)
5	value O valor de um componente, normalmente uma associação de valor
6	alt Texto alternativo para elementos não textuais, como imagens ou miniaplicativos
7	dir Direção do texto. Os valores válidos sãoltr (da esquerda para a direita) e rtl (direita para esquerda)
8	lang Idioma básico dos atributos e texto de um elemento
9	style Informação de estilo inline
10	tabindex Valor numérico que especifica um índice de tabulação
11	target O nome de uma moldura na qual um documento é aberto
12	title Um título, usado para acessibilidade, que descreve um elemento. Navegadores visuais normalmente criam dicas de ferramentas para o valor do título
13	usemap Usemap de um elemento
14	url Url da imagem
15	width Largura de um elemento
16	onblur Elemento perde o foco
17	onchange O valor do elemento muda
18	onclick O botão do mouse é clicado sobre o elemento
19	ondblclick O botão do mouse é clicado duas vezes sobre o elemento
20	onfocus Elemento recebe foco
21	onkeydown A tecla está pressionada
22	onkeypress A tecla é pressionada e posteriormente liberada
23	onkeyup Chave liberada
24	onmousedown O botão do mouse é pressionado sobre o elemento
25	onmousemove O mouse se move sobre o elemento
26	onmouseout O mouse sai da área do elemento
27	onmouseover O mouse se move para um elemento
28	onmouseup O botão do mouse é liberado

Aplicação de exemplo

Vamos criar um aplicativo JSF de teste para testar a tag acima.

Degrau	Descrição
1	Crie um projeto com o nome helloworld sob um pacote com.tutorialspoint.test conforme explicado no capítulo JSF - Primeira Aplicação .
2	Modifique home.xhtml conforme explicado abaixo. Mantenha o resto dos arquivos inalterados.
3	Compile e execute o aplicativo para ter certeza de que a lógica de negócios está funcionando de acordo com os requisitos.
4	Por fim, construa o aplicativo na forma de um arquivo war e implante-o no Apache Tomcat Webserver.
5	Inicie seu aplicativo da web usando o URL apropriado, conforme explicado abaixo na última etapa.

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>

Assim que você estiver pronto com todas as mudanças feitas, vamos compilar e rodar a aplicação como fizemos no capítulo JSF - Primeira Aplicação. Se tudo estiver certo com sua aplicação, isso produzirá o seguinte resultado.

↰ Previous page