Este componente é um container que agrupa seus Blhos. Ele deve ser usado, especialmente, em situações onde é desejado a inclusão de vários componentes em um lugar que apenas um é permitido, por exemplo, como uma única célula do <h:panelGrid>.
Vamos ver como faríamos para incluir um botão ao lado de um campo de entrada de texto usando<h:panelGrid>para organizar os componentes.
<h:panelGrid columns="2"> <f:facet name="header">
<h:outputText value="Dados para cadastro" /> </f:facet> <h:outputText value="Nome:" /> <h:inputText size="20" /> <h:outputText value="E-mail:" /> <h:panelGroup> <h:inputText size="40" /> <h:commandButton value="Validar" /> </h:panelGroup> <h:outputText value="Senha:" /> <h:inputSecret size="20" /> <h:outputText /> <h:commandButton value="Cadastrar" /> </h:panelGrid> Veja o resultado:
5.13. Mensagens
As aplicações precisam tratar entradas do usuário, processá-las e exibir mensagens de sucesso, erros, advertências e etc. Estudaremos em outro capítulo sobre validação e conversão de dados, mas já podemos trabalhar com mensagens de feedback para os usuários, pois os managed beans possuem o poder de adicionar mensagens a uma Bla, que em algum momento pode ser exibida na página.
Criaremos um managed bean que instancia uma mensagem e adiciona ao contexto do framework.
@ManagedBean
public class CadastroBean {
private String nome;
public void cadastrar() {
FacesContext context = FacesContext.getCurrentInstance();
FacesMessage mensagem = new FacesMessage(
FacesMessage.SEVERITY_INFO, "Cadastro efetuado.",
"Cliente " + this.nome + " cadastrado com sucesso.");
context.addMessage(null, mensagem); }
public String getNome() {
return nome; }
public void setNome(String nome) {
this.nome = nome; }
}
Instanciamos um objeto da classe FacesMessage, passando como parâmetro a severidade da mensagem, uma mensagem resumida e uma mensagem detalhada. Essa classe fornece outros construtores também.
O método FacesContext.addMessagerecebe o id do componente que a mensagem será associada e uma instância de FacesMessage. Veja que não associamos a mensagem com nenhum componente, pois passamosnullno primeiro parâmetro. Para exibir todas as mensagens na página, usamos o componente <h:messages>, podendo especiBcar se queremos exibir a mensagem de detalhe e/ou de resumo, além de aceitar também propriedades de estilos CSS.
<h:form>
<h:messages showDetail="true" showSummary="true" errorStyle="color: red" infoStyle="color: green" warnStyle="color: orange" fatalStyle="color: gray" /> <h:outputLabel value="Nome:" /> <h:inputText value="#{cadastroBean.nome}" /> <h:commandButton value="Cadastrar" action="#{cadastroBean.cadastrar}" /> </h:form> Veja o resultado:
5.14. Tabelas de dados
O componente<h:dataTable>gera uma tabela HTML, que deve ser associada a uma lista de elementos de um managed bean, através de uma expressão de ligação de valor. O managed bean pode obter dados dinamicamente, através de um banco de dados, arquivo, etc.
Nosso exemplo será de uma tabela de dados de livros favoritos. Precisamos criar uma classe que representará um livro, chamadaLivro.
public class Livro {
private String titulo;
private String autor;
public Livro() { }
super();
this.titulo = titulo;
this.autor = autor; }
public String getTitulo() {
return titulo; }
public void setTitulo(String titulo) {
this.titulo = titulo; }
public String getAutor() {
return autor; }
public void setAutor(String autor) {
this.autor = autor; }
}
Nosso managed beanLivrosBeanpossuirá uma lista de livros, que será preenchida na instanciação de objetos da classe.
@ManagedBean @ViewScoped
public class LivrosBean {
private List<Livro> livros;
public LivrosBean() {
this.livros = new ArrayList<>();
this.livros.add(new Livro("Java e Orientação a Objetos",
"Thiago Faria"));
this.livros.add(new Livro("JPA 2 e Hibernate", "Thiago Faria"));
this.livros.add(new Livro("JavaServer Faces", "Thiago Faria"));
this.livros.add(new Livro("Test Driven Development", "Kent Beck"));
this.livros.add(new Livro("Start Small, Stay Small",
"Rob Walling"));
this.livros.add(new Livro("Trabalhe 4 Horas Por Semana",
"Timothy Ferris"));
this.livros.add(new Livro("Getting Real", "Jason Fried"));
this.livros.add(new Livro("Rework", "Jason Fried")); }
public List<Livro> getLivros() {
return livros; }
public void setLivros(List<Livro> livros) {
this.livros = livros; }
}
Criaremos agora uma página Livros.xhtml, que listará os livros favoritos através do componente<h:dataTable>. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:h="http://xmlns.jcp.org/jsf/html"> <h:head>
<title>Livros favoritos</title> </h:head>
<h:body> <h:form>
<h:dataTable value="#{livrosBean.livros}" var="livro" border="1" cellspacing="0" cellpadding="2"> <f:facet name="header">
Relação de livros favoritos </f:facet>
<h:column>
<f:facet name="header">Título</f:facet> <h:outputText value="#{livro.titulo}" /> </h:column>
<h:column>
<f:facet name="header">Autor</f:facet> <h:outputText value="#{livro.autor}" /> </h:column> </h:dataTable> </h:form> </h:body> </html>
Quando este componente é processado, cada item da lista, referenciada através do atributovalue, Bca disponível dentro do corpo da tag. O nome de cada item da lista é deBnido pelo atributovar, possibilitando o acesso dentro das colunas.
<h:dataTable value="#{livrosBean.livros}" var="livro" border="1" cellspacing="0" cellpadding="2">
DeBnimos o facet header da tabela de dados, que corresponde ao cabeçalho da própria tabela.
Inserimos duas colunas com <h:column>. Dentro de cada coluna, podemos incluir qualquer quantidade de componentes. No caso deste exemplo, inserimos apenas um <h:outputText>, além do facet header, que corresponde ao cabeçalho da coluna. <h:column>
<f:facet name="header">Título</f:facet> <h:outputText value="#{livro.titulo}" /> </h:column>
<h:column>
<f:facet name="header">Autor</f:facet> <h:outputText value="#{livro.autor}" /> </h:column>