Drupal and-flex-drupal camp

  • 2,479 views
Uploaded on

 

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,479
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
25
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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