Selecionando múltiplos itens sem o CTRL

Verdade seja dita: trabalhar com itemRenderers e itemEditors no Flex não é tão fácil quanto parece. Não é incomum as pessoas postarem dúvidas sobre este assunto nas listas de discussão pela Net a fora. É por isso que eu sempre recomendo fortemente a leitura do capitulo Using Item Renderers and Item Editors da documentação.

Uma alteração comum que as pessoas geralmente querem no funcionamento do List – e que pode ser resolvida com a ajuda de um ItemRenderer- consiste em permitir ao usuário selecionar múltiplos itens sem ter que pressionar o CTRL. Recentemente abriram uma thread na FlexDev sobre isso e eu fiz uma implementação que acho que ficou simples.

Na realidade, se o problema é apenas selecionar múltiplos itens sem o CTRL, o ItemRenderer nem é necessário. Ele simplesmente mostra ou não o ícone (check) nos itens que estão selecionados. Para isto eu simplesmente verifico se o item clicado está na lista de itens selecionados (list.selectedItens) da seguinte forma:

1
2
3
4
5
6
7
8
9
10

01. override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
02. {
03. super.updateDisplayList(unscaledWidth, unscaledHeight);
04.
05. label.setActualSize(unscaledWidth-checkIcon.width, unscaledHeight);
06.
07. var list:List = List(owner);
08. checkIcon.visible = new ArrayCollection(list.selectedItems).contains(data);
09. checkIcon.move(unscaledWidth-checkIcon.width, 0);
10. }

O interessante neste trecho de código se encontra na linha 8. Para não fazer um loop eu criei um ArrayColletion usando o list.selectedItens para poder usar o método contains(). Entende? Se eu não fizesse isto eu teria que fazer um loop para ver se o “data” se encontra na lista de elementos de “list.selectedItem”.

A outra parte da solução consiste em estender o próprio List e enganá-lo dizendo que o CTRL está sempre pressionado. Isto é feito na linha 11 do trecho de código abaixo sobrescrevendo o handler mouseDownHandler e alterando a propriedade event.ctrlKey.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

01. public class ListSelect extends List
02. {
03. public function ListSelect()
04. {
05. allowMultipleSelection = true;
06. itemRenderer = new ClassFactory(ListSelectItemRenderer);
07. }
08.
09. override protected function mouseDownHandler(event:MouseEvent):void
10. {
11. event.ctrlKey = true;
12. super.mouseDownHandler(event);
13. }
14. }

É isso! Uma solução simples que resolve o problema. Sempre que chego a uma solução simples eu gosto de blogar, pois eu não tenho muita paciência para explicar coisas complicadas. Além disso, programar é lidar com a complexidade e fazer fácil é sempre difícil.

Selecionando múltiplos itens sem o CTRL

2 comentários

Trackbacks

Deixe Seu Comentário