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.

Flex – Obtendo dados de um DataGrid

Neste post irei ensinar como obter dados de uma linha de um DataGrid de uma maneira bem simples e direta.

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="21" y="10" width="790" height="339" layout="absolute" title="Preenchendo inputs automagicamente">

     <mx:DataGrid id="datagrid_pessoas" x="10" y="19" width="750" height="125" dataProvider="{pessoas_xml_list}">
         <mx:columns>
             <mx:DataGridColumn headerText="NOME" dataField="nome" width="200"/>
             <mx:DataGridColumn headerText="ENDEREÇO" dataField="endereco" width="200"/>
             <mx:DataGridColumn headerText="CIDADE" dataField="cidade" width="150"/>
             <mx:DataGridColumn headerText="ESTADO" dataField="uf" width="50"/>
        </mx:columns>
     </mx:DataGrid>

     <mx:Label x="10" y="172" text="Nome"/>
     <mx:Label x="10" y="202" text="Endereço"/>
     <mx:Label x="10" y="232" text="Cidade"/>
     <mx:Label x="10" y="262" text="Estado"/>

     <mx:TextInput id="campo_nome" text="{datagrid_pessoas.selectedItem.nome}" x="84" y="170" width="237"/>
     <mx:TextInput id="campo_endereco" text="{datagrid_pessoas.selectedItem.endereco}" x="84" y="200" width="237"/>
     <mx:TextInput id="campo_cidade" text="{datagrid_pessoas.selectedItem.cidade}" x="84" y="230" width="204"/>
     <mx:TextInput id="campo_uf" text="{datagrid_pessoas.selectedItem.uf}" x="84" y="260" width="35"/>
 </mx:Panel>

 <mx:XMLList id="pessoas_xml_list">
     <clientes>
         <nome>João da Silva</nome>
         <endereco>Rua tal, 135</endereco>
         <cidade>São Paulo</cidade>
         <uf>SP</uf>
     </clientes>
     <clientes>
         <nome>Maria da Silva</nome>
         <endereco>Rua tal, 645</endereco>
         <cidade>São Paulo</cidade>
         <uf>SP</uf>
     </clientes>
     <clientes>
         <nome>Mary Ortega</nome>
         <endereco>Rua Willie Davis, 1982</endereco>
         <cidade>Maringá</cidade>
         <uf>PR</uf>
     </clientes>
 </mx:XMLList>
</mx:Application>

Explicando o código

Criei um componente <mx:Panel>  e inseri dentro dele um <mx:DataGrid> identificando-o com o id=”datagrid_pessoas“. Meu dataGrid será populado por um <mx:XMLList> identificado com id=”pessoas_xml_list”. Dentro do do meu pessoas_xml_list eu criei três clientes usando XML padrão e fiz a chamada no dataGrid o atributo dataProvider=“{pessoas_xml_list}”.

O ponto mais importante do código está aqui: datagrid_pessoas.selectedItem, pois é dessa forma que os dados da linha do dataGrid obtidos e setados nos atributos text dos TextInputs.

Espero ter ajudado! Até o próximo post!

Flex – Populando DataGrid usando XMLList

Neste post irei ensinar como popular um DataGrid utilizando um XMLList de forma bem simples.

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="21" y="10" width="800" height="255" layout="absolute" title="Populando DataGrid com XMLList">
     <mx:DataGrid id="datagrid_pessoas" x="10" y="19" width="750" height="125" dataProvider="{pessoas_xml_list}">
         <mx:columns>
             <mx:DataGridColumn headerText="NOME" dataField="nome" width="200"/>
             <mx:DataGridColumn headerText="ENDEREÇO" dataField="endereco" width="200"/>
             <mx:DataGridColumn headerText="CIDADE" dataField="cidade" width="150"/>
             <mx:DataGridColumn headerText="ESTADO" dataField="uf" width="50"/>
         </mx:columns>
     </mx:DataGrid>
 </mx:Panel>

 <mx:XMLList id="pessoas_xml_list">
     <clientes>
         <nome>João da Silva</nome>
         <endereco>Rua tal, 135</endereco>
         <cidade>São Paulo</cidade>
         <uf>SP</uf>
     </clientes>
     <clientes>
         <nome>Maria da Silva</nome>
         <endereco>Rua tal, 645</endereco>
         <cidade>São Paulo</cidade>
         <uf>SP</uf>
     </clientes>
     <clientes>
         <nome>Mary Ortega</nome>
         <endereco>Rua Willie Davis, 1982</endereco>
         <cidade>Maringá</cidade>
         <uf>PR</uf>
     </clientes>
 </mx:XMLList>
