JSTL – Exemplo de um cadastro web

Caro leitor, continuando com a nossa saga em desbravar a tecnologia JSTL, vamos aprender nesse artigo, como criar uma tela de cadastro simples, e um processo de inserção de registros em uma tabela de banco de dados usando somente as tags JSTL.

Lembrando que esse assunto foi iniciado em nosso artigo anterior, intitulado “JSTL – Aplicações web simples e fácil em Java”, portando, é importante que o leia, para melhor entender alguns detalhes nesse artigo.

Nossa pequena aplicação terá 2(duas) páginas JSP, uma contendo um formulário com alguns campos para cadastro de cliente, e outra com o código JSTL para processamento dos dados enviados via requisição POST e gravação dos mesmos no banco de dados.

Para melhor aproveitamento do exemplo que será exposto neste artigo, observe na Figura 01, as tabelas CLIENTES e ESTADOS que servirão de base para nossa pequena aplicação.

jstl-fig01.JPG

Figura 01 – Tabelas da aplicação.

É importante lembrar, que neste exemplo, estou usando o FireBird 1.5, portando, é importante que você saiba que como configurar o driver JDBC do mesmo em sua aplicação, no caso, está sendo usando no exemplo o driver JayBird-2.0.1, mas você pode sentir-se a vontade para usar o driver ou até mesmo outro banco de dados de sua preferência.

Caso queira usar essas tabelas, abaixo na listagem 01, têm os scripts SQL para a criação das mesmas, lembrando que, estão no padrão SQL usado pelo FireBird.

/* Criação da tabela Estados */

CREATE TABLE ESTADOS (

SIGLA VARCHAR(2) NOT NULL,

NOME VARCHAR(50) NOT NULL,

PAIS VARCHAR(30)

);

ALTER TABLE ESTADOS ADD CONSTRAINT PK_ESTADOS PRIMARY KEY (SIGLA);

/*Povoando a tabela ESTADOS */

INSERT INTO ESTADOS (SIGLA,NOME,PAIS) VALUES (‘AM’,’Amazonas’,’Brasil’);

INSERT INTO ESTADOS (SIGLA,NOME,PAIS) VALUES (‘AP’,’Amapá’,’Brasil’);

INSERT INTO ESTADOS (SIGLA,NOME,PAIS) VALUES (‘PA’,’Pará’,’Brasil’);

/* Criação da tabela Clientes */

CREATE TABLE CLIENTES (

CODIGO VARCHAR(8) NOT NULL,

NOME VARCHAR(80) NOT NULL,

CPF VARCHAR(20),

RG VARCHAR(20),

TELEFONE VARCHAR(20),

EMAIL VARCHAR(60),

ESTADO VARCHAR(2)

);

ALTER TABLE CLIENTES ADD CONSTRAINT PK_CLIENTES PRIMARY KEY (CODIGO);

ALTER TABLE CLIENTES ADD CONSTRAINT FK_CLIENTES_1 FOREIGN KEY (ESTADO) REFERENCES ESTADOS (SIGLA);

Listagem 01 – Scripts SQL para a criação das tabelas.

Agora usando a IDE de sua familiaridade, crie um novo projeto web, de preferência usando o container TomCat(estou usando no exemplo a versão 5.5.17) e crie dois arquivos JSP, um chamado index.jsp contendo um formulário com os campos referentes ao cadastro simples de clientes(ver listagem 02) e outro chamado gravaCliente.jsp, que executar o inserção na tabela do banco de dados, usando os valores enviados pela página index.jsp por método POST (ver listagem 03).

É importante lembrar que a tecnologia JSTL, é uma biblioteca de extensão da tecnologia JSP, por isso, criamos arquivos “.jsp” para que através de chamadas específicas das taglibs, passemos a usar os recursos oferecidos pela JSTL.

Note que os exemplos abaixo, estão comentados em formato web com os marcadores <!– e –>.

<%@page contentType=”text/html”%>

<%@page pageEncoding=”UTF-8″%>

<!–Chamada aos TLD’s de cada pacote JSTL –>

<%@taglib uri=”http://java.sun.com/jsp/jstl/core&#8221; prefix=”c”%>

<%@taglib uri=”http://java.sun.com/jsp/jstl/sql&#8221; prefix=”sql”%>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

http://www.w3.org/TR/html4/loose.dtd”&gt;

<html>

<head>

