SlideShare a Scribd company logo
1 of 30
Download to read offline
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
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
What is the Flex framework?




Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential.   3
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
Flex’s rich components library

Controls                                                                                 Layout   Navigators




                                                                                                  Charts




                                                                                                               ®




Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential.   5
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
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
Still what is Flex…



                                                  …and what’s good for?



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




Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential.   11
Why Drupal and Flex?




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



                   Building a Drupal module with Flex



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



                                                            Fx Gallery in action



Copyright 2010 Adobe Systems Incorporated. All rights reserved. Adobe con dential.   17
e making off of Fx Gallery




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




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

More Related Content

What's hot

Over the air 2.5 - Adobe AIR for Android
Over the air 2.5 - Adobe AIR for AndroidOver the air 2.5 - Adobe AIR for Android
Over the air 2.5 - Adobe AIR for AndroidMichael Chaize
 
Adobe Flex体系架构深度剖析
Adobe Flex体系架构深度剖析Adobe Flex体系架构深度剖析
Adobe Flex体系架构深度剖析George Ang
 
X pages jumpstart jmp101
X pages jumpstart jmp101X pages jumpstart jmp101
X pages jumpstart jmp101pdhannan
 
Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...
Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...
Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...Skills Matter
 
【13-C-3】 RIA 開発をとりまく技術の進化と環境の変化
【13-C-3】 RIA 開発をとりまく技術の進化と環境の変化【13-C-3】 RIA 開発をとりまく技術の進化と環境の変化
【13-C-3】 RIA 開発をとりまく技術の進化と環境の変化devsumi2009
 
