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

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

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>

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

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

Desenvolvedor Java está em alta no mercado

Carreira é promissora na indústria de tecnologia; salários variam de R$ 3 mil a R$ 6 mil.

Uma das carreiras mais promissoras no mercado de tecnologia da informação (TI) no País é a de desenvolvedor Java. Desde que a linguagem de programação ganhou força, com a explosão da internet, em 2000, a oferta de vagas vem crescendo ano após ano.

Ávidas por especialistas na tecnologia, muitas empresas têm enfrentado dificuldade em encontrar gente qualificada, embora estima-se que no Brasil existam mais de 70 mil profissionais. “O problema é que o volume de profissionais disponíveis no mercado é bem menor do que a demanda”, explica o gerente da divisão de tecnologia da empresa de recrutamento Michael Page, Ricardo Basaglia. “A área de desenvolvimento em Java  se mantém aquecida, mesmo diante da crise”.

Com salários que vão de três mil reais a seis mil reais, esses profissionais são valorizados pela indústria de TI e por consultorias. Muitos, inclusive, acabam bastante assediados pela concorrência que enfrenta essa falta de talentos. É o caso do arquiteto em Java, Daniel Quirino, 26 anos, que atua na empresa de serviços Tata Consultancy Services (TCS), braço de TI do grupo indiano Tata.

Logo que saiu da faculdade, em 2005, começou a receber convites de emprego que continuam até hoje. “As universidades formam poucos profissionais e mesmo estes ainda não estão aptos a assumir determinados cargos”, afirma. Graduado em Ciências da Computação pela Universidade de São Carlos, Quirino mexe com programação desde os 10 anos, quando suas empreitadas eram apenas um hobby. “As perspectivas de carreira são muito boas e interessantes, da mesma forma que os salários estão competitivos”, diz.

De acordo com o gerente de RH da CPM Braxis, Alexandre Ullmann, das 385 vagas que a companhia possui em aberto, boa parte é para desenvolvedores ou programadores Java. “Buscamos trazer gente júnior e treiná-los para entender nossa cultura”, afirma. Essa estratégia visa preparar os profissionais a ocupar cargos seniores da prestadora de serviços de tecnologia. Mesmo assim, a empresa ainda encontra dificuldades pela escassez de força de trabalho disponível e pela falta de inglês fluentes da maioria dos profissionais.

Fonte: http://computerworld.uol.com.br/carreira/2009/07/23/desenvolvedor-java-esta-em-alta-no-mercado/

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

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>

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.

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

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;
 }

}

Flex – Validação de e-mail

Neste post irei ensinar como criar um validador para chegar se um determinado e-mail é válido.

Criando a aplicação

Crie uma nova aplicação: File –> New –> MXML application e nomei o arquivo de principal.mxml. 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="1024" height="768"> 

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" x="50" y="50"  width="530" height="396" >
     <mx:Label click="fechar();" x="456" y="10" text="Sair"/>

     <mx:Label x="155" y="45" text="Validando E-mail" fontSize="20" textAlign="center"/>

     <mx:Label x="64" y="107" text="Nome"/>
     <mx:TextInput id="nome_pessoa" x="211" y="105" width="207"/>

     <mx:Label x="64" y="141" text="E-mail"/>
     <mx:TextInput id="campo_email" x="211" y="137" width="207"/>
 </mx:Panel>

 <mx:Script>
     <![CDATA[
         import mx.controls.Alert;
         import mx.managers.PopUpManager;

         private function fechar() : void {
             PopUpManager.removePopUp(this);
         }
      ]]>
</mx:Script>

<mx:EmailValidator source="{campo_email}"  property="text" requiredFieldError="Campo obrigatório" missingAtSignError="E-mail deve conter @" missingPeriodInDomainError="Falta o final do seu email. Ex: .com.br, .com, etc" />

</mx:Application>

Explicando o código

Na linha:

<mx:EmailValidator source="{campo_email}"  property="text" requiredFieldError="Campo obrigatório" missingAtSignError="E-mail deve conter @" missingPeriodInDomainError="Falta o final do seu email. Ex: .com.br, .com, etc" />

… o validador indica que o componente campo_email será validado. As mensagens de erro são auto-explicativas.

Resultado

Espero ter ajudado!

JSF – Validação de e-mail

Neste post irei ensinar como criar um validador para chegar se um determinado e-mail é válido. O projeto poderá ser baixado na íntegra no final do post.

Estrutura do projeto

O projeto deverá conter a seguinte estrutura:

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

Códigos

Pessoa.java:

package br.com.serjaum.entidades;

public class Pessoa {

 private String nome; 

 private String email;

 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;
 }

}