DevSecOps

23 mar, 2009

Combobox de múltipla de seleção

Publicidade

No combobox acima, quando você pressiona a tecla Ctrl, é possível selecionar mais que uma opção.

Para conseguir esse resultado é necessário
estender o componente combobox criando um novo componente como mostra o
código abaixo:

Arquivo ComboBoxs.as

package br.combobox
{
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.text.TextLineMetrics;
import mx.controls.ComboBox;
import mx.events.ListEvent;
 
public class ComboBoxs extends ComboBox
{
private var ctrlKey:Boolean = false;
private const multiplaSelecao:String = 'Múltipla Seleção'
 
override public function set initialized(value:Boolean):void
{
super.initialized = value;
if(value)
resize();
}
 
override protected function keyDownHandler(event:KeyboardEvent):void
{
super.keyDownHandler(event);
 
ctrlKey = event.ctrlKey;
 
if(ctrlKey)
dropdown.allowMultipleSelection = true;
}
 
override protected function keyUpHandler(event:KeyboardEvent):void
{
super.keyUpHandler(event);
ctrlKey = event.ctrlKey;
if(!ctrlKey)
{
close();
var changeEvent:ListEvent = new ListEvent(ListEvent.CHANGE)
dispatchEvent(changeEvent);
}
}
 
override public function close(trigger:Event=null):void
{
if(!ctrlKey)
{
super.close(trigger);
if(dropdown.selectedItems.length > 1)
textInput.text = multiplaSelecao;
}
}
 
private function resize():void
{
var lineMetrics:TextLineMetrics;
lineMetrics = measureText(multiplaSelecao);
var newWidth:Number = lineMetrics.width;
newWidth += getStyle("arrowButtonWidth") + getStyle("paddingLeft") + getStyle("paddingRight") + 8;
this.width = Math.max(this.width, newWidth);
}
 
public function set selectedItems(value:Array):void
{
if(dropdown)
dropdown.selectedItems = value;
}
 
[Bindable("change")]
public function get selectedItems():Array
{
if(dropdown)
return dropdown.selectedItems;
else
return null;
}
 
public function set selectedIndices(value:Array):void
{
if(dropdown)
dropdown.selectedIndices = value;
}
 
[Bindable("change")]
public function get selectedIndices():Array
{
if(dropdown)
return dropdown.selectedIndices;
else
return null;
}
}

No arquivo MXML.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="br.combobox.*" height="128" width="276">
<mx:Script>
<![CDATA[
 
public function retornaSelecao(arTemp:Array,campo:String):String
{
var retorno:String = '';
for(var i:int = 0; i<arTemp.length; i++)
{
if(retorno != '')
retorno += ',';
retorno += arTemp[i][campo];
}
return retorno;
}
 
 
]]>
</mx:Script>
<ns1:ComboBoxs y="10" id="cbMultiplo" labelField="label" prompt="Selecione" change="{lbSelecao.text = 'Valor selecionado: ' + retornaSelecao(cbMultiplo.selectedItems,'valor')}" horizontalCenter="0">
<ns1:dataProvider>
<mx:Array>
<mx:Object label='Valor 1' valor='1'/>
<mx:Object label='Valor 2' valor='2'/>
<mx:Object label='Valor 3' valor='3'/>
<mx:Object label='Valor 4' valor='4'/>
</mx:Array>
</ns1:dataProvider>
</ns1:ComboBoxs>
<mx:Label y="40" id="lbSelecao" width="219" horizontalCenter="0" textAlign="center"/>
</mx:Application>

Divirta-se!