JSF – Tutorial RichFaces + Hibernate + MySQL – CRUD completo (parte 1)

Esta é a primeira parte da nossa aplicação JSF completa utilizando RichFaces + Hibernate + MySQL na prática. Pretendo criar uma aplicação simples e ao mesmo tempo prática ilustrando situações do dia-a-dia. Utilizarei o Eclipse e o servlet contêiner Tomcat.

A aplicação é baseada em um cadastro de pessoas onde o usuário terá acesso a operações de Create/Retrieve/Update/Delete. Utilizarei máscaras, conversores, validadores e componentes com suporte a AJAX(RichFaces), CSS entre outros.

Versões utilizadas

  • Eclipse 3.4.1
  • JDK 1.6
  • Tomcat 6.0.18
  • MyFaces 1.2.5
  • RichFaces 3.3.1
  • Hibernate Annotations 3.4.0
  • Hibernate 3.3.1
  • MySQL 5
  • JUnit 4.5
  • Caelum Stella 1.2
  • MySQL Query Browser 1.2

Estrutura inicial do projeto

estrutura

Importando o projeto

  1. Baixe o projeto >>aqui<<;
  2. Descompacte o projeto no seu workspace;
  3. No Eclipse vá em: File –> Import –> General – Existing Projects into Workspace –> Next –> Selecione o projeto descompactado no workspace –> Finish.

Resultado

cadastro

Continuarei o próximo post desenvolvendo a camada de persistência da aplicação. Até o próximo post!


Flex – [Bindable]

Bindable é uma metatag que nos permite vincular váriaveis com propriedades dos componentes. Todos os componentes que utilizarem uma determinada variável bindable serão notificados se houver alguma mudança no valor desta variável.

Criando a aplicação

Crie uma nova aplicação: File –> New –> MXML application e escolha um nome de sua preferência. Apague seu conteúdo e cole o seguinte código no arquivo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:Panel x="43" y="43" width="444" height="236" layout="absolute" title="Variáveis Bindable">
     <mx:Accordion id="tabs" borderStyle="solid" width="100%" height="100%">
         <mx:Canvas label="Exemplo 1"  >
             <mx:Label x="10" y="12" text="Original" width="98"/>
             <mx:Label x="10" y="38" text="Cópia" width="98"/>
             <mx:TextInput x="146" y="10" id="campo" change="texto = campo.text"/>
             <mx:Label x="146" y="39" id="rotulo" text="{texto}" />
         </mx:Canvas>

         <mx:Canvas label="Exemplo 2" >
             <mx:List id="lista_pessoas" change="pessoa_selecionada = List(event.target).selectedItem" dataProvider="{model_pessoas.pessoa}" width="214" x="21" y="24" backgroundColor="#DFFADF" height="103"/>

             <mx:Label id="rotulo_apelido" x="312" y="59" text="{pessoa_selecionada.apelido}"/>
             <mx:Label id="rotulo_nome" x="312" y="24" text="{pessoa_selecionada.nome}"/>
             <mx:Label x="243" y="24" text="Nome"/>
             <mx:Label x="243" y="59" text="Apelido"/>
        </mx:Canvas>
    </mx:Accordion>

 </mx:Panel>

 <mx:Model id="model_pessoas">
     <pessoas>
         <pessoa label="Sérgio" nome="Sérgio Fantin" apelido="Serjão"/>
         <pessoa label="Mary" nome="Mariana Ortega" apelido="Mary"/>
         <pessoa label="João" nome="João da Silva" apelido="Jão"/>
         <pessoa label="Zé" nome="José das Almas" apelido="Zé"/>
     </pessoas>
 </mx:Model>

   <mx:Script>
      <![CDATA[
         [Bindable]
             public var texto : String;
         [Bindable]
             public var pessoa_selecionada : Object;
      ]]>

  </mx:Script>
</mx:Application>

Leia o resto deste post »