</mx:Application>

Explicando o código

Crie um componente <mx:Panel>  e inseri dentro dele um <mx:DataGrid> identificando-o com o id=”datagrid_pessoas“. Meu dataGrid será populado por um <mx:XMLList> identificado com id=”pessoas_xml_list”. Dentro do do meu pessoas_xml_list eu criei três clientes usando XML padrão e fiz a chamada no dataGrid o atributo dataProvider=“{pessoas_xml_list}”.

Resultado

No próximo post vou ensinar como preecher inputs automagicamente clicando nas linhas do dataGrid.

Abraços…

Flex – Combos aninhados Estados/Cidades

Combos aninhados são usados frequentemente em aplicações. O objetivo deste post é ensinar uma das formas de implementar combos aninhados onde cada estado está relacionado com várias cidades.

Criando a aplicação

1. 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="368" y="170" width="352" height="131" layout="absolute" title="Combos aninhados - Cidade e Estado">
   <mx:Label x="21" y="10" text="Escolha um Estado"/>
   <mx:Label x="21" y="36" text="Escolha uma Cidade"/>
   <mx:ComboBox id="combo_estados" dataProvider="{estados}" change="filtraCidadeByEstado();" x="162" y="8" />
   <mx:ComboBox id="combo_cidades" dataProvider="{cidades_sp}" x="162" y="34" />
</mx:Panel>

<mx:Array id="estados">
   <mx:String>Paraná</mx:String> <!-- selectedIndex == 0 -->
   <mx:String>Santa Catarina</mx:String>
   <mx:String>São Paulo</mx:String>
</mx:Array>

<mx:Array id="cidades_pr">
   <mx:String>Maringá</mx:String>
   <mx:String>Londrina</mx:String>
   <mx:String>Curitiba</mx:String>
</mx:Array>

<mx:Array id="cidades_sc">
   <mx:String>Florianópolis</mx:String>
   <mx:String>Bombinhas</mx:String>
</mx:Array>

<mx:Array id="cidades_sp">
   <mx:String>São Paulo</mx:String>
   <mx:String>Guarujá</mx:String>
   <mx:String>Santo Andre</mx:String>
</mx:Array>

 <mx:Script>
 <![CDATA[
       private function filtraCidadeByEstado() : void {
            if(combo_estados.selectedIndex == 0){
                 combo_cidades.dataProvider = cidades_pr;
            } else if(combo_estados.selectedIndex == 1){
                 combo_cidades.dataProvider = cidades_sc;
            } else if(combo_estados.selectedIndex == 2){
                 combo_cidades.dataProvider = cidades_sp;
            }
      }
 ]]>
 </mx:Script>
</mx:Application>

Explicando o código

Como podem ver criei um componente <mx:Panel> e dentro dele inseri os dois combos que identifiquei como id=”combo_estados” e id=”combo_cidades”:

<mx:ComboBox id="combo_estados" dataProvider="{estados}" change="filtraCidadeByEstado();" x="162" y="8" />

<mx:ComboBox id="combo_cidades" dataProvider="{cidades_sp}" x="162" y="34" />

1. Um dos pontos importantes do código está aqui dataProvider=”{estados}” que é o comando que faz o combo ser populado pelo pelo array de estados identificado por estados.
2. Outro ponto importante é o comando change=”filtraCidadeByEstado();” que invoca a função que faz a checagem das cidades relacionadas ao estado selecionado no combo.

Resultado

Com certeza não é a maneira mais elegante de se fazer combos aninhados, mas já é um bom ponto de partida para implementações mais elegantes.

Espero ter ajudado!