AJAX entra nel mondo Adobe con FABridge per Flex

Tempo fa parlavamo di come AJAX e Flash potessero rappresentare soluzioni non concorrenti, ma integrabili fra di loro. Adobe avrà  letto i nostri post :) e ha rilasciato una libreria di codice da inserire nella applicazioni Flex che prevede la comunicazione tra Actionscript e Javascript. Si chiama FABridge e sta per FlexAjax Bridge, ovviamente. In pratica si tratta di un componente Flex "donato" alla comunità  di sviluppatori in licenza open source!

Cerchiamo di capire come questa libreria agevola il lavoro di uno sviluppatore Flex: senza nessun codice aggiuntivo è possibile esporre classi Actionscript a Javascript e continuare a programmare usando in maniera indifferente un linguaggio piuttosto che l'altro. Senza dimeticare che il Flash Player nativamente può interfacciarsi a Javascript con la classe ExternalInterface.

Mi sembra un gran passo in avanti questo da parte di Adobe, che forse sta focalizzando meglio in quale segmento proporre un prodotto potente come Flex. Brava Adobe! Per la serie un esempio vale più di mille parole, ecco un pà di codice.

Istanziare la classe nell'applicazione Flex:


<mx:Application Â…>
   <fab:FABridge xmlns:fab="bridge.*" />


Per accedere all'istanza dell'applicazione attraverso Javascript:


function useBridge()
{
     var flexApp = FABridge.flash.root();
}


Per ritirare un valore di una proprietà  o settare il valore attraverso Javascript possiamo usare le seguenti funzioni Javascript:


function getMaxPrice()
{
     var flexApp = FABridge.flash.root();
     var appWidth = flexApp.width();
     var maxPrice = flexApp.maxPriceSlider().value();
}

function setMaxPrice(newMaxPrice)
{
     var flexApp = FABridge.flash.root();
     flexApp.maxPriceSlider().setValue(newMaxPrice);
}


Si possono chiamare metodi di oggetti in questo modo:


function setMaxPrice(newMaxPrice)
{
     var flexApp = FABridge.flash.root();
     flexApp.shoppingCart().addItem(“Antique Figurine”, 12.99 );
}


Passare funzioni come event handlers da JAvascript ad Actionscript:

function listenToMaxPrice()
{
     var flexApp = FABridge.flash.root();
     var maxPriceCallback = function(event)
     {
         document.maxPrice = event.newValue();
         document.loadFilteredProducts(document.minPrice, document.maxPrice);
     }
     flexApp.maxPriceSlider().addEventListener(“change”, maxPriceCallback );
}