Flex – Inserindo dados em um DataGrid com variável [Bindable]

Neste post criarei um cadastro básico de pessoas que receberá os dados e fará a inserção dos mesmos num componente <mx:DataGrid>. Um usuário poderá ser cadastrado e removido da aplicação de uma forma bem simples.

Cadastro

cadastro

Criando a aplicação

Crie uma nova aplicação: File –> New –> MXML application e escolha um nome de sua preferência. Apague seu conteúdo e cole o seguinte código no arquivo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="inicializa()">
 <mx:Panel x="21" y="10" width="509" height="511" layout="absolute" title="Formulário com inserção de dados em DataGrid">
     <mx:DataGrid id="datagrid_pessoas" dataProvider="{lista_pessoas}" x="26" y="280" width="434" height="176">
         <mx:columns>
             <mx:DataGridColumn headerText="Nome da pessoa" dataField="nome" width="150"/>
             <mx:DataGridColumn headerText="Cidade" dataField="cidade" width="100"/>
             <mx:DataGridColumn headerText="Estado" dataField="uf" width="50"/>
             <mx:DataGridColumn visible="false" dataField="foto" width="50"/>
        </mx:columns>
     </mx:DataGrid>

     <mx:Label x="151" y="10" text="Cadastro de Pessoas" fontSize="20" textAlign="center"/>
     <mx:Label x="26" y="67" text="Nome"/>
     <mx:Label x="26" y="97" text="Cidade"/>
     <mx:Label x="26" y="127" text="Estado"/>
     <mx:TextInput id="campo_nome" x="98" y="65" width="247" text="{datagrid_pessoas.selectedItem.nome}"/>
     <mx:TextInput id="campo_cidade" x="98" y="95" text="{datagrid_pessoas.selectedItem.cidade}" width="247"/>
     <mx:TextInput id="campo_uf" x="98" y="125" text="{datagrid_pessoas.selectedItem.uf}" width="169"/>
     <mx:TextInput id="campo_end_foto" text="{datagrid_pessoas.selectedItem.foto}" x="132" y="198" width="328"/>
     <mx:Button id="botao_cadastrar" click="salvar();" x="26" y="250" label="Cadastrar" width="89" color="#3C130B"/>
     <mx:Button id="botao_novo" click="limpar();" x="123" y="250" label="Novo" width="102"/>
     <mx:Button id="botao_excluir" click="remover();" x="233" y="250" label="Excluir" width="79"/>
     <mx:Image source="{campo_end_foto.text}" x="353" y="65" width="107" height="112"/>
     <mx:Label x="26" y="200" text="URL da foto"/>
 </mx:Panel>

 <mx:Script>
     <![CDATA[
     import mx.collections.ArrayCollection;

     [Bindable]
         public var pessoa : Object;
     [Bindable]
         public var lista_pessoas : ArrayCollection;

         public function inicializa() : void {
             this.lista_pessoas = new ArrayCollection();
         }

         public function limpar() : void {
             campo_nome.text = "";
             campo_cidade.text = "";
             campo_uf.text = "";
             campo_end_foto.text = "";
         }

         public function salvar() : void {
             pessoa = new Object(); 

             pessoa.nome = campo_nome.text;
             pessoa.cidade = campo_cidade.text;
             pessoa.uf = campo_uf.text;
             pessoa.foto = campo_end_foto.text.toString();

             lista_pessoas.addItem(pessoa);
         }

         public function remover() : void {
             lista_pessoas.removeItemAt(datagrid_pessoas.selectedIndex);
         }
     ]]>
 </mx:Script>
</mx:Application>

Explicando o código

Criei um dataGrid que será alimentado por uma variável bindable denominada lista_pessoas.

O método salvar() cria uma nova instância de pessoa que é preenchida com os valores digitados nos campos e é adicionada à nossa lista_pessoas. O dataGrid será notificado de que houve uma mudança na variável bindable e será atualizado com o novo registro.

