The document discusses building Drupal modules using the Flex framework. It begins with an overview of Flex, including what it is, the development tools available, and examples of Flex applications. It then discusses reasons why Drupal and Flex can be used together, such as for real-time features. The document demonstrates a Flex gallery module called Fx Gallery, and discusses its features and development process. It describes how Flex communicates with Drupal using XML-RPC and the roles of the PHP and Flex code.
Boost PC performance: How more available memory can improve productivity
Drupal and-flex-drupal camp
1. Building Drupal
modules with Flex
Replace with
a graphic
White Master
5.5” Tall & 4.3” Wide
Mihai Corlan
Platform Evangelist, Adobe Systems
Twi er: mcorlan
Drupal Camp 2010, Timisoara
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 1
2. Agenda
What is the Flex framework?
Why use Flex framework with Drupal?
Fx Gallery: A Drupal module for displaying pictures
Q&A
®
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 2
3. What is the Flex framework?
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 3
4. Flex Framework
Application Framework
Open Source
Packaged as an SDK:
• MXML/AS3 languages
• compilers/debuggers
• Rich Components Library
Flex Framework
In the Web Browser On the Desktop
Flash Player Adobe AIR
®
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 4
5. Flex’s rich components library
Controls Layout Navigators
Charts
®
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 5
6. Developers Tools for building Flex apps
If you are the text editor type guy, you can use the free Flex SDK
If you prefer working with IDEs, you can use Flash Builder 4
Flash Builder 4
• Built on the Eclipse platform
• Supports Mac OS and Windows
• Standalone version and plug-in version
• Free for Students/Professors
• 60-day trial installation
• Can be installed with PDT, Zend Studio…
®
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 6
7. Flash Builder Free License for all of you!!!!
h ps://freeriatools.adobe.com/ exevent
Event Code: DrupalCamp
®
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 7
8. Still what is Flex…
…and what’s good for?
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 8
9. Rich Internet Applications
One of the easiest way to build RIA is using Flex
®
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 9
10. RIA brings the best of the two worlds
WEB DESKTOP
Reach Rich
RIA & Flex
®
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 10
11. Examples of Flex apps
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 11
12. Why Drupal and Flex?
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 12
13. Drupal + Flex
Real Time
Flash
Messaging
Expressiveness
Live Video/Audio
Streaming
Real Time
Collaboration
Sky is the limit
Augmented
Reality
P2P &
Multicasting
®
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 13
14. Flash Player & AIR 2 on mobile phones
+
Flash Player 10.1 and Adobe AIR are coming
to Android this year!
®
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 14
15. Fx Gallery
Building a Drupal module with Flex
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 15
16. What is Fx Gallery
It is an image gallery module for Drupal created with Flex
It doesn’t have any dependencies
It has 2 views: a widget and a gallery view
e gallery view supports full screen mode
It aggregates pictures from the local Drupal installations, Flickr,
or Picasa
It is Open Source and thus additional features can be added by
the community
®
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 16
17. Demo time
Fx Gallery in action
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 17
18. e making off of Fx Gallery
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 18
19. Tools
We used:
Illustrator
Flash Builder
Eclipse PDT
We started with prototypes created in Illustrator
en we used Flash Builder / Eclipse PDT to write the PHP / Flex
code
®
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 19
20. Frameworks & libraries
We used ve ActionScript libraries:
For Flickr h p://code.google.com/p/as3 ickrlib/
For Picasa h p://code.google.com/p/picasa ashapi/
For XML-RPC communication
h p://sf.net/projects/xmlrpc ash
Tweening library
h p://blog.greensock.com/overwritemanager/
As3corelib library h p://code.google.com/p/as3corelib/
We used Display Shelf component for cover ow view (Ely
Green eld)
®
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 20
21. Flex – Drupal communication
e Flex client communicates with Drupal using XML-RPC
services
We store in the database few information:
Local albums names
Local pictures information (name, date)
Comments for the local pictures
Flickr and Picasa accounts (username and API key for Flickr)
Module se ings (colors, size, etc)
®
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 21
22. PHP code
ere is not much PHP code
Installation script (creating the tables, thumbnail folder)
Hooks for default entries (Administer …)
Functions for reading/storing information regarding local albums, Flickr
and Picasa accounts etc
®
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 22
23. Ge ing pictures from Flickr/Picasa
e client makes requests to the cloud services in order to
retrieve:
Available albums
Picture information (title, date, URL)
Picture bits
All this information are not routed through Drupal web server, so
there is no bandwidth cost or server loading while watching
pictures from Flickr or Picasa
®
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 23
24. Work ows for building Flex apps
Create the Design in
Photoshop or Illustrator
Transform it into a Flex app
In Flash Catalyst
Add the business logic
In Flash Builder
®
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 24
25. App in a Week Webinar – June 7th-10th
You can read more and nd the link for signing in on my blog
corlan.org
®
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 25
26. Q & A time!
Try Flash Builder and Flash Catalyst:
h p://www.adobe.com/go/ ashbuilder
h p://www.adobe.com/go/ ashcatalyst
Fx Gallery page:
h p://corlan.org/creating-drupal-modules-with- ex/fx-gallery-drupal-module/
Ge ing up to speed with Flex:
h p://www.adobe.com/devnet/ ex/
Happy to hear your feedback
Looking for contributors
®
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 26
27. ank you! Replace with
a graphic
White Master
5.5” Tall & 4.3” Wide
ank You!
mihai.corlan@adobe.com
h p://corlan.org
Twi er: mcorlan
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 27
29. Restaurant Menu – Take 1
Dish #1
Water 150 ml, salt 2 gr, sugar 2 gr, 1 onion, 6 tomatoes, 1 red pepper, 1
spoon of olive oil, 1 spoon of vinegar
®
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 29
30. Restaurant Menu – Take 2
Gazpacho (traditional Spanish tomato soup) – served cold
Ingredients: Tomatoes, Onion, Red Pepper, Olive Oil, Vinegar, Salt
Note: You can see this dish below or have a taste at the bar.
®
Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 30