Flash Client
Now it's turn of the WebService consumer, in this case a flash swf.
I have created a little component for a isometric grid creation (you will find it in the downloadable zip of this tutorial). But let's proceed in order.
The first really important thing to know for consume our webservice using AS (and not the webservice component) is:
Go into Window->other panels->Library
and drag into your flash document the "WebServiceClasses" . This is needed in order to use the webservice as class.
a) Initialize the Grid component.
Once dragged into the document also the grid component we have to initialize it by passing a dataprovder (an array of numbers), and assign an action for the click event :
// *************************
// Dataprovider for the grid
// component
// *************************
var mainAr:Array = new Array();
mainAr.push([1,1,1,1,1,1,1,1,1,0,1,0,1,1,1,1,1,1,1,1])
mainAr.push([0,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,1])
mainAr.push([0,1,1,1,1,1,1,0,1,0,1,0,1,1,1,1,1,1,0,1])
mainAr.push([0,1,0,0,0,0,1,1,1,0,1,0,1,0,0,0,0,1,0,0])
mainAr.push([0,1,0,1,0,0,0,0,1,0,1,0,1,0,0,1,0,1,1,1])
mainAr.push([0,0,0,1,1,1,1,0,1,0,1,0,0,0,0,1,0,0,0,1])
mainAr.push([1,1,1,1,0,0,1,0,1,0,1,1,1,1,1,1,1,1,0,0])
mainAr.push([1,0,0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,1,1,0])
mainAr.push([1,0,1,1,1,0,1,0,1,0,1,1,1,1,1,1,0,0,1,0])
mainAr.push([1,0,1,0,1,0,1,0,1,0,0,0,0,0,0,1,0,1,1,0])
mainAr.push([1,0,1,0,1,0,1,0,1,1,1,1,1,1,0,1,0,0,0,0])
mainAr.push([1,0,1,0,1,0,0,0,0,0,1,0,0,0,0,1,1,1,1,1])
mainAr.push([1,0,1,0,1,1,1,1,1,0,1,0,0,0,0,0,0,0,0,1])
mainAr.push([0,0,0,0,0,0,0,0,1,0,1,0,1,1,1,1,1,1,0,1])
mainAr.push([0,1,1,1,1,1,1,0,1,0,1,0,0,0,0,0,0,1,0,1])
mainAr.push([0,1,0,0,0,0,1,0,1,0,1,0,1,1,1,1,1,1,0,1])
mainAr.push([0,1,0,1,0,0,1,0,1,0,1,0,1,0,0,1,0,1,0,1])
mainAr.push([0,1,0,1,1,1,1,0,1,0,1,0,1,1,0,0,0,1,0,1])
mainAr.push([0,1,0,0,0,0,0,0,1,0,1,0,1,0,0,1,1,1,0,1])
mainAr.push([0,1,1,1,1,1,1,1,1,0,1,0,0,0,0,1,0,0,0,1])
mainAr.push([0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,1,1,1])
// ********************************
// Dispatcher for the GRID component
// actions
// ********************************
clicked = new Object();
clicked.startPos = [2,0]
clicked.old = clicked.startPos
clicked.endPos = null
clicked.trip = null
clicked.click = function(obj){
if(SID != undefined){
var position = obj.target.selectedItem.position
trace('click ' add position)
clicked.startPos = clicked.old
clicked.endPos = position
findPath(SID, clicked.startPos, clicked.endPos)
}
}
// *******************************
// Create the GRID
// *******************************
this.grid.addEventListener("click", clicked) // set the click dispatcher
this.grid.dataProvider = mainAr // set dataprovider
this.grid.create() // create grid
this.grid.setSize(75,75)
this.grid.setPosition(clicked.startPos,1) // set the start position
What it's importanto to look at in these lines is this:
clicked.click = function(obj){
if(SID != undefined){
var position = obj.target.selectedItem.position
trace('click ' add position)
clicked.startPos = clicked.old
clicked.endPos = position
findPath(SID, clicked.startPos, clicked.endPos)
}
}
That is the click action. In fact, once click on the map (and the session_id returned from PHP is not null) get first the current position on the map (an array of 2 numbers), get the target end position and finally pass all these values (with the session_id) to another function "findPath", which will invoke the webservice operation for us.
b) Consume the WebService
Now that our grid has been created we have to tell to PHP which is our map, by calling the "initialize" operation.
// Initialize the WebService Class here
wsdl = new mx.services.WebService("http://www.sephiroth.it/webservices/pathfinder_server.php?wsdl");
// WebService calls:
// call the "initialize" operation passing the mainAr as argument
callback_initialize = wsdl.initialize(mainAr);
// the result it's a session id string
callback_initialize.onResult = function(data){
connection._visible = false;
_global.SID = data; // save the result into _globlas
}
// if the call get an error...
callback_initialize.onFault = function(code){
for(var a in code){
trace([a,code[a]])
}
connection.gotoAndStop(2);
}
// ************************
// FINDPATH
// ************************
function findPath(sess,st,en){
// invoke the wsdl operation "findPath"
callback_findPath = _root.wsdl.findPath(sess,st.toString(),en.toString());
// on operation results
callback_findPath.onResult = function(data){
for(var a in data){
// let's make more visible the trip
grid.hilight = [int(data[a].split(",")[0]),int(data[a].split(",")[1])]
}
// now move our cube toward the final position
_root.onEnterFrame = function(){
if(data.length > 0){
var position = data.shift().split(",")
grid.setPosition(clicked.old,0)
grid.setPosition(position,1)
clicked.old = position
grid.nohilight = clicked.old
} else {
delete this.onEnterFrame;
}
}
}
// if something wrong...
callback_findPath.onFault = function(code){
trace("Error");
trace(code.faultString)
}
}
Also for these line let's analyze the most important:
Initialize the WebServices AS class into the "wsdl" variable (remember first to drag the WebServicesClasses from the common library)
wsdl = new mx.services.WebService("http://www.sephiroth.it/webservices/pathfinder_server.php?wsdl");
In order to call a remote method we use this syntax:
callback_initialize = wsdl.initialize(mainAr);
that is very similar to what we do consuming remoting methods. For every call to the wsdl server we can assing two responder: (onResult and onFault):
callback_initialize.onResult = function(data){
and
callback_initialize.onFault = function(code){
Once clicked on the grid this method is invoked :
function findPath(sess,st,en){
// invoke the wsdl operation "findPath"
callback_findPath = _root.wsdl.findPath(sess,st.toString(),en.toString());
// on operation results
callback_findPath.onResult = function(data){
for(var a in data){
// let's make more visible the trip
grid.hilight = [int(data[a].split(",")[0]),int(data[a].split(",")[1])]
}
...
}
}
in fact we need to pass to the findPath remote method the session_id as first argument and 2 strings for the initial position and the finalposition (that are string representation of arrays):
sess, st.toString(), en.toString()
the result of this call is an array of strings too, that are the coordinates
needed to move from the initial position to the end position on our grid:
Download files
Here you can download all the files used in this tutorial
