Olá, pessoal! Nesse artigo veremos como criar um formulário usando JavaServerFaces tendo a IDE Netbeans como ambiente de desenvolvimento e o glassfish como servidor. Parece um exemplo bobo, “criar formulário de login/senha”, mas usaremos esse exemplo “bobo” para mostrar como é mais prazeroso usar JavaServerFaces para desenvolvimento JEE.
Lets go…
JavaServerFaces é um framework desenvolvido pela Sun, tendo como objetivo facilitar o desenvolvimento de aplicações Web através de componentes de interface de usuário (GUI) e conectar estes componentes a objetos de negócios. Read more…
Livro JSF in Action: estou lendo este livro para aprimorar meus conhecimentos sobre o framework e realmente o material está excelente, com uma leitura bem confortável. E o melhor: nem tão caro é para quem tem cartão internacional e puder comprar em alguma livraria internacional.
Requisitos:
- Java 1.5/Superior
- Netbeans 6.0/Superior
Passo 1
Aqui vamos criar o projeto e o Bean para que o JSF possa acessar.
1. Crie um novo projeto no NB. Dê nome ao projeto e depois clique em next.
2. Na terceira tela, para escolher o framework, marque JavaServerFaces.
3. A estrutura do seu projeto deve ser semelhante à imagem a seguir:
faces-config.xml = é o arquivo de navegação da sua aplicação com jsf.
4. Crie uma classe java chamada CamBean tendo uma variável do tipo String nome e, em seguida, use a técnica de refatoração “encapsulated field” da IDE. Clique no menu Refactor ==> Encapsulated Field. Em seguida, diga que os métodos serão public e os campos private.
5. Crie um método chamado verifica com o tipo de retorno String
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package br.camilo.com;
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
/**
*
* @author Camilo
*/
public class CamNome {
private String login = null;
private String senha = null;
public String getLogin() {
return login;
}
public void setLogin(String login) {
this.login = login;
}
public String getSenha() {
return senha;
}
public void setSenha(String senha) {
this.senha = senha;
}
/* poderia conectar ao BD e verificar se os campos digitados batem com
* os que estao no banco */
public String verifica(){
boolean sucesso = true;
FacesContext context = FacesContext.getCurrentInstance();
if(!login.equalsIgnoreCase("camilo") && !senha.equalsIgnoreCase("123")){
String msg = "usuário inválido";
FacesMessage message = new FacesMessage(msg);
context.addMessage("formulario", message);
sucesso = false;
}else{
sucesso = true;
}
return (sucesso ? "sucesso" : "falha");
}
}Passo 2
Criar o formulário usando JSF. Para isso, altere o arquivo welcomeJSF.jsp deixando como na imagem a seguir:
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%--
This file is an entry point for JavaServer Faces application.
--%>
<!-- FORMULARIO PARA O USUARIO -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body> <!-- SEU CODIGO JSF DEVE ESTÁ DENTRO DE f:view -->
<f:view>
<h:form id="formulario">
Digite seu login:
<!-- aqui tem o mesmo efeito do input que usamos no html, porem
este é jsf com suas particulidades, observe que passo o valor digitado
para variavel login da class CamNome e digo que esse campo é obrigatorio" -->
<h:inputText id="nome" value="#{CamNome.login}" required="true"
requiredMessage="este campo é obrigatório"/> <br/>
digite sua senha:
<h:inputSecret id="senha" value="#{CamNome.senha}" required="true"
requiredMessage="este campo é obrigatório"/><br/>
<h:commandButton action="#{CamNome.verifica}" value="Login" id="submit"/>
<br/>
<!-- em caso do usuario quebrar alguma regra de nao preencher
os campos ele vai receber a mensagem que está na class CamNome.java
-->
<h:messages />
</h:form>
</f:view>
</body>
</html>Passo 3
Fazer o mapeamento no arquivo face-config.xml, para navegação da aplicação.
1. Abra o face-config.xml, normalmente ele estará no modo PageFlow. Altere para XML e clique com o botão direito em qualquer parte em branco e depois clique na opção como na imagem a seguir:
2. Agora vamos inserir as regras. A página inicial deve ser chamada como default. Faça o mesmo procedimento da imagem anterior, mas dessa vez escolha Add Navigation Rule e preencha a tela que apareceu conforme abaixo:
3. Salve as alterações e, em seguida, crie duas páginas JSP: uma com o nome de sucesso.jsp e outra falha.jsp. Essas serão as páginas que serão exibidas de acordo com o resultado.
4. Abra o arquivo face-config.xml no modo PageFlow e deixe conforme a imagem a seguir:
Testando a aplicação
O teste da aplicação é bem simples, basta clicar com o botão direito do mouse e escolher a opção “Run” e aguardar.
Bom, pessoal! Vou ficando por aqui e espero que tenham gostado. Até o próximo artigo!
Um abraço!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?