drupal and-flex-drupal camp

Download Drupal and-flex-drupal camp

Post on 08-May-2015

2.523 views

Category:

Technology

0 download

Embed Size (px)

TRANSCRIPT

  • 1.Building Drupal modules with Flex Replace witha graphic White Master5.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 FrameworkApplication Framework Open Source Packaged as an SDK: MXML/AS3 languages compilers/debuggers Rich Components LibraryFlex Framework In the Web Browser On the DesktopFlash Player Adobe AIR Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential.4 5. Flexs rich components libraryControls 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 4Flash 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 Flexand whats good for?Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 8 9. Rich Internet ApplicationsOne 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 worldsWEBDESKTOPReachRichRIA & 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 FlashMessaging ExpressivenessLive Video/AudioStreamingReal Time CollaborationSky is the limitAugmentedReality 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 FlexCopyright 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 doesnt 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 bythe community Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 16 17. Demo timeFx Gallery in actionCopyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 17 18. e making o 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 / Flexcode 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 (ElyGreen 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-RPCservices 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 toretrieve: 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 appsCreate the Design inPhotoshop 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/ ashbuilderh 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 contributorsCopyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 26 27. ank you! Replace with a graphicWhite Master 5.5 Tall & 4.3 Wideank You! mihai.corlan@adobe.com h p://corlan.org Twi er: mcorlanCopyright 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 #1Water 150 ml, salt 2 gr, sugar 2 gr, 1 onion, 6 tomatoes, 1 red pepper, 1spoon 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 coldIngredients: Tomatoes, Onion, Red Pepper, Olive Oil, Vinegar, SaltNote: 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