Tags JSF HTML

h:graphicImage

Renderiza uma imagem. A Listagem 12 apresenta um exemplo de utilização da mesma e sua respectiva renderização em código HTML;

<h:graphicImage value="https://imd.ufrn.br/portal/assets/images/UFRN_LOGO-01.svg"/>

Renderiza:

<img src="https://imd.ufrn.br/portal/assets/images/UFRN_LOGO-01.svg"/> Listagem 12 - Tag h:graphicImage e sua renderização em código HTML.

 

h:commandButton

Renderiza um botão (input com type= “text”). A Listagem 13 apresenta um exemplo de utilização da mesma e sua respectiva renderização em código HTML;

<h:commandButton value="Click aqui!" onclick="alert('Bem-vindo ao IMD!');" />

Renderiza:

<input type="submit" value="Click aqui!" onclick="alert('Bem-vindo ao IMD!');" /> Listagem 13 - Tag h:commandButton e sua renderização em código HTML.

 

h:commandLink

Renderiza um link. A Listagem 14 apresenta um exemplo de utilização da mesma e sua respectiva renderização em código HTML;

<h:commandLink value="Página 1" action="pagina1" />

Renderiza:

<a href="#">Página 1</a> Listagem 14 - Tag h:commandLink e sua renderização em código HTML.

 

h:message

Renderiza uma mensagem para um componente na página JSF. Utilizada, por exemplo, para as mensagens de validações de campos em formulários. A Listagem 15 apresenta um exemplo de utilização da mesma e sua respectiva renderização em código HTML;

<h:inputText id="nomeUsuario" size="20" label="nomeUsuario" required="true" /> <h:message for="nomeUsuario" style="color:red" />

Renderiza (em caso de validação):

<span style="color:red">nomeUsuario: Validation Error: Value is required</span> Listagem 15 - Tag h:message e sua renderização em código HTML.

 

h:messages

Renderiza mensagens para todos os componentes na página JSF. Também utilizada para mensagens de validações em formulários. A Listagem 16 apresenta um exemplo de utilização da mesma e sua respectiva renderização em código HTML;

<h:messages style="color:red;margin:8px;" />

Renderiza:

<ul style="color:red;margin:8px;"> <li> nomeUsuario: Validation Error: Length is greater than allowable maximum of '20' </li> <li> senha: Validation Error: Length is less than allowable minimum of '5' </li> </ul> Listagem 16 - Tag h:messages e sua renderização em código HTML.

f:convertDateTime

Realiza a conversão de uma data e hora para um formato definido. Utilizada para facilitar a leitura das datas pelos usuários. A Listagem 17 apresenta um exemplo de utilização da mesma e sua respectiva renderização em código HTML;

<h:outputText value="#{item.data}"> <f:convertDateTime pattern="dd/MM/yyyy HH:mm"/> </h:outputText>

Renderiza: 17/10/2014

Listagem 17 - Tag f:convertDateTime e sua renderização em código HTML.

 

f:validateLength

Realiza a validação de uma quantidade de caracteres especificada. Utilizada, por exemplo, para validar o tamanho mínimo de caracteres de um campo em um formulário. A Listagem 18 apresenta um exemplo de utilização da mesma;

<h:inputSecret value="#{usuarioMBean.senha}"> <f:validateLength minimum="8" maximum="16" /> </h:inputSecret> Listagem 18 - Tag f:validateLength.

 

f:selectItem

Especifica um item para as tags de botão de opção, caixa de combinação, etc. A Listagem 19 apresenta um exemplo de utilização da mesma;

<h:selectOneMenu value="#{usuarioMBean.estado}"> <f:selectItem itemValue="1" itemLabel="RN" /> <f:selectItem itemValue="2" itemLabel="PB" /> </h:selectOneMenu> Listagem 19 - Tag f:selectItem

 

f:selectItems

Especifica um conjunto de itens para as tags de botão de opção, caixa de combinação, etc. A Listagem 20 apresenta um exemplo de utilização da mesma;

<h:selectOneMenu value="#{usuarioMBean.estado}" > <f:selectItems value="#{estadosMBean.estados}" var="uf" itemLabel="#{uf.nome}" itemValue="#{uf.id}" /> </h:selectOneMenu> Listagem 20 - Tag f:selectItems