Autor:
Cláudio Santos das Virgens (claudiosvirgens@gmail.com), está cursando Pós Graduação em Sistemas de Informação com Ênfase em Componentes Distribuídos e WEB, na Faculdade Ruy Barbosa,cursou o Superior em Gestão de Redes de Computadores da Unifacs – Universidade Salvador, e tambem é Analista de Sistemas da AvanSys no CEDASC.
Neste artigo vamos criar uma agenda usando JSF, CSS,Ajax,MySQL e como IDE vou usar Netbeans 5.5 mas isso não impede que você use o Eclipse, provavelmente alguem vai dizer:”Outro exemplo de agenda!”, bom esse existentem poucos tutorias em português que retratem o uso de tabelas em JSF, uso de CSS com JSF, dentre outras coisas que serão mostradas no decorrer do artigo.
Eu escrevi recentemente um tutorial sobre uso de arquivos de propriedades (Resource Blundle) cuja a extensão é .properties, aonde vimos o quanto eles podem ser uteis, principalmente para a internacionalização de aplicativos, em nossa agenda usaremos uma arquivo de propriedade, chamado mensagens.properties.
Este é o conteúdo do arquivo br.com.nitewing.agenda.mensagens.properties:
# Sample ResourceBundle properties file
Titulo=Agenda com Netbeans,CSS,JSF,Ajax e MySQL
Nome=Nome
Endereco=Endereco
Telefone=Telefone
Bairro=Bairro
Cidade=Cidade
Cep=CEP
Estado=Estado
mensagens.properties
Vamos criar o Bean AgendaBean, aplicações em JSF usam bean java(managed bean) para controlar ações que serão requisitadas pela aplicação, para isso crie uma classe java com o nome de AgendaBean no pacote br.com.nitewing.agenda, com o seguinte contéudo:
/*
* AgendaBean.java
* Created on 9 de Setembro de 2007, 11:24
* @author claudiosvirgens@nitewing
*/
package br.com.nitewing.agenda;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import javax.naming.NamingException;
import javax.servlet.jsp.jstl.sql.Result;
import javax.servlet.jsp.jstl.sql.ResultSupport;
import org.apache.taglibs.standard.tag.common.core.NullAttributeException;
public class AgendaBean {
private Connection conn;
public void abrirConexao() throws SQLException,NamingException,ClassNotFoundException{
if(conn !=null) return;
Class.forName(“com.mysql.jdbc.Driver”);
conn = DriverManager.getConnection(“jdbc:mysql://localhost:3306/agenda”,”root”,”");
}
public Result getDados() throws SQLException, NamingException, ClassNotFoundException{
try{
abrirConexao();
Statement stmt = conn.createStatement();
ResultSet result = stmt.executeQuery(“SELECT * FROM registros”);
return ResultSupport.toResult(result);
}finally{
fecharConexao();
}
}
public void fecharConexao() throws SQLException{
if(conn == null)return;
conn.close();
conn = null;
}
}
Como vocês podem ter percebido no código de AgendaBean uma instância da conexão só é criada se não existir uma instância do mesmo, o que impede que seja criada inúmeras instâncias do objeto de conexão.
Vamos exibir para um usuário uma tabela contendo os registros existentes na base de dados, e para melhorar a aparência da tabela iremos usar css.
Crie um arquivo .css contendo a folha de estilos que usaremos no nosso artigo. o nome do arquivo é estilo.css, ele devera ser salvo numa pasta chamada css, na raiz(root) do seu projeto web(web,webcontent), e seu conteúdo é mostrado a seguir:
/*
Document : estilo.css
Created on : 09/09/2007, 14:19
Author : claudiosvirgens@nitewing
Description: Folha de estilo agenda em netbeans
*/
.cabecalho {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
color: white;
background-color: #3D77C0;
text-align: center;
}
.linha1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: black;
background-color: beige;
text-indent: 11px;
}
.linha2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: black;
background-color: #E1ECF7;
text-indent: 11px;
}
Agora faremos algumas modificações no arquivo faces-config.xml
<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE faces-config PUBLIC “-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN” “http://java.sun.com/dtd/web-facesconfig_1_1.dtd”>
<!– =========== FULL CONFIGURATION FILE ================================== –>
<faces-config xmlns=”http://java.sun.com/JSF/Configuration”>
<managed-bean>
<description>
Bean para trazer os dados do MySQL
</description>
<managed-bean-name>agenda</managed-bean-name>
<managed-bean-class>br.com.nitewing.agenda.AgendaBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
</faces-config>
O seu web.xml deve ficar parecido com o mostrado abaixo se você estiver no netbeans:
<?xml version=”1.0″ encoding=”UTF-8″?>
<web-app version=”2.4″ xmlns=”http://java.sun.com/xml/ns/j2ee” xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:schemaLocation=”http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd”>
<context-param>
<param-name>com.sun.faces.verifyObjects</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<param-name>com.sun.faces.validateXml</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>
index.jsp
</welcome-file>
</welcome-file-list>
</web-app>
As seções <servlet-mapping> e <welcome-file> são as que merecem atenção e no arquivo mostrado acima.
Caso esteja usando o Eclipse certifique que o conteúdo deles estejam como mostrado abaixo:
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>
index.jsp
</welcome-file>
</welcome-file-list>
O parâmetro url-pattern pode ter os seguintes valores mapeados:
*.jsf , *.faces ou ainda /faces/*
Agora crie um arquivo JSP e chame-o de index.jsp e acrescente o seguinte conteúdo:
<%@page contentType=”text/html”%>
<%@page pageEncoding=”UTF-8″%>
<%@ taglib uri=”http://java.sun.com/jsf/core” prefix=”f” %>
<%@ taglib uri=”http://java.sun.com/jsf/html” prefix=”h” %>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<f:view>
<head>
<f:loadBundle basename=”br.com.nitewing.agenda.mensagens” var=”msgs”/>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title><h:outputText value=”#{msgs.Titulo}”/></title>
<link rel=”stylesheet” type=”text/css” href=”./css/estilo.css”>
</head>
<body>
<div align=”center”>
<h:form>
<h:form>
<h3><h:outputText value=”#{msgs.Titulo}”/></h3>
<h:dataTable value=”#{agenda.dados}” var=”agenda” border=”0″ headerClass=”cabecalho” rowClasses=”linha1,linha2″>
<h:column>
<f:facet name=”header”>
<h:outputText value=”#{msgs.Nome}” />
</f:facet>
<h:outputText value=”#{agenda.nome}”/>
</h:column>
<h:column>
<f:facet name=”header”>
<h:outputText value=”#{msgs.Endereco}” />
</f:facet>
<h:outputText value=”#{agenda.endereco}”/>
</h:column>
<h:column>
<f:facet name=”header”>
<h:outputText value=”#{msgs.Bairro}” />
</f:facet>
<h:outputText value=”#{agenda.bairro}”/>
</h:column>
<h:column>
<f:facet name=”header”>
<h:outputText value=”#{msgs.Cidade}” />
</f:facet>
<h:outputText value=”#{agenda.cidade}”/>
</h:column>
<h:column>
<f:facet name=”header”>
<h:outputText value=”#{msgs.Estado}” />
</f:facet>
<h:outputText value=”#{agenda.estado}”/>
</h:column>
<h:column>
<f:facet name=”header”>
<h:outputText value=”#{msgs.Cep}” />
</f:facet>
<h:outputText value=”#{agenda.cep}”/>
</h:column>
<h:column>
<f:facet name=”header”>
<h:outputText value=”#{msgs.Telefone}” />
</f:facet>
<h:outputText value=”#{agenda.telefone}”/>
</h:column>
</h:dataTable>
</h:form>
</h:form>
</div>
</body>
</f:view>
</html>
Logo após as tags <f:view> e <head> nos utilizamos a tag:
<f:loadBundle basename=”br.com.nitewing.agenda.mensagens” var=”msgs”/>
onde informamos que o arquivo que iremos usar se encontra no pacote br.com.nitewing.agenda e que se chama mensagens (sem o .properties) e declaramos o item var como msgs, ou seja a partir de agora iremos nos referir ao arquivo como msgs.
Na linha <h:outputText value=”#{msgs.Titulo}”/> nós fazemos referencia ao arquivo de propriedade quando passamos o valor #{msgs.Titulo} para renderizar o valor do Titulo.
Na linha a seguir nós usamos a tag <h:dataTable> para para pegar os dados retornados pelo bean agenda, declaramos a variável agenda e ainda mapeamos as classes existentes no arquivo estilo.css com os objetos headerClass e rowClasses:
<h:dataTable value=”#{agenda.dados}” var=”agenda” border=”0″ headerClass=”cabecalho” rowClasses=”linha1,linha2″>
Agora vamos compilar e executar a primeira parte do nosso artigo, excute o nosso seu editor preferido e o resultado deverá ser uma tela como a mostrada na Figura
Figura1
Não faz parte do escopo deste artigo ensinar o usuário a usar o MySQL mas segue anexo os comandos necessários para criação do banco de dados:
CREATE DATABASE agenda;
use agenda
CREATE TABLE registros(
id int (11) not null autoincrement,
nome varchar(50) not null,
endereco varchar(40),
bairro varchar(25),
cidade varchar(40),
estado char(2),
cep varchar(8),
telefone(11),
primary key(id));
Para inserir registros na tabela utilize o camando INSERT como mostrado abaixo:
INSERT INTO registros (nome,endereco,bairro,cidade,estado,cep,telefone) WHERE (‘Alexandre Soneca’, ‘Av La paz’,'Pituba’,'Ba’, ‘Salvador’, ’40000000′,’88562356′);
execute o comando INSERT com outros valores a para termos uma quantidade melhor de
Na segunda parte de nosso artigo iremos acrescentar os métodos responsáveis pela inserção, alteração e atualização de dados e também acrescentaremos os recursos da tecnologia Ajax com a ferramenta Ajax4Jsf.
Sobre este artigo:
IDE utilizada: Netbeans 5.5
Versão do Bd: MySQL 5.x
Navegadores Utilizados: Firefox 2.x, Opera 9.x
Quando alguém esquece de manter o mesmo 
