AutoComplete: un component per l'autocompletamento dei campi di testo

Figura 1

Figura 2

Figura 3 (click per ingrandire)

A questo punto, la configurazione del progetto è finita e possiamo iniziare ad usare le funzionalità del component AutoComplete. Nel prosieguo dell'articolo analizzeremo prima gli utilizzi di base del component, poi svilupperemo un esempio in cui utilizzeremo il component AdvancedAutoComplete che presenta caratteristiche avanzate.

Il primo esempio

Sviluppiamo una semplice applicazione per testare la funzionalità di base del component, cioè il filtro sulla struttura dati che gli viene assegnata come dataProvider. Definiamo la lista di valori hardcoded all'interno dello statement fx:Declarations e la utilizziamo assegnandola alla proprietà dataprovider del component AutoComplete. Di seguito è mostrato il codice:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" width="300" height="150" xmlns:components="com.hillelcoren.components.*">
	<fx:Declarations>
		<s:ArrayCollection id="listValue">
			<fx:String>Antonio</fx:String>
			<fx:String>Armando</fx:String>
			<fx:String>Michele</fx:String>
			<fx:String>Nicola</fx:String>
			<fx:String>Pippo</fx:String>
			<fx:String>Pluto</fx:String>
		</s:ArrayCollection>
	</fx:Declarations>

	<s:Label x="103" y="25" text="Esempio1" fontSize="21"/>
	<s:HGroup x="28" y="57" verticalAlign="middle">
		<s:Label text="Cerca un nome:"/>
		<components:AutoComplete x="107" y="80" dataProvider="{listValue}">
		</components:AutoComplete>
	</s:HGroup>
</s:Application>

Effettuando un primo test dell'applicazione possiamo notare (ed è mostrato nella figura seguente) come funzioni in maniera automatica il filtro sugli elementi dell'arraycollection definito come dataprovider (figura 4).

Iniziamo, a questo punto, ad esaminare alcune proprietà interessanti del component, proprietà che ci permettono di aumentarne le funzionalità a seconda di ciò che dobbiamo realizzare. Un primo set di proprietà riguarda la visualizzazione delle labels, sia all'interno del campo di ricerca/selezione che all'interno della tendina (dropdown list) che contiene gli elementi filtrati:

• labelField
• labelFunction
• dropDownLabelFunction
• dropDownItemRenderer

L'algoritmo di ricerca può essere modificato modulando la proprietà MatchType che può avere tre valori:

• beginning
• word
• anyPart

Sviluppiamo adesso un altro esempio per testare le proprietà di cui abbiamo appena discusso. Per fare ciò, invece di considerare la lista dell'esempio precedente, costruiamo una lista di oggetti più complessi (non consideriamo semplici stringhe): per l'occasione creiamo un oggetto Person con name, surname e gender come proprietà:

Nell'applicazione dichiariamo una struttura dati ArrayCollection Person ItemRenderer Name Surname Person Gender dropDownItemRenderer

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009"
				xmlns:s="library://ns.adobe.com/flex/spark"
				xmlns:mx="library://ns.adobe.com/flex/mx"
				updateComplete="handleUpdate()"
				verticalGap="0" horizontalGap="0"
				verticalScrollPolicy="off"
				horizontalScrollPolicy="off"
				verticalAlign="middle"
				width="100%" height="100%">
	<fx:Script>
		<![CDATA[
			import mx.controls.List;
			import vo.Person;
			override public function set data(value:Object):void {
				super.data = value;
				var p:Person = value as Person;
				nameSurname.htmlText = (owner as List).labelFunction(p);
				if (p.gender == "M") {
					imageGender.source = "assets/male.png";
				} else {
					imageGender.source = "assets/female.png";
				}
			}
			private function handleUpdate():void{
				graphics.clear();
				graphics.lineStyle( 1, 0x858585, 0.5 );
				graphics.moveTo( -2, height + 2);
				graphics.lineTo( width, height + 2 );
			}
		]]>
	</fx:Script>
	<mx:Label id="nameSurname" />
	<mx:Image id="imageGender" includeInLayout="true" width="25" height="25" />
</mx:HBox>

