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>

Explicando o código

Criei meu próprio modelo de dados denominado model_pessoas. Os atributos nome e apelido são customizados, podemos definir outros se deserjarmos.

Obs:  o atributo que será exibido na nossa lista_pessoas será o label.

Resultado

model

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




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