O método remover() apaga o registro referente à linha selecionada no dataGrid.

A Image recebe o texto do campo campo_end_foto e exibe a imagem do endereço informado.

Até o próximo post!

inicializa

Flex – Pesquisa utilizando filtros

Neste post irei ensinar uma das formas de implementar filtragem de dados em pesquisa utilizando a propriedade filterFunction da classe ArrayCollection. A aplicação apresentada é bem simples de ser entendida e pode ser aprimorada facilmente.

Criando a aplicação

Crie uma nova aplicação: File –> New –> MXML application e escolha um nome de sua preferência. Apague seu conteúdo e cole o seguinte código no arquivo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">

 <mx:Panel x="129" y="67" width="555" height="389" layout="absolute" title="Filtragem por Nome">
     <mx:DataGrid id="dataGridPessoas" x="10" y="77" width="518" height="234"/>
     <mx:Label x="10" y="37" text="Nome"/>
     <mx:TextInput id="campo_pesquisar" x="62" y="35"/>
     <mx:Button x="230" y="35" label="Filtrar" click="pesquisar();"/>
     <mx:Button x="325" y="35" label="Exibir tudo" click="exibirTudo();"/>
 </mx:Panel>

 <mx:Script>
     <![CDATA[
     import mx.collections.ArrayCollection;

     [Bindable]
     public var pessoas : ArrayCollection = new ArrayCollection([
         {Nome : "Sérgio Fantin", Apelido : "Serjão", Cidade : "Maringá"},
         {Nome : "Mariana Ortega", Apelido : "Mary", Cidade : "Maringá"},
         {Nome : "Maria da Silva", Apelido : "Maria", Cidade : "São Paulo"},
         {Nome : "José dos Santos", Apelido : "Zé", Cidade : "Sarandi"}]);

     public function init() : void{
         dataGridPessoas.dataProvider = this.pessoas;
     }

     public function pesquisar() : void {
         pessoas.filterFunction = filtroNome;
         pessoas.refresh();
     }

     public function filtroNome(pessoa_nome : Object) : Boolean {
         return pessoa_nome.Nome.substr(0, campo_pesquisar.length) == campo_pesquisar.text;
     }

     public function exibirTudo() : void {
         pessoas.filterFunction = retornaTrue;
         pessoas.refresh();
     }

     public function retornaTrue(dado : Object) : Boolean {
         return true;
     }
  ]]>

 </mx:Script>
</mx:Application>

Explicando o código

  • Criei uma variável bindable pessoa do tipo ArrayCollection e fiz a inicialização da variável na mesma linha;
  • Assim que a aplicação é inicializada eu populo o dataGridPessoas com os dados da minha variável pessoa através da chamada init();
  • O método pesquisar() faz com que a variável pessoa receba o retorno do método filtroNome() através da propriedade filterFunction presente na classe ArrayCollection;

Resultado

filtro

Até o próximo post!


Flex – Definindo modelo de dados com mx:Model

Neste post irei ensinar como definir um modelo de dados que servirá como provedor de dados para um List.

Achei interessante o fato de podermos criar nosso próprio modelo de dados e utilizá-lo em um outro componente.

Criando a aplicação

Crie uma nova aplicação: File –> New –> MXML application e escolha um nome de sua preferência. Apague seu conteúdo e cole o seguinte código no arquivo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:Panel x="43" y="43" width="506" height="249" layout="absolute" title="Populando List usando Model">
     <mx:List id="lista_pessoas" dataProvider="{model_pessoas.pessoa}" width="214" x="22" y="19" backgroundColor="#DFFADF" height="103"/>

     <mx:Label x="329" y="57" text="{lista_pessoas.selectedItem.apelido}"/>
     <mx:Label x="329" y="22" text="{lista_pessoas.selectedItem.nome}"/>
     <mx:Label x="260" y="22" text="Nome"/>
    <mx:Label x="260" y="57" text="Apelido"/>
 </mx:Panel>

