Better Drupal Interaction Design with Flex

Slide 1: Better Drupal Interaction Design with Flex Chris Charlton - chris@laflash.org - Rich Media Institute (.com)

Slide 2: Me? Chris.Charlton::I.speak.geek(); ● Coder ● Flex, Flash, AIR ● Writer ● PHP ● Teacher ● SQL ● Web Standards ● LA Drupal ● Authorized Adobe ● LA Flash Flex Champion ● LA AIR “I'm the Dude, man!”

Slide 3: Today's Flex Agenda ● Flex – What? Why? Who? How? Where? ● Debunk Flex myths ● HTML & Flex – similarities and differences ● Flex & Flash – similarities and differences ● Ringside Seats: HTML+JS vs. Flex ● CSS in Flex/Flash ● Flex & Drupal ● Raffle (for sure) & Bonus (if there's time)

Slide 4: What is Flex? ● First and foremost Flex is a framework for the Flash Platform (now called the Adobe Platform) ● Adobe has a commercial IDE: Flex Builder ● Flex is a declarative language: MXML (XML based) <mx:CheckBox label=”Click Me” click=”chkBoxClicked()”/> ● Flex is the answer for developers who hate Flash and HTML

Slide 5: If your app is a __, Flex would be __ ● Car – Flex would be the chassis and the engine (you to code the exterior, interior, and a radio) ● Baby – Flex would be the organs, bones, cells, initial DNA, and some exterior – you choose the hair and eye color, then program some attitude. ● House/Building – Flex would be pre-fab parts, the foundation, plus plumbing & central air.

Slide 6: Why Flex? ● It's RAD (Rapid Application Development) ● Not complicated ● Large backing ● Large community ● Publish for the web or desktop software (AIR) ● Open sourced ● Cost: FREE – WHAT?! FREE? YES, FREE! ● Everyone else is doing it! (It's the future)

Slide 7: Who uses Flex? Adobe FAA American Cancer Society IBM Cingular Wireless Johnson & Johnson SAP Alltel Kaiser Permanente MTV MCI Worldcom Northrop Grumman Intel T-Mobile Wireless Lockheed Martin E*Trade Oracle Boeing Citicorp Cisco Systems Raytheon FedEx Pfizer U.S. Air Force MasterCard Johnson & Johnson U.S. Army Symantec eBay U.S. Department of Defense Xerox CDW U.S. Department of Education Kodak Mercedes-Benz Brinks Inc. LG Disney Macys Playboy Monster.com ... and Drupal users like you!

Slide 8: Myths of Flex ● You need a “Flex Player” - WRONG! (Flash Player is the only thing you need) ● Flex is proprietary – WRONG! (Flex is open source – opensource.adobe.com) ● Flex only loads XML/RSS – WRONG! (Binary, Sockets, RPC, TXT, PHP/Java/.Net, ...) ● Flex costs money to run/use/get – WRONG! (Flex is free: SDK, Framework, knowledge) ● No “back” button or deep-linking – WRONG! (Flash/Flex have had this capability since v6)

Slide 9: Similarities Between XHTML & Flex ● Both are XML based languages/markup (tags) ● Both can use higher level interactive languages: - HTML has JavaScript - Flex has ActionScript ● Both support CSS ● Both have forms, text control, and support for the media trio (images, video, audio) ● Both support custom namespaces ● Both are free

Slide 10: Differences Between HTML & Flex ● Flex and ActionScript are compiled languages, not interpreted like HTML/CSS/JS/PHP - Compiled Outputs = SWF & AIR file formats ● HTML, by default, uses multiple files/pages; Flex can be multiple pages or just one file. ● HTML doesn't have a framework – it can't. ● Web standards HTML/CSS render natively, while Flash Player needs to be installed for Flash/Flex content... until Firefox 3 & IE8!!!

Slide 11: Similarities Between Flash & Flex ● Both run on the Flash Player and AIR runtime ● Both are ActionScript at their hearts – same code, same effects & filters, same capabilities. ● Both have commercial and free IDE's Adobe.com, OSflash.org, RIAforge.org ● Both can share components (SWC), classes, and media (SWF, FLV, MOV/MP4/M4V, AAC/MP3/M4A) ● Both have a connection to open source.

Slide 12: Differences Between Flash & Flex ● Flash has a time line, ● Flex is only code - Flex Builder has design tools for theming and art design tools (CSS) ● Flash is targeted for ● Flex is targeted for design and animation any developer. ● Flash does not have ● Flex is a framework. a native framework ● Flex is a language. ● Flash isn't a language ● Flex really speeds up ● Flash will get you a development of rich rich, cool web site applications (RIA's)

