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>

Explicando o código

No primeiro exemplo:

<mx:TextInput x="146" y="10" id="campo" change="texto = campo.text"/>
<mx:Label x="146" y="39" id="rotulo" text="{texto}" />

A variável bindable texto recebe o conteúdo do input campo. O label rotulo é notificado que houve uma mudança e recebe o valor da variável texto.

No segundo exemplo:

<mx:List id="lista_pessoas" change="pessoa_selecionada = List(event.target).selectedItem" dataProvider="{model_pessoas.pessoa}" ...

A cada clique que é dado em lista_pessoas, a variável bindable pessoa_selecionada recebe o valor do item da lista.  Os labels rotulo_apelido e rotulo_nome receberão os valores atualizados da variável pessoa_selecionada.

Resultado

bind1

bind2

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