Better Drupal Interaction Design with Flex

Better Drupal Interaction Design with Flex Chris Charlton - [email_address] - Rich Media Institute (.com)

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

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)

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

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.

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)

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

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)

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
Both support the “back” and “forward” buttons

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!!!

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.

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

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)

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); } } }

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

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

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

Round 2: XML

XML:
Reads or renders XML... that's it.
Everything XHTML has, but amazingly better...
E4X (ECMA)
XPath

Round 3: Data Visualization

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

Round 4: Data Connectivity

Data Connectivity:
Ajax (load/send XML)
Oh, so much more...
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

Round 5: User & System Level Interactivity

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

Flex Wins! right!?!

Flex's Display & Event Model Display (UI) Model Event Model

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)

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)

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.

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

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

Q&A E-mail me if you have more questions [email_address] Check out our courses: RichMediaInstitute.com

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

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)

http://tom.kulturlounge.de	141
http://www.slideshare.net	24
http://www.flexden.net	15
http://flashydev.blogspot.com	10
http://iksnae.com	1

Better Drupal Interaction Design with Flex

by Chris Charlton

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 191

Statistics

Better Drupal Interaction Design with Flex Presentation Transcript