Drupal and-flex-drupal camp

30

Click here to load reader

Transcript of Drupal and-flex-drupal camp

Page 1: Drupal and-flex-drupal camp

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

Page 2: Drupal and-flex-drupal camp

®

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

Page 3: Drupal and-flex-drupal camp

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

What is the Flex framework?

Page 4: Drupal and-flex-drupal camp

®

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

Page 5: Drupal and-flex-drupal camp

®

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

Flex’s rich components library

Controls Layout Navigators

Charts

Page 6: Drupal and-flex-drupal camp

®

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…

Page 7: Drupal and-flex-drupal camp

®

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

Page 8: Drupal and-flex-drupal camp

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

Still what is Flex…

…and what’s good for?

Page 9: Drupal and-flex-drupal camp

®

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

Page 10: Drupal and-flex-drupal camp

®

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

Page 11: Drupal and-flex-drupal camp

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

Examples of Flex apps

Page 12: Drupal and-flex-drupal camp

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

Why Drupal and Flex?

Page 13: Drupal and-flex-drupal camp

®

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

Page 14: Drupal and-flex-drupal camp

®

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!

+

Page 15: Drupal and-flex-drupal camp

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

Fx Gallery

Building a Drupal module with Flex

Page 16: Drupal and-flex-drupal camp

®

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

Page 17: Drupal and-flex-drupal camp

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

Demo time

Fx Gallery in action

Page 18: Drupal and-flex-drupal camp

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

$e making off of Fx Gallery

Page 19: Drupal and-flex-drupal camp

®

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

Page 20: Drupal and-flex-drupal camp

®

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)

Page 21: Drupal and-flex-drupal camp

®

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)

Page 22: Drupal and-flex-drupal camp

®

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

Page 23: Drupal and-flex-drupal camp

®

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

Page 24: Drupal and-flex-drupal camp

®

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

Page 25: Drupal and-flex-drupal camp

®

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

Page 26: Drupal and-flex-drupal camp

®

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

Page 27: Drupal and-flex-drupal camp

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!

[email protected]

h"p://corlan.org

Twi"er: mcorlan

Page 28: Drupal and-flex-drupal camp

®

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

Page 29: Drupal and-flex-drupal camp

®

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

Page 30: Drupal and-flex-drupal camp

®

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.