Bom pessoal estou voltando na ativa com o blog, e vou começar a passar um pouco do meu conhecimento em JAVA, para quem estiver interessado, bom estou atualmente trabalhando com Java EE 6 em aplicações web, utilizo o framework JSF versão 2.0, bem para que não sabe o JSF proporciona um desenvolvimento para web mais simples.  “JSF faz sozinho o trabalho braçal que desenvolvedores JSP precisam implementar manualmente, como navegação entre páginas e validação. Você pode pensar nos servlets e no JSP como “a linguagem de montagem” por baixo do framework de alto nível do JSF.[David Geary e Cay Hostmann, livro Core JavaServer Faces, Fundamentos 2º ed. 2007]”, quem quiser pode comprar o livro que citei acima muito bom, ele fala sobre a versão 1.02 do JSF, mas muito útil para o aprendizado e bem didático, bem então vamos ao que interessa, vou demonstrar como montar um projeto e fazer uma aplicação de demonstração, vou utilizar  JDK Java 6, IDE NetBeans 6.9.1 que tem suporte nativo ao JSF 2.0, e possui já um servidor para aplicação GlassFish 3.0 que já vem incluído.

1º passo:  Abra seu NetBeans e crie um novo projeto Java Web > Aplicação Web.

2º passo:  Coloque um nome no seu projeto.

3º passo:  escolha o servidor GLASSFISH 3,  e a versão do Java EE 6.

4º passo: escolha o Framework JavaServer Faces que é o que vamos trabalhar, as bibliotecas marque a 1º opção “Utilize a biblioteca padrão que vem com o servidor (JSF 2.0)”.

5º passo:  na aba Configurações opção Padrão de URL do servlet JSF: mude para qualquer extensão que deseje, (ex:  *.teste) assim todas minhas paginas serão da seguinte forma: “minhapagina.teste”. e pronto finalize e temos um projeto JSF 2.0.

Se você mandar executar o projeto já temos um “Hello Facelets” pronto,  suponho que seja básico de mais fazer um “Hello World”, vamos progredir e criar um formulário simples,  mas antes tenho que explicar um pouco mais sobre o JSF, ele é um framework possui uma arquitetura MVC(Model-View-Controller), Model será nossas classe, View a telas de entrada e saída de dados, e Controller será o Managed Beans, ou seja Bens Gerenciados, onde vai conter nossa lógica de negócio ou programação, com isso seu código fica organizado e de fácil manutenção e outros fatores, exemplo na sua View(tela) não tem código java, somente seus componentes de tela e assim fica fácil para um design trabalhar com o visual, um bom artigo sobre isso é do Rafael Pontes referência em JSF,  então vamos lá.

– Crie um pacote models e um controllers, para suas classes e os Managed Beans  assim fica melhor visualizar seus arquivos.

– Crie uma classe java chamada Pessoa dentro do pacote models, com os atributos   nome, endereço, numero, telefone e cidade.

Código Pessoa.java:

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

package br.com.teste.models;

/**
 *
 * @author Thiago
 */
public class Pessoa {
 private String nome;
 private String endereco;
 private String numero;
 private String telefone;
 private String cidade;

 public String getCidade() {
 return cidade;
 }

 public void setCidade(String cidade) {
 this.cidade = cidade;
 }

 public String getEndereco() {
 return endereco;
 }

 public void setEndereco(String endereco) {
 this.endereco = endereco;
 }

 public String getNome() {
 return nome;
 }

 public void setNome(String nome) {
 this.nome = nome;
 }

 public String getNumero() {
 return numero;
 }

 public void setNumero(String numero) {
 this.numero = numero;
 }

 public String getTelefone() {
 return telefone;
 }

 public void setTelefone(String telefone) {
 this.telefone = telefone;
 }

}

– Crie um Bean Gerenciado no pacote controllers, veja como encontrar.

– Escolha a Categoria JavaServer Faces e selecione Bean Gerenciado JSF.

– Vamos dar o nome de PessoaMB, escolha o escopo “View”, em outro momento explico o que seria isso.

– Seu projeto desse estar com essa cara agora, temos o index.xhtml que foi gerado ao criar o projeto, temos nossa classe modelo Pessoa e o controller PessoaMB.

– Abra o index.xhtml e vamos criar nosso formulário:

Código Index.xhtml:

<?xml version='1.0' encoding='UTF-8' ?>
<!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"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core">
 <h:head>
 <title>Cadastro</title>
 </h:head>
 <h:body>
 <h:form>
 <h:panelGrid columns="3">
 <h:outputLabel value="Nome:"/>
 <h:inputText id="nome"  size="20" />
 <h:message for="nome" />

 <h:outputLabel value="Endereçoo:"/>
 <h:inputText id="end"  size="20"  >
 <h:message for="end" />

 <h:outputLabel value="Número:"/>
 <h:inputText id="nro"  size="20" />
 <h:message for="nro" />

 <h:outputLabel value="Telefone:"/>
 <h:inputText id="tel"  size="20" />
 <h:message for="tel" />

 <h:outputLabel value="Cidade:"/>
 <h:inputText id="mun"  size="20" />
 <h:message for="mun" />

 <h:commandButton id="btnE" value="Enviar" />
 <h:commandButton id="btnL" value="Limpar"/>

 </h:panelGrid>
 </h:form>
 </h:body>
</html>

Resultado não é com visual tão atrativo, em outro momento vamos trabalhar com o visual.

– Abra seu controller PessoaMB, vamos implementar a interface Serializable explico mais para frente o que seria isso, e instancie um objeto pessoa, e uma lista do tipo pessoa para armazenar as pessoas.

Código PessoaMB.java:

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package br.com.teste.controllers;

import br.com.teste.models.Pessoa;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

/**
 *
 * @author Thiago
 */
@ManagedBean
@ViewScoped
public class PessoaMB implements Serializable {

    private Pessoa pessoa = new Pessoa();
    private List<Pessoa> pessoaLista = new ArrayList<Pessoa>();

    /** Creates a new instance of PessoaMB */
    public PessoaMB() {
    }

    /**Getters e Setters */
    public Pessoa getPessoa() {
        return pessoa;
    }

    public void setPessoa(Pessoa pessoa) {
        this.pessoa = pessoa;
    }

    public List<Pessoa> getPessoaLista() {
        return pessoaLista;
    }