<!–Criação de um dataSource, que proverá uma conexão ao servidor de banco dados, note que o escopo de conexão está definido como sendo de sessão, dessa forma poderemos usar o mesmo objeto chamado “ds” de qualquer outra página JSP participante do mesmo gerenciamento de sessão.–>

<sql:setDataSource var=”ds”

driver=”org.firebirdsql.jdbc.FBDriver”

url=”jdbc:firebirdsql:localhost:c:\ACADEMICO.FDB”

user=”sysdba”

password=”masterkey”

scope=”session”/>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

<title>Tela Cadastro – Artigo Manoel Pimentel</title>

</head>

<body>

<h1>Exemplo JSTL – Tela de Cadastro</h1>

<hr>

<form action=”gravaCliente.jsp” method=”post”>

<label>Código </label><br>

<input type=”text” name=”edtCodigo” size=”10″/><br>

<label>Nome: </label><br>

<input type=”text” name=”edtNome” size=”60″/><br>

<label>CPF: </label><br>

<input type=”text” name=”edtRG” size=”15″/><br>

<label>RG: </label><br>

<input type=”text” name=”edtCPF” size=”10″/><br>

<label>Estado: </label><br>

<!–Executa um comando SQL de seleção, gerando um objeto do tipo Result, que é semelhante a classe ResultSet da API JDBC –>

<sql:query var=”qryEstados” dataSource=”${ds}”>

select * from ESTADOS

order by

NOME

</sql:query>

<!–Cria um objeto select (estilho comboBox), preenchendo suas opções com um laço forEach na coleção contida em “qryEstados.rows”, armazenando cada registro, na variável estado, e acessando a valor de um determinado campo usando a EL(Expression Language) ${estado.nome} –>

<select name=”cmbEstados”>

<c:forEach var=”estado” items=”${qryEstados.rows}”>

<option value=”PA”>${estado.nome}</option>

</c:forEach>

</select><br>

<label>Telefone: </label><br>

<input type=”text” id=”edtTelefone” size=”15″/><br>

<label>E-mail: </label><br>

<input type=”text” name=”edtEmail” size=”50″/><br>

<hr>

<input accesskey=”o” type=”submit” name=”btnOK” value=”OK”>

<input accesskey=”c” type=”reset” name=”btnCancelar” value=”Limpar”>

</form>

</body>

</html>

Listagem 02 – Código da index.jsp, para gerar a tela de cadastro

<%@page contentType=”text/html”%>

<%@page pageEncoding=”UTF-8″%>

<!–Chamada aos TLD’s de cada pacote JSTL –>

<%@taglib uri=”http://java.sun.com/jsp/jstl/core&#8221; prefix=”c”%>

<%@taglib uri=”http://java.sun.com/jsp/jstl/sql&#8221; prefix=”sql”%>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

http://www.w3.org/TR/html4/loose.dtd”&gt;

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

<title>Tela Cadastro – Artigo Manoel Pimentel</title>

</head>

<body>

<!–Equivalente ao try/catch, a tag catch tenta executar o que estiver dentro de seu corpo, e caso ocorra alguma exceção, será capturada e armazenada na variável “ex”. –>

<c:catch var=”ex”>

<!–Cria uma transação com o banco dados, onde podemos executar de forma mais protegida e seqüencial, várias atualizações ou inserções. –>

<sql:transaction dataSource=”${ds}”>

<!–Executa algum comando como insert, update ou delete e armazena o resultado na varável “gravaCli”. Note que estamos usando a tag sql:param para passar dinamicamente os valores em cada sinal de interrogação da cláusula values, vale lembrar que dessa forma, estaremos gerando uma espécie de sentença preparada, e dessa forma ganharemos performance na execução do comando SQL. –>

<sql:update var=”gravaCli”>

insert into CLIENTES (CODIGO,NOME,CPF,RG,TELEFONE,EMAIL,ESTADO)

values(?,?,?,?,?,?,?)

<sql:param value=”${param[‘edtCodigo’]}”/>

<sql:param value=”${param[‘edtNome’]}”/>

<sql:param value=”${param[‘edtCPF’]}”/>

<sql:param value=”${param[‘edtRG’]}”/>

<sql:param value=”${param[‘edtTelefone’]}”/>

<sql:param value=”${param[‘edtEmail’]}”/>

<sql:param value=”${param[‘cmbEstados’]}”/>

</sql:update>

</sql:transaction>

</c:catch>

