04 maggio 2010

Usare un web service in Flex

di Marcello Ruta

Tool utilizzati: Flex 3

Requisiti: Cononoscenze di Actionscript 3.0

Assets Finali: ConvertWeight.mxml

Flex SDK: 3.4

Flash Player 9

Sito webservices: http://www.webservicex.net/WCF/ServiceDetails.aspx?SID=69

In questo tutorial vedremo come utilizzare un servizio web service, vedremo come importare il servizio in maniera automatica con Flex. Dopo con poche righe di codice dimostreremo come utilizzare il servizio, adesso mettiamoci all’opera. Let’s go!

1 Step: Creazione del progetto

Nel primo passaggio ci limiteremo a creare il nostro progetto, procediamo dando il nome di ConverWeight, creeremo all’interno della cartella src le sottocartelle che ci servono per metterci le nostre classi.

2 Step: Importare il servizio

WSDL Location: http://www.webservicex.net/ConvertWeight.asmx?wsdl

In questo primo step vedremo come importare il servizio con la procedura guidata di Flex. Una volta che abbiamo creato il nostro progetto e lo abbiamo configurato secondo le nostre esigenze, passiamo all’importazione del servizio, ecco come procedere:

File > Import… quindi si aprirà la finestra di dialogo Import (vedi fig. 1)

Import WSDL (fig. 1)

a questo punto facciamo clic su Next ed apparirà la finestra di dialogo dove verrà creata la cartellina in cui saranno create le Classi generate da Flex (vedi fig. 2),

select source folder (fig. 2)

proseguiamo facendo clic su Next, quindi apparirà finestra di dialogo dove specificheremo il WSDL URI del servizio (vedi fig. 3),

WSDL URI (fig. 3)

inserito l’url facciamo clic su Next per continuare con la nostra procedura guidata, a questo punto apparirà la finestra di dialogo dove ci verrà chiesto di configurare il tipo di protocollo supportato dal servizio. Dal menu di scelta selezioneremo la voce ConvertWeightsSoap (vedi fig. 4),

(fig. 4)

quindi una volta aver selezionato il tipo di Port appropriato la finestra cambierà di aspetto (vedi fig. 5), infatti si abiliterà il pulsante Finish, a questo punto faremo clic su di esso e la procedura guidata di importazione è terminata.

(fig. 5)

Alla fine la nostra Flex Inspector avrà questo aspetto (vedi fig. 6),

Flex Navigator (fig. 6)

3 Step: Configurazione dell’interfaccia:

L’interfaccia di immissione dei dati è abbastanza semplice, infatti essa sarà composta da:

  • un Panel che funge da wrapper,
  • un TextInput,
  • quattro Label,
  • due ComboBox,
  • due Button.
Interfaccia (fig. 7)

Ecco il codice MXML dell’interfaccia:

<mx:Panel title = "Convert Weight"
x = "10"
y = "10"
width = "300"
height = "250"
paddingTop = "10"
paddingLeft = "10"
paddingBottom = "10">

<mx:HBox>
<mx:Label text = "Unità da convertire" />
<mx:TextInput id = "tiUnit"
width = "80" />
</mx:HBox>
<mx:HBox>
<mx:Label text = "Da:" />
<mx:Spacer width = "100" />
<mx:Label text = "A:" />
</mx:HBox>
<mx:HBox>
<mx:ComboBox id = "cboFrom"
dataProvider = "{weightUnitArr}"
close = "getValueFromUnit(event)" />
<mx:ComboBox id = "cboTo"
dataProvider = "{weightUnitArr}"
close = "getValueToUnit(event)" />
</mx:HBox>
<mx:HBox>
<mx:Button id = "btnConvert"
label = "Converti"
click = "onConverWeight(event)" />

<mx:Button id = "btnReset"
label = "Reset"
click = "resetHandler(event)" />
</mx:HBox>

<mx:HBox>
<mx:Label text = "Result:" />
<mx:Label id = "resultTxt" />
<mx:Label id = "weightTxt" />
</mx:HBox>

</mx:Panel>

Analizzando il codice, possiamo notare che abbiamo un wrapper principale costituito da un componente Panel a da una serie di Hbox che contengono: componenti Label, TextInput, ComboBox e Spacer per migliorare l’impaginazione, infine abbiamo dei componenti Button ai quali, come potete vedere dal codice, abbiamo già assegnato dei comportamenti.

4 Step: Chiamata del servizio

