blogginglemon

This is the first post of a serie called "Playing with... ". I play with a lot of libraries, frameworks, etc.. and this will hopefully be a way of forcing me to write something about those experiments.

After the introduction on the "why" of Drupal and Flash (see this post if you missed it), let's start to build something a bit more concrete.

In this example we will create a basic example of Flash and Drupal communication. We will:

• install Drupal and the needed modules
• create some content
• create a small Flash interface and try to connect to Drupal to retrieve some content

Let's see the result first (you need to be logged in to access any "Page" content)

Notes and requirements

• I chose Flash (vs Flex) on purpose: all the examples you find around are usually built on Flex, and i just wanted to show that you can easily do it in Flash too.
• For the sake of simplicity i will use a library created by DPDK for the remoting part (aka call Drupal amfphp services from Flash).
• You'll need a local (or remote) server and a free MySql DB to install Drupal.

Ok, let's start!

Basic Drupal install

(skip the first steps if you already have a working Drupal site)

• create a new folder in your local server (i called it Drash, contraction of drupal-flash)
• download the last Drupal core release from http://www.drupal.org, unzip, rename it to "drupal" (optional, but if you don't rename it, make sure that you adjust all the following paths) and put it in the folder you just created
• create a database on your local server and a user to access it (or use the default user)
• rename the file called "default.settings.php" (located in drupal/sites/default) to "settings.php"
• open this file and change the database settings on line 92, change the 4 parameters as needed.
• go to http://localhost/[your/folder/path]/drupal/install.php, choose "install in English" (if working on a remote server, you might need to update the drupal/default/files permissions. See error messages if any)
• if everything went fine, you should be prompted to fill a form with some data, enter what you want
• create some "page" content (content mgt -> create content -> page). I created 3 pages: Test Page 1, Test Page 2, Test Page 3.

Your Drupal site is ready!

Drupal services part

Now we need to setup Drupal to allow us to interact from the outside (Flash for ex.) To do this we will install the Services and Amfphp modules.

• download the services module, the amfphp module, unzip and put them both in drupal/sites/all/modules (if you don't already have a "modules" folder, create it)
• download the amfphp library, unzip it and put it IN the amfphp module (so you should get drupal/sites/all/modules/amfphp/amfphp/gateway.php for ex.)
• go to "administer"->"site building"->"modules" and enable "services" in Services, "amfphp" in Services-server, "Node service", "System service", "User service" in Services-services and save.
• go to "administer"->"site building"->"services". This is the main interface to test your services. Let's see if everything is ok.
  • First check that you get a success message when clicking on "AMFPHP - /services/amfphp". This is the path of your gateway, copy it's URL somewhere, you'll need it afterwards
  • Then go back and click on "system-connect" (in "System") and click "call method". You should get an object with a sessid and various other things.

Your Drupal site is ready for external access!

Flash part

ok, here comes the fun!

• in the folder you created at first ("Drash" in my case) create a new folder called "flash". Open your IDE of choice (FDT, FlashBuilder... or even Flash IDE if you don't like code completion...) and create a new Actionscript project from this folder.
• download the DPDK library sources from SVN. We will use it for accessing the amfphp services from Flash.
• import the DPDK swc or src (src consist of 2 folders located in dpdk/src/flash/libraries and dpdk/src/flash/project)
• create the main class, and try to call the connect method (adapt amfphp gateway path to your needs, it should point to the drupal services gateway (the url you copied before -see the next to last step in "Drupal services part" above-)

protected function _connectToDrupal() : void
{
 _service = new DrupalService("../../drupal/services/amfphp");
 _service.addEventListener(DrupalEvent.SYSTEM_CONNECT, _onSystemConnect);
 _service.addEventListener(DrupalEvent.ERROR_SYSTEM_CONNECT, _onSystemConnectError);
 _service.systemConnect();
}


private function _onSystemConnectError(event : DrupalEvent) : void 
{
 trace("on system connect error");
}

private function _onSystemConnect(event : DrupalEvent) : void 
{
 trace("on system connect success!");
}

if everything is working ok, you should get a success trace statement. If not make sure you got the right path to the gateway (you can also use an absolute path). If you get any strange error, try to embed your swf in an html container page, i had some weird issue when trying from the swf. If you use a remote server, you might need to put a crossdomain.xml file at the root of your server to access it from a local test.

You can then extend this example with the other service calls. The source to create the example above is available as a Gist on Github