Better Drupal Interaction Design with Flex


Published on

I show how to think in terms of using Flex with Drupal for an RIA (Rich Internet Application). Flex can be used for pages but the technology lends itself better with an all encompassing interface and design that is your entire website or web application. Think outside of HTML & CSS!

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Better Drupal Interaction Design with Flex

  1. 1. Better Drupal Interaction Design with Flex Chris Charlton - [email_address] - Rich Media Institute (.com)
  2. 2. Me? Chris.Charlton::I.speak.geek(); <ul><li>Coder </li></ul><ul><li>Writer </li></ul><ul><li>Teacher </li></ul><ul><li>LA Drupal </li></ul><ul><li>LA Flash </li></ul><ul><li>LA AIR </li></ul><ul><li>Flex, Flash, AIR </li></ul><ul><li>PHP </li></ul><ul><li>SQL </li></ul><ul><li>Web Standards </li></ul><ul><li>Authorized Adobe Flex Champion “I'm the Dude, man!” </li></ul>
  3. 3. Today's Flex Agenda <ul><li>Flex – What? Why? Who? How? Where? </li></ul><ul><li>Debunk Flex myths </li></ul><ul><li>HTML & Flex – similarities and differences </li></ul><ul><li>Flex & Flash – similarities and differences </li></ul><ul><li>Ringside Seats: HTML+JS vs. Flex </li></ul><ul><li>CSS in Flex/Flash </li></ul><ul><li>Flex & Drupal </li></ul><ul><li>Raffle (for sure) & Bonus (if there's time) </li></ul>
  4. 4. What is Flex? <ul><li>First and foremost Flex is a framework for the Flash Platform (now called the Adobe Platform) </li></ul><ul><li>Adobe has a commercial IDE: Flex Builder </li></ul><ul><li>Flex is a declarative language: MXML (XML based) <mx:CheckBox label=”Click Me” click=”chkBoxClicked()”/> </li></ul><ul><li>Flex is the answer for developers who hate Flash and HTML </li></ul>
  5. 5. If your app is a __, Flex would be __ <ul><li>Car – Flex would be the chassis and the engine (you to code the exterior, interior, and a radio) </li></ul><ul><li>Baby – Flex would be the organs, bones, cells, initial DNA, and some exterior – you choose the hair and eye color, then program some attitude. </li></ul><ul><li>House/Building – Flex would be pre-fab parts, the foundation, plus plumbing & central air. </li></ul>
  6. 6. Why Flex? <ul><li>It's RAD (Rapid Application Development) </li></ul><ul><li>Not complicated </li></ul><ul><li>Large backing </li></ul><ul><li>Large community </li></ul><ul><li>Publish for the web or desktop software (AIR) </li></ul><ul><li>Open sourced </li></ul><ul><li>Cost: FREE – WHAT?! FREE? YES, FREE! </li></ul><ul><li>Everyone else is doing it! (It's the future) </li></ul>
  7. 7. Who uses Flex? <ul><li>Adobe </li></ul><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>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>... and Drupal users like you! </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><ul><li> </li></ul>
  8. 8. Myths of Flex <ul><li>You need a “Flex Player” - WRONG! (Flash Player is the only thing you need) </li></ul><ul><li>Flex is proprietary – WRONG! (Flex is open source – </li></ul><ul><li>Flex only loads XML/RSS – WRONG! (Binary, Sockets, RPC, TXT, PHP/Java/.Net, ...) </li></ul><ul><li>Flex costs money to run/use/get – WRONG! (Flex is free: SDK, Framework, knowledge) </li></ul><ul><li>No “back” button or deep-linking – WRONG! (Flash/Flex have had this capability since v6) </li></ul>
  9. 9. Similarities Between XHTML & Flex <ul><li>Both are XML based languages/markup (tags) </li></ul><ul><li>Both can use higher level interactive languages: - HTML has JavaScript - Flex has ActionScript </li></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>
  10. 10. Differences Between HTML & Flex <ul><li>Flex and ActionScript are compiled languages, not interpreted like HTML/CSS/JS/PHP - Compiled Outputs = SWF & AIR file formats </li></ul><ul><li>HTML, by default, uses multiple files/pages; Flex can be multiple pages or just one file. </li></ul><ul><li>HTML doesn't have a framework – it can't. </li></ul><ul><li>Web standards HTML/CSS render natively, while Flash Player needs to be installed for Flash/Flex content... until Firefox 3 & IE8!!! </li></ul>
  11. 11. Similarities Between Flash & Flex <ul><li>Both run on the Flash Player and AIR runtime </li></ul><ul><li>Both are ActionScript at their hearts – same code, same effects & filters, same capabilities. </li></ul><ul><li>Both have commercial and free IDE's,, </li></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>
  12. 12. 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 - Flex Builder has design tools for theming (CSS) </li></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>
  13. 13. RIA (Rich Internet Applications) <ul><li>Marketing term for some; way of life for others. </li></ul><ul><li>Rich interface design, multimedia (images, video, audio) . </li></ul><ul><li>Needs to do something on or with the Internet . </li></ul><ul><li>Application – needs to do something, for someone (hopefully useful and world changing) </li></ul><ul><li>Examples: Twitter client, Adobe Media Player, Adobe Premiere Express, Agile Agenda, Adobe Photoshop Express, Saffron UML, ... (Multimedia, Marketing/Business/Sales, Development, Medical, Social, Government) </li></ul>
  14. 14. MXML & ActionScript Code <ul><ul><li>MXML: <mx:CheckBox label=”Click Me” click=”chkBoxClicked()”/> </li></ul></ul><ul><ul><li>ActionScript: package { import mx.flash.utils.*; public class MyActionScriptClass { public function DynamicCall() { var someText:String = 'I like Drupal'; trace(someText); } } } </li></ul></ul>
  15. 15. Ready to see a fight?! Rules: No external classes, libraries, frameworks, or hacks
  16. 16. XHTML & JS vs. MXML & AS <ul><ul><li>Round 1: Forms </li></ul></ul>
  17. 17. XHTML & JS vs. MXML & AS <ul><li>Forms: </li></ul><ul><ul><li>Form tag (container) </li></ul></ul><ul><ul><li>Input fields </li></ul></ul><ul><ul><li>Select Lists/Menus </li></ul></ul><ul><ul><li>Buttons </li></ul></ul><ul><ul><li>File [upload] field </li></ul></ul><ul><ul><li>Radio Buttons/Groups </li></ul></ul><ul><ul><li>Checkboxes </li></ul></ul><ul><ul><li>Textarea </li></ul></ul><ul><ul><li>Fieldset* </li></ul></ul><ul><li>Everything XHTML has, plus... </li></ul><ul><ul><li>Restricted Input </li></ul></ul><ul><ul><li>Formatters/Validators (credit card, currency, date, string, email, number, phone, regexp, social security, zipcode) </li></ul></ul><ul><ul><li>Color Picker </li></ul></ul><ul><ul><li>Numeric Stepper </li></ul></ul><ul><ul><li>Date Field & Chooser </li></ul></ul><ul><ul><li>Sliders (Horizontal & Vertical) </li></ul></ul><ul><li>Required fields option </li></ul>
  18. 18. XHTML & JS vs. MXML & AS <ul><ul><li>Round 2: XML </li></ul></ul>
  19. 19. XHTML & JS vs. MXML & AS <ul><li>XML: </li></ul><ul><ul><li>Reads or renders XML... that's it. </li></ul></ul><ul><li>Everything XHTML has, but amazingly better... </li></ul><ul><ul><li>E4X (ECMA) </li></ul></ul><ul><ul><li>XPath </li></ul></ul>
  20. 20. XHTML & JS vs. MXML & AS <ul><ul><li>Round 3: Data Visualization </li></ul></ul>
  21. 21. XHTML & JS vs. MXML & AS <ul><li>Data Visualization: </li></ul><ul><ul><li>Tables (?) </li></ul></ul><ul><ul><li>Lists </li></ul></ul><ul><ul><li>Images </li></ul></ul><ul><ul><li>Text </li></ul></ul><ul><li>Everything XHTML has, plus... </li></ul><ul><ul><li>Advanced Data Grids </li></ul></ul><ul><ul><li>OLAP DataGrid </li></ul></ul><ul><ul><li>Rich Text Editor </li></ul></ul><ul><ul><li>Tree </li></ul></ul><ul><ul><li>Images/Video/Audio </li></ul></ul><ul><ul><li>Sound Visualization </li></ul></ul><ul><ul><li>Sliders (Horizontal & Vertical) </li></ul></ul><ul><ul><li>Charts – every kind! </li></ul></ul>
  22. 22. XHTML & JS vs. MXML & AS <ul><ul><li>Round 4: Data Connectivity </li></ul></ul>
  23. 23. XHTML & JS vs. MXML & AS <ul><li>Data Connectivity: </li></ul><ul><ul><li>Ajax (load/send XML) </li></ul></ul><ul><li>Oh, so much more... </li></ul><ul><ul><li>XML, TXT </li></ul></ul><ul><ul><li>RPC </li></ul></ul><ul><ul><li>WSDL (SOAP) </li></ul></ul><ul><ul><li>CRUD wizards (ColdFusion, PHP, Java, .Net) </li></ul></ul><ul><ul><li>Sockets (XML/Binary) </li></ul></ul><ul><ul><li>Data/Object Bindings </li></ul></ul><ul><ul><li>External Interfaces (JS, C/C++, Java, ...) </li></ul></ul><ul><ul><li>Progress Bars </li></ul></ul><ul><ul><li>Security models </li></ul></ul>
  24. 24. XHTML & JS vs. MXML & AS <ul><ul><li>Round 5: User & System Level Interactivity </li></ul></ul>
  25. 25. <ul><li>Interactivity: </li></ul><ul><ul><li>Clicks </li></ul></ul><ul><ul><li>Some Events </li></ul></ul><ul><ul><li>File [reference] field </li></ul></ul><ul><ul><li>Cursors </li></ul></ul><ul><ul><li>History Management (back/forward buttons, deep links for pages) </li></ul></ul><ul><ul><li>Load/Render Plug-in Media & Objects </li></ul></ul><ul><ul><li>Capable of transitions </li></ul></ul><ul><ul><li>Mouse position </li></ul></ul><ul><ul><li>Basic printing </li></ul></ul>XHTML & JS vs. MXML & AS <ul><li>Hehe, that's nothing... </li></ul><ul><ul><li>Tons of events (callbacks, “hooks”, and your custom events) </li></ul></ul><ul><ul><li>Multi-file Upload </li></ul></ul><ul><ul><li>Better mouse control (track, hide, change, stack, detect) </li></ul></ul><ul><ul><li>External Interfaces (JS, C/C++, Java, ...) </li></ul></ul><ul><ul><li>Transitions & Effects (real) </li></ul></ul><ul><ul><li>Object History and State Management </li></ul></ul><ul><ul><li>AS can load more AS </li></ul></ul><ul><ul><li>Modul mode (real), and True Full-screen support </li></ul></ul><ul><ul><li>Powerful [controlled] printing </li></ul></ul>
  26. 26. Flex Wins! right!?!
  27. 27. Flex's Display & Event Model Display (UI) Model Event Model
  28. 28. UI Elements & Components <ul><li>A lot to use and choose from </li></ul><ul><ul><li>Layout Containers & Navigators (~30) </li></ul></ul><ul><ul><li>UI Components (>25) </li></ul></ul><ul><ul><li>Charts (10) </li></ul></ul><ul><li>No depth level so you can make components and sub-components galore </li></ul><ul><li>Every UI Element/Component has a lot of features available (styling, effects, events, data) </li></ul>
  29. 29. CSS in Flex/Flash <ul><li>CSS can be loaded Load the same CSS that your XHTML uses </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 (new) </li></ul>
  30. 30. Drupal Integration <ul><li>AMFPHP (module) – this is a binary gateway for you to pass your data through and send to Flex/Flash in an insane speed. Super tiny versus XML. </li></ul><ul><li>Services (module) – make “services” (functions) that your Flex/Flash calls to get and send data (XML or AMFPHP) </li></ul><ul><li>SWFaddress (module) – old deep-linking lib </li></ul><ul><li>SWFobject (module) – embed SWF properly* </li></ul><ul><li>SWFtools (module) – a bunch of stuff (I don't use) VISIT THE FLEX + DRUPAL SESSION TOMORROW *Microsoft announced after April there shouldn't be a need for SWFobject, but Adobe isn't taking that chance and plans to adopt SWFobejct. </li></ul>
  31. 31. SUPER NEW STUFF (Flash 10) Flash (FLA) files are now XML (XFL) Flash will have 3D built-in (Papervision engine) Flash will have smart animation (no keyframes and support for “bones” or inverse kinematics) “ Hydra” will change effects forever
  32. 32. SUPER NEW STUFF (Flex 4) “ Thermo” will be the designer-developer liaison If Flash Player has 3D, Flex will have 3D Database Drivers – NO WAY! Public beta and staying open-source
  33. 33. Q&A E-mail me if you have more questions [email_address] Check out our courses:
  34. 34. Raffle 1 st Prize: TICKET to a Drupal course (~$500) 2 nd Prize: Advanced Flex Application Development book signed by me! (~$55) 3 rd Prize: AIR/Flex 3 Launch T-Shirt (~$1M) Free for all: O'Rielly coupons, AIR stickers, Drupal love
  35. 35. Bonus Topics Crowd votes on: - What is AIR? Cross-platform desktop runtime - Apache & IIS Modules: Run MXML/AS natively - Mozilla adds ActionScript to Mozilla 2, Firefox 3, SpiderMonkey, & IE8 (“Tamarin” JIT, “ActionMonkey”; GPL/LGPL/MPL)