Drupal and-flex-drupal camp
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Drupal and-flex-drupal camp

on

  • 3,225 views

 

Statistics

Views

Total Views
3,225
Views on SlideShare
3,210
Embed Views
15

Actions

Likes
0
Downloads
25
Comments
0

3 Embeds 15

http://www.slideshare.net 13
http://dew 1
http://192.168.0.30 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Drupal and-flex-drupal camp Presentation Transcript

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