Definire proprietà e metodi di un MXML Component

Immagini

Uno dei vantaggi nell’uso dei componenti esterni è quello di suddividere in maniera logica la nostra applicazione, rendendola più facilmente manutenibile e riutilizzabile. Per poter creare MXML Component sempre più riusabili avremo la necessità di parametrizzarli passandogli delle proprietà e definendo dei metodi al loro interno che potranno essere utilizzati anche quando useremo il componente su un altro progetto.

Quando si crea un MXML Component si sta a tutti gli effetti creando una classe Actionscript. Flex infatti quando dovrà compilare il progetto convertirà tutti i componenti MXML in classi Actionscript che poi verranno compilate all’interno del file SWF. Trattandosi di classi Actionscript per definire proprietà e metodi non è complicato e prevede gli stessi step che applichiamo nella programmazione ad oggetti. In questa soluzione creeremo delle proprietà e dei metodi per parametrizzare un MXML Components.

Proprietà e metodi di un MXML Component vengono definiti all’interno del blocco Script, usando la sintassi Actionscript 3. Per definire una proprietà in Actionscript 3 devo specificare l’access modifier (public, private, protected, internal), usare la keyword var e dichiarare un data type:

public var myString:String = “Hello World”;

In questo modo ho creato una proprietà pubblica all’interno del MXML Component a cui l’application potrà accedere e referenziare.
Stesso procedimento per la definizione di un metodo: specificare l’access modifier, usare la keyword function, indicare eventuali parametri all’interno delle parentesi (e relativi data type) e definire il return type (nel caso in cui la function non ritorni un valore si usa la keyword void):

public function myFunc( param:String):void {}

Per poter accedere dall’Application alle proprietà di un componente abbiamo bisogno di poter referenziare quel componente usando il suo ID. Come per ogni tag, anche gli MXML Component che vengono invocati espongono l’attributo ID, che contiene l’istance name. Nell’esempio precedente aggiungiamo l’ID direttamente sul tag che invocava il componente Chapter_2_Sol_1.mxml:

<comp:Chapter_2_Sol_1 id=”compID” />

Adesso posso far riferimento ad ogni oggetto (control o container), proprietà o metodo dichiarato all’interno del MXML Component direttamente via Actionscript:

// invocazione della proprietà myProp del MXML Component
compID.myProp
// invocazione del metodo myFunc del MXML Component
compID.myFunc()

Per questo esempio creiamo un nuovo componente all’interno del quale andremo ad inserire un PieChart che fa parte della famiglia dei Flex Charting Components. Per poter usare dovete avere il Flex Builder 2 con la versione che comprende anche i Flex Charting components.

1. Apriamo il progetto Flex creato nel precedente esempio: Chapter_2_Flex_2_Components

2. Create a new MXML Application document from File > New > MXML application and assegnategli il nome Chapter_2_Sol_2_app.mxml. Questo sarà il nostro main appliction file che invocherà il MXML Component. Per ora andiamo ad inserire un blocco di codice Actionscript all’interno di questo file:

<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var flashPlayer:ArrayCollection = new ArrayCollection([
{Penetration: “Market”, Value: 36},
{Penetration: “US / Canada”, Value: 40},
{Penetration: “Europe”, Value: 37},
{Penetration: “Japan”, Value: 25},
]); ]]>
</mx:Script>

Questo codice crea una variabile public di tipo ArrayCollection che contiene un array di oggetti che fungerà da data provider per popolare il pie chart del MXML component. Questa variabile usa il metadata [Bindable] che permette alla variabile di essere usata con un data binding.

3. Creiamo una nuova folder da File > New > Folder e diamogli il nome “com”. Questa sarà la nostra directory che conterrà i components esterni che andremo a creare.

4. All’interno della cartella “com” creiamo un nuovo MXML Component da File > New > MXML Component con nome Chapter_2_Sol_2.mxml. L’MXML Component è basato su un Panel. Gestione anche le proprietà width, height e title son i seguenti valori:

<?xml version=”1.0” encoding=”utf-8”?>
<mx:Panel xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”absolute”
width=”80%”
height=”80%”
title=”Solution 2-2: Defining properties and methods of MXML Component” >
</mx:Panel>

