Mostrando postagens com marcador JSF. Mostrar todas as postagens
Mostrando postagens com marcador JSF. Mostrar todas as postagens

sexta-feira, 30 de julho de 2010

Exemplo de Facelets com Eclipse e JBoss

16:22 Jabes Felipe No comments

Olá Pessoal,


Neste post, irei mostrar um exemplo de como desenvolver aplicações web usando o Framework de template Facelets que é facilmente integrado no JSF. O Facelets oferece alguns vantagens:
Facilidade na criação de templates;
Elimina o "JSP Compiler to Servlet" incrementando de 30% a 50% a performance da aplicação;
Facilidade para criar componentes reutilizáveis;
Usa XHTML como tecnologia de view do JSF;
Precisão para reportar erros.
Quando se desenvolve aplicações em JSF, é recomendável o uso Facelets, em vez de usar include nas subview no JSF.
O exemplo a ser mostrado será desenvolvido usando JSF 1.2, IDE Eclipse e o servidor JBoss.
Antes de começar, precisamos baixar o Facelets, acesse o site: https://www.dev.java.net/files/documents/3448/99102/facelets-1.1.15.B1.zip, recomendo a usar a versão 1.1.15 no JBoss, depois de baixar, descompacta o arquivo e copia os seguintes jar:
el-api-1.0.jar
el-impl-1.0.jar
jsf-facelets.jar

Cole este jars no seguinte diretório do JBoss:
jboss-4.2.3.GA/server/default/deploy/jboss-web.deployer/jsf-libs/

Precisamos baixar apenas o Facelets, as bibliotecas do JSF não precisa baixar, pois no diretório jsf-libs do JBoss, já contêm as bibliotecas do JSF.
A versão do JBoss que estou usando é 4.2.3.

Ao final do post, o projeto será disponibilizado para download, para quem quiser baixar.

O projeto final terá um layout de acordo com a imagem abaixo:



1. Passo: Estrutura do projeto web:


2. Passo: Antes de começar a criar as páginas é necessário fazer algumas configurações tanto no arquivo web.xml quanto no faces-config.xml, primeiro iremos configurar o arquivo web.xml, adicionando alguns parâmetros de contexto.
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
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-app_2_5.xsd">
<display-name>facelets</display-name>
<!-- Use Documents Saved as *.xhtml -->
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>

<!-- Special Debug Output for Development -->
<context-param>
<param-name>facelets.DEVELOPMENT</param-name>
<param-value>true</param-value>
</context-param>

<!-- Optional JSF-RI Parameters to Help Debug -->
<context-param>
<param-name>com.sun.faces.validateXml</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>com.sun.faces.verifyObjects</param-name>
<param-value>true</param-value>
</context-param>

<!-- Servlet JSF -->
<servlet>
<servlet-name>javax.faces.FacesServlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>javax.faces.FacesServlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>

</web-app>
web.xml

Agora vamos adicionar o FaceletViewHandler no arquivo faces-config.xml
<?xml version="1.0" encoding="UTF-8"?>

<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
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"
version="1.2">

<application>
<!-- Facelets -->
<view-handler>
com.sun.facelets.FaceletViewHandler
</view-handler>
</application>

</faces-config>
faces-config.xml

3. Passo: Agora vamos criar as páginas para ser usadas no Facelets, do tipo .xhtml, para criar com estas extensões no Eclipse, basta criar um novo arquivo file e colocar o nome + a extensão .xhtml.
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">

<head>
<title>Facelets com Eclipse e JBoss Application Server</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="tudo">
<div id="topo">
<ui:insert name="topo">
<ui:include src="topo.xhtml" />
</ui:insert>
</div>
<div id="centro">
<div id="menu">
<ui:insert name="menu">
<ui:include src="menu.xhtml" />
</ui:insert>
</div>
<div id="principal">
<ui:insert name="principal">
</ui:insert>
</div>
</div>
<div id="rodape">
<ui:insert name="rodape">
<ui:include src="rodape.xhtml" />
</ui:insert>
</div>
</div>

</body>

</html>
template.xhtml

No código acima, temos algumas tags do Facelets, o ui:insert serve para definirmos um ponto de substituição no template, o ui:include serve para incluir um fragmento.


Agora vamor criar as páginas de fragmentos.
Página topo:
<ui:fragment xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
TOPO
</ui:fragment>
topo.xhtml

A tag ui.fragment é usada para definir um bloco de conteúdo.

