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

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)

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

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.

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)

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

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)

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

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

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.

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)

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)

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

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

Round 1: Forms

XHTML & JS vs. MXML & AS 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

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

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

Round 2: XML

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

XML:

Reads or renders XML... that's it.

Everything XHTML has, but amazingly better...

E4X (ECMA)

XPath

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

Round 3: Data Visualization

XHTML & JS vs. MXML & AS 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!

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!

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

Round 4: Data Connectivity

XHTML & JS vs. MXML & AS 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

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

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

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 XHTML & JS vs. MXML & AS 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

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)

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)

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.

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)