<!–Essa é uma sacada legal, pois na tag “out” abaixo, caso o objeto “ex” esteja nulo(ou seja, sem exceção), será exibido o valor contido no atributo default, dessa forma a mensagem de sucesso só será exibida caso não tenha ocorrido nenhuma exceção. –>

<h1>

<c:out value=”${ex}” default=”Gravação executada com sucesso!”/>

</h1>

<hr>

<input type=”button” value=”Voltar” name=”btnVoltar” onclick=”history.back();”

</body>

</html>

Listagem 03 – Código da gravaCliente.jsp, para gravação na tabela de CLIENTES.

Pronto, agora bastar rodar sua aplicação e se tudo estiver certo, você terá uma tela de cadastro na página index.jsp como a Figura 02.

jstl-fig02.JPG

Figura 02 – Tela de cadastro gerado por index.jsp.

E a tela de resultado gerada pela página gravaCliente.jsp semelhante a Figura 03.

jstl-fig03.JPG

Figura 03 – Tela de resultado gerada pela gravaCliente.jsp.

Esse foi mais um exemplo de como a tecnologia JSTL pode ser útil e produtiva, e para terminar, note que em nosso exemplo, não usamos em nenhum momento código puramente Java, e sim apenas as tags JSP e JSTL, pois com essas tecnologias, o código Java, é renderizado(gerado) automaticamente em tempo de execução, sendo que cada página JSP gera um servlet “temporário” ao ser processada mediante cada requisição http recebida pelo container TomCat.

Espero sinceramente que você tenha gostado e aproveitado ao máximo esse artigo, desejo também que comece a usar JSTL da maneira como achar conveniente em seus projetos web. Obrigado e até a próxima.

 

Autor:

 

Manoel Pimentel Medeiros –  Eng°. de Software
Heptagon – Tecnologia da Informação
http://www.heptagon.com.br

 

 

Referências:

http://java.sun.com/products/jsp/jstl/

Site da própria SUN sobre JSTL

Anúncios

JSTL – Aplicações web simples e fácil em java

Produtividade! Se existe uma palavra chave no mundo de desenvolvimento é essa, que durante os últimos anos, foi a motivação pela busca de idéias, técnicas e ferramentas para servir de apoio ao ganho de produtividade, criando uma verdadeira sopa de letrinhas que funcionam como uma camada em cima de outra, visando sempre, aumentar a “tal produtividade”.

Em Java, devido ser uma tecnologia free e agora open-source,  sempre favorece o surgimento de novas soluções que atendam  a área de desenvolvimento, gerando um batalhão de siglas para todos os gostos, que cada um deles, ao seu jeito, jura de “pé juntos” que faz milagres em seu projeto de software.

Nesse artigo, vamos estudar através de um exemplo prático, uma tecnologia que devido a sua simplicidade, é uma verdadeira “mão-na-roda” para o desenvolvimento web usando Java, trata-se do JSTL (Java Server Pages  Standard Tag Library), ou em bom português Biblioteca Padrão de Tags JSP.

A idéia central dessa tecnologia consiste que ela funcione como uma extensão da tecnologia JSP, oferecendo ao desenvolvedor, tags que trazem formas mais simples e produtivas, de implementar funcionalidades cruciais de seu código, como por exemplo: laços, estruturas de decisão, conexão a banco dados,  execução de query’s SQL, etc.

Outro recurso muito importante, introduzido pela JSTL, é a EL, ou seja, Expression Language(Linguagem de Expressão), que é uma forma mais simples de acessar e manipular objetos, sua sintaxe, é composta por um “cifrão”, seguido por um par de chaves, contendo o nome do objeto, por exemplo: ${objeto.nomeAtributo}.

A biblioteca do JSTL está distribuída em 5(cinco) pacotes, agrupados por funcionalidade, veja a tabela 01 contendo a descrição de cada um.

 

Pacote

Sugestão de prefixo

Descrição

JSTL Core

C

Tags relacionadas à lógica e controle como (if, forEach, url,  set, import, etc.).

JSTL fmt

fmt

Tags para formatação e internacionalização de dados

JSTL sql

sql

Tags para acessar, inserir, alterar  e deletar dados em um servidor de banco de dados.

JSTL xml

xml

Tags para seleção, parser e transformação de modelos XML.

JSTL functions

Fn

Conjunto de funções para o processamento de objetos Strings  e coleções.