Adesso invocheremo la chiamata del servizio, per prima cosa creiamo un xmlns per far si che i componenti della cartella net/webservicex siano disponibili, quindi avremo xmlns:cmp = "net.webservicex.*", fatto ciò apriamo un tag facendo riferimento ai componenti che sono stati creati da Flex in run-time nella fase precedente <cmp:ConvertsWeights> a questo assegneremo una id chiamata cwSrv. Quindi apriremo un altro tag <cmp: convertWeight_request_var> ed infine nel tag <cmp:ConvertWeight_request> passeremo i parametri per la conversione (fromWeight, toWeight e valueWeight).

Alla fine avremo questo codice:

<cmp:ConvertWeights id = "cwSrv">
<cmp:convertWeight_request_var>
<cmp:ConvertWeight_request FromUnit = "{fromWeight}"
ToUnit = "{toWeight}"
Weight = "{valueWeight}" />
</cmp:convertWeight_request_var>
</cmp:ConvertWeights>

5 Step: Codice Actionscript

L’ultima fase sarà dedicata alla scrittura del codice necessario per dare le funzionalità al nostro convertitore.
Apriamo un blocco <mx:Script>, all’interno di esso eseguiamo l’import di alcune classi necessarie per lo svolgimento dell’esercizio, nella fattispecie importiamo la Classe Alert, FaultEvent, ArrayCollection, ConvertWeightResultEvent e WeightUnit. Dopodiché creiamo un blocco di variabili di tipo private, quindi aggiungeremo un metodo getter per il recupero del valore dall’unico campo di testo input, infine scriveremo le nostre funzioni per dare funzionalità al nostro convertitore di peso.

N.B. nel tag Application sarà richiamto il metodo creationComplete per eseguire la funzione init().

Ecco adesso tutto il codice actionscript dell’applicazione opportunamente commentato:

<mx:Script>
<![CDATA[
import mx.rpc.events.FaultEvent;
import mx.controls.Alert;
import net.webservicex.ConvertWeightResultEvent;
import net.webservicex.WeightUnit;
import mx.collections.ArrayCollection;

[Bindable]
private var fromWeight:WeightUnit = new WeightUnit();
[Bindable]
private var toWeight:WeightUnit = new WeightUnit();

[Bindable]
private var weightUnitArr:ArrayCollection = new ArrayCollection([{unit: null, label: "Seleziona..."}, {unit: "Grams", label: "GR"}, {unit: "Kilograms", label: "KG"}]);

[Bindable]
private var valueWeight:Number;

/**
*
* init application con impostazioni di default delle
* variabili "localWeight" e "foreignWeight"
*
* */

private function init():void {

fromWeight._WeightUnit = "Grams";
toWeight._WeightUnit = "Grams";

cwSrv.addconvertWeightEventListener(onCWResultHandler);
cwSrv.addConvertWeightsFaultEventListener(onFaultHandler);

}

/**
*
* Fault Function controlliamo la connessione con il
* webservice "WSDL Location: http://www.webservicex.net/ConvertWeight.asmx?wsdl"
*
* */

private function onFaultHandler(e:FaultEvent):void {

Alert.show(String(e.message), "Errore il server non risponde!");
btnConvert.enabled = true;
btnConvert.label = "Converti";

}

/**
*
* recuperiamo il valore da convertire con un getter
*
* */

public function get unitValue():Number {

return Number(tiUnit.text);

}

/**
*
* Chimata del metodo result per la conversione del valore inserito;
*
* */

private function onCWResultHandler(e:ConvertWeightResultEvent):void {

var result:Number = e.result;
//Alert.show("Risultato: " + String(e.result));

if (tiUnit.length > 0) {

resultTxt.text = String(result);

} else {

Alert.show("Inserisci un valore!");

}

btnConvert.enabled = true;
btnConvert.label = "Converti";

}

/**
*
* Recuperiamo i valori dalle combobox
*
* */

private function getValueFromUnit(e:Event):void {

var curSelection:String = e.currentTarget.selectedItem.unit;
trace(curSelection);
fromWeight._WeightUnit = curSelection;

}

private function getValueToUnit(e:Event):void {

var curSelection:String = e.currentTarget.selectedItem.unit;
trace(curSelection);
toWeight._WeightUnit = curSelection;

weightTxt.text = e.currentTarget.selectedItem.label;

}

/**
*
* Chiamata alla funzione di conversione e al servizio
*
* */

private function onConverWeight(e:MouseEvent):void {

valueWeight = unitValue;

btnConvert.enabled = false;
btnConvert.label = "Conversione in corso ...";
cwSrv.convertWeight_send();

}

/**
*
* Reset dei Campi
*
* */

private function resetHandler(e:MouseEvent):void {

tiUnit.text = resultTxt.text = weightTxt.text = "";
fromWeight._WeightUnit = "";
toWeight._WeightUnit = "";

}
]]>
</mx:Script>

Il tutorial adesso è finito, non ci resta che testare la nostra applicazione.

ConvertWeightFlex

Vota

Comments