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

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

Abraços…



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