Página de menu:
<ui:fragment xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:form>
<ul>
<li><h:outputLink value="index.faces">LINK1</h:outputLink></li>
<li><h:outputLink value="index.faces">LINK2</h:outputLink></li>
<li><h:outputLink value="index.faces">LINK3</h:outputLink></li>
<li><h:outputLink value="index.faces">LINK4</h:outputLink></li>
</ul>
</h:form>
</ui:fragment>
menu.xhtml

Página do rodapé:
<ui:fragment xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
RODAPE
</ui:fragment>
rodape.xhtml

Agora vamos criar uma página que irá fazer o relacionamento de composição com o template.
Página index do Facelets:
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">

<ui:composition template="/template.xhtml">

<ui:define name="principal">
<h1><h:outputText value="Exemplo de Facelets usando Eclipse e JBoss Application Server" /></h1>
<br /><br /><br />
<h:outputText value="Àrea para o conteúdo principal." />
</ui:define>

</ui:composition>

</html>
index.xhtml

A tag ui:composition serve para definir o relacionamento de composição entre esta tela e o template, a tag ui:define serve para substituir a definição da tag ui:insert, nesta tela a única parte que está sendo sobrepondo é a àrea principal.
Crie uma página index.jsp para abertura da aplicação:
<jsp:forward page="index.faces" />
index.jsp

Arquivo css para definir a estrutura e aparência do projeto
* {
padding: 0;
margin: 0;
font-size: 12pt;
}

ul {
list-style: none;
}

body {
text-align: center;
}

#tudo {
width: 800px;
margin: 0 auto;
}

#topo {
width: 100%;
height: 80px;
float: left;
border: 2px solid;
margin-top: 0.5em;
background: red;
}

#centro {
width: 100%;
height: 300px;
float: left;
margin-top: 0.5em;
}

#menu {
width: 20%;
height: 100%;
float: left;
overflow: auto;
border: 2px solid;
background: yellow;
}

#menu li{
display: block;
text-align: center;
}

#principal {
width: 78%;
height: 100%;
float: right;
overflow: auto;
border: 2px solid;
background: silver;
}

#rodape {
width: 100%;
height: 30px;
float: left;
border: 2px solid;
margin-top: 0.5em;
background: lime;
}
css.css

Bom galera, este foi um exemplo de como usar o Facelets nas aplicações JSF,
Para quem quiser baixar o exemplo, clique aqui.
Qualquer dúvida, crítica ou sugestão, fico à disposição.

Leia mais »

domingo, 30 de maio de 2010

Exemplo de JSF2 com AJAX

00:11 Jabes Felipe No comments

Olá Pessoal,


O framework JavaServer Faces em sua penúltima versão (1.2) nos permite obter várias vantagens para o desenvolvimento de aplicações, como por exemplo a produtividade, entretanto o JSF padrão é um pouco limitado, e para obter uma gama maiores de componentes, suporte a AJAX, e etc... É recomendado utilizar um framework que implementa o JSF, como por exemplo: IceFaces, RichFaces, entre outros.
O AJAX é um conjunto de tecnologia que é bastante utilizada no desenvolvimento web, permitindo que utilizem-se de solicitações assíncronas de informações. O JSF 2 já possui o suporte a AJAX, e neste post veremos um exemplo simples, de como implementar o AJAX em nossas aplicações.
O objetivo é apenas mostrar o funcionamento do AJAX, po isso, em nossa aplicação teremos um campo texto, que será usado para informar o nome de uma pessoa, quando é digitado o nome, usaremos o evento keyup, para mostrar a quantidade de caracteres que está sendo digitado, também temos um botão de ação, que quando invocado será usado para exibir o nome digitado e a quantidade de caracteres que esse nome possui, por fim, quando o campo texto ganhar o foco, todos as informações contidas na tela serão limpadas.
O exemplo foi desenvolvido utilizando a IDE Netbeans 6.8 e o servidor Glassfish.
Ao final do post, o projeto será disponibilizado para download, para quem quiser baixar e testar.

1. Passo: Veja como é a estrutura do projeto:



2. Passo: Iremos criar a Classe PessoaMB, no pacote managedbean, esta Classe possui 2 atributos nome e mensagem, com seus respectivos métodos get e set, mais 3 métodos teremos, um que é chamado no evento blur para limpar os valores dos atributos da Classe, os outros métodos é para mostrar a quatidade de caracteres que estão sendo digitados, esse método será invocado do evento keyup, e método para mostrar o nome digitado, que é invocado no evento click do botão.