    public void setPessoaLista(List<Pessoa> pessoaLista) {
        this.pessoaLista = pessoaLista;
    }

– Na Index.xhtml e vamos adicionar os values nos inputs.

Agora que instanciamos a classe no Bean podemos acessar os atributos através dele.

Ex: inputText id=”teste” value=”#{seuBean.classe.atributo}” />

Código parte Index.xhtml:


<h:panelGrid columns="3">

<h:outputLabel value="Nome:"/>

<h:inputText id="nome" value="#{pessoaMB.pessoa.nome}" size="20" />

<h:message for="nome" />

<h:outputLabel value="Endereço:"/>

<h:inputText id="end" value="#{pessoaMB.pessoa.endereco}" size="20"  >

<h:message for="end" />

<h:outputLabel value="Número:"/>

<h:inputText id="nro" value="#{pessoaMB.pessoa.numero}" size="20" />

<h:message for="nro" />

<h:outputLabel value="Telefone:"/>

<h:inputText id="tel" value="#{pessoaMB.pessoa.telefone}" size="20" />

<h:message for="tel" />

<h:outputLabel value="Cidade:"/>

<h:inputText id="mun" value="#{pessoaMB.pessoa.cidade}" size="20" />

<h:message for="mun" />

<h:commandButton id="btnE" value="Enviar" type="submit" action="#{pessoaMB.salvarPessoa}"/>

<h:commandButton id="btnL" value="Limpar" type="reset"/>

</h:panelGrid>

– No PessoaMB e vamos criar nosso método para salvar essas pessoas.

Logo após os Getters e Setters adicone o método salvar.


/**Métodos */

public void salvarPessoa() {

//adicionando pessoas a lista
pessoaLista.add(pessoa);
//instanciado uma nova para ser cadastrada
pessoa = new Pessoa();

}

– Na Index.xhtml e vamos adicionar ação para o botão.

É o mesmo sentido do value, mas nesse caso é uma action=“#{meuBean.meuMetodo}”.

Código parte Index.xhtml:

<h:commandButton id="btnE" value="Enviar" type="submit" action="#{pessoaMB.salvarPessoa}"/>

Não comentei o atributo do commandButton type=”” />

Para envio de formulário utiliza o “submit” que é defaut, e no caso do segundo que é para limpeza usamos o “reset” que tem a função de limpar o formulário.

– Nosso cadastro está pronto, agora vamos apresentar na tela esses dados que inserimos na lista de pessoas, para isso utilizaremos um dataTable, veja como:

Código parte Index.xhtml:

<h:panelGrid>
 <h:dataTable id="tablePessoa" value="#{pessoaMB.pessoaLista}" var="p" title="Pessoas Cadastradas" border="1" rows="10" >
 <h:column>
 <f:facet name="header">
 <h:outputText value="NOME" />
 </f:facet>
 <h:outputText value="#{p.nome}"/>
 </h:column>
 <h:column>
 <f:facet name="header">
 <h:outputText value="ENDEREÇO" />
 </f:facet>
 <h:outputText value="#{p.endereco}"/>
 </h:column>
 <h:column>
 <f:facet name="header">
 <h:outputText value="NÚMERO" />
 </f:facet>
 <h:outputText value="#{p.numero}"/>
 </h:column>
 <h:column>
 <f:facet name="header">
 <h:outputText value="TELEFONE" />
 </f:facet>
 <h:outputText value="#{p.telefone}"/>
 </h:column>
 <h:column>
 <f:facet name="header">
 <h:outputText value="CIDADE" />
 </f:facet>
 <h:outputText value="#{p.cidade}"/>
 </h:column>
 </h:dataTable>
 </h:panelGrid>

Veja que no value do dataTable  utilizei a lista que criamos no bean, value=”#{pessoaMB.pessoaLista}” e guardei numa variável var=”p” e através dela acesso os atributos específicos que estão armazenados na lista de pessoas.

Está pronto agora podemos visualizar o conteúdo que foi inserido na lista, podemos adicionar uma validação simples só para dar um “UP” no nosso formulário e mostrar a finalidade daquele , e que não é tão complicado em alguns casos validar no JSF.

No inputText /> que quiser que seja um campo obrigatório coloque o atributo required=”true” que torna o campo obrigatório e requiredeMessage=”Campo obrigatório” que é a mensagem que será exibida quando não satisfazer a condição, caso esqueça verá uma mensagem default do JSF. Ex:

Código validando com required:

<h:outputLabel value="Nome:"/>
<h:inputText id="nome" value="#{pessoaMB.pessoa.nome}" size="20"  required="true" requiredMessage="Campo Obrigatório"/>
<h:message for="nome" />



- Código final do index.xhtml:



<?xml version='1.0' encoding='UTF-8' ?>

<!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"

xmlns:h="http://java.sun.com/jsf/html"

xmlns:f="http://java.sun.com/jsf/core">

<h:head>

<title>Cadastro</title>

</h:head>

<h:body>

<h:form>

<h:panelGrid columns="3">

<h:outputLabel value="Nome:"/>

<h:inputText id="nome" value="#{pessoaMB.pessoa.nome}" size="20"  required="true" requiredMessage="Campo Obrigatório"/>

<h:message for="nome" />

<h:outputLabel value="Endereço:"/>

<h:inputText id="end" value="#{pessoaMB.pessoa.endereco}" size="20" required="true" requiredMessage="Campo Obrigatório"/>

<h:message for="end" />

<h:outputLabel value="Número:"/>

<h:inputText id="nro" value="#{pessoaMB.pessoa.numero}" size="20" />

<h:message for="nro" />

<h:outputLabel value="Telefone:"/>

<h:inputText id="tel" value="#{pessoaMB.pessoa.telefone}" size="20" />

<h:message for="tel" />

<h:outputLabel value="Cidade:"/>

<h:inputText id="mun" value="#{pessoaMB.pessoa.cidade}" size="20" required="true" requiredMessage="Campo Obrigatório"/>

<h:message for="mun" />

<h:commandButton id="btnE" value="Enviar" type="submit" action="#{pessoaMB.salvarPessoa}"/>

<h:commandButton id="btnL" value="Limpar" type="reset"/>

</h:panelGrid>

</h:form>

<h:panelGrid>

<h:dataTable id="tablePessoa" value="#{pessoaMB.pessoaLista}" var="p" title="Pessoas Cadastradas" border="1" rows="10" >

<h:column>

<f:facet name="header">

<h:outputText value="NOME" />

</f:facet>

<h:outputText value="#{p.nome}"/>

</h:column>

<h:column>

<f:facet name="header">

<h:outputText value="ENDEREÇO" />

</f:facet>

<h:outputText value="#{p.endereco}"/>

</h:column>

<h:column>

<f:facet name="header">

<h:outputText value="NÚMERO" />

</f:facet>

<h:outputText value="#{p.numero}"/>

</h:column>

<h:column>

<f:facet name="header">

<h:outputText value="TELEFONE" />

</f:facet>

<h:outputText value="#{p.telefone}"/>

</h:column>

<h:column>

<f:facet name="header">

<h:outputText value="CIDADE" />

</f:facet>

<h:outputText value="#{p.cidade}"/>

</h:column>

</h:dataTable>

</h:panelGrid>

</h:body>

</html>




Resultado Final:


Para quem quiser pode baixar o projeto baixe aqui, mas aconselho fazer seguindo os passos para aprender, e Qualquer Dúvida me mande, ajudarei sempre que puder, o que eu não souber ajudarei procurar solução,


Peço que qualquer erro meu, me avisem pois é meu 1º post ainda estou aprendendo e vou aperfeiçoando com o tempo, está interessado sobre o que é o JSF realmente veja esse post do meu amigo Fernando muito bom.


Até o próximo, prentendo inserir API do Primefaces que é muito atrativa visualmente.