Drupal And Flash Platform hybrid applications
-
Upload
josh-kopel -
Category
Technology
-
view
3.827 -
download
7
description
Transcript of Drupal And Flash Platform hybrid applications
![Page 1: Drupal And Flash Platform hybrid applications](https://reader036.fdocuments.us/reader036/viewer/2022062312/55635065d8b42aed538b4c9c/html5/thumbnails/1.jpg)
Drupal and Flash Platformhybrid applications
Pacific North West Drupal Summit
10/24/2009Josh Kopel
![Page 2: Drupal And Flash Platform hybrid applications](https://reader036.fdocuments.us/reader036/viewer/2022062312/55635065d8b42aed538b4c9c/html5/thumbnails/2.jpg)
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 (!)
![Page 3: Drupal And Flash Platform hybrid applications](https://reader036.fdocuments.us/reader036/viewer/2022062312/55635065d8b42aed538b4c9c/html5/thumbnails/3.jpg)
Flashgood or evil?
![Page 4: Drupal And Flash Platform hybrid applications](https://reader036.fdocuments.us/reader036/viewer/2022062312/55635065d8b42aed538b4c9c/html5/thumbnails/4.jpg)
Flashgood or evil?
![Page 5: Drupal And Flash Platform hybrid applications](https://reader036.fdocuments.us/reader036/viewer/2022062312/55635065d8b42aed538b4c9c/html5/thumbnails/5.jpg)
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.
![Page 6: Drupal And Flash Platform hybrid applications](https://reader036.fdocuments.us/reader036/viewer/2022062312/55635065d8b42aed538b4c9c/html5/thumbnails/6.jpg)
Quick demo
![Page 7: Drupal And Flash Platform hybrid applications](https://reader036.fdocuments.us/reader036/viewer/2022062312/55635065d8b42aed538b4c9c/html5/thumbnails/7.jpg)
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
![Page 8: Drupal And Flash Platform hybrid applications](https://reader036.fdocuments.us/reader036/viewer/2022062312/55635065d8b42aed538b4c9c/html5/thumbnails/8.jpg)
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
![Page 9: Drupal And Flash Platform hybrid applications](https://reader036.fdocuments.us/reader036/viewer/2022062312/55635065d8b42aed538b4c9c/html5/thumbnails/9.jpg)
The Drupal side
• Services module• Authentication module(s)• Service module(s)• Server module(s)• External (un)serialize code (i.e.
AMFPHP)
![Page 10: Drupal And Flash Platform hybrid applications](https://reader036.fdocuments.us/reader036/viewer/2022062312/55635065d8b42aed538b4c9c/html5/thumbnails/10.jpg)
The Drupal sideDrupal
Services Module
Service (Module)
Auth. Module
Server Module
Un/serialization
![Page 11: Drupal And Flash Platform hybrid applications](https://reader036.fdocuments.us/reader036/viewer/2022062312/55635065d8b42aed538b4c9c/html5/thumbnails/11.jpg)
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?
![Page 12: Drupal And Flash Platform hybrid applications](https://reader036.fdocuments.us/reader036/viewer/2022062312/55635065d8b42aed538b4c9c/html5/thumbnails/12.jpg)
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
![Page 13: Drupal And Flash Platform hybrid applications](https://reader036.fdocuments.us/reader036/viewer/2022062312/55635065d8b42aed538b4c9c/html5/thumbnails/13.jpg)
Server modules
• Provide wrappers for specific languages or serialization methods– AMF (Adobe Message Format)– XMLRPC– JSON– REST– SOAP– etc.
![Page 14: Drupal And Flash Platform hybrid applications](https://reader036.fdocuments.us/reader036/viewer/2022062312/55635065d8b42aed538b4c9c/html5/thumbnails/14.jpg)
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
![Page 15: Drupal And Flash Platform hybrid applications](https://reader036.fdocuments.us/reader036/viewer/2022062312/55635065d8b42aed538b4c9c/html5/thumbnails/15.jpg)
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
![Page 16: Drupal And Flash Platform hybrid applications](https://reader036.fdocuments.us/reader036/viewer/2022062312/55635065d8b42aed538b4c9c/html5/thumbnails/16.jpg)
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
![Page 17: Drupal And Flash Platform hybrid applications](https://reader036.fdocuments.us/reader036/viewer/2022062312/55635065d8b42aed538b4c9c/html5/thumbnails/17.jpg)
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
![Page 18: Drupal And Flash Platform hybrid applications](https://reader036.fdocuments.us/reader036/viewer/2022062312/55635065d8b42aed538b4c9c/html5/thumbnails/18.jpg)
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
![Page 19: Drupal And Flash Platform hybrid applications](https://reader036.fdocuments.us/reader036/viewer/2022062312/55635065d8b42aed538b4c9c/html5/thumbnails/19.jpg)
The SWF sideBrowser
HTML Page (DOM)
Flash Player
AS3 Application CodeUn/
SerializationClasses
FlashVars
JS
![Page 20: Drupal And Flash Platform hybrid applications](https://reader036.fdocuments.us/reader036/viewer/2022062312/55635065d8b42aed538b4c9c/html5/thumbnails/20.jpg)
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
![Page 21: Drupal And Flash Platform hybrid applications](https://reader036.fdocuments.us/reader036/viewer/2022062312/55635065d8b42aed538b4c9c/html5/thumbnails/21.jpg)
Review authentication needs
• Do you need to save data or register users?
• Can you request a username/password?– In html– In SWF
![Page 22: Drupal And Flash Platform hybrid applications](https://reader036.fdocuments.us/reader036/viewer/2022062312/55635065d8b42aed538b4c9c/html5/thumbnails/22.jpg)
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
![Page 23: Drupal And Flash Platform hybrid applications](https://reader036.fdocuments.us/reader036/viewer/2022062312/55635065d8b42aed538b4c9c/html5/thumbnails/23.jpg)
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/)
![Page 24: Drupal And Flash Platform hybrid applications](https://reader036.fdocuments.us/reader036/viewer/2022062312/55635065d8b42aed538b4c9c/html5/thumbnails/24.jpg)
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/
![Page 25: Drupal And Flash Platform hybrid applications](https://reader036.fdocuments.us/reader036/viewer/2022062312/55635065d8b42aed538b4c9c/html5/thumbnails/25.jpg)
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)
![Page 26: Drupal And Flash Platform hybrid applications](https://reader036.fdocuments.us/reader036/viewer/2022062312/55635065d8b42aed538b4c9c/html5/thumbnails/26.jpg)
Other resources
• Essential ActionScript 3.0 by Colin Moock
• Flash with Drupal by Travis Tidwell• OpenSource Flash http://osflash.org/