3. Passo: O próximo passo é criar a página, a grande novidade nessa página é o uso da tag f:ajax, no uso dela através do campo texto, temos 3 atributos, o event que é usado para escolher qual evento javascript será utilizado, o atributo render é usado para mostrar novamente o renderizamento da resposta, o valor desse atributo é o id do output que será usado para mostrar a mensagem, observe que podemos renderizar mais de componente ao mesmo, bastando separar-lôs entre espaço, e o atributo listener faz a ligação com um método comum que está na classe PessoaMB, o uso da tag f:ajax no botão está com um atributo execute que é utilizado para informar o que será enviado para o servidor na requisição AJAX.



4. Passo: Agora é executar e testar o exemplo.


Bom pessoal, este foi um exemplo simples de AJAX usando o JSF2, esse exemplo poderia ser feito só em javascript, mas a intenção do post foi mostrar como é implementado o AJAX no JavaServer Faces.
Para quem quiser baixar o exemplo, clique aqui.
Qualquer dúvida, crítica ou sugestão, fico à disposição.

Leia mais »

sábado, 24 de abril de 2010

Customizar/Personalizar Validador em JSF

10:18 Jabes Felipe 1 comment

Olá Pessoal,


O Framework JavaServer Faces oferece alguns validadores já prontos para serem usados, como por exemplo: validar o tamanho máximo ou mínimo de uma String ou validar somente campos numéricos, entretanto esses validadores são limitado. Para contornar este problema, o JSF nos permite que sejam desenvolvidos validadores customizados/personalizados de acordo com a regra de negócio.
Neste post, irei mostrar um exemplo de validador customizado que serve para validar o CPF, é um exemplo bem simples, mais o foco é mostrar como que implementa este recurso no JSF.
O exemplo foi desenvolvido utilizando a IDE Eclipse e o servidor TomCat.
Ao final do post, o projeto será disponibilizado para download, para quem quiser baixar e testar.


1. Passo: Estrutura do projeto:



2. Passo: Estrutura do arquivo web.xml:



3. Passo: Crie a Classe ManagedBean chamado de ValidaCPF no pacote managedbean, esta classe contém o atributo cpf com seu método get e set, o método validador do JSF, e um método que verifica se o CPF digitado é valido. A classe ficará de acordo com a imagem abaixo:


4. Passo: Estrutura do arquivo faces-config.xml:



5. Passo: Crie a página index.jsp, que conterá o formulário para digitar o CPF, de acordo com a imagem abaixo:


6. Passo: Crie uma página redirect.jsp, para redirecionar para o nosso formulário, nessa página basta acrescentar:



7. Passo: Executa o projeto, e verá a seguinte página:


8. Passo: Vamos testar, digitando um CPF inválido:


9. Passo: Vamos testar, digitando um CPF válido:


Bom galera, este foi um exemplo bem básico de como personalizar validadores no JSF.
Para quem quiser baixar o exemplo, clique aqui.
Qualquer dúvida, crítica ou sugestão, fico à disposição.

Leia mais »

sábado, 10 de abril de 2010

Internacionalização com JSF

11:48 Jabes Felipe 5 comments

Olá Pessoal,


Um dos recursos que o Framework JavaServer Faces (JSF) oferece, é a internacionalização da aplicação, possibilitando que a mesma tenha vários idiomas.
Neste post irei mostrar um exemplo, utilizando os idiomas: (Português, Inglês, Alemão, Italiano e Francês), é uma pequena aplicação, mas pode ser tomada com base para desenvolver qualquer tipo projeto.
O exemplo foi desenvolvido utilizando a IDE Eclipse e o servidor TomCat.
Ao final do post, o projeto será disponibilizado para download, para quem quiser baixar e testar.


1. Passo: A aplicação foi estruturada de acordo com a imagem:



2. Passo: A primeira coisa que iremos fazer, é criar o ManagedBean com o nome InternacionalizacaoMB dentro do pacote managedbean, esta Classe é bem simples, possui 2 atributos, a Linguagem (Locale) e o País, com seus metodos gets e sets, o método mudarIdioma() é envocado através da ação de um link, nele é testado se o Locale possui um Pais, e logo é chamado o metodo mudarLocalidade() que altera o Locale, o ser retorno é null, ou seja, será redirecionado para ficar na mesma página.



3. Passo: Agora iremos criar os arquivos de propriedades que armazenarão os textos de cada idioma, cria um arquivo properties chamado mensagem, conforme a imagem abaixo:



4. Passo: Neste exemplo foram criados 6 arquivos de properties, em todos os arquivos as propriedade não podem ser alterados, apenas seus valores. Um arquivo com o idioma Inglês, ficará conforme a imagem:



5. Passo: No nosso arquivo de configuração do JSF, o faces-config.xml, temos que configurar o managedbean, Locale e o arquivo properties, no Locale, informei apenas o idioma Português e Inglês, mas pode deve ser colocado os Locale dos idiomas Alemão, Francês e Italiano.



6. Passo: Configuração do arquivo web.xml:



7. Passo: Agora criamos nossa página jsp, no exemplo deixei o nome de formulario.jsp, na primeira parte da página contém o menu para escolher o idioma.



Ainda na página formulario.jsp, iremos colocar um pequeno bloco que contém um form, conforme a imagem:



8. Passo: Veja agora como ficou o exemplo, usando o idioma Inglês:



Idioma em português:



Idioma em alemão:



Bom pessoal, este foi um exemplo bem simples, de como fazer a internacionalização da sua aplicação usando o produtivo Framework JSF.
Toda tradução, mostrado no exemplo, foi feita usando o Google Translate. :)
Para quem quiser baixar o exemplo, clique aqui.
Qualquer dúvida, crítica ou sugestão, fico à disposição.

Leia mais »

sexta-feira, 2 de abril de 2010

Máscaras em formulários JSF, usando JQuery.

16:15 Jabes Felipe 14 comments

Olá Pessoal,


Neste post, irei mostrar um exemplo, de como criar máscaras em formulários JSF, para isto, iremos usar a biblioteca JQuery que facilita o desenvolvimento de scripts em páginas web, além desta biblioteca, usaremos uma outra, chamada de MaskedInput.
A biblioteca JQuery, pode ser baixada no site http://jquery.com/ e a MaskedInput pode ser baixada no site http://plugins.jquery.com/project/maskedinput.
Através da MaskedInput, conseguimos criar vários tipos de máscaras facilmente, sem a necessidade de conhecermos a fundo JavaScript.
Para este exemplo, mostrarei cinco tipos de máscaras (Telefone, Cep, CPF, RG e CNPJ), usando o JSF. Estas máscaras não restringe apenas para uso no JSF, também poderá ser usado em JSP, Struts, etc...
Ao final do post, o projeto será disponibilizado para download, para quem quiser baixar e testar.

1. Passo: Crie um página de formulário em JSF, como mostrado na figura abaixo, não esquece de importar os scripts:




2. Passo: Agora, só testar, vejam como ficou o exemplo:



Bom galera, este foi um exemplo de como usar máscaras em formulários JSF, através da biblioteca JQuery e MaskedInput.
Para quem quiser baixar o projeto, clique aqui.
Qualquer dúvida, crítica ou sugestão, fico à disposição.

Leia mais »

sábado, 20 de março de 2010

Login de Usuários com EJB3 e JSF (Parte 2)

17:45 Jabes Felipe 4 comments

Olá Pessoal,


Esta é a segunda e última da parte do desenvolvimento de um Sistema de Login de Usuários, usando EJB3 para fazer a validação dos Usuários no nosso Banco de Dados, e JSF para a camada de apresentação do nosso Projeto.
Na primeira parte deixamos pronto, toda camada de EJB, agora nesta parte iremos criar o ManagedBean do Login e o Servlet Filter do Login.
Ao final do post, o projeto será disponibilizado para download, para quem quiser baixar e testar.

1. Passo: Crie um ManagedBean, óbviamente dentro do projeto web, escolha o nome de LoginMB, defina um pacote com o nome managedbean, deixa seu escopo como session, feito isto, altera o código seu código, deixando igual ao da figura abaixo:


No código acima, criamos dois método, um para fazer o login e o outro para fazer o logout.


2. Passo: Agora vamos criar o Servlet Filter, informe o nome de LoginFilter, defina um pacote, pode ser chamado de filter, deixa o mapeamento das URLs como *.jsf, depois de criado o Filter, altera o código do método doFilter, para o que está mostrado na figura abaixo:

3. Passo: Deixe o arquivo faces-config.xml, como mostrado na imagem abaixo, caso não exista este arquivo, basta criá-lo.


4. Passo: O arquivo web.xml, deverá ficar parecido com a da figura abaixo:

5. Passo: Agora iremos criar nossas páginas .jsp, são cinco páginas, a primeira será o index.jsp, que apenas fará o encaminhamento para página de login.

6. Passo: Criamos agora a página para fazer o login, a página login.jsp, deverá ficar parecida com a figura abaixo.



7. Passo: Criamos agora a página home.jsp, esta página só deverá ser acessado para quem estiver logado, é uma página bem simples, conforme a figura abaixo.



