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

3 Comentários on “Flex – Inserindo dados em um DataGrid com variável [Bindable]”

  1. Kleber Gracia disse:

    Parabéns, um ótimo exemplo, eu estava precisando implementar um carrinho de compras e acho que vou utilizar a idéia com session junto com Hibernate. Parabéns pela iniciativa, futuramente pretendo postar o carrinho para meios de estudo de quem esta começando agora.

    At.
    Kleber Gracia
    Equipe Galaxyz.com.br
    Trabalhando para você.

  2. valeu, seu codigo, me ajudou muito!

  3. Muito bom Serjaum, estava procurando isso a dias Parabéns pelo site, conteúdo muito bom, se não se incomodar vou postar na seção de links de meu site ok http://www.galaxyz.com.br abração.


Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s