JSF - h: panelGrid

A tag h: panel renderiza um elemento HTML "table".

Tag JSF

<h:panelGrid id = "panel" columns = "2" border = "1"
      cellpadding = "10" cellspacing = "1">
   
   <f:facet name = "header">
      <h:outputText value = "Login"/>
   </f:facet>
   <h:outputLabel value = "Username" />
   <h:inputText  />
   <h:outputLabel value = "Password" />
   <h:inputSecret />
   
   <f:facet name = "footer">
      <h:panelGroup style = "display:block; text-align:center">
         <h:commandButton id = "submit" value = "Submit" />
      </h:panelGroup>
   </f:facet>
</h:panelGrid>

Saída renderizada

<table id = "j_idt10:panel" border = "1" cellpadding = "10" cellspacing = "1">
   <thead>
      <tr><th colspan = "2" scope = "colgroup">Login</th></tr>
   </thead>
   
   <tfoot>
      <tr>
         <td colspan = "2">
            <span style = "display:block; text-align:center">
               <input id = "j_idt10:submit" type = "submit"
                  name = "j_idt10:submit" value = "Submit" />
            </span>
         </td>
      </tr>
   </tfoot>
   
   <tbody>
      <tr>
         <td><label>Username</label></td>
         <td><input type = "text" name = "j_idt10:j_idt17" /></td>
      </tr>
      <tr>
         <td><label>Password</label></td>
         <td><input type = "password" name = "j_idt10:j_idt21" value = "" /></td>
      </tr>
   
   </tbody>
</table>

Atributos de tag

S.Não	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	bgcolor Cor de fundo para a mesa
7	border Largura da borda da mesa
8	cellpadding Preenchimento em torno das células da mesa
9	cellspacing Espaçamento entre células da tabela
10	columnClasses Lista separada por vírgulas de classes CSS para colunas
11	columns Número de colunas na tabela
12	footerClass Classe CSS para o rodapé da tabela
13	frame moldura Especificação dos lados da moldura ao redor da mesa que serão desenhados; valores válidos: nenhum, acima, abaixo, hsides, vsides, lhs, rhs, box, border
14	headerClass Classe CSS para o cabeçalho da tabela
15	rowClasses Lista separada por vírgulas de classes CSS para colunas
16	rules Especificação para linhas desenhadas entre células; valores válidos: grupos, linhas, colunas, todos
17	summary Resumo da finalidade e estrutura da tabela usada para feedback não visual, como fala
18	dir Direção do texto. Os valores válidos sãoltr (da esquerda para a direita) e rtl (direita para esquerda)
19	lang Idioma base dos atributos e texto de um elemento
20	border Valor de pixel para a largura da borda de um elemento
21	title Um título, usado para acessibilidade, que descreve um elemento. Os navegadores visuais normalmente criam dicas de ferramentas para o valor do título
22	width Largura de um elemento
23	onblur Elemento perde o foco
24	onchange O valor do elemento muda
25	onclick O botão do mouse é clicado sobre o elemento
26	ondblclick O botão do mouse é clicado duas vezes sobre o elemento
27	onfocus Elemento recebe foco
28	onkeydown A tecla está pressionada
29	onkeypress A tecla é pressionada e posteriormente liberada
30	onkeyup Chave liberada
31	onmousedown O botão do mouse é pressionado sobre o elemento
32	onmousemove O mouse se move sobre o elemento
33	onmouseout O mouse sai da área do elemento
34	onmouseover O mouse se move para um elemento
35	onmouseup 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 a seguir 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:panelGrid example</h2>
      <hr />
      
      <h:form>
         <h:panelGrid id = "panel" columns = "2" border = "1"
            cellpadding = "10" cellspacing = "1">
            
            <f:facet name = "header">
               <h:outputText value = "Login"/>
            </f:facet>
            <h:outputLabel value = "Username" />
            <h:inputText  />
            <h:outputLabel value = "Password" />
            <h:inputSecret />
            
            <f:facet name = "footer">
               <h:panelGroup style = "display:block; text-align:center">
                  <h:commandButton id = "submit" value = "Submit" />
               </h:panelGroup>
            </f:facet>
         </h:panelGrid>
      </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 bem com sua aplicação, isso produzirá o seguinte resultado.

↰ Previous page