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.

Explicando o código

  • O componente Label receberá o valor selecionado através do atributo text=”{lista_nomes.selectedItem.label}” assim que um dos itens for selecionado.
  • O botão exibirá um Alert atrávés do click=”mx.controls.Alert.show(lista_nomes.selectedItem.label, ‘Nome Selecionado’);”

Obs: Outra maneira de invocar o Alert usando o mesmo botão:

<mx:Button x="25" y="174" label="OK" width="114.5" click="Alert.show(lista_nomes.selectedItem.label, 'Nome Selecionado');"

<mx:Script>
    <![CDATA[
       import mx.controls.Alert;
     ]]>
</mx:Script>

Resultado

resultado1

resultado2

Esperto 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