Tags JSF HTML

As tags presentes no conjunto JSF HTML fornecem ao desenvolvedor a possibilidade de incluir componentes HTML nas páginas JSF. Dentre as principais tags temos:

 

h:inputText

Renderiza uma entrada do tipo texto (input com type= “text”). Utilizada, por exemplo, em formulários para obter o login do usuário, nome, etc. A Listagem 4 apresenta um exemplo de utilização da mesma e sua respectiva renderização em código HTML;

<h:inputText value="Hello World!" />

Renderiza:

<input type="text" value="Hello World!" /> Listagem 4 - Tag h:inputText e sua renderização em código HTML.

 

h:inputSecret

Renderiza uma entrada do tipo senha (input com type= “password”). Utilizada, por exemplo, em formulários para obter a senha do usuário. A Listagem 5 apresenta um exemplo de utilização da mesma e sua respectiva renderização em código HTML;

<h:inputSecret value="password" />

Renderiza:

<input type="password" value="password" /> Listagem 5 - Tag h:inputSecret e sua renderização em código HTML.

 

h:inputTextarea

Renderiza um campo de área de texto. Utilizado, por exemplo, em formulários para obter uma descrição. A Listagem 6 apresenta um exemplo de utilização da mesma e sua respectiva renderização em código HTML;

<h:inputTextarea row="10" col="10" value="Hello World Text Area!!!" />

Renderiza:

<textarea> Hello World Text Area!!!</textarea> Listagem 6 - Tag h:inputTextarea e sua renderização em código HTML.

 

h:selectBooleanCheckbox

Renderiza uma caixa de seleção. Utilizada, por exemplo, em formulários para o usuário informar se concorda com uma licença. A Listagem 7 apresenta um exemplo de utilização da mesma e sua respectiva renderização em código HTML;

<h:selectBooleanCheckbox value="De acordo com a licença." id="chkAceita" />

Renderiza:

<input type="checkbox" checked="checked">De acordo com a licença.</input> Listagem 7 - Tag h:selectBooleanCheckbox e sua renderização em código HTML.

 

h:selectManyCheckbox

Renderiza um grupo de caixas de seleção. Utilizada, por exemplo, em formulários de questões onde o usuário pode escolher mais de uma opção. A Listagem 8 apresenta um exemplo de utilização da mesma e sua respectiva renderização em código HTML;

<h:selectManyCheckbox value="#{userData.data}"> <f:selectItem itemValue="1" itemLabel="Item 1" /> <f:selectItem itemValue="2" itemLabel="Item 2" /> </h:selectManyCheckbox>

Renderiza:

<table> <tr> <td><input value="1" type="checkbox" checked="checked" /> <label> Item 1</label> </td> <td><input value="2" type="checkbox" checked="checked" /> <label> Item 2</label> </td> </tr> </table> Listagem 8 - Tag h:selectManyCheckbox e sua renderização em código HTML.

 

h:selectOneRadio

Renderiza um botão de opção. Utilizada, por exemplo, em formulários para a escolha do sexo do usuário. A Listagem 9 apresenta um exemplo de utilização da mesma e sua respectiva renderização em código HTML;

<h:selectOneRadio value="#{userData.data}"> <f:selectItem itemValue="1" itemLabel="Masculino" /> <f:selectItem itemValue="2" itemLabel="Feminino" /> </h:selectOneRadio>

Renderiza:

<table> <tr> <td><input type="radio" checked="checked" value="1" /> <label> Masculino </label></td> <td><input type="radio" value="2" /> <label> Feminino </label></td> </tr> </table> Listagem 9 - Tag h:selectOneRadio e sua renderização em código HTML.

 

h:selectOneMenu

Renderiza uma caixa de combinação. Utilizada, por exemplo, em formulários para a escolha da cidade do usuário. A Listagem 10 apresenta um exemplo de utilização da mesma e sua respectiva renderização em código HTML;

<h:selectOneMenu value="#{userData.data}"> <f:selectItem itemValue="1" itemLabel="Natal" /> <f:selectItem itemValue="2" itemLabel="Parnamirim" /> </h:selectOneMenu>

Renderiza:

<select> <option value="1">Natal</option> <option value="2">Parnamirim</option> </select> Listagem 10 - Tag h:selectOneMenu e sua renderização em código HTML.

 

h:outputText

Renderiza um texto. Utilizada, por exemplo, para exibir algum texto para o usuário. A Listagem 11 apresenta um exemplo de utilização da mesma e sua respectiva renderização em código HTML;

<h:outputText value="Aprendendo tags!" />

Renderiza: Aprendendo Tags!

Listagem 11 - Tag h:outputText e sua renderização em código HTML.