Artigos com o marcador Imersão Adobe Flex

Problema

Você quer classificar itens (arrastando-os para cima e para baixo) de um DataGrid e evitar que outros componentes baseados na classe ListBase (DataGrid, List, Tree, etc.) aceitem estes itens.

Exemplo do Problema: Arraste um item do DataGrid do painel Itens para o DataGrid do painel Categorias. Terá um efeito de mover itens de um DataGrid para outro, algo que não queremos que aconteça.

Solução

Criar um componente DataGrid personalizado, setando as propriedades dragEnable, dropEnable e dragMoveEnable como TRUE e sobrescrever os métodos addDragData, dragEnterHandler, dragOverHandler, dragExitHandler, dragDropHandler da classe ListBase, para definir nosso próprio formato de dados que é definido pela classe DragSource.

Explicação Detalhada

Obs.: O ViewSource está habilitado no exemplo abaixo para quem quiser acompanhar melhor esta explicação.

Por padrão todos os componentes baseados na classe ListBase tem implementado um Drag and Drop. É definido também pela classe DragSource o formato de dados chamado “items”. Isso é uma espécie de controle de dados que estão sendo arrastados, ou seja, se o componente alvo esperado não possuir este formato, não será possível fazer um Drop destes dados. A ListBase trata o formato dos dados arrastados via drag and drop como “items”, então todos os componentes baseados nesta classe terão este formato.

Para alteramos isso, vamos sobrescrever os métodos addDragData, dragEnterHandler, dragOverHandler, dragExitHandler, dragDropHandler que contém uma validação dizendo se tem o formato como “items” para aceitar o Drop no componente alvo.

Criando um novo componente DataGrid personalizado, entre na classe ListBase e simplesmente copie os métodos acima para mantermos as mesmas funcionalidades. Não esqueça de importar as classes necessárias e o namespace mx_internal requerido para algumas variáveis que contém dentro dos métodos que estamos sobrescrevendo.

Feito isso vamos criar uma propriedade privada para este componente personalizado chamado format do tipo String e com valor de “items”. Em seguida criaremos um getter e setter para a propriedade recém criada. Agora substitui todas as strings “items” dentro dos métodos que copiamos da classe ListBase pelo método getter format, esse que será dinâmico quando utilizarmos nosso componente e poder definir o formato de dados a serem arrastados por cada componente instanciado.

Por último vamos definir no componente personalizado as propriedades dragEnable, dropEnable, dragMoveEnable como TRUE, para ativamos o drag and drop do nosso componente DataGrid e podermos mover os itens que queremos classificar.

Então em nossa aplicação incluimos nossos DataGrids personalizados e podemos setar a propriedade format com qualquer valor para referenciar aquele fomato para aquela instancia de DataGrid, ou seja, qualquer outro componente baseado no ListBase não poderá colocar seus itens dentro do seu DataGrid. Vejamos aplicação final com o viewSource habilitado:

Exemplo da Solução: Nosso DataGrid contendo os Itens agora possui um format chamado “dgItens” e o DataGrid contendo as categorias agora possui um format chamado “dgCategoria”, sendo que não pode ser aceito em outros componentes baseados no ListBase com format “items”, apenas em componentes que possuirão seus formatos definidos. Assim temos a solução final que é classificar os itens, arrastandos para cima e para baixo dentro do seu DataGrid sem que o item arrastado seja aceito por outros componentes.

Observações Finais

Este post foi baseado num problema que tivemos que solucionar nesta manhã. Posso dizer que boa parte dessa solução devo ao curso Imersão Flex. Como pode ver procurei entender os métodos relacionados ao Drag and Drop do ListBase e usei eles próprios para customizar o meu componente e solucionar o meu problema rapidamente. Se existe outras formas mais simples não sei, podem deixar comentários aqui, mas esta solução foi a única que venho em mente no momento. Então não se limitem e sim faça sua imersão em seus componentes Flex e procure entender como eles funcionam, certamente você encontrará a sua solução.

Abraços a todos e até o próximo Fiel Cookbook.