Tuesday, May 6, 2008

Hello World (Flex, PHP, Weborb)

Your adobe mxml files for flexbuilder are being stored in ~/workspace/iSports/src/
Your php files containg the classes that will interface with flex are in /var/www/weborb/Services/
The file that helps link php and flex so that they can talk to each other is in /var/www/weborb/Weborb/WEB-INF/flex/remoting-config.xml

So we want an application that will display "Hello World!"
Let's start with the php:
/var/www/weborb/Services/iSportsWelcome.php
<?php
class iSportsWelcome {
public function getMsg()
{
// Create an object
$msg = new WelcomeMsg();
// Set the value of the properties
$msg->msg = "Hello World!";
// This this the object that we want to pass to flex
return $msg;
}
}

class WelcomeMsg {
// Nothing to do here but define the propeties of our object
public $msg;
}

?>


Now we need to make this object a 'source' and give it a 'destination' in flex through weborb:
/var/www/weborb/Weborb/WEB-INF/flex/remoting-config.xml

<destination id="iSportsWelcomeDestination">
<properties>
<source>iSportsWelcome</source>
</properties>
</destination>

After appending the preceding lines we can move on to the flex development. Let's open Eclipse, select our iSports project and then open iSports/src/iSports.mxml
(~/workspace/iSports/src/iSports.mxml is the exact location)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="onCreationComplete()">

<mx:Script>
<![CDATA[
import mx.rpc.remoting.*;
import mx.controls.*;
import mx.rpc.events.*

private var php_iSportsWelocme:RemoteObject; // Our php class will be a 'remote' object

public function onCreationComplete():void
{
php_iSportsWelocme = new RemoteObject();
php_iSportsWelocme.destination = "iSportsWelcomeDestination"; // the link we set up through weborb
php_iSportsWelocme.getMsg.addEventListener("result", onResult); // listens to getMsg
php_iSportsWelocme.addEventListener("fault", onFault); // if there is any error in this class
getInfo();
}

public static function onFault(event:FaultEvent):void
{
Alert.show(event.fault.faultString, 'Error');
}

private function onResult(event:ResultEvent):void
{
var flex_msgObject:Object = event.result; // the php return object is passed to flex
var flex_msgText:String = flex_msgObject.msg; // the string is taken from the new object
lblMsg.text = flex_msgObject.msg;
}

private function getInfo():void
{
lblMsg.text = "Working... (or maybe not)...";
php_iSportsWelocme.getMsg();
}
]]>
</mx:Script>
<mx:Panel x="10" y="10" width="329" height="189" layout="absolute" title="Info Service Example">
<mx:Label x="10" y="10" id="lblMsg" text="Current user:"/>
</mx:Panel>

</mx:Application>

When first attempting this I had an error because I had actually forgotten to append
-services /var/www/weborb/Weborb/WEB-INF/flex/services-config.xml

to the compiler options in the project properties.

Then I got a "Send Failed" Error. But since my SampleFlexToPHPProject worked I just right-click copied and then pasted the entire project with a new name, cleared my browser cache, and copied my code into the new copied project, deleted the old one, and renamed the new one to the old one.

No comments: