Flex – Implementando um PickList utilizando dataGrid

Esta semana precisei de um componente parecido com um pickList do RichFaces daí pensei: “Ah… com certeza isso já tem pronto em Flex”. Mas pesquisando não encontrei nada parecido. Então dei uma pesquisada na lista flexdev e o pessoal disse seria fácil implementar um pickList na mão. Não achei que seria tão fácil, mas foi! Hehe… Além do comportamento normal clicando nos botões temos a características de drag and drop no componente mx:dataGrid simplesmente habilitando algumas propriedades.

O projeto pode ser baixado >>> aqui <<<.

Versões utilizadas

  • Adobe Flex Builder 3.0 (build 3.0.2.214193)
  • SDK 3.5

Código

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="1120" height="664">

 <mx:TitleWindow x="81" y="37" width="857" height="289" layout="absolute" title="PickList Flex">

 <mx:Script>
 <![CDATA[
 import mx.controls.Alert;
 import mx.collections.ArrayCollection;

 [Bindable]
 public var pessoasDisponiveis:ArrayCollection = new ArrayCollection([
 {nome : "Sérgio Fantin", apelido : "Serjão", cidade : "São Paulo"},
 {nome : "Alex Ferraresi", apelido : "Velhinho", cidade : "São Caetano"},
 {nome : "Fernando Boaglio", apelido : "Boaglio", cidade : "São Paulo"},
 {nome : "Eduardo Cerqueira", apelido : "Edú", cidade : "São Paulo"},
 {nome : "Alexandre Peixoto", apelido : "Montanha", cidade : "São Paulo"},
 {nome : "Thiago Império", apelido : "Thiagão", cidade : "São Paulo"}]);

 [Bindable]
 private var pessoasSelecionadas:ArrayCollection = new ArrayCollection();

 public function adicionarPessoa():void{
 var index:int = dg_pessoas_disponiveis.selectedIndex;

 if(dg_pessoas_disponiveis.selectedIndex != -1){
 pessoasDisponiveis.getItemAt(index);
 pessoasSelecionadas.addItem(pessoasDisponiveis.getItemAt(index));
 pessoasDisponiveis.removeItemAt(index);
 }else{
 Alert.show('Selecione uma pessoa!');
 }
 }

 public function removerPessoa():void{
 var index:int = dg_pessoas_selecionadas.selectedIndex; 

 if(dg_pessoas_selecionadas.selectedIndex != -1){
 pessoasSelecionadas.getItemAt(dg_pessoas_selecionadas.selectedIndex);
 pessoasDisponiveis.addItem(pessoasSelecionadas.getItemAt(index));
 pessoasSelecionadas.removeItemAt(index);
 }else{
 Alert.show('Selecione uma pessoa!');
 }
 }

 public function selecionarTodos():void{
 pessoasSelecionadas.addAll(pessoasDisponiveis);
 pessoasDisponiveis.removeAll();
 }

 public function removerTodos():void{
 pessoasDisponiveis.addAll(pessoasSelecionadas);
 pessoasSelecionadas.removeAll();
 }

 ]]>
 </mx:Script>

 <mx:DataGrid id="dg_pessoas_disponiveis" x="58" y="63" width="299" height="167" dropEnabled="true" dragMoveEnabled="true" dragEnabled="true" allowDragSelection="true" allowMultipleSelection="true" dataProvider="{pessoasDisponiveis}">
 <mx:columns>
 <mx:DataGridColumn headerText="Nome " dataField="nome"/>
 <mx:DataGridColumn headerText="Apelido" dataField="apelido"/>
 <mx:DataGridColumn headerText="Cidade " dataField="cidade"/>
 </mx:columns>
 </mx:DataGrid>

 <mx:Button x="381" y="153" label="&gt;" click="adicionarPessoa()" width="44"/>
 <mx:Button x="381" y="183" label="&lt;" click="removerPessoa()" width="44"/>
 <mx:Button x="381" y="123" label="&lt;&lt;" click="removerTodos()"/>
 <mx:Button x="381" y="93" label="&gt;&gt;" click="selecionarTodos()"/>

 <mx:DataGrid id="dg_pessoas_selecionadas" dropEnabled="true" dragEnabled="true" dragMoveEnabled="true" allowDragSelection="true" allowMultipleSelection="true" x="446" y="62" width="334" height="168" dataProvider="{pessoasSelecionadas}">
 <mx:columns>
 <mx:DataGridColumn headerText="Nome " dataField="nome"/>
 <mx:DataGridColumn headerText="Apelido" dataField="apelido"/>
 <mx:DataGridColumn headerText="Cidade " dataField="cidade"/>
 </mx:columns>
 </mx:DataGrid>
 <mx:Label x="58" y="37" text="Disponíveis"/>
 <mx:Label x="446" y="37" text="Selecionados"/>
 </mx:TitleWindow>

</mx:Application>

Até o próximo post!


3 Comentários on “Flex – Implementando um PickList utilizando dataGrid”

  1. george disse:

    mais um post nota 10 gotei kara to tinha muito
    tempo que eu procurava algum assunto sobre flex
    e nao encontrava ai do nada encontrei esse
    aki to adorando

  2. Bruno Borges disse:

    Estou começando a usar o flex para minhas aplicações e estava procurando exatamente isso valeu Sérgio por esse post… muito bom

  3. Henrique disse:

    Estava precisando de um bom exemplo para me ajudar a implementar aqui.
    Muito obrigado, Sérgio.


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