OpenNTF.org: Celebrating 10 years of community driven open source (Speedgeeki...
OpenNTF.org: Celebrating 10 years of community driven open source (Speedgeeki...OpenNTF.org: Celebrating 10 years of community driven open source (Speedgeeki...
OpenNTF.org: Celebrating 10 years of community driven open source (Speedgeeki...John Head
 
Domino app dev competitive advantage final
Domino app dev competitive advantage finalDomino app dev competitive advantage final
Domino app dev competitive advantage finalJohn Head
 
ADOBE CREATIVE SUITE 5 Web Premiumご紹介
ADOBE CREATIVE SUITE 5 Web Premiumご紹介ADOBE CREATIVE SUITE 5 Web Premiumご紹介
ADOBE CREATIVE SUITE 5 Web Premiumご紹介Mariko Nishimura
 
“Kum Bah Yah” meets “Lets Kick Butt” : The Integration of IBM Lotus Notes and...
“Kum Bah Yah” meets “Lets Kick Butt” : The Integration of IBM Lotus Notes and...“Kum Bah Yah” meets “Lets Kick Butt” : The Integration of IBM Lotus Notes and...
“Kum Bah Yah” meets “Lets Kick Butt” : The Integration of IBM Lotus Notes and...John Head
 
Xebia adobe flash mobile applications
Xebia adobe flash mobile applicationsXebia adobe flash mobile applications
Xebia adobe flash mobile applicationsMichael Chaize
 
Lotusphere 2009: INV102 Lotus Notes And Domino Strategy 2009
Lotusphere 2009: INV102 Lotus Notes And Domino Strategy 2009Lotusphere 2009: INV102 Lotus Notes And Domino Strategy 2009
Lotusphere 2009: INV102 Lotus Notes And Domino Strategy 2009Ed Brill
 
MWLUG 2011: Notes/Domino Application Development Competitive Advantage
MWLUG 2011: Notes/Domino Application Development Competitive AdvantageMWLUG 2011: Notes/Domino Application Development Competitive Advantage
MWLUG 2011: Notes/Domino Application Development Competitive AdvantageJohn Head
 
IBM Lotus Notes/Domino App. Dev. Competitive Advantage: The Social Business E...
IBM Lotus Notes/Domino App. Dev. Competitive Advantage: The Social Business E...IBM Lotus Notes/Domino App. Dev. Competitive Advantage: The Social Business E...
IBM Lotus Notes/Domino App. Dev. Competitive Advantage: The Social Business E...John Head
 
AD112: Usability Lessons From the Worlds Largest XPages Project (MWLUG)
AD112: Usability Lessons From the Worlds Largest XPages Project (MWLUG)AD112: Usability Lessons From the Worlds Largest XPages Project (MWLUG)
AD112: Usability Lessons From the Worlds Largest XPages Project (MWLUG)John Head
 
IBM Lotus Notes/Domino Application Development Competitive Advantage : The So...
IBM Lotus Notes/Domino Application Development Competitive Advantage : The So...IBM Lotus Notes/Domino Application Development Competitive Advantage : The So...
IBM Lotus Notes/Domino Application Development Competitive Advantage : The So...John Head
 
Super feats of integration x pages with symphony sharepoint and office
Super feats of integration  x pages with symphony sharepoint and officeSuper feats of integration  x pages with symphony sharepoint and office
Super feats of integration x pages with symphony sharepoint and officeJohn Head
 

What's hot (20)

Over the air 2.5 - Adobe AIR for Android
Over the air 2.5 - Adobe AIR for AndroidOver the air 2.5 - Adobe AIR for Android
Over the air 2.5 - Adobe AIR for Android
 
Adobe Flex体系架构深度剖析
Adobe Flex体系架构深度剖析Adobe Flex体系架构深度剖析
Adobe Flex体系架构深度剖析
 
X pages jumpstart jmp101
X pages jumpstart jmp101X pages jumpstart jmp101
X pages jumpstart jmp101
 
Ios part1
Ios part1Ios part1
Ios part1
 
Jd greece-2012-joomla-community-abc
Jd greece-2012-joomla-community-abcJd greece-2012-joomla-community-abc
Jd greece-2012-joomla-community-abc
 
Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...
Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...
Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...
 
【13-C-3】 RIA 開発をとりまく技術の進化と環境の変化
【13-C-3】 RIA 開発をとりまく技術の進化と環境の変化【13-C-3】 RIA 開発をとりまく技術の進化と環境の変化
【13-C-3】 RIA 開発をとりまく技術の進化と環境の変化
 
OpenNTF.org: Celebrating 10 years of community driven open source (Speedgeeki...
OpenNTF.org: Celebrating 10 years of community driven open source (Speedgeeki...OpenNTF.org: Celebrating 10 years of community driven open source (Speedgeeki...
OpenNTF.org: Celebrating 10 years of community driven open source (Speedgeeki...
 
Domino app dev competitive advantage final
Domino app dev competitive advantage finalDomino app dev competitive advantage final
Domino app dev competitive advantage final
 
Cold Fusion Deck
Cold Fusion DeckCold Fusion Deck
Cold Fusion Deck
 
ADOBE CREATIVE SUITE 5 Web Premiumご紹介
ADOBE CREATIVE SUITE 5 Web Premiumご紹介ADOBE CREATIVE SUITE 5 Web Premiumご紹介
ADOBE CREATIVE SUITE 5 Web Premiumご紹介
 
“Kum Bah Yah” meets “Lets Kick Butt” : The Integration of IBM Lotus Notes and...
“Kum Bah Yah” meets “Lets Kick Butt” : The Integration of IBM Lotus Notes and...“Kum Bah Yah” meets “Lets Kick Butt” : The Integration of IBM Lotus Notes and...
“Kum Bah Yah” meets “Lets Kick Butt” : The Integration of IBM Lotus Notes and...
 
Xebia adobe flash mobile applications
Xebia adobe flash mobile applicationsXebia adobe flash mobile applications
Xebia adobe flash mobile applications
 
Lotusphere 2009: INV102 Lotus Notes And Domino Strategy 2009
Lotusphere 2009: INV102 Lotus Notes And Domino Strategy 2009Lotusphere 2009: INV102 Lotus Notes And Domino Strategy 2009
Lotusphere 2009: INV102 Lotus Notes And Domino Strategy 2009
 
The ABC of Joomla Community
The ABC of Joomla CommunityThe ABC of Joomla Community
The ABC of Joomla Community
 
MWLUG 2011: Notes/Domino Application Development Competitive Advantage
MWLUG 2011: Notes/Domino Application Development Competitive AdvantageMWLUG 2011: Notes/Domino Application Development Competitive Advantage
MWLUG 2011: Notes/Domino Application Development Competitive Advantage
 
IBM Lotus Notes/Domino App. Dev. Competitive Advantage: The Social Business E...
IBM Lotus Notes/Domino App. Dev. Competitive Advantage: The Social Business E...IBM Lotus Notes/Domino App. Dev. Competitive Advantage: The Social Business E...
IBM Lotus Notes/Domino App. Dev. Competitive Advantage: The Social Business E...
 
AD112: Usability Lessons From the Worlds Largest XPages Project (MWLUG)
AD112: Usability Lessons From the Worlds Largest XPages Project (MWLUG)AD112: Usability Lessons From the Worlds Largest XPages Project (MWLUG)
AD112: Usability Lessons From the Worlds Largest XPages Project (MWLUG)
 
IBM Lotus Notes/Domino Application Development Competitive Advantage : The So...
IBM Lotus Notes/Domino Application Development Competitive Advantage : The So...IBM Lotus Notes/Domino Application Development Competitive Advantage : The So...
IBM Lotus Notes/Domino Application Development Competitive Advantage : The So...
 
Super feats of integration x pages with symphony sharepoint and office
Super feats of integration  x pages with symphony sharepoint and officeSuper feats of integration  x pages with symphony sharepoint and office
Super feats of integration x pages with symphony sharepoint and office
 

Viewers also liked

An Introduction to Videoblogging
An Introduction to VideobloggingAn Introduction to Videoblogging
An Introduction to Videobloggingvogmae
 
Optimised - Programme start up
Optimised - Programme start upOptimised - Programme start up
Optimised - Programme start upSimon Misiewicz
 
What do you do if
What do you do ifWhat do you do if
What do you do ifMary Isabel
 
I can cook a delicious chicken
I can cook a delicious chickenI can cook a delicious chicken
I can cook a delicious chickenMary Isabel
 
P pfor benspeaks parents2
P pfor benspeaks parents2P pfor benspeaks parents2
P pfor benspeaks parents2judygio
 
Human Capital Strategies In A Slow Recovery
Human Capital Strategies In A Slow RecoveryHuman Capital Strategies In A Slow Recovery
Human Capital Strategies In A Slow Recoverytmccarrey
 
Focus On Manufacturing
Focus On ManufacturingFocus On Manufacturing
Focus On Manufacturingtmccarrey
 
Educação a Distância e Tutoria
Educação a Distância e TutoriaEducação a Distância e Tutoria
Educação a Distância e TutoriaCristiane Moore
 
Ostrava
OstravaOstrava
Ostravapesak
 
Fontface issue 4
Fontface issue 4Fontface issue 4
Fontface issue 4Gemmalea
 
National Parks
National ParksNational Parks
National Parkstpuetz
 
Kyle Fountain Portfolio
Kyle Fountain PortfolioKyle Fountain Portfolio
Kyle Fountain Portfoliokylef77
 
Find company reports in EBSCO Business Source Complete
Find company reports in EBSCO Business Source CompleteFind company reports in EBSCO Business Source Complete
Find company reports in EBSCO Business Source CompleteJulie Anne Kent
 
คอมพิวเตอร์
คอมพิวเตอร์คอมพิวเตอร์
คอมพิวเตอร์deepre
 

Viewers also liked (20)

Justin beiber[1]
Justin beiber[1]Justin beiber[1]
Justin beiber[1]
 
An Introduction to Videoblogging
An Introduction to VideobloggingAn Introduction to Videoblogging
An Introduction to Videoblogging
 
Optimised - Programme start up
Optimised - Programme start upOptimised - Programme start up
Optimised - Programme start up
 
What do you do if
What do you do ifWhat do you do if
What do you do if
 
Catalogo camp 9
Catalogo camp 9Catalogo camp 9
Catalogo camp 9
 
I can cook a delicious chicken
I can cook a delicious chickenI can cook a delicious chicken
I can cook a delicious chicken
 
WP7 -­‐ Dissemination
WP7 -­‐ DisseminationWP7 -­‐ Dissemination
WP7 -­‐ Dissemination
 
P pfor benspeaks parents2
P pfor benspeaks parents2P pfor benspeaks parents2
P pfor benspeaks parents2
 
Human Capital Strategies In A Slow Recovery
Human Capital Strategies In A Slow RecoveryHuman Capital Strategies In A Slow Recovery
Human Capital Strategies In A Slow Recovery
 
Focus On Manufacturing
Focus On ManufacturingFocus On Manufacturing
Focus On Manufacturing
 
Educação a Distância e Tutoria
Educação a Distância e TutoriaEducação a Distância e Tutoria
Educação a Distância e Tutoria
 
Ostrava
OstravaOstrava
Ostrava
 
Changeset
ChangesetChangeset
Changeset
 
Fontface issue 4
Fontface issue 4Fontface issue 4
Fontface issue 4
 
Jw day 7 (unit 3)
Jw day 7 (unit 3)Jw day 7 (unit 3)
Jw day 7 (unit 3)
 
National Parks
National ParksNational Parks
National Parks
 
Kyle Fountain Portfolio
Kyle Fountain PortfolioKyle Fountain Portfolio
Kyle Fountain Portfolio
 
Find company reports in EBSCO Business Source Complete
Find company reports in EBSCO Business Source CompleteFind company reports in EBSCO Business Source Complete
Find company reports in EBSCO Business Source Complete
 
An amazing man
An amazing manAn amazing man
An amazing man
 
คอมพิวเตอร์
คอมพิวเตอร์คอมพิวเตอร์
คอมพิวเตอร์
 

Similar to Drupal and-flex-drupal camp

Flex 4.5 and mobile development
Flex 4.5 and mobile developmentFlex 4.5 and mobile development
Flex 4.5 and mobile developmentMichael Chaize
 
Enrique Duvos: Adobe RIA Platform
Enrique Duvos: Adobe RIA PlatformEnrique Duvos: Adobe RIA Platform
Enrique Duvos: Adobe RIA PlatformInitium
 
AN INTRODUCTION TO APACHE FLEX
AN INTRODUCTION TO APACHE FLEXAN INTRODUCTION TO APACHE FLEX
AN INTRODUCTION TO APACHE FLEXJoseph Labrecque
 
Introduction to Flex
Introduction to FlexIntroduction to Flex
Introduction to Flexnamero999
 
Adobe jax2010 1_dashboard
Adobe jax2010 1_dashboardAdobe jax2010 1_dashboard
Adobe jax2010 1_dashboardguest9776673
 
Flex and .NET Integration
Flex and .NET IntegrationFlex and .NET Integration
Flex and .NET Integrationicaraion
 
Flash camp portugal - Let's talk about Flex baby
Flash camp portugal - Let's talk about Flex babyFlash camp portugal - Let's talk about Flex baby
Flash camp portugal - Let's talk about Flex babyMichael Chaize
 
Breizh camp adobe flex et les mobiles
Breizh camp   adobe flex et les mobilesBreizh camp   adobe flex et les mobiles
Breizh camp adobe flex et les mobilesMichael Chaize
 
JAX2010 Flex Java technical session: interactive dashboard
JAX2010 Flex Java technical session: interactive dashboardJAX2010 Flex Java technical session: interactive dashboard
JAX2010 Flex Java technical session: interactive dashboardMichael Chaize
 
Develop mobile applications with Flex
Develop mobile applications with FlexDevelop mobile applications with Flex
Develop mobile applications with FlexConFoo
 
Adobe flash platform java
Adobe flash platform javaAdobe flash platform java
Adobe flash platform javaCh'ti JUG
 
Adobe flash platform java
Adobe flash platform javaAdobe flash platform java
Adobe flash platform javaMichael Chaize
 
Adobeflex(2)
Adobeflex(2)Adobeflex(2)
Adobeflex(2)tomcoh
 
flex and flash platform
flex and flash platformflex and flash platform
flex and flash platformMuhammad Rodhy
 
Flex_Basic_Training
Flex_Basic_TrainingFlex_Basic_Training
Flex_Basic_Trainingguest25cec3
 
Starting mobile development
Starting mobile developmentStarting mobile development
Starting mobile developmentMihai Corlan
 

Similar to Drupal and-flex-drupal camp (20)

Flex 4.5 and mobile development
Flex 4.5 and mobile developmentFlex 4.5 and mobile development
Flex 4.5 and mobile development
 
Enrique Duvos: Adobe RIA Platform
Enrique Duvos: Adobe RIA PlatformEnrique Duvos: Adobe RIA Platform
Enrique Duvos: Adobe RIA Platform
 
AN INTRODUCTION TO APACHE FLEX
AN INTRODUCTION TO APACHE FLEXAN INTRODUCTION TO APACHE FLEX
AN INTRODUCTION TO APACHE FLEX
 
Introduction to Flex
Introduction to FlexIntroduction to Flex
Introduction to Flex
 
Adobe jax2010 1_dashboard
Adobe jax2010 1_dashboardAdobe jax2010 1_dashboard
Adobe jax2010 1_dashboard
 
Flex and .NET Integration
Flex and .NET IntegrationFlex and .NET Integration
Flex and .NET Integration
 
Jax2001 adobe keynote
Jax2001 adobe keynoteJax2001 adobe keynote
Jax2001 adobe keynote
 
Jax 2011 keynote
Jax 2011 keynoteJax 2011 keynote
Jax 2011 keynote
 
Flex and Java
Flex and JavaFlex and Java
Flex and Java
 
Montpellier - Flex UG
Montpellier - Flex UGMontpellier - Flex UG
Montpellier - Flex UG
 
Flash camp portugal - Let's talk about Flex baby
Flash camp portugal - Let's talk about Flex babyFlash camp portugal - Let's talk about Flex baby
Flash camp portugal - Let's talk about Flex baby
 
Breizh camp adobe flex et les mobiles
Breizh camp   adobe flex et les mobilesBreizh camp   adobe flex et les mobiles
Breizh camp adobe flex et les mobiles
 
JAX2010 Flex Java technical session: interactive dashboard
JAX2010 Flex Java technical session: interactive dashboardJAX2010 Flex Java technical session: interactive dashboard
JAX2010 Flex Java technical session: interactive dashboard
 
Develop mobile applications with Flex
Develop mobile applications with FlexDevelop mobile applications with Flex
Develop mobile applications with Flex
 
Adobe flash platform java
Adobe flash platform javaAdobe flash platform java
Adobe flash platform java
 
Adobe flash platform java
Adobe flash platform javaAdobe flash platform java
Adobe flash platform java
 
Adobeflex(2)
Adobeflex(2)Adobeflex(2)
Adobeflex(2)
 
flex and flash platform
flex and flash platformflex and flash platform
flex and flash platform
 
Flex_Basic_Training
Flex_Basic_TrainingFlex_Basic_Training
Flex_Basic_Training
 
Starting mobile development
Starting mobile developmentStarting mobile development
Starting mobile development
 

Recently uploaded

AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentationyogeshlabana357357
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Patrick Viafore
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty SecureFemke de Vroome
 
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptxBT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptxNeo4j
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfFIDO Alliance
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FIDO Alliance
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Hiroshi SHIBATA
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfSrushith Repakula
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceSamy Fodil
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsStefano
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIES VE
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctBrainSell Technologies
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...panagenda
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024Lorenzo Miniero
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe中 央社
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform EngineeringMarcus Vechiato
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfFIDO Alliance
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...FIDO Alliance
 

Recently uploaded (20)

AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptxBT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and Planning
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 

Drupal and-flex-drupal camp

  • 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