Comunicazione flash - mysql con AMFPHP (Parte III)

Pagina 3 di 3

6. Costruiamo L'Interfaccia

A questo punto apriamo Flash MX e iniziamo a costruire l'interfaccia grafica del nostro motore di ricerca.

Sul primo fotogramma del primo livello avremo i seguenti oggetti:

in_txt: campo di testo di input con nome di istanza "in_txt" FButton: componente Push button (del component Set 1) con label "search" e Click Handler "makeSearch" una listbox (sempre dal component set 1) dal nome istanza "_lb" e come change Handler "showDetail" un campo di testo dinamico con nome istanza "testFn" , settato su multiriga. infine una scrollbar (component set 1) con Target TextField "testFn"

7. ActionScript

Adesso che abbiamo messo insieme la grafica di Flash non ci rimane altro che "farla funzionare" , ovvero scrivere il codice necessario per collegare Flash e i nostri metodi PHP tramite una comunicazione di "remoting" con protocollo AMF.

Prima parte: un piccolo ritocco grafico ai component.
Scriviamo questo codice sul primo fotogramma:

in_txt.onSetFocus = function (){
   this.backgroundColor = 0xEEEEEE;
   this.borderColor = 0x000000;
}
in_txt.onKillFocus = function(){
   in_txt.backgroundColor = 0xDDDDDD
   in_txt.borderColor = 0x666666
}
in_txt.onKillFocus();
globalStyleFormat.textSize = 11
globalStyleFormat.face = 0xCCCCCC
globalStyleFormat.highlight = 0xFFFFFF
globalStyleFormat.highlight3D = 0x000000
globalStyleFormat.darkshadow = 0x000000
globalStyleFormat.background = 0xEEEEEE
globalStyleFormat.applyChanges();
searchBtn.setSize(80,in_txt.textHeight);

come si nota ho assegnato due eventi al testo di input "in_txt": onSetFocus e onKillFocus. Questi due eventi verranno attivati rispettivamente al click del mouse all'interno del campo di testo, e alla de-selezione del campo di testo.
In seguito applichiamo uno stli globale per tutti i component inseriti tramite il globalStyleFormat.

Ora che è pronta l'interfaccia possiamo aprire la connessione con il gateway e inizializzare il nostro flashService, includiamo nel filmato anche due files .as che sono inclusi nei remotings components che abbiamo installato prima.

"NetDebug.as" serve se vogliamo usare il NetConnection Debugger, molto utile per trovare errori e monitorare il flusso di dati.
Per aprire il Debugger dovete andare in Window>>NetConnection Debugger.Il secondo file che includiamo , "NetServices.as" serve a flash per poter utilizzare il formato di dati AMF su cui remoting è basato.

#include "NetDebug.as"
#include "NetServices.as"

var gatewayurl = "http://localhost/flashDoc/gateway.php";

if (isGatewayOpen == null) {
   isGatewayOpen = true;
   NetServices.setDefaultGatewayUrl(gatewayurl);
   gatewayConnnection = NetServices.createGatewayConnection();
   flashDocService = gatewayConnnection.getService("flashDocumentation" , this);
}

Adesso dobbiamo creare le funzioni "responder" , una volta che da flash chiamiamo un metodo del nostro flashService queste funzioni stanno in attesa dei risultati.

1° Metodo

Dobbiamo creare due funzioni responder per ogni metodo del nostro flashService, una che viene eseguita nel momento in cui vengono ricevuti i dati e una che viene eseguita quando viene restituito un errore.

//funzioni responder per il metodo [getElementById]

function  getElementById_Result(result)
{
   testFn.htmlText = "";
   
   for(var a in result['items'][0])
   {
      testFn.htmlText += "<B>" + a + "</B><BR>"
      + result['items'][0][a] + "<BR><BR>";
   }
}

function  getElementById_Status(status)
{
   trace(status);
}

//funzioni responder per il metodo [doSearchByString]

function doSearchByString_Result(result)
{
   _lb.removeAll();
   if(typeof(result) != "string")
   {
      for(var a in result['items'])
      {
         _lb.addItem(result['items'][a]['id'] + ": "
         + result['items'][a]['titolo'],result['items'][a]['id']);
      }
   } else {
      _lb.addItem(result);
   }
}

function doSearchByString_Status(status)
{
   trace(status);
}

le funzioni responder devono avere nomi precisi. Come ho detto prima servono due funzioni per ogni metodo della nostra classe php. La funzione che gestisce i dati deve essere nominata in questo modo "nomeMetodo_Result" , mentre la funzione che gestisce gli errori devve essere nominata in questo modo "nomeMetodo_Status". Potete chiarire la cosa confrontando i nomi dei metodi nella classe php con i nomi delle delle funzioni flash ;).

2° Metodo

Esiste anche un altro metodo per fare la stessa cosa. nel metodo che abbiamo appena visto non abbiamo un oggetto responder specifico e quindi dobbiamo creare le funzioni responder. Utilizzando l'altro metodo invece definamo un'oggetto responder e definamo in questo oggetto due metodi di callback, "onResults" e "onStatus".

ecco un esempio di come impostare l'oggetto responder.

responderObj = new Object();
//funzione callback che gestisce e risultati
responderObj.onResult = function(result){}
//funzione callback che gestisce gli errori
responderObj.onStatus = function(status){}
flashDocService = gatewayConnnection.getService("flashDocumentation" , responderObj);

Ora non resta che scrivere le funzioni che permetteranno all'utente di interrogare il database tramite l'interfaccia che abbiamo creato.

Ecco la funzione che viene eseguita dal pulsante

function makeSearch()
{
   //numero massimo di risultati che vogliamo ricevere
   var limit = 10;
   //stringa da cercare
   var string = _root.in_txt.text;
   //chimiamo il metodo doSearchByString del nostro flashService
   flashDocService.doSearchByString(string, limit);
}

ed ecco la funzione che viene eseguita quando viene scelto un elemento del ListBox.

function showDetail()
{
   if(_lb.getSelectedItem().data == undefined) return;
   testFn.htmlText = "<B>Please wait...</B>";
   var id = _lb.getSelectedItem().data
   
   /*chiama il metodo getElementById del nostro flashService
   passando come argomento l'id della funzione di cui vogliamo
   visualizzare i dettagli*/
   
   flashDocService.getElementById(id);
}

Abbiamo concluso!

8. Conclusioni

Quello che abbiamo appena visto è un'emulazione di flash remoting usando PHP, infatti non è possibile ad esempio usare il NetDebugger perchè altrimenti ci saranno errori di trasmissione e riocezione dei dati.
L'evento onStatus così com'è stato implementato non è la stessa cosa di quello di flash remoting.
I pro invece è che senza alcuno sforzo abbiamo creato una connessione di dati binaria grazie alla quale possiamo passare e riocevere dati complessi in flash senza dover creare funzioni di parsing per ricreare array od oggetti.