Saturday, September 12, 2009

Steps for connecting flex with drupal

1) Make sure AMFPHP 1.9 Beta 1 is in the root of your installation of the amfphp module. The path to it should be: your_drupal_install/modules/amfphp/amfphp

2) Confirm AMFPHP is working. To do this go to administer->site building->services and click on the AMFPHP - /services/amfphp link. If it's working properly you should see something like this:

amfphp and this gateway are installed correctly. You may now connect to this gateway from Flash.

Note: If you're reading an old tutorial, it will tell you that you should see a download window instead of this message. This confused people so this is the new behaviour starting from amfphp 1.2.

View the amfphp documentation

If you get an error make sure you have the correct beta I noted above.

3) Once you've confirmed it's working, create a new Flex project of type "Basic". I called mine AMFPHPTest.

4) Now create a new file anywhere in your project and call it services-config.xml. I created a folder in my project called "services" and put it in there.

5) In this file, you'll want the following. You will need to change the endpoint uri to reflect the location of your own install of the amfphp module:




class="flex.messaging.services.RemotingService"
messageTypes="flex.messaging.messages.RemotingMessage">





*










6) Now add a compiler directive for the services-config.xml file you just created. To do this, do the following:

  1. Right click on your project in Flex Builder and select "Properties".
  2. In the Properties dialog, click on "Flex Compiler".
  3. In the "Additional compiler arguments" textfield, you need to add an additional directive telling Flex the location of your services-config.xml file and its location on your machine. In my case this file is in my default Flex Project location, and my directive looks like the block below. What I added starts with "-services":
  4. -locale en_US -services "/Users/my-user-name/Documents/Flex Builder 2/AMFPHPTest/services/services-config.xml".

    Note that in my case it was necessary to provide the full path to the file. This may not be necessary in your case.
  5. Click OK in the Properties dialog.
  6. If you get errors in Flex stating that the services-config.xml file can't be found, then the path to it is wrong. If it is wrong, an error will show up immediately in the "Problems" pane of Flex Builder. If you do not get errors, then your services-config.xml file is being compiled into your project when you click debug or run.

6) In the Application mxml file for your Flex Project, you're going to want something like this:







import mx.rpc.remoting.RemoteObject;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;

[Bindable]
public var resObject:Object;

public function resultHandler(event:ResultEvent):void {
// Do something
resObject = event.result;
result_text.text = "Success! The title of your node is: " + event.result.title;
}

public function faultHandler (event:FaultEvent):void {
// Deal with event.faultstring, etc.
result_text.text = "fault: " + event.fault.toString();
}
]]>




Here's a quick piece-by-piece of the really important bits:

  1. Declare the RemoteObject and method with which we will connect to the node service. That looks like this:


    • The ID is local to the flex project, specific to the RemoteObject, and is not associated with our services-config.xml
    • The Source is the node service
    • The destination matches the destination ID of the service we declared in services-config.xml
    • The method name is the method of the node service we want to call
    • The rest should be relatively self-explanatory
  2. Import the classes / packages we need. That looks like this:
  3. import mx.rpc.remoting.RemoteObject;
    import mx.rpc.events.ResultEvent;
    import mx.rpc.events.FaultEvent;
  4. Declare the button used to invoke the call to the service. That looks like this:
    • The click event uses the ID we gave our RemoteObject to first get the specific operation (method) we want to call and then send the request with a NID of 1. In my case this is a Drupal page with a title of "TestPage". You can change the NID to any node you have published.

No comments:

Post a Comment