Drupal and Flash Platformhybrid applications

Pacific North West Drupal Summit

10/24/2009Josh Kopel

Hybrid application

• Drupal provides a powerful way to source and manage data for SWF applications

• Flash player provides a “rich” environment for advanced interactions–Multi-touch– Desktop migration (Air)– iPhone (!)

Flashgood or evil?

Flashgood or evil?

Why call it SWF

• “Flash platform”– Anything that compiles to the SWF

format for playback within the Flash Player• Flash• Flex

– Flash has often meant animation. We are talking about true applications.

Quick demo

Overview of SWF Drupal

Browser

HTML Page

Flash Player

AS3 Application

Code

Un/Serialization

Classes

Drupal

Services Module

Service (Module)

Auth. Module

Server Module

Un/serialization

Services means

• Reusable data (SWF or AJAX)• Provide the same “site” to multiple

client technologies• Data is available at either end in the

same format via serialization– Objects– Arrays– Number types– Strings

The Drupal side

• Services module• Authentication module(s)• Service module(s)• Server module(s)• External (un)serialize code (i.e.

AMFPHP)

The Drupal sideDrupal

Services Module

Service (Module)

Auth. Module

Server Module

Un/serialization

Services Module An API for remote applications

• Provides end point for service calls• Wraps server and service modules in

a standard API• Supports multiple authentication

methods*

*We can haz oauth?

Services Module core services

systemsystem.connec

tfilefile.getfile.getNodeFil

esmenumenu.get

nodenode.getnode.viewnode.savenode.deletesearchsearch.nodessearch.conte

ntsearch.users

taxonomytaxonomy.saveTermtaxonomy.saveVocabular

ytaxonomy.getTreetaxonomy.selectNodesviewsviews.getviews.exportviews.import

Server modules

• Provide wrappers for specific languages or serialization methods– AMF (Adobe Message Format)– XMLRPC– JSON– REST– SOAP– etc.

Custom service modules

• Provide access to any Drupal function• Provide SIMPLER access to nodes– Parse the data on the server side– Only send the data needed by the flash

app

Authentication

• API Keys–Make a unique key based upon an

application name and domain– SWF must pass the hashed key back in

order to authenticate– Key must be embedded in or passed to

Flash player

Authentication

• Session based– Use standard Drupal HTML login– Pull session ID into SWF• via javascript using

flash.external.ExternalInterface• Via PHP using custom PHP

– Use existing session for service calls

Authentication

• Session based– Use system.connect() to return an

anonymous session ID– Pass that back on any service call

(logged in as anonymous)– Or call user.login with a

username/password + session ID• Embedded• Requested

– Receive a authenticated session ID

The SWF side

• All calls brokered by the browser• Restricted by player security sandbox

(learn about crossdomain.xml)• Receive startup parameters from

flashVars• Manipulate DOM through

externalInterface

The SWF sideBrowser

HTML Page (DOM)

Flash Player

AS3 Application CodeUn/

SerializationClasses

FlashVars

JS

Development methodology

• AS3 is “stateful”, asynchonous, & event driven

• learn the language and use a good framework– pureMVC– robotlegs

• Existing open source classes are available for almost any protocol

Review authentication needs

• Do you need to save data or register users?

• Can you request a username/password?– In html– In SWF

Review protocol choices

– AMFPHP • Binary protocol means it is fast and compact• Not “human readable”• Adobe specific (natively parsed)

– XML• Text based protocol can get verbose• Easier to debug

– JSON• Text based protocol can get verbose• Can be easily consumed by AJAX or other

services

Debugging

• Get the debug player (www.adobe.com/support/flashplayer/downloads.html)

• Charles Proxy (charlesproxy.com)• LiveHTTPHeaders

(livehttpheaders.mozdev.org/)• Flash Tracer for FF

(www.sephiroth.it/firefox/flashtracer/)

Serialization classes

• AMFPHP – nl.dpdk.services.gephyr complete “high level” Drupal connection class using AMFPHP

• AMFPHP – com.kylebrekke.amfphp• XMLRPC – com.mattism.http.xmlrpc

http://danielmclaren.net/2007/08/03/xmlrpc-for-actionscript-30-free-library

• JSON – as3corlib http://code.google.com/p/as3corelib/

IDEs and compilers

• Adobe Flash Professional CS4 (if you need timeline/library)

• Adobe Flash Builder™ 4• Other Adobe products• Flex SDK complier• FlashDevelop (my favorite)• Eclipse-ant-Flex SDK• Komodo (with plugins)

Other resources

• Essential ActionScript 3.0 by Colin Moock

• Flash with Drupal by Travis Tidwell• OpenSource Flash http://osflash.org/