Precisando de freelancer em C, C++, Java, Delphi, PHP, JavaScript, C#, VB.NET, JSP, Servlets, JSF, etc? Fale comigo: osmar@arquivodecodigos.net
Você está aqui: Inicio -> Artigos e Tutoriais -> NetBeans IDE -> Escrevendo sua primeira aplicação JavaServer Faces (JSF) usando o NetBeans IDE 
Escrevendo sua primeira aplicação JavaServer Faces (JSF) usando o NetBeans IDE

1 - Introdução

O NetBeans IDE fornece vários recursos que habilitam suporte embutido para JavaServer Faces 2.0. O novo suporte JSF 2.0 do IDE 6.9 é uma expansão do suporte anterior para JavaServer Faces e inclui aprimoramentos de edição versátil para páginas Facelets, várias facilidades para trabalhar com classes de entidade e uma suíte de assistentes JSF para tarefas de desenvolvimento comuns, como criar beans gerenciados JSF, modelos Facelets e componentes de composição.

Neste artigo mostrarei aos iniciantes em JSF como criar sua primeira aplicação usando a IDE para desenvolvimento Java mais popular nos dias atuais. Note que, para este artigo, estou usando o NetBeans 6.9. Acredito que versões próximas a esta apresentarão os mesmos menus e caixas de diálogo que descreverei a seguir.

2 - Criando o projeto da aplicação web usando JSF

Para criar o projeto da aplicação web usando JavaServer Faces, siga atentamente os passos abaixo:

a) Crie um diretório para a aplicação. Uma boa sugestão é "C:\estudos_netbeans". Dentro deste diretório crie uma pasta chamada "primeira_aplicacao_jsf".

b) Se você ainda não o fez, abra o NetBeans (note que estas instruções sugerem o uso da versão 6.9.1). Em seguida vá em Arquivo -> Novo Projeto. Na caixa de diálogo Novo projeto você deverá marcar as opções mostradas abaixo:


Clique o botão Próximo.

c) Na janela seguinte deveremos informar o nome do projeto e seu local em nossa máquina. Aqui eu dei o nome "primeira" ao projeto e o salvei no diretório criado anteriormente.


Você pode salvar o projeto com o nome e no local que desejar. Mas, use sempre diretórios sem espaço ou caracteres especiais. Além disso, mantenha-os sempre em letras minúsculas. Clique o botão Próximo.

d) Agora devemos escolher o servidor e configurações. Aqui eu escolhi o Apache Tomcat 6.0.26 e marquei a versão do Java EE como sendo 5. O caminho do contexto nós podemos deixar como sugerido. Veja a figura:


Clique o botão Próximo.

e) Na janela seguinte nós devemos selecionar os Frameworks que farão parte da aplicação. Aqui eu marquei apenas JavaServer Faces:


Agora, muita atenção às configurações do JavaServer Faces. Em bibliotecas registradas você possivelmente encontrará JSF 2.0 e JSF 1.2. Se você escolher JSF 2.0, você poderá escolher Facelets como idioma preferido da página. Se escolher JSF 1.2, a única opção de idioma será JSP. Para este artigo eu escolhi JSF 2.0 e Facelets como idioma. Clique o botão Finalizar e vá buscar um cafezinho.

Ao voltar do cafezinho você notará que o NetBeans criou para nós a seguinte estrutura de arquivos e diretórios:


A página inicial da aplicação é index.xhtml e deverá estar sendo exibido no editor de códigos. Seu conteúdo deverá ser bem parecido com o que temos abaixo:

Código para 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">
  <h:head>
    <title>Facelet Title</title>
  </h:head>
  <h:body>
    Hello from Facelets
  </h:body>
</html>

Modifique o conteúdo deste arquivo para a seguinte versão:

Código para o novo 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">
  <h:head>
    <title>Minha primeira aplicação JSF usando NetBeans</title>
  </h:head>
  <h:body>
    <h3>Olá, mundão sem limites!</h3>
  </h:body>
</html>

f) Vamos executar a aplicação agora? Pressione F6. Se tudo correu como esperado, você verá um resultado parecido com a figura abaixo:


Obteve resultado parecido? Então podemos passar para a parte final do artigo.

3 - Transformando a primeira aplicação JSF em algo mais útil

A primeira aplicação JavaServer Faces que construímos até agora não faz nada de útil. Ela apenas exibe um texto no browser. E isso pode facilmente ser conseguido usando apenas HTML puro. Vamos ver como adicionar um formulário à página index.xhtml e obter os valores informados nos campos.

O primeiro passo é criar um Bean gerenciado JSF. Para isso, vá em Arquivo -> Novo Arquivo. Na janela de diálogo Novo arquivo você deverá selecionar JavaServer Faces de uma lado e Bean gerenciado JSF do outro. Veja:


Clique o botão Próximo e você verá a seguinte janela:


Nesta janela nós temos que informar o nome da classe do bean, seu pacote, nome e escopo. Veja que escolhi como nome "Contato", coloquei o bean no pacote "entidades", dei o nome a ele de "contato" e defini o escopo como "session". Clique o botão Finalizar. Neste momento o NetBeans criou um diretório dentro de Pacotes de código-fonte chamado entidades e colocou dentro deste nossa classe Contato.java. Abra esta classe e modifique seu código para a versão que temos abaixo:

