0
Flex & Drupal Integration Presented by:  Matthew Connerton
Matthew Connerton <ul><li>Who the heck is he? </li></ul><ul><ul><li>Flex Developer </li></ul></ul><ul><ul><li>Php Develope...
Today’s Session <ul><li>Flex What?? </li></ul><ul><li>Flex Myths </li></ul><ul><li>HTML & Flex </li></ul><ul><li>Flash & F...
Flex What? <ul><li>Flex is a  framework </li></ul><ul><li>Adobe has a commercial IDEs: </li></ul><ul><ul><li>Flex Builder ...
Why Flex? <ul><li>Rapid Application Development </li></ul><ul><li>Not complicated </li></ul><ul><li>Large community </li><...
Who Uses Flex? <ul><li>IBM  </li></ul><ul><li>SAP  </li></ul><ul><li>MTV  </li></ul><ul><li>Intel  </li></ul><ul><li>E*Tra...
Flex Myths <ul><li>You need a “Flex Player” </li></ul><ul><ul><li>(Flash Player is the only thing you need)  </li></ul></u...
Similarities Between XHTML & Flex  <ul><li>Both are XML based languages/markup (tags)  </li></ul><ul><li>Both can use high...
Differences Between HTML & Flex  <ul><li>Flex and ActionScript are compiled languages, not interpreted like HTML/CSS/JS/PH...
Similarities Between Flash & Flex  <ul><li>Both run on the Flash Player and AIR runtime  </li></ul><ul><li>Both have Actio...
Differences Between Flash & Flex  <ul><li>Flash has a time line, and art design tools  </li></ul><ul><li>Flash is targeted...
Just what is an RIA? <ul><li>RIA (Rich Internet Applications)  </li></ul><ul><li>Rich interface design, multimedia (images...
MXML & ActionScript Code <ul><li>MXML: </li></ul><ul><ul><li><mx:CheckBox label=”Click Me” click=”chkBoxClicked()”/>   </l...
CSS in Flex <ul><li>CSS can be loaded </li></ul><ul><li>CSS can be embedded  </li></ul><ul><li>CSS can be shared  </li></u...
Drupal Integration <ul><li>AMFPHP (module) </li></ul><ul><ul><li>this is a binary gateway for you to pass your data throug...
Example: eVoiceSpot Builder http://www.evoicespot.com
New Stuff (Flex 4)  <ul><li>Flash Catalyst  will be the designer-developer liaison  </li></ul><ul><li>If Flash Player has ...
Learn More <ul><li>Flex.org </li></ul><ul><li>Drupal Modules </li></ul><ul><ul><li>http://drupal.org/project/services </li...
Discussion <ul><li>Email me if you have any more questions </li></ul><ul><li>[email_address] </li></ul><ul><li>mrconnerton...
Upcoming SlideShare
Loading in...5
×

Flex & Drupal Integration

4,243

Published on

This is my presentation on integrating Drupal and Flex. Original content was pulled from http://www.slideshare.net/ccharlton

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,243
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
73
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Flex & Drupal Integration"

  1. 1. Flex & Drupal Integration Presented by: Matthew Connerton
  2. 2. Matthew Connerton <ul><li>Who the heck is he? </li></ul><ul><ul><li>Flex Developer </li></ul></ul><ul><ul><li>Php Developer </li></ul></ul><ul><ul><li>Drupal Developer </li></ul></ul><ul><ul><li>YAY BEER! </li></ul></ul>
  3. 3. Today’s Session <ul><li>Flex What?? </li></ul><ul><li>Flex Myths </li></ul><ul><li>HTML & Flex </li></ul><ul><li>Flash & Flex </li></ul><ul><li>CSS In Flex </li></ul><ul><li>Flex & Drupal </li></ul><ul><li>Example! </li></ul><ul><li>Discussion! </li></ul>
  4. 4. Flex What? <ul><li>Flex is a framework </li></ul><ul><li>Adobe has a commercial IDEs: </li></ul><ul><ul><li>Flex Builder 3 </li></ul></ul><ul><ul><li>Flash Builder 4 </li></ul></ul><ul><ul><li>Flash Catalyst </li></ul></ul><ul><li>Flex is a declarative language: MXML </li></ul><ul><ul><li><button label=“Click me” click=“btnClicked()” /> </li></ul></ul>
  5. 5. Why Flex? <ul><li>Rapid Application Development </li></ul><ul><li>Not complicated </li></ul><ul><li>Large community </li></ul><ul><li>Publish for web and desktop (adobe air) </li></ul><ul><li>Open source </li></ul>
  6. 6. Who Uses Flex? <ul><li>IBM </li></ul><ul><li>SAP </li></ul><ul><li>MTV </li></ul><ul><li>Intel </li></ul><ul><li>E*Trade </li></ul><ul><li>Citicorp </li></ul><ul><li>FedEx </li></ul><ul><li>MasterCard </li></ul><ul><li>Symantec </li></ul><ul><li>Xerox </li></ul><ul><li>Kodak </li></ul><ul><li>LG </li></ul><ul><li>Playboy </li></ul><ul><li>American Cancer Society </li></ul><ul><li>Johnson & Johnson </li></ul><ul><li>Kaiser Permanente </li></ul><ul><li>Northrop Grumman </li></ul><ul><li>Lockheed Martin </li></ul><ul><li>Boeing </li></ul><ul><li>Monster.com </li></ul><ul><li>Raytheon </li></ul><ul><li>U.S. Air Force </li></ul><ul><li>U.S. Army </li></ul><ul><li>U.S. Department of Defense </li></ul><ul><li>U.S. Department of Education </li></ul><ul><li>Brinks Inc. </li></ul><ul><li>Macys </li></ul><ul><li>FAA </li></ul><ul><li>Cingular Wireless </li></ul><ul><li>Alltel </li></ul><ul><li>MCI Worldcom </li></ul><ul><li>T-Mobile Wireless </li></ul><ul><li>Oracle </li></ul><ul><li>Cisco Systems </li></ul><ul><li>Pfizer </li></ul><ul><li>Johnson & Johnson </li></ul><ul><li>eBay </li></ul><ul><li>CDW </li></ul><ul><li>Mercedes-Benz </li></ul><ul><li>Disney </li></ul>
  7. 7. Flex Myths <ul><li>You need a “Flex Player” </li></ul><ul><ul><li>(Flash Player is the only thing you need) </li></ul></ul><ul><li>Flex is proprietary </li></ul><ul><ul><li>(Flex is open source – opensource.adobe.com) </li></ul></ul><ul><li>Flex only loads XML/RSS </li></ul><ul><ul><li>(Binary, Sockets, RPC, TXT, PHP/Java/.Net, ...) </li></ul></ul><ul><li>Flex costs money to run/use/get </li></ul><ul><ul><li>(Flex is free: SDK, Framework, knowledge) </li></ul></ul><ul><li>No “back” button or deep-linking </li></ul><ul><ul><li>(Flash/Flex have had this capability since v6) </li></ul></ul><ul><li>Flex doesn’t play nice with AJAX </li></ul><ul><ul><li>External Interfaces for seamless integration </li></ul></ul>
  8. 8. Similarities Between XHTML & Flex <ul><li>Both are XML based languages/markup (tags) </li></ul><ul><li>Both can use higher level interactive languages: </li></ul><ul><ul><li>HTML has JavaScript </li></ul></ul><ul><ul><li>Flex has ActionScript </li></ul></ul><ul><li>Both support CSS </li></ul><ul><li>Both have forms, text control, and support for the media trio (images, video, audio) </li></ul><ul><li>Both support custom namespaces </li></ul><ul><li>Both are free </li></ul><ul><li>Both support the “back” and “forward” buttons </li></ul>
  9. 9. Differences Between HTML & Flex <ul><li>Flex and ActionScript are compiled languages, not interpreted like HTML/CSS/JS/PHP </li></ul><ul><ul><li>Compiled Outputs = SWF & AIR file formats </li></ul></ul><ul><li>HTML, by default, uses multiple files/pages </li></ul><ul><ul><li>Flex can be multiple pages or just one file. </li></ul></ul><ul><li>HTML doesn't have a framework </li></ul><ul><li>Web standards HTML/CSS render natively, while Flash Player needs to be installed for Flash/Flex content </li></ul>
  10. 10. Similarities Between Flash & Flex <ul><li>Both run on the Flash Player and AIR runtime </li></ul><ul><li>Both have ActionScript at their hearts </li></ul><ul><ul><li>same code, same effects & filters, same capabilities. </li></ul></ul><ul><li>Both have commercial and free IDE's </li></ul><ul><ul><li>Adobe.com, OSflash.org, RIAforge.org </li></ul></ul><ul><li>Both can share components (SWC), classes, and media (SWF, FLV, MOV/MP4/M4V, AAC/MP3/M4A) </li></ul><ul><li>Both have a connection to open source. </li></ul>
  11. 11. Differences Between Flash & Flex <ul><li>Flash has a time line, and art design tools </li></ul><ul><li>Flash is targeted for design and animation </li></ul><ul><li>Flash does not have a native framework </li></ul><ul><li>Flash isn't a language </li></ul><ul><li>Flash will get you a rich, cool web site </li></ul><ul><li>Flex is only code </li></ul><ul><ul><li>Flex Builder has design tools for theming (CSS) </li></ul></ul><ul><li>Flex is targeted for any developer. </li></ul><ul><li>Flex is a framework. </li></ul><ul><li>Flex is a language. </li></ul><ul><li>Flex really speeds up development of rich applications (RIA's) </li></ul>
  12. 12. Just what is an RIA? <ul><li>RIA (Rich Internet Applications) </li></ul><ul><li>Rich interface design, multimedia (images, video, audio) </li></ul><ul><li>Examples: Twitter client, Adobe Media Player, Adobe Premiere Express, Agile Agenda, Adobe Photoshop Express) </li></ul>
  13. 13. MXML & ActionScript Code <ul><li>MXML: </li></ul><ul><ul><li><mx:CheckBox label=”Click Me” click=”chkBoxClicked()”/> </li></ul></ul><ul><li>ActionScript: </li></ul><ul><ul><li>package com.mrconnerton.drupalcampatlanta </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><li>import mx.flash.utils.*; </li></ul></ul><ul><ul><li>public class MyActionScriptClass </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><li>public function DynamicCall() </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><li>var someText:String = 'I like Drupal'; </li></ul></ul><ul><ul><li>trace(someText); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>} </li></ul></ul>
  14. 14. CSS in Flex <ul><li>CSS can be loaded </li></ul><ul><li>CSS can be embedded </li></ul><ul><li>CSS can be shared </li></ul><ul><li>CSS can be compiled (SWF) </li></ul><ul><li>Code your own custom CSS features, like the open-sourced Degrafa project </li></ul>
  15. 15. Drupal Integration <ul><li>AMFPHP (module) </li></ul><ul><ul><li>this is a binary gateway for you to pass your data through and send to Flex in an insane speed. Super tiny versus XML. </li></ul></ul><ul><li>Services (module) </li></ul><ul><ul><li>make “services” (functions) that Flex calls to get and send data (XML or AMFPHP) </li></ul></ul>
  16. 16. Example: eVoiceSpot Builder http://www.evoicespot.com
  17. 17. New Stuff (Flex 4) <ul><li>Flash Catalyst will be the designer-developer liaison </li></ul><ul><li>If Flash Player has 3D, Flex will have 3D </li></ul><ul><li>Database Drivers </li></ul><ul><li>Public beta and staying open-source </li></ul>
  18. 18. Learn More <ul><li>Flex.org </li></ul><ul><li>Drupal Modules </li></ul><ul><ul><li>http://drupal.org/project/services </li></ul></ul><ul><ul><li>http://drupal.org/project/amfphp </li></ul></ul><ul><li>Adobe Labs </li></ul><ul><ul><li>http://labs.adobe.org </li></ul></ul>
  19. 19. Discussion <ul><li>Email me if you have any more questions </li></ul><ul><li>[email_address] </li></ul><ul><li>mrconnerton.com </li></ul><ul><li>Huge Thanks to: </li></ul><ul><li>Chris Charlton </li></ul><ul><li>chrischarlton.us </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×