5. Andiamo ad inserire un componente PieChart:

<mx:PieChart id=”myPie”
dataProvider=”{myDP}”
showDataTips=”false”>
<mx:series>
<mx:PieSeries labelPosition=”insideWithCallout”
field=”Value” />
</mx:series>
</mx:PieChart>

Il componente PieChart espone nella proprietà dataProvider l’oggetto con cui popolerà il grafico a torta. Il dataProvider crea un dataBinding con la proprietà myDP che adesso andremo ad aggiungere nel blocco Script. The PieSeries class definisce a data series for the chart. All’interno di questo tag creo l’associazione con il field, ovvero il campo che verrà usato per creare e disegnare il pie chart.
Abbiamo associato il field al valore “Value” che è esattamente il nome dell’oggetto che contiene i valori all’interno della proprietà ArrayCollection definita nel main application file:

public var flashPlayer:ArrayCollection = new ArrayCollection([
{Penetration: “Market”, Value: 36},
{Penetration: “US / Canada”, Value: 40},
{Penetration: “Europe”, Value: 37},
{Penetration: “Japan”, Value: 25}, ]);

L’attributo labelPosition definisce invece come to render labels in the pie chart (accetta i seguenti valori: none, outside, callout, inside, insideWithCallout).

6. Andiamo adesso ad aggiungere il blocco di codice Script in cui andremo a creare la proprietà myDP del MXML Component:

<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var myDP:ArrayCollection;
]]>
</mx:Script>

La proprietà è stata solamente dichiarata, ma verrà valorizzata nel momento in cui il componente sarà invocato e istanziato dal main application file.

7. Possiamo adesso invocare il componente. Aprite il file Chapter_2_Sol_2_app.mxml e create un custom namespace nel tag Application:

<mx:Application
xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”vertical”
xmlns:comp = “com.*”>

Il custom namespace “comp” definisce il package nella folder “com” quella in cui abbiamo creato il nostro mxml component.

8. Adesso è possibile referenziare ed invocare il componente. Inserite nel corpo del documento il seguente codice:

<comp:Chapter_2_Sol_2 id=”myComp” />

Abbiamo invocato il componente e gli abbiamo assegnato un ID. Il nostro scopo era quello di accedere alle proprietà di un MXML Component. Andremo infatti a popolare la proprietà myDP creando un binding con la proprietà “flashPlayer” direttamente accedendovi dal custom tag:

<comp:Chapter_2_Sol_2 id=”myComp” myDP=”{flashPlayer}” />

9. Salviamo entrambi i file, e run the Chapter_2_Sol_2_app.mxml. Il risultato finale dell’applicazione è quello che si vede nella figure 2.3
Lo stesso procedimento può essere applicato per creare ed accedere ad un metodo di un MXML Component.

10. Andiamo ad aggiungere al file Chapter_2_Sol_2.mxml un metodo ACtionscript nel blocco Script:

<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var myDP:ArrayCollection;

public function sayHello():String
{
return “Hello World from the MXML Component”;
}
]]>
</mx:Script>

Il metodo sayHello() ritorna una string. Questo valore di ritorno lo faremo stampare all’interno di una Label nell’application file.

11. Apriamo il file Chapter_2_Sol_2_app.mxml ed aggiungiamo un Label Control subito sotto la dichiarazione del componente:

<mx:Label id=”myLabel” text=”{myComp.sayHello()}” />

Questa Label scriverà nella sua proprietà text, il valore ritornato dal metodo sayHello del componente con instance name myComp.

Expert’s Tips
E’ interessantre notare che se il nostro MXML Component is based on a control come per esempio può essere un PieChart, è possibile accedere alle proprietà e ai metodi di quell’oggetto direttamente dal dall’invocazione del custom tag. Nell’esempio di prima se il nostro componente invece di cominciare con un Panel, fosse partito direttamente con la dichiarazione del PieChart control:

<?xml version=”1.0” encoding=”utf-8”?>

avrei potuto passare la proprietà dataProvider del PieChart direttamente nella dicharazione del custom tag all’interno del main application file:

<comp:Chapter_2_Sol_2 id=”myComp” dataProvider=”{flashPlayer}” />