Flash Remoting

1
Flash Remoting

• Chafic Kazoun
• Senior Flash Developer - B-Line Express
• Work http//www.blinex.com
• Play http//www.rewindlife.com

2
What is Flash Remoting?

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

3
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

4
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

5
Diagram of the Architecture
6
ColdFusion Methods of connecting

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

7
ColdFusion Components and Flash Remoting

• Similar to regular CFCs
• 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

8
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

9
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 service
• NetServices.setDefaultGatewayURL(gatewayurl")
• gateway NetServices.createGatewayConnection()
• service gateway.getService(service
  path",this)
• //result event handler
• function method_Result(result)
• //do something with the result
• //Status handler
• function method_Status(result)
• //do something because of error

10
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

11
CFUN Topics Example (cfc)

• returntype"query"
• select topics.first_name, topics.last_name,
  topics.id, topics.presentation_title,
  presentation_types.type
• from topics
• topics INNER JOIN presentation_types ON
  topics.presentation_type presentation_types.
  id
• Save this file webroot/com/rewindlife/cfun/speaker
  s.cfc

12
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.re
  windlife.cfun.cfun",this)
• function getTopics_result(result)
• my_dg.setDataProvider(result)
• Function getTopics_Status(result)
• trace(result.details)
• cfunTopics_service.getTopics()

13
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 (dont 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

14
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 (Dont send all data
  everytime)

15
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

16
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())

17
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 gateway
• NetServices.setDefaultGatewayURL("http//192.169.0
  .200/flashservices/gateway")
• gateway NetServices.createGatewayConnection()
• //Setup our services
• service gateway.getService("com.rewindlife.cfun.
  speakers")
• //Our Result functions
• function onSuccess(result)
• my_dg.setDataProvider(result)
• function onError(error)
• trace("error occured")

18
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
• Dont forget the parameters at the end if you
  need to pass them!!

19
Webservice Example

• include "netdebug.as"
• include "netservices.as"
• NetServices.setDefaultGatewayURL("http//localhost
  /flashservices/gateway")
• gateway NetServices.createGatewayConnection()
• myService gateway.getService("http//www.xmethod
  s.net/sd/2001/BabelFishService.wsdl", this)
• function BabelFish_Result(result)
• trans_txt.text result
• function translate()
• myService.BabelFish(translationmode"en_fr",sour
  cedatainput_txt.text)
• submit_btn.onRelease function()
• this._parent.translate()

20
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)

21
Other Resources

• Chafic Kazoun
• You may contact me at chafic_at_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