Fabio Biondi Blog » Blog Archive » Flex Custom Component e Code Behind

Flex Custom Component e Code Behind

27 March 2009 No Comment

La scrittura di componenti personalizzati in Flex richiede spesso un mix di codice MXML, per la creazione della parte visuale, e Actionscript, utilizzato invece per la logica dell’applicazione.

Per la semplicità di implementazione, la tecnica più adottata è l’utilizzo del tag , che permette di integrare codice Actionscript all’interno di file mxml o, in alternativa, utilizzando lo stesso tag specificando l’attributo source, tramite il quale è possibile definire un file esterno .as da includere.

Mentre il primo approccio ha il grosso svantaggio di creare file spesso corposi e disordinati, dato che avremo un mix di codice actionscript e mxml, il secondo approccio potrebbe sembrare una valida soluzione per separare la logica (in AS) dal layout (MXML)
Tuttavia, il file actionscript “incluso” non sarà una classe e questo potrebbe non essere gradito dagli amanti della programmazione ad oggetti.

Quindi, volendo mantenere un approccio OOP, o semplicemente se preferite organizzare il vostro codice utilizzando esclusivamente classi, la tecnica del Code Behind rappresenta una valida alternativa, in quanto permette di separare nettamente la parte di view, realizzata in MXML, dalla logica definita invece in una classe esterna scritta in Actionscript 3.0.

NOTA per gli utenti Flash CS3/4 con AS3: potremmo lontanamente paragonare l’utilizzo di questa tecnica all’abbinamento di una document class al file .fla (effettuata attraverso il pannello properties dello Stage)

Quando è preferibile utilizzare questa tecnica?

Quando il custom component Flex che dovrete realizzare è di tipo visuale (quindi l’MXML risulta molto utile al fine di una facile e veloce impaginazione) ed estende un componente già esistente nel framework di Flex (ad esempio VBox, ComboBox, Label, ecc.).
Nel caso di componenti realizzati da zero o che non hanno un comportamento visivo è spesso preferibile creare un componente ActionScript.

Nelle pagine seguenti illustreremo dapprima l’utilizzo del tag e successivamente l’approccio CODE BEHIND, creando un semplice componente che avrà come unico scopo quello di visualizzare un testo in una TextArea al click di un pulsante.

Il tag SCRIPT

Le modalità per usare questo tag sono essenzialmente due:

1) Inserire il codice actionscript all’interno dei tag Script direttamente nel file mxml. Esempio:

Component.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
	width="350" height="118"
	xmlns:mx="http://www.adobe.com/2006/mxml">
 
	<mx:Script>
		<![CDATA[
			public function sendText(str:String):void {
				textArea.text = str;
			}
		]]>
	</mx:Script>
 
	<mx:Button id="sendBtn"	label="Send Text" 
		click="sendText('output inviato')" />
 
	<mx:TextArea id="textArea" />
 
</mx:VBox>

2) Inserire il codice Actionscript in un file esterno definito e richiamato attraverso l’attributo source:

Component.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
	width="350" height="118"
	xmlns:mx="http://www.adobe.com/2006/mxml">
 
	<mx:Script source="PanelBase.as" />
 
	<mx:Button id="sendBtn"	label="Send Text" 
		click="sendText('output inviato')" />
 
	<mx:TextArea id="textArea" />
 
</mx:VBox>

PanelBase.as

public function sendText(str:String):void {
	textArea.text = str;
}

NOTA: per testare il componente sarà necessario creare una sua istanza nel file mxml principale, come descritto nel paragrafo successivo.

LA TECNICA DEL CODE BEHIND

Come descritto in precedenza, questa tecnica ci permette di separare il codice mxml dall’actionscript, definendo quest’ultimo in una classe esterna.
Per ricreare il componente descritto nel paragrafo precedente, avremo quindi i seguenti files:

1) un file MXML per la realizzazione della view, ovvero della parte visuale (SamplePanel.mxml)
2) una classe actionscript per gestire la logica dell’applicazione (SamplePanelBase.as)
3) il file principale dell’applicazione nel quale istanzieremo il nostro componente (main.mxml)

Di seguito un’immagine che illustra la gerarchia dei files:

IL CODICE ACTIONSCRIPT
Innanzitutto creiamo la classe che contiene la logica del componente e che avrà come base class il componente che vogliamo estendere, nel nostro caso, il VBox.

package views
{
	import mx.containers.VBox;
	import mx.controls.TextArea;
 
	public class SamplePanelBase extends VBox
	{
		public var textArea:TextArea;
 
		public function SamplePanelBase() {
			trace("Costruttore");
		}
 
		public function sendText(str:String):void {
			textArea.text = str;
		}		 
 
	}
}

Da notare che:
- il nome della classe, SamplePanelBase, sarà utilizzato come root element nel nostro componente MXML.
- E’ necessario definire come variabili di tipo public le reference agli oggetti presenti nel codice MXML e utilizzati all’interno del codice actionscript ( nel nostro caso solo la TextArea perché richiamata nel metodo sendText())
- Che i metodi invocati dal codice MXML dovranno essere di tipo public, internal o protected, ma non di tipo private (come ad esempio sentText())

IL CODICE MXML

Il nostro componente MXML non sarà infatti più basato su un componente esistente (ad esempio il VBox) ma userà come root element il nome della nostra classe ()

Definiamo inoltre un nuovo namespace chiamato views che fa riferimento alla cartella in cui è contenuta la nostra classe, ovvero /views.

<?xml version="1.0" encoding="utf-8"?>
<views:SamplePanelBase 
	width="350" height="118"
	xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:views="views.*" >
 
	<mx:Button id="sendBtn"	label="Send Text" 
		click="sendText('output inviato')" />
 
	<mx:TextArea id="textArea" />
 
</views:SamplePanelBase>

IL CODICE DEL FILE MAIN.mxml

Per testare lo script è necessario infine istanziare il componente all’interno del nostro file principale.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="absolute"
	xmlns:mx="http://www.adobe.com/2006/mxml"	
	xmlns:views="views.*">
 
	<views:SamplePanel /> 
 
</mx:Application>