Flex – Implementando um PickList utilizando dataGrid

Esta semana precisei de um componente parecido com um pickList do RichFaces daí pensei: “Ah… com certeza isso já tem pronto em Flex”. Mas pesquisando não encontrei nada parecido. Então dei uma pesquisada na lista flexdev e o pessoal disse seria fácil implementar um pickList na mão. Não achei que seria tão fácil, mas foi! Hehe… Além do comportamento normal clicando nos botões temos a características de drag and drop no componente mx:dataGrid simplesmente habilitando algumas propriedades.

O projeto pode ser baixado >>> aqui <<<.

Versões utilizadas

• Adobe Flex Builder 3.0 (build 3.0.2.214193)
• SDK 3.5

Código

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="1120" height="664">

 <mx:TitleWindow x="81" y="37" width="857" height="289" layout="absolute" title="PickList Flex">

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

 [Bindable]
 public var pessoasDisponiveis:ArrayCollection = new ArrayCollection([
 {nome : "Sérgio Fantin", apelido : "Serjão", cidade : "São Paulo"},
 {nome : "Alex Ferraresi", apelido : "Velhinho", cidade : "São Caetano"},
 {nome : "Fernando Boaglio", apelido : "Boaglio", cidade : "São Paulo"},
 {nome : "Eduardo Cerqueira", apelido : "Edú", cidade : "São Paulo"},
 {nome : "Alexandre Peixoto", apelido : "Montanha", cidade : "São Paulo"},
 {nome : "Thiago Império", apelido : "Thiagão", cidade : "São Paulo"}]);

 [Bindable]
 private var pessoasSelecionadas:ArrayCollection = new ArrayCollection();

 public function adicionarPessoa():void{
 var index:int = dg_pessoas_disponiveis.selectedIndex;

 if(dg_pessoas_disponiveis.selectedIndex != -1){
 pessoasDisponiveis.getItemAt(index);
 pessoasSelecionadas.addItem(pessoasDisponiveis.getItemAt(index));
 pessoasDisponiveis.removeItemAt(index);
 }else{
 Alert.show('Selecione uma pessoa!');
 }
 }

 public function removerPessoa():void{
 var index:int = dg_pessoas_selecionadas.selectedIndex; 

 if(dg_pessoas_selecionadas.selectedIndex != -1){
 pessoasSelecionadas.getItemAt(dg_pessoas_selecionadas.selectedIndex);
 pessoasDisponiveis.addItem(pessoasSelecionadas.getItemAt(index));
 pessoasSelecionadas.removeItemAt(index);
 }else{
 Alert.show('Selecione uma pessoa!');
 }
 }

 public function selecionarTodos():void{
 pessoasSelecionadas.addAll(pessoasDisponiveis);
 pessoasDisponiveis.removeAll();
 }

 public function removerTodos():void{
 pessoasDisponiveis.addAll(pessoasSelecionadas);
 pessoasSelecionadas.removeAll();
 }

 ]]>
 </mx:Script>

 <mx:DataGrid id="dg_pessoas_disponiveis" x="58" y="63" width="299" height="167" dropEnabled="true" dragMoveEnabled="true" dragEnabled="true" allowDragSelection="true" allowMultipleSelection="true" dataProvider="{pessoasDisponiveis}">
 <mx:columns>
 <mx:DataGridColumn headerText="Nome " dataField="nome"/>
 <mx:DataGridColumn headerText="Apelido" dataField="apelido"/>
 <mx:DataGridColumn headerText="Cidade " dataField="cidade"/>
 </mx:columns>
 </mx:DataGrid>

 <mx:Button x="381" y="153" label="&gt;" click="adicionarPessoa()" width="44"/>
 <mx:Button x="381" y="183" label="&lt;" click="removerPessoa()" width="44"/>
 <mx:Button x="381" y="123" label="&lt;&lt;" click="removerTodos()"/>
 <mx:Button x="381" y="93" label="&gt;&gt;" click="selecionarTodos()"/>

 <mx:DataGrid id="dg_pessoas_selecionadas" dropEnabled="true" dragEnabled="true" dragMoveEnabled="true" allowDragSelection="true" allowMultipleSelection="true" x="446" y="62" width="334" height="168" dataProvider="{pessoasSelecionadas}">
 <mx:columns>
 <mx:DataGridColumn headerText="Nome " dataField="nome"/>
 <mx:DataGridColumn headerText="Apelido" dataField="apelido"/>
 <mx:DataGridColumn headerText="Cidade " dataField="cidade"/>
 </mx:columns>
 </mx:DataGrid>
 <mx:Label x="58" y="37" text="Disponíveis"/>
 <mx:Label x="446" y="37" text="Selecionados"/>
 </mx:TitleWindow>

</mx:Application>

Até o próximo post!

Flex – Passando valores entre telas (Custom Events)

Essa semana me deparei com um problema em Flex que eu não estava habituado a resolver: enviar valores de uma tela
para outra. Simples, não?! Na verdade é sim. Depois de entender a mecânica por trás dos eventos o negócio fica fácil.
Pretendo que a explicação seja direta e didática ao mesmo tempo. O projeto pode ser baixado >>>aqui<<<.

Estrutura da aplicação

CRUD – Flex + Java

Neste post irei demonstrar como criar e executar um simples CRUD utilizando Flex + Java.
A comunicação entre objetos Flex/Java acontece por um protocolo binário denominado de AMF que se encarrega de compactar e transferir os dados. Atualmente temos várias implementações que suportam o protocolo AMF, no exemplo demonstrativo utilizo o BlazeDS para fazer a comunicação Java/Flex.
No fim do post disponibilizo o projeto completo que pode ser facilmente importado e executado.
É necessário que o leitor saiba o básico de programação Web utilizando banco de dados.

Versões utilizadas

• Adobe Flex Builder 3.0 (build 3.0.2.214193)
• JDK 1.6.0_18
• Apache Tomcat 6.0.24
• BlazeDS 3.2.0.3978
• MySQL Server 5.1
• MySQL Query Browser 1.1.17
• Hibernate 3

Estrutura do Projeto

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

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.

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!

Flex – Trabalhando com PopUps

Neste post irei ensinar como trabalhar com popups de uma maneiras bem simples. Teremos uma aplicação principal com um botão, ao clicarmos no botão o popup será exibido.

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:Button click="invocarPopupSerjaum();" x="90" y="97" label="Invocar Popup!" width="295" height="64"/>

 <mx:Script>
 <![CDATA[
  import mx.managers.PopUpManager;
      private function invocarPopupSerjaum() : void {
         var popup : popupSerjaum = new popupSerjaum();
         PopUpManager.addPopUp(popup, this, true );
         PopUpManager.centerPopUp(popup);
     }
  ]]>
 </mx:Script>
</mx:Application>

Criando o popup

Crie um novo componente: File –> New –> MXML component no mesmo diretório onde foi criado o arquivo principal e nomeie o arquivo de popupSerjaum.mxml.