White Master

Replace with a graphic

5.5” Tall & 4.3” Wide

Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con!dential. 1

Building Drupal modules with Flex

Mihai Corlan Platform Evangelist, Adobe Systems

Twi"er: mcorlan

Drupal Camp 2010, Timisoara

®

Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con!dential. 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. 3

What is the Flex framework?

®

Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con!dential. 4

Flex Framework

Flash Player Adobe AIR

Flex Framework

In the Web Browser On the Desktop

Application Framework Open Source Packaged as an SDK: •  MXML/AS3 languages •  compilers/debuggers •  Rich Components Library

®

Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con!dential. 5

Flex’s rich components library

Controls Layout Navigators

Charts

®

Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con!dential. 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. 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. 8

Still what is Flex…

…and what’s good for?

®

Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con!dential. 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. 10

RIA brings the best of the two worlds

WEB DESKTOP

RIA & Flex

Reach Rich

Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con!dential. 11

Examples of Flex apps

Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con!dential. 12

Why Drupal and Flex?

®

Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con!dential. 13

Drupal + Flex

Flash Expressiveness

Live Video/Audio Streaming

Real Time Collaboration

Real Time Messaging

Augmented Reality

P2P & Multicasting

Sky is the limit

®

Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con!dential. 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. 15

Fx Gallery

Building a Drupal module with Flex

®

Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con!dential. 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. 17

Demo time

Fx Gallery in action

Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con!dential. 18

$e making off of Fx Gallery

®

Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con!dential. 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. 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. 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. 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. 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. 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. 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. 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

White Master

Replace with a graphic

5.5” Tall & 4.3” Wide

Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con!dential. 27

$ank you! $ank You!

mihai.corlan@adobe.com

h"p://corlan.org

Twi"er: mcorlan

®

Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con!dential. 28

®

Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con!dential. 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. 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.