Flash RemotingChafic KazounSenior Flash Developer - B-Line ExpressWork: http://www.blinex.com Play: http://www.rewindlife.com

What is Flash Remoting?

• Flash Remoting is an infrastructure that provides a simplified and efficient method of connecting to back-end systems and webservices.

Why Flash Remoting?

• AMF communication protocol• Fast and easy development

– Simplified communication– Automatic data conversion– Easier to debug

• Compressed data• Promotes better application architecture and team workflow

Requirements

• Flash MX authoring environment• Flash Remoting components for Flash MX• Flash Remoting gateway

– ColdFusion MX & JRUN (built-in)– .Net / Java (Add-on)– Other non-Macromedia solutions (PHP, Java, and Perl)

• Flash 6 plug-in

Diagram of the Architecture

ColdFusion – Methods of connecting

• ColdFusion Components (CFCs)• ColdFusion page (CFM)• Server-side ActionScript• WebServices

ColdFusion Components and Flash Remoting• Similar to regular CFCs• <cffunction> Particulars to Flash Remoting

– Access = “remote”– ReturnType will be returned to Flash– Name is the method Flash will call– Hint is useful for Flash Developers– A Flash client will require a gateway to connect to, for ColdFusion the

gateway is usually “http://serverAddress/flashservices/gateway”

Flash Remoting – Client Side• Client can be a Flash client or a Flash Communication Server

connecting to a ColdFusion server• Steps involved in connecting to a cfc

– Connect to the ColdFusion server gateway– Create a reference to a service– Create responder for the service method– Call the service method

Connecting to a CFC (simple method) from Flash

//include Flash Remoting classes#include “netdebug.as” //this is only for debugging. Remove after debugging#include “netservices.as”

//Create a connection and serviceNetServices.setDefaultGatewayURL(“gatewayurl");gateway = NetServices.createGatewayConnection();service = gateway.getService(“service path",this);

//result event handlerfunction method_Result(result){

//do something with the result}//Status handlerfunction method_Status(result){

//do something because of error}

//call methodservice.method();

A Real Yet Simple Application

Steps for our application to list all the speakers at CFUN!– Create the Database– Create the Interface– Create the CFC– Create the Flash ActionScript code

CFUN Topics Example (cfc)<cfcomponent>

<cffunction name="getTopics" access="remote" returntype="query"><cfquery datasource="cfun" name="q_getTopics">

select topics.first_name, topics.last_name, topics.id, topics.presentation_title,

presentation_types.typefrom topics topics INNER JOIN presentation_types ON

topics.presentation_type = presentation_types.id

</cfquery><cfreturn q_getTopics>

</cffunction></cfcomponent>

Save this file webroot/com/rewindlife/cfun/speakers.cfc

CFUN Topics Example (Flash)

#include "netdebug.as"#include "netservices.as"

NetServices.setDefaultGatewayURL("http://localhost/flashservices/gateway");gateway_nc = NetServices.createGatewayConnection();cfunTopics_service = gateway_nc.getService("com.rewindlife.cfun.cfun",this);function getTopics_result(result){

my_dg.setDataProvider(result);}

Function getTopics_Status(result){trace(result.details);

}

cfunTopics_service.getTopics();

Using the NetConnection Debugger• Very useful tool built into the Flash MX IDE to debug service

calls/results• To Open window > NetConnection Debugger• “netdebug.as” must be included in your client files for it to

function (don’t forget to remove it once deploying a file)• You can inspect

– Outgoing Calls, what parameters were passed, what method was called, and on what server

– Errors– Incoming data/results

Tips - Passing data

• Recommend using structures.

//create an object and pass it

var o = new Object();

o.paramater1 = “xyz”;

o.paramater2 = “123”;

service.method(o);

• Optimize structures (Don’t send all data everytime)

Tips - A more friendly result handler• As seen before, we can handle results using a

“methodName_result” function on the client. This works great but has some limitations

– One single handler for all event calls of the method– When architecting OO applications, there is a better method– When making multiple calls there can be issues if your code has issues

with some results returning before others– _Result just never really looked good to me

Tips - A more friendly result handler (slide 2)• When setting up the connection you do not specify a default responder

– Before: cfunTopics_service = gateway_nc.getService("com.rewindlife.cfun.cfun",this);

– After: cfunTopics_service = gateway_nc.getService("com.rewindlife.cfun.cfun");

• You create a responder class:

ResponderClass = function(){};

ResponderClass.prototype.onResult = function(result){

my_dg.setDataProvider(result);

}

ResponderClass.prototype.onStatus = function(status){

//error handling code here

trace("error");

}

• You call your service and provide the result handler

– Before: cfunTopics_service.getTopics();

– After: cfunTopics_service.getTopics(new ResponderClass());

Tips - A more friendly result handler (slide 2)• I have written a universal result handler. You can include this and use it easily• Code for our Application:#include "netdebug.as"#include "netservices.as"#include "BLServiceHandlerClass.as"

//Setup our gatewayNetServices.setDefaultGatewayURL("http://192.169.0.200/flashservices/gateway");gateway = NetServices.createGatewayConnection();//Setup our servicesservice = gateway.getService("com.rewindlife.cfun.speakers");

//Our Result functionsfunction onSuccess(result){

my_dg.setDataProvider(result);}function onError(error){

trace("error occured");}

service.getTopics(new BLServiceHandlerClass(this,"onSuccess","onError"));

Tips - A more friendly result handler (slide 3)service.method(new BLServiceHandlerClass(listener,“event",“error“,”filter”,paramater object), paramater object);

• Listener: The object that will receive the event once it occurs. This allows for a flexible system of seperating your object.

• Event: This is a string value of the method that will be called on the listener object once something is returned from the server

• Error: This is a string value of the method that will be called on the listener object if an error occurs (Note: the error result has properties that helps to debug an application)

• Filter: This is an optional value that you can pass while making a call to a remote service that will be returned with the result as its own argument. This can be helpful when you want to separate certain events from another.

• Parameter Object: This is the parameter object (structure) that we send out. We can have the result handler return this information if we find it useful. This is also optional

• Don’t forget the parameters at the end if you need to pass them!!

Webservice Example#include "netdebug.as"#include "netservices.as"

NetServices.setDefaultGatewayURL("http://localhost/flashservices/gateway");gateway = NetServices.createGatewayConnection();myService = gateway.getService("http://www.xmethods.net/sd/2001/BabelFishService.wsdl",

this);

function BabelFish_Result(result){trans_txt.text = result;

}

function translate(){myService.BabelFish({translationmode:"en_fr",sourcedata:input_txt.text});

}

submit_btn.onRelease = function(){this._parent.translate();

}

Other Things to get familiar with• The Recordset Object: A recordset object on the Flash client

exists for the purpose of transferring recordset data to and from a remoting back-end easily.

• The DataGlue Class: Allows us to manipulate a returned recordset without having to do complex parsing.

• NetConnection: We used the NetConnection class in our examples but there are some things we did not discuss (specifically the setCredentials() method)

Other Resources

• Chafic Kazoun– You may contact me at chafic@rewindlife.com– http://www.blinex.com (company)– http://www.rewindlife.com (personal weblog with Sam Neff)

• Websites– http://www.macromedia.com/flashremoting– http://www.flash-remoting.com

• Books– Flash Remoting MX: The Definitive Guide by Tom Muck – Complete Flash Remoting MX by Joey Lott