Rodrigo Aguas

Hello World em JSF

1/06/10

Diante da dificuldade de um amigo em encontrar na internet um tutorial que explicasse corretamente como desenvolver um simples “Hello World” utilizando JSF, ele resolveu me enviar o exemplo dele para que fosse publicado aqui. Obrigado Sérgio!

Nesse artigo, focarei no desenvolvimento do exemplo e não me aprofundarei em explicações sobre a utilização do JSF, para isso aconselho a leitura do capítulo sobre JSF do tutorial Java EE da Sun.

O JSF é um framework que roda no lado servidor da aplicação web e disponibiliza mecanismos ao desenvolvedor para facilitar, entre outros, o tratamento de eventos, validações no servidor, conversão de dados, navegação entre páginas e internacionalização da aplicação.

O funcionamento mais simples a ser entendido do JSF é que ele vincula os componentes de tela aos dados no lado servidor. De forma que ao ser digitado um texto numa caixa da tela, aquele texto será “automaticamente” copiado para um atributo da sua classe controladora, chamada de backing bean. Assim como os itens de um elemento select do html podem ser gerados com base em uma lista que está armazenada no seu backing bean. Para possibilitar esse funcionamento precisamos utilizar as tags JSF no lugar das tags HTML em nossas páginas, o que não traz grandes dificuldades já que existe claramente uma relação de um-para-um entre elas.

Vou parar as explicações por aqui para irmos para o lado prático. Antes de mais nada, é necessário criar um projeto JSF para utilizarmos. Além disso, criaremos algumas páginas JSP, um backing bean para controlar nossa tela, regras de navegação e um arquivo de propriedades com os textos utilizados. Segue o passo-a-passo para desenvolver o Hello World em JSF:

1- Criar um arquivo “index.jsp” na pasta “WebContent” com o conteúdo abaixo. Toda aplicação JSF precisa de um página inicial que redirecione para uma url do jsf.

1
2
3
4
5
<html>
<body>
    <jsp:forward page="/formulario.jsf" />
</body>
</html>

2- Criar a classe “PessoaBean” abaixo no pacote “helloworld”. Essa classe será o nosso backing bean.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package helloworld;

public class PessoaBean {

    private String nome = "";

    public String getNome() {
        return nome;
    }

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

3- Acrescentar no arquivo “faces-config.xml” o seguinte elemento. Essa é a declaração do nosso backing bean. Nas telas faremos referência a ele utilizando o nome “pessoaBean” que demos ao mesmo. Também definimos que o escopo dele será de requisição.

1
2
3
4
5
<managed-bean>
    <managed-bean-name>pessoaBean</managed-bean-name>
    <managed-bean-class>helloworld.PessoaBean</managed-bean-class>
    <managed-bean-scope>request</managed-bean-scope>
</managed-bean>

4- Criar a página “formulario.jsp” na pasta “WebContent” com o conteúdo abaixo. Nela utilizamos a tag loadBundle para carregar um arquivo de propriedades com as mensagens a serem exibidas ao usuário e utilizamos a variável “msg” para referenciar tal arquivo no conteúdo da página. As outras tags utilizadas servem para exibir texto, criar uma caixa de entrada de texto e criar um botão.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<f:loadBundle basename="helloworld.mensagens" var="msg" />

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>rodrigoaguas.com</title>
</head>
<body>
<f:view>

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

    <h:form>
        <h:outputText value="#{msg.pergunta}" />
        <h:inputText value="#{pessoaBean.nome}" />
        <h:commandButton action="bemvindo" value="#{msg.botao}" />
    </h:form>
   
</f:view>
</body>
</html>

5- Criar o arquivo “mensagens.properties” no pacote “helloworld” com o seguinte conteúdo:

1
2
3
4
pergunta = Qual é o seu nome?
botao = Fale Comigo
titulo = Olá Mundo!
boasvindas = Seja bem vindo ao jsf

6- Para fazermos o usuário ser encaminhado para outra página quando apertar o botão, precisamos acrescentar a regra de navegação abaixo no “faces-config.xml”.

1
2
3
4
5
6
7
<navigation-rule>
    <from-view-id>/formulario.jsp</from-view-id>
    <navigation-case>
        <from-outcome>bemvindo</from-outcome>
        <to-view-id>/saudacoes.jsp</to-view-id>
    </navigation-case>
</navigation-rule>

Assim, nosso arquivo “faces-config.xml” completo fica da seguinte forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?xml version="1.0" encoding="UTF-8"?>
<faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">

    <managed-bean>
        <managed-bean-name>pessoaBean</managed-bean-name>
        <managed-bean-class>helloworld.PessoaBean</managed-bean-class>
        <managed-bean-scope>request</managed-bean-scope>
    </managed-bean>