Esses pacotes, estão definidos em arquivos TLD’s(Tag Library Descriptor) que estão disponíveis em 2(dois) arquivos JAR’s, o JSTL1.1 standard.jar e o JSTL1.1-jstl.jar ,  necessários ao uso do JSTL dentro de sua aplicação, portanto, devem ser adicionados ao class-path de sua aplicação(uma dica, no caso específico do NetBeans, basta clicar com o botão direito do mouse sobre o nó Libraries, escolha a opção add Library,  procure e escolha a biblioteca JSTL X.X , em seguida conclua clicando em add Library). 

É importante você observar que cada pacote, possui seu próprio endereço de URI (Uniforme Resource Identifier), que deverá ser inserido como atributo da tag jsp <%@ taglib />  seguido pela sugestão de  prefixo conforme a tabela 01, no formato mostrado baixo:

<%@ taglib uri=”uri_da_taglib” prefix=”prefixo” %>

 Observe abaixo, as formas padrões de chamada a cada tld:

Core library: <%@ taglib uri=”http://java.sun.com/jstl/ea/core&#8221;  prefix=”c” />

  Exemplo: <c:if test=”…” … >…</c:if>

XML library: <%@ taglib uri=”http://java.sun.com/jstl/ea/xml” prefix=”x” />

Exemplo: <x:parse>…</x:parse>

Internacionalização:  <%@ taglib uri=”http://java.sun.com/jstl/ea/fmt  prefix=”fmt” />

Exemplo: <fmt:message key=”…” />

SQL: <%@ taglib uri=”http://java.sun.com/jstl/ea/sql” prefix=”sql” />

Exemplo: <sql:update>…</sql:update>


É importante, observar, que uma vez declarado o pacote específico, você irá invocar as tags usando o prefixo definido no atributo prefix, conforme o exemplo abaixo:

<prefixo:nomeTag atributo=”…”>

 

    Corpo da tag …

 

</prefixo:nomeTag


Ok! Agora como o próprio título do artigo sugere, vamos ao nosso exemplo prático que mostra o uso das tags JSTL, observe que este código, está todo comentado em formato web com uso de <!–   –> .


Para ser mais objetivo, assumimos que você já possua algum conhecimento sobre páginas JSP, por isso para testar o código abaixo, na IDE de sua preferência, crie um projeto web, adicione os jars da biblioteca JSTL e de conexão JDBC específica ao seu banco de dados, adicione um página JSP(pode ser chamada de index.jsp) e monte o exemplo conforme a listagem 01.

 

<%@page contentType=”text/html”%>

<%@page pageEncoding=”UTF-8″%>

 

<!–taglib é uma tag JSP para declaração dos pacotes específicos JSTL através da URI apropriada e da sugestão de prefixo padrão, lembrando que essa etapa é importante, pois, definirá o prefixo de chamada das tags de cada pacote.–>

<%@taglib uri=”http://java.sun.com/jsp/jstl/core&#8221; prefix=”c”%>

<%@taglib uri=”http://java.sun.com/jsp/jstl/fmt&#8221; prefix=”fmt”%>

<%@taglib uri=”http://java.sun.com/jsp/jstl/sql&#8221; prefix=”sql”%>

 