Código para Contato.java:

package entidades;

import java.io.Serializable;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped
public class Contato implements Serializable{
  private String nome;
  private String telefone;
  private String email;

  public String getNome() {
    return nome;
  }

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

  public String getTelefone() {
    return telefone;
  }

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

  public String getEmail() {
    return email;
  }

  public void setEmail(String email) {
    this.email = email;
  }

  public String gravar(){
    // vamos obter os dados enviados no formulário
    // e colocá-los na mensagem a ser exibida na página
    String mensagem = "Você acaba de cadastrar um novo contato: [" +
      "Nome: " + this.getNome() + "; Telefone: " + this.getTelefone() +
      "; E-Mail: " + this.getEmail() + "]";

    // vamos "limpar" o formulário
    this.setNome("");
    this.setTelefone("");
    this.setEmail("");

    FacesContext context = FacesContext.getCurrentInstance();
    context.getExternalContext().getFlash().setKeepMessages(true);
    context.addMessage(null, new FacesMessage(mensagem));

    // vamos voltar para a página inicial
    return "index";
  }
}

Veja que esta é uma classe Java normal marcada com as anotações @ManagedBean e
@SessionScoped. Isso a torna um bean gerenciado JSF e indica que o bean será colocado na sessão. Outro ponto a observar é que esta classe precisa implementar a interface Serializable. Finalmente fique atento ao método gravar(), que é chamado pelo botão Gravar Dados. Neste método nós exibimos os dados recebidos do formulário (aqui seria um bom lugar para enviar as informações para um banco de dados), limpamos os campos do formulário e exibimos a página inicial novamente, com uma mensagem indicando o sucesso da operação.

Veja agora o novo código para a página index.xhtml:

Código para o novo 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">
  <h:head>
    <title>Minha primeira aplicação JSF usando NetBeans</title>
  </h:head>
  <h:body>
    <h4>Cadastro de Contatos</h4>

    <h:form>
      <table width="100" border="0" cellspacing="0" cellpadding="2">
      <tr>
        <td width="26%">Nome:</td>
        <td width="74%"><h:inputText size ="40" id="nome"
           value="#{contato.nome}" /></td>
      </tr>
      <tr>
        <td>Telefone:</td>
        <td><h:inputText id="telefone" size="20"
           value="#{contato.telefone}" /></td>
        </tr>
      <tr>
        <td>E-Mail:</td>
        <td><h:inputText id="email" size="30" value="#{contato.email}" /></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      <td><h:commandButton id="submit" value="Gravar Dados"
         action="#{contato.gravar}" /></td>
      </tr>
      </table>

      <h:outputText value="#{flash.msg}"></h:outputText>

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

Pressione F6 agora. Você terá um formulário como o mostrado abaixo:


Insira alguns valores no formulário e clique o botão Gravar Dados. Você terá um resultado parecido com:



Obteve resultado parecido? Agora é só melhorar ainda mais o exemplo para torná-lo realmente útil. Bons estudos.

 
 
Você precisa de um freelancer, códigos-fonte e exemplos completos?
Bem-vindo(a) ao meu site. Além de realizar alguns serviços como freelancer eu tenho alguns códigos-fonte e exemplos completos de Java, Delphi, PHP, Python, C/C++, Hibernate, JPA, Spring, JSP, Servlets, Ruby, Ruby On Rails e muitas outras linguagens e frameworks. Veja como falar comigo clicando aqui.
Aprenda ou aprimore sua programação em Java
Não encontrou o que estava procurando? Experimente nossa busca
Termo(s) da busca:
Faculdade Delta - Goiânia-GO
Faculdade Delta - Goiânia-GO
Assinantes
Por favor, informe os dados abaixo para acessar sua conta:
Usuário:
Senha:
 
Esqueci minha senha
Quero criar uma conta
Veja mais Dicas & Truques de Java
 
Dicas e truques de Java
Dicas e truques de C++
Dicas e truques de Delphi
http://www.arquivodecodigos.net
2000 - 2013 - Todos os direitos reservados a Osmar J. Silva
Todo o conteúdo deste site, quando não devidamente observado, pertence a seus idealizadores e não
poderá ser usado para outras finalidades senão estudo e aprimoramento de técnicas de programação.

Posso copiar o conteúdo do site e colocar em meu site ou blog? Pode sim, desde que você coloque um link e referência
ao meu site. Caso não faça isso meu advogado fará todo o possível para deixar sua conta bancária com algumas centenas
de Reais a menos.

Fale Conosco: (62) 3261-7018 / (62) 8185-0734
E-Mail: suporte@recomende.com
MSN: osmar@recomende.com (só para negócios, por favor)
Perfil no LinkedIn: http://br.linkedin.com/pub/osmar-j-silva-silva/8/94a/630

Para me contratar como freelancer ligue: (062) 3261-7018 / (62) 8185-0734

Desenvolvedor Responsável: Osmar J. Silva