8. Passo: Criamos agora a página logout.jsp, esta página se aberta quando o usuário sair do sistema, é uma página bem simples, conforme a figura abaixo.



9. Passo: Criamos agora a página falha.jsp, esta página será exibida quando um usuário inválido tentar entrar no sistema, é uma página bem simples, conforme a figura abaixo.



10. Passo: Primeiramente, iremos tentar entrar no sistema, com um usuário que não existe.

11. Passo: Quando não for encontrado o usuário, a página falha.jsp será exibida.

12. Passo: Tentamos agora com um usuário que esteja cadastrado.


13. Passo: A página home será exibida, mostrando o nome do usuário que está logado.


14. Passo: Quando o usuário, sair do sistema, a página logout será exibida.

Terminamos, o nosso projeto de Login, usando EJB3, Servlet Filter e JSF.
Para quem quiser baixar o projeto, clique aqui.
Qualquer dúvida, crítica ou sugestão, fico a disposição.

Leia mais »

Login de Usuários com EJB3 e JSF (Parte I)

11:54 Jabes Felipe 9 comments

Olá Pessoal,


Neste post irei mostrar um exemplo simples de como fazer autentificação de usuários, usando EJB3, para a regra de negócio, e o Framework JSF para a camada de apresentação, poderia ser um Servlet ou JSP para view. A aplicação foi desenvolvida no Netbeans 6.8, servidor GlassFish v3 e o Banco de Dados MySQL.
Por estarmos usando o JSF, poderiamos fazer o controle de autentificação usando um próprio recurso do JSF chamado de PhaseListener, que fica de uma forma mais integrado. Porém neste exemplo, será feito utilizando o bom e velho Filter.
Este post será dividido em duas partes, sendo que a primeira, iremos criar o BD e a tabela Usuario, também será criado o projeto no Netbeans, deixando toda a camada de EJB pronta. Para a segunda parte, será criado o Servlet Filtro e a camada do JSF.
Ao final do post, o projeto será disponibilizado para download, para quem quiser baixar e testar.

1. Passo: A primeira coisa que devemos fazer é criar um Banco de Dados no Mysql, para isto basta usar seu programa de Gerenciamento de Banco de Dados e digitar o seguinte comando:

CREATE DATABASE JAVA;

Para criar a tabela de Usuário, use o seguinte comando:

CREATE TABLE USUARIO (
nome VARCHAR(20) PRIMARY KEY,
senha VARCHAR(20)
);

Criado nosso BD e a Tabela, já deixaremos um Usuário cadastro, para mais tarde podermos testar, simplesmente, digite o código abaixo:

INSERT INTO USUARIO values ('jabes', 'jabes');


2.Passo: Iremos criar um projeto JEE no Netbeans, para isto escolha Enterprise Application, o nome do projeto será Login, escolha o servidor GlassFish, criando um módulo EJB e um WAR.
A estrutura do projeto ficará parecida com a imagem abaixo:



3. Passo: Agora vamos criar a Entidade (Classe) Usuário, que será nosso modelo, para não digitarmos a Classe na unha, iremos importar a mesma do Banco. Clique com o botão direito do mouse sobre o módulo EJB, e escolha Entity Classes from DataBase, conforme a figura abaixo:



4. Passo: Escolha um Data Source que use o MySQL e o nosso Banco de Dados que foi criado, caso não exista um, basta criar um novo DS, depois de escolhido o DS, adicionar a tabela Usuario, clique em Next, conforme mostra a imagem abaixo:



5. Passo: Informe o nome do pacote, no exemplo deixei como loginservice, depois clique em Next.



6. Passo: Na configuração do mapeamento da Entidade, configurar de acordo com a figura abaixo, depois, clique em Finish:


7. Passo: Será criado a Classe Usuario, com todas Annotations, conforme a imagem abaixo:



8. Passo: Agora iremos criar um Session Bean, do tipo Stateless, com o nome de LoginService, implementando uma Interface Local, ambos, no pacote loginservice, crie um método chamado verificarUsuario que retorna um boolean e que tem como parâmetro um Objeto do tipo Usuario na Interface LoginServiceLocal, na Classe LoginService, altera seu código, deixando-o, igual ao da figura abaixo:


Aqui, terminamos nossa primeira parte da Aplicação, deixando a camada de EJB pronta, e na próxima e última parte, iremos terminar, com a criação do Servlet Filter e do ManagedBean.


Leia mais »

Jabes Felipe RSS Feed Jabes Felipe