Slide 13: RIA (Rich Internet Applications) ● Marketing term for some; way of life for others. ● Rich interface design, multimedia (images, video, audio). ● Needs to do something on or with the Internet. ● Application – needs to do something, for someone (hopefully useful and world changing) ● Examples: Twitter client, Adobe Media Player, Adobe Premiere Express, Agile Agenda, Adobe Photoshop Express, Saffron UML, ... (Multimedia, Marketing/Business/Sales, Development, Medical, Social, Government)

Slide 14: MXML & ActionScript Code MXML: <mx:CheckBox label=”Click Me” click=”chkBoxClicked()”/> ActionScript: package com.richmediainstitute.drupalcon.2008.boston { import mx.flash.utils.*; public class MyActionScriptClass { public function DynamicCall() { var someText:String = 'I like Drupal'; trace(someText); } } }

Slide 15: Ready to see a fight?! Rules: No external classes, libraries, frameworks, or hacks

Slide 16: XHTML & JS vs. MXML & AS Round 1: Forms

Slide 17: XHTML & JS vs. MXML & AS ● Forms: ● Everything XHTML – Form tag (container) has, plus... – Input fields – Restricted Input – Select Lists/Menus – Formatters/Validators (credit card, currency, date, string, email, number, phone, regexp, social – Buttons security, zipcode) – File [upload] field – Color Picker – Radio Buttons/Groups – Numeric Stepper – Checkboxes – Date Field & Chooser – Textarea – Sliders (Horizontal & Vertical) – Fieldset* ● Required fields option

Slide 18: XHTML & JS vs. MXML & AS Round 2: XML

Slide 19: XHTML & JS vs. MXML & AS ● XML: ● Everything XHTML – Reads or renders has, but amazingly XML... that's it. better... – E4X (ECMA) – XPath

Slide 20: XHTML & JS vs. MXML & AS Round 3: Data Visualization

Slide 21: XHTML & JS vs. MXML & AS ● Data Visualization: ● Everything XHTML – Tables (?) has, plus... – Lists – Advanced Data Grids – Images – OLAP DataGrid – Text – Rich Text Editor – Tree – Images/Video/Audio – Sound Visualization – Sliders (Horizontal & Vertical) – Charts – every kind!

Slide 22: XHTML & JS vs. MXML & AS Round 4: Data Connectivity

Slide 23: XHTML & JS vs. MXML & AS ● Data Connectivity: ● Oh, so much more... – Ajax (load/send XML) – XML, TXT – RPC – WSDL (SOAP) – CRUD wizards (ColdFusion, PHP, Java, .Net) – Sockets (XML/Binary) – Data/Object Bindings – External Interfaces (JS, C/C++, Java, ...) – Progress Bars – Security models

Slide 24: XHTML & JS vs. MXML & AS Round 5: User & System Level Interactivity

Slide 25: XHTML & JS vs. MXML & AS ● Interactivity: ● Hehe, that's nothing... – Clicks – Tons of events (callbacks, “hooks”, and your custom events) – Some Events – Multi-file Upload – File [reference] field – Better mouse control (track, hide, change, stack, detect) – Cursors – External Interfaces (JS, C/C++, Java, ...) – History Management – Transitions & Effects (real) (back/forward buttons, deep links for pages) – Load/Render Plug-in – Object History and State Management Media & Objects – AS can load more AS – Capable of transitions – Modul mode (real), and True – Mouse position Full-screen support – Basic printing – Powerful [controlled] printing

Slide 26: Flex Wins! right!?!

Slide 27: Flex's Display & Event Model Display (UI) Model Event Model

Slide 28: UI Elements & Components ● A lot to use and choose from – Layout Containers & Navigators (~30) – UI Components (>25) – Charts (10) ● No depth level so you can make components and sub-components galore ● Every UI Element/Component has a lot of features available (styling, effects, events, data)

Slide 29: CSS in Flex/Flash ● CSS can be loaded Load the same CSS that your XHTML uses ● CSS can be embedded ● CSS can be shared ● CSS can be compiled (SWF) ● Code your own custom CSS features, like the open-sourced Degrafa project (new)

Slide 30: Drupal Integration ● 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. ● Services (module) – make “services” (functions) that your Flex/Flash calls to get and send data (XML or AMFPHP) ● SWFaddress (module) – old deep-linking lib ● SWFobject (module) – embed SWF properly* ● 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.

Slide 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

Slide 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

Slide 33: Q&A E-mail me if you have more questions chris@laflash.org Check out our courses: RichMediaInstitute.com

Slide 34: Raffle 1st Prize: TICKET to a Drupal course (~$500) 2nd Prize: Advanced Flex Application Development book signed by me! (~$55) 3rd Prize: AIR/Flex 3 Launch T-Shirt (~$1M) Free for all: O'Rielly coupons, AIR stickers, Drupal love

Slide 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)