<mx:Model id="model_pessoas">
     <pessoas>
         <pessoa label="Sérgio" nome="Sérgio Fantin" apelido="Serjão"/>
         <pessoa label="Mary" nome="Mariana Ortega" apelido="Mary"/>
         <pessoa label="João" nome="João da Silva" apelido="Jão"/>
         <pessoa label="Zé" nome="José das Almas" apelido="Zé"/>
     </pessoas>
</mx:Model>

</mx:Application>

Leia o resto deste post »


Flex – Obtendo dados de um List e exibindo em um Alert

Neste post irei ensinar como obter dados de uma linha de um componente <mx:List> e exibir os mesmos em um Alert.

Criando a aplicação

Crie uma nova aplicação: File –> New –> MXML application e escolha um nome de sua preferência. Apague seu conteúdo e cole o seguinte código no arquivo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="613" height="338">
     <mx:Panel x="58" y="29" width="494" height="264" layout="absolute">
         <mx:List id="lista_nomes" width="147.5" backgroundColor="#F0DBDB" x="25.5" y="26" height="120">
             <mx:dataProvider>
                 <mx:Array>
                     <mx:Object value="nome1" label="Sérgio Fantin"/>
                     <mx:Object value="nome2" label="Mariana Ortega"/>
                     <mx:Object value="nome3" label="João da Silva"/>
                     <mx:Object value="nome4" label="Manoel das Almas"/>
                     <mx:Object value="nome5" label="Chapéuzinho Vermelho"/>
                </mx:Array>
            </mx:dataProvider>
         </mx:List>

      <mx:Label x="181" y="29" text="Nome: "/>
      <mx:Label text="{lista_nomes.selectedItem.label}" x="242" y="29" width="213"/>
      <mx:Button x="25" y="174" label="OK" width="114.5" click="mx.controls.Alert.show(lista_nomes.selectedItem.label, 'Nome Selecionado');" />
 </mx:Panel>
</mx:Application>

O provedor de dados poderia ser um arquivo xml externo/interno, mas desta vez vou criar o dataProvider dentro do componente List para ilustrar esta possibilidade.

Leia o resto deste post »


JSF – Validação de CPF com máscara

Neste post irei ensinar como validar CPF com Stella. O post ensinará como fazer validações de CPFs, além de CPFs Stella tem suporte a formatadores e conversores para documentos brasileiros, tais como CPF, CNPJ e PIS/PASEP; além de um gerador de boletos bancários.

Pra facilitar a vida do desenvolvedor brasileiro o pessoal da Caelum criou essa biblioteca simplificando assim a validação de documentos em aplicações JSF.

Versões utilizadas

  • Eclipse 3.4.1
  • JDK 1.6
  • Tomcat 6.0.18
  • MyFaces 1.2.5
  • RichFaces 3.3.1
  • Caelum Stella 1.2

Requisitos

  1. Baixar aqui os jars;
  2. Descompactar os jars caelum-stella-core-1.2.jar e caelum-stella-faces-1.2 na pasta WebContent/WEB-INF/lib da aplicação;
  3. O RichFaces deve estar instalado na aplicação; Clique aqui para aprender a instalar o RichFaces
  4. O arquivo jquery.maskedinput-1.2.1.js deve estar presente na aplicação. Baixe aqui o arquivo

Estrutura do projeto

projeto

Códigos

pessoa.java:

package br.com.serjaum.entidades;

public class Pessoa {

 private String nome; 

 private String email;

 private String cpf; 

 public String getNome() {
     return nome;
 }

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

 public String getEmail() {
     return email;
 }

 public void setEmail(String email) {
     this.email = email;
 }

 public String getCpf() {
     return cpf;
 }

 public void setCpf(String cpf) {
     this.cpf = cpf;
 }

}

Leia o resto deste post »