Mentre di seguito è riportato il codice dell'applicazione:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" width="300" height="250" xmlns:components="com.hillelcoren.components.*" xmlns:vo="vo.*">
	<fx:Declarations>
		<s:ArrayCollection id="listPerson">
			<vo:Person name="Nicola" surname="Strisciuglio" gender="M" />
			<vo:Person name="Mario" surname="Rossi" gender="M" />
			<vo:Person name="Rosa" surname="Brambilla" gender="F" />
			<vo:Person name="Giulio" surname="Bianchi" gender="M" />
			<vo:Person name="Anna" surname="Esposito" gender="F" />
			<vo:Person name="Michele" surname="Verdi" gender="M" />
			<vo:Person name="Armando" surname="Gazzetta" gender="M" />
			<vo:Person name="Maria" surname="Rossi" gender="F" />
		</s:ArrayCollection>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			private function makeNameSurnameLabel(item:Object) : String {
				var p:Person = item as Person;
				return p.name + " " + p.surname;
			}
		]]>
	</fx:Script>
	<s:Label x="103" y="25" text="Esempio2" fontSize="21"/>
	<s:HGroup x="28" y="57" verticalAlign="middle">
		<s:Label text="Cerca un nome:"/>
		<components:AutoComplete x="107" y="80"
				 dataProvider="{listPerson}"
				 labelFunction="makeNameSurnameLabel"
				 matchType="word"
				 showRemoveIcon="true"
				 dropDownItemRenderer="itemrenderer.PersonRenderer">
		</components:AutoComplete>
	</s:HGroup>
</s:Application>

Da notare l'utilizzo della proprietà showRemoveIcon true matchType labelFunction

Nota: per utilizzare l'elemento selezionato possiamo utilizzare la proprietà selectedItem selectedItems

Utilizzi avanzati

Del component AutoComplete è stata sviluppata una versione avanzata che prende il nome di AdvancedAutoComplete e che, rispetto ad AutoComplete, offre alcune funzionalità aggiuntive.

Prima su tutte, la funzionalità di Browsing della lista di oggetti usata come dataprovider: la funzionalità di browsing permette di visualizzare un popup con un datagrid filtrabile da cui è possibile selezionare gli elementi del dataprovider. Il popup visualizzato è rappresentato in figura:

Per attivare la visualizzazione del popup per il browsing del dataprovider è necessario settare a true la proprietà showBrowseButton, che farà comparire alla destra del component AdvancedAutocomplete un pulsante con label “Browse”. In alternativa è possibile utilizzare un menu (definito in XML), più gradevole dal punto di vista estetico e che non comporta la necessità di riservare spazio per il pulsante 'browse', da cui poter aprire il popup.

Il menu XML va definito all'interno dei tag <fx:Declarations>:

<fx:XML format="e4x" id="autoCompleteMenuData">
	<root>
		<menuitem data="browse" label="Elenco..."/>
	</root>
</fx:XML>

Tra le proprietà del component, invece, bisogna definire actionsMenuDataProvider browserField

Di seguito è mostrato il codice dell'applicazione che utilizza il component autocomplete avanzato, in modo da dare un'idea completa di come il component viene utilizzato:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"
			   xmlns:components="com.hillelcoren.components.*"
			   xmlns:vo="vo.*">
	<fx:Declarations>
		<s:ArrayCollection id="listPerson">
			[…] stesso dataprovider dell'esempio precedente [...]
		</s:ArrayCollection>
		<fx:XML format="e4x" id="autoCompleteMenuData">
			<root>
				<menuitem data="browse" label="Elenco..."/>
			</root>
		</fx:XML>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			private function makeNameSurnameLabel(item:Object) : String {
				var p:Person = item as Person;
				return p.name + " " + p.surname;
			}
		]]>
	</fx:Script>

	<s:Label x="103" y="25" text="Esempio2" fontSize="21"/>
	<s:HGroup x="28" y="57" verticalAlign="middle">
		<s:Label text="Cerca un nome:"/>
		<components:AdvancedAutoComplete id="advancedAutoComplete" x="107" y="80"
			dataProvider="{listPerson}"
			labelFunction="makeNameSurnameLabel"
			matchType="word"
			showRemoveIcon="true"
			itemClick="{advancedAutoComplete.showBrowser()}"
			actionsMenuDataProvider="{autoCompleteMenuData}"
			browserFields="{[{label:'Nome', field:'name'},
						{label:'Cognome',field:'surname'},
						{label:'Sesso',field:'gender'}]}">
		</components:AdvancedAutoComplete>
	</s:HGroup>
</s:Application>

Tra le proprietà utilizzate, è importante itemClick che viene utilizzata quando viene cliccata una voce del menu che abbiamo appena creato. Infatti, in questa proprietà viene definita l'azione da eseguire quando viene cliccato l'elemento browse del menu: nel nostro caso viene mostrato il popup di browse del dataprovider.

Ecco una demo.

È possibile scaricare il codice sorgente utilizzato nell'articolo.