<html>

    <head>

        <!– setDataSource é uma tag JSTL para configuração de acesso ao servidor de banco de dados criando um objeto dataSource que será consumido pelas outras tags SQL,     onde devem ser definidos os atributos necessários para especificar: o nome da variável dataSource, driver, url(caminho do servidor), usuário, senha e         principalmente o “escopo” de visibilidade do objeto na aplicação, em nosso caso, definimos que  nosso objeto será compartilhado por todo o tempo de    vida da sessão.–>

        <sql:setDataSource var=”ds”

                           driver=”org.firebirdsql.jdbc.FBDriver”

                           url=”jdbc:firebirdsql:localhost:c:\ACADEMICO.FDB”

                           user=”sysdba”

                           password=”masterkey”

                           scope=”session” />

   

        <title>Exemplo JSTL – Manoel Pimentel </title>

    </head>

    <body>

       

        <h1>Listagem de Produtos</h1>

        <hr>

        <!–A tag query é usada para processar uma setença SQL de seleção de registros e gerar um objeto ResultSet internamente na memória, conforme especificado no atributo   var, usando a conexão aberta  chamada “ds”, que neste caso está definido no atributo dataDource através do uso de EL(Expression Language). –>

        <sql:query var=”ResultadoProdutos” dataSource=”${ds}”>

            select * from PRODUTOS

        </sql:query>

        <table border=”1″>

            <thead>

                <th>Código</th>

                <th>Nome</th>

                <th>Ultima Compra</th>

                <th>Preco Custo</th>

                <th>Preco Venda</th>

                <th>Margem</th>

                <th>Avaliação</th>

               

            </thead>

            

            <!–forEach, implementa um laço  para fazer a interação no ResultSet  gerado pela tag query  conforme o atributo items.–>

            <c:forEach var=”listaProdutos” items=”${ResultadoProdutos.rows}”>

                <tr>

                    <!–A tag out é responsável por gerar uma String de saída na tela –>

                    <td><c:out value=”${listaProdutos.CODPRD}”/></td>

                    <td><c:out value=”${listaProdutos.NOME}”/></td>

                   

                    <!–formatDate aplica um padrão de formato, conforme o atributo pattern, em um valor tipo data definido no atributo value. –>

                   <td><fmt:formatDate pattern=”dd/MM/yyyy” value=”${listaProdutos.DATA_ULTIMA_COMPRA}”/></td>

                   <td><c:out value=”${listaProdutos.PRECO_CUSTO}”/></td>

                   <td><c:out value=”${listaProdutos.PRECO_VENDA}”/></td>

                   

                    <!–A tag set declara e inicializa uma variável conforme o atributo value. –>

                    <c:set var=”totalPrecoCusto” value=”${totalPrecoCusto+listaProdutos.PRECO_CUSTO}”/>

                    <c:set var=”totalPrecoVenda” value=”${totalPrecoVenda+listaProdutos.PRECO_VENDA}”/>

                    <c:set var=”valorMargem” value=”${listaProdutos.PRECO_VENDA-listaProdutos.PRECO_CUSTO}”/>

                   

                    <td><c:out value=”${valorMargem}”/></td>

                   

                    <!–As tags choose, when e otherwise,  aplicam um conjunto de  estrutura de decisão. –>

                    <c:choose>

                        <c:when test=”${valorMargem<=350}”>

                            <td>Baixa</td>       

                        </c:when>

                        <c:when test=”${valorMargem<=400}”>

                            <td>Media</td>       

                        </c:when>

                        <c:otherwise>

                            <td>Alta</td>

                        </c:otherwise>

                    </c:choose>

                </tr>

            </c:forEach>

            <tfoot>

                <th colspan=”3″>

                Total:

                </th>

                <th>

              <!–formatNumber aplica uma formatação de decimais no atributo value conforme o atributo pattern. –>

                    <fmt:formatNumber value=”${totalPrecoCusto}” pattern=”#,#00.00#”/>

                </th>

                <th>

                    <fmt:formatNumber value=”${totalPrecoVenda}” pattern=”#,#00.00#”/>

                </th>

            </tfoot>

        </table>

    </body>

</html>                   
Listagem 01 – Código completo do exemplo.


Pronto, sem querer parecer um apresentador de programa culinário, mais se você fez todos os passos corretamente, quando colocar e rodar sua aplicação em um container como o TomCat,  vai obter uma tela conforme mostra a figura 01 abaixo.

jstlmpfig01.JPG

Bem amigo leitor, essa foi uma pequena mostra de como o JSTL pode funcionar, lembre-se que, usando essas tags, diminuirá a necessidade de  inserir códigos Java como scriptlets, declarações ou expressões diretos na sua página JSP, pois as tags JSTL farão isso para você, com isso você poderá ter um aumento significativo na produtividade de seu projeto(experiência própria hein!), porém, sugiro que a partir desse artigo, procure se aprofundar mais em como JSTL funciona e nas suas outras tags que não abordamos aqui. 

Bons estudos!

 

Referências:

http://java.sun.com/products/jsp/jstl/

Site da própria SUN sobre JSTL

 

Autor:

Manoel Pimentel (manoelp@gmail.com) é engenheiro de software, trabalha atualmente na Rhealeza Informática(SP) com projetos em Java, entre outras atividades, se dedica a coordenação do grupo de usuários de extreme programing da região norte – XPNorte, além de ser colunista dos portais JavaMagazine e SQLMagazine. Possui as certificações de Java e Delphi da Brainbench e de Gerador Relatórios da RM Sistemas. Palestrou na SEPAI/BelJUNGLE em 2004/2005.