    <navigation-rule>
        <from-view-id>/formulario.jsp</from-view-id>
        <navigation-case>
            <from-outcome>bemvindo</from-outcome>
            <to-view-id>/saudacoes.jsp</to-view-id>
        </navigation-case>
    </navigation-rule>

</faces-config>

7- Nosso último passo é criar a página “saudacoes.jsp” na pasta “WebContent”. Essa página será exibida após o visitante ter digitado o nome e apertado o botão no formulário da outra página.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<f:loadBundle basename="helloworld.mensagens" var="msg" />

<html>
<head>
    <title>rodrigoaguas.com</title>
</head>
<body>
<f:view>
   
    <h3>
        <h:outputText value="#{msg.boasvindas}" />,
        <h:outputText value="#{pessoaBean.nome}" />!
    </h3>
   
</f:view>
</body>
</html>

Pronto! Agora basta dar deploy em um servidor. Lembrando que o eclipse tem integração com o Tomcat e o JBoss, bastando para dar deploy neles clicar com o botão direito do mouse na pasta do projeto, depois ir em “Run As”, depois “Run on Server”, selecionar o servidor e clicar em “Finish”.

Depois de feito o deploy, acesse http://localhost:8080/hello/ para ver sua aplicação funcionando.

Publicado em Uncategorized | Deixe o seu comentário »

Tutorial básico de JQuery

1/05/10

O JQuery é uma biblioteca Javascript que simplifica extremamente a utilização de ajax, animações, tratamento de eventos e manipulação de elementos html em sites. A forma como se utiliza JQuery é um pouco diferente do que estamos acostumados no Javascript, mas essa mudança trouxe uma simplicidade incrível e compensa qualquer esforço necessário em seu aprendizado.

Uma instrução JQuery é composta por um seletor e um conjunto de operações a serem executadas nos elementos encontrados baseando-se no seletor. O seletor segue uma sintaxe muito parecida com a do CSS, acrescentando a esta alguns recursos. As operações disponíveis são tão variadas que é difícil conhecer todas, alguns exemplos são: acrescentar classe, alterar valor de atributo, replicar elemento, esvaziar conteúdo de um elemento, remover elementos da página, aplicar animações (como fade in e fade out), fazer requisições ajax, etc, etc, etc… Uma lista completa da API pode ser encontrada na documentação do JQuery. O trecho de código abaixo não é funcional, tem como objetivo apenas ilustrar as explicações dadas.

1
$( SELETOR ).operacao();

A palavra SELETOR está representando uma expressão utilizada para encontrar o conjunto de elementos da página que receberão a operação em questão. Ainda ilustrativamente, é comum o uso abaixo, quando são utilizadas diversas operações em um mesmo conjunto de elementos selecionados.

1
$( SELETOR ).operacao1().operacao2().operacao3();

Antes de colocar as mão na massa é necessário importar o arquivo do JQuery colocando o seguinte código no elemento head da sua página:

1
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

Nosso primeiro exemplo não é muito interessante, mas explicará uma prática necessária na maioria dos códigos JQuery, e, como não poderia deixar de ser, será o famoso “Hello World”.

1
2
3
$(document).ready( function() {
    window.alert("Ola Mundo!");
});

Você deve estar se perguntando que raios de Hello World complicado é esse e lhe dou razão, mas logo logo ficará mais claro. O que anteriormente chamei de seletor é sempre passado como parametro da função $, nesse caso estamos passando ‘document’, ou seja o elemento selecionado é o documento html. A operação utilizada é a ‘ready’, que serve para definir uma função a ser executada quando o documento está pronto (acabou de ser carregado, processado e exibido pelo navegador). Então, passamos como parametro da operação ‘ready’ uma função que exibirá uma janela alert. Os códigos JQuery a serem executados quando a página for carregada devem estar sempre dentro dessa função no código anterior, ou seja:

1
2
3
$(document).ready( function() {
    // Código a ser executado na carga da página aqui!
});

Agora estamos prontos para exemplos mais interessantes! No próximo exemplo colocaremos uma tabela com as cores de fundo das linhas alternadas, nos basearemos no seguinte trecho de código html:

1
2
3
4
5
6
7
<table id="listrada">
    <tr><td>Nome:</td><td>Joãozinho</td><\tr>
    <tr><td>Idade:</td><td>10</td><\tr>
    <tr><td>Sexo:</td><td>Masculino</td><\tr>
    <tr><td>Pai:</td><td>Desconhecido</td><\tr>
    <tr><td>Mae:</td><td>Maria</td><\tr>
</table>

A lógica que utilizaremos é selecionar primeiro os filhos do elemento identificado por ‘listrada’ que estejam nas posições pares e definir uma cor de fundo azul para eles:

1
$("#listrada>*:even").css("background-color", "#0000FF");

Em seguida selecionamos os filhos do elemento identificado por ‘listrada’ que estejam nas posições impares e definimos uma cor de fundo verde para os mesmos:

1
$("#listrada>*:odd").css("background-color", "#00FF00");

Como não podemos esquecer do nosso primeiro exemplo, a versão final do código para a tabela listrada fica assim:

1
2
3
4
$(document).ready( function() {
    $("#listrada>*:even").css("background-color", "#0000FF");
    $("#listrada>*:odd").css("background-color", "#00FF00");
});

Se preferirmos não colocar estilo diretamente no Javascript, podemos definir estilos no css para as linhas usando classes e alterar o nosso código da seguinte maneira:

1
2
3
4
$(document).ready( function() {
    $("#listrada>*:even").addClass("linhaAzul");
    $("#listrada>*:odd").addClass("linhaVerde");
});

O próximo exemplo aprofunda as explicações sobre manipulação de eventos dos elementos. Colocaremos em todos os links de uma página qualquer uma janela alert sendo exibida ao usuário quando o mesmo clica sobre o link.

1
2
3
4
5
$(document).ready( function() {
    $("a").click( function() {
        window.alert("Atenção: você está saindo do site rodrigoaguas.com.");
    });
});

O seletor desse exemplo é bem simples, pesquisa por qualquer elemento A do documento html. Então, adiciona aos eventos onclick de todos os elementos selecionados uma chamada para a função que exibe a janela alert. Agora vamos melhorar o nosso código para impedir que a ação padrão do evento seja executada, para isso acrescentaremos um parametro à nossa função para receber um objeto que representa o evento.

1
2
3
4
5
6
$(document).ready( function() {
    $("a").click( function(evento) {
        window.alert("Atenção: você está tentando sair do site rodrigoaguas.com, mas não vai conseguir.");
        evento.preventDefault();
    });
});

Depois de ser impedido de sair do site, queremos que o nosso usuário fique impedido de clicar novamente no link, para isso faremos uma animação de Fade Out no link clicado e ele deixará de ser exibido. Precisaremos utilizar o seletor ‘this’ que representa o elemento onde o evento foi disparado.

1
2
3
4
5
6
7
$(document).ready( function() {
    $("a").click( function(evento) {
        window.alert("Atenção: você está tentando sair do site rodrigoaguas.com, mas não vai conseguir.");
        $(this).fadeOut();
        evento.preventDefault();
    });
});

Nesse tutorial foram tratados os aspectos básicos do JQuery como importação do arquivo da biblioteca, seletores, alteração de estilo, acrescentar classes, manipulação de eventos e animações. Tratarei de Ajax posteriormente em outro tutorial. Abraços!

Publicado em CSS, Javascript | Deixe o seu comentário »

Configurando Facelets em projeto JSF no eclipse

10/02/10

Após termos nosso projeto JavaServer Faces criado no eclipse, iremos configurar o facelets no mesmo. O facelets é um framework de templating feito específicamente para projetos JSF. Ele se integra de tal forma com o ciclo de vida do jsf que resulta numa melhora da performance significativa em comparação ao uso de JSP. Além disso, o facelets funciona em todos os web containers amplamente conhecidos, não impondo restrição alguma ao projeto.

1- Faça o download do facelets na versão 1.1.15, pois a versão 1.2 não é estável (e parece que não ficará tão cedo);

2- Extraia o arquivo “jsf-facelets.jar” para dentro da pasta “WebContent\WEB-INF\lib” do seu projeto JSF. Como estamos utilizando o JBoss nesse exemplo, não é necessário extrair também os outros arquivos JAR da pasta lib do facelets, pois são dependências de bibliotecas que já existem no JBoss;

3- Não basta apenas acrescentarmos a biblioteca do facelets em nosso projeto, devemos configurar algumas outras coisas para que o JSF se integre ao facelets. Acrescente as seguintes linhas ao arquivo faces-config.xml (encontrado em “WebContent\WEB-INF”):

1
2
3
<application>
    <view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
</application>

4- E no mesmo local devemos incluir as seguintes linhas ao arquivo Web.xml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<context-param>
    <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
    <param-value>.htm</param-value>
</context-param>

<context-param>
    <param-name>facelets.DEVELOPMENT</param-name>
    <param-value>true</param-value>
</context-param>

<context-param>
    <param-name>facelets.SKIP_COMMENTS</param-name>
    <param-value>true</param-value>
</context-param>

<context-param>
    <param-name>com.sun.faces.validateXml</param-name>
    <param-value>true</param-value>
</context-param>

No primeiro parâmetro, indicamos que os arquivos físicos que utilizaremos para a apresentação tem extensão .htm.
Dessa forma, quando o facelets receber uma requisição ao endereço “bemvindo.jsf” buscará pelo arquivo “bemvindo.htm”.
Na prática, não importa a extensão escolhida, costuma-se deixar htm ou html apenas por questões históricas.

O segundo parâmetro indica ao facelets que estamos em ambiente de desenvolvimento, dessa forma ele exibe possíveis erros em uma tela amigável ao desenvolvedor, mas que não deve ser exibida futuramente ao usuário final.

O terceiro parâmetro determina ao facelets que os comentários nos códigos HTML devem ser tratados como comentários. Pois o facelets por padrão não ignora comentários () nos arquivos de apresentação.

O quarto parâmetro faz com que o facelets valide o código html das telas, só permitindo que seja utilizado XHTML.

Pronto! Dessa forma o facelets já está pronto para ser executado em seu projeto.

Publicado em JSF, Java | Deixe o seu comentário »

« Artigos anteriores