Creating Web 2.0 applications with Adobe Flex and AIR

Nick Kwiatkowski

MSU Telecom Systems

Who am I?

• System Analyst within the MSU Telecom Systems Department / Physical Plant

• Manager of the Michigan Flex Users Group, located on campus

• Application developer, consultant, and trainer on various Adobe toolkits (ActionScript, Flex, Flash, ColdFusion, etc)

WHAT IS WEB 2.0 TO YOU?

WHAT IS A RICH INTERNET APPLICATION (RIA) ?

Web 2.0 and RIAs

• One of the biggest buzzwords of the last 5 years has been the concept of “Web 2.0”.

• While coined by Tim O’Reilly in 2004 its meaning vary. I see it as:– Expressive, Rich and Connected applications

and websites that help create an environment that is focused on collaboration, interoperability and sharing of content and data.

– Really pretty websites that use AJAX / Flash

Web 2.0 and RIAs

• Rich Internet Applications – a web application that uses various technologies to create useful applications that are connected to some sort of hosted data.– This could be through AJAX, Flash, Flex,

Silverlight, etc.

• The big trick with these cool technologies is to be able to deliver consistent experiences across all screens, browsers and operating systems….

So, which technology?

• AJAX/JavaScript – Very wildly deployed, but very little consistency between OS/Browsers

• Java – Widely deployed, but seen as a very slow client-side technology, and not very easy to skin. Good consistency.

• Silverlight – Very poor deployment (as of today), OK consistency between Windows/Mac

So, which technology?

• Flex/Flash allow a developer to target 97% of internet connected computers in a very consistent, and easy to deploy way. They can use ActionScript, which is a language similar to JavaScript / Java.

The Adobe ecosystem

Flash Builder

Flash CS4 Professional

Tools to Design and Develop

Clients

Servers/Services

Framework

AMF, XML, JSON, SOAP, RSS, ATOM, etc.HTTP/S, Sockets, RTMP, etc.

Applications, Content and Video

Flash Catalyst

Flex

Flash Media Server Family

Flash PlayerAIR

BlazeDSData Services

Sample Applications….

• Tour de California : http://www.amgentourofcalifornia.com/docroot/tourtracker2007/index.html

• Buzzword : http://www.acrobat.com

• VW Used Car Search : http://www.volkswagen.co.uk/used/search

• Pandora : http://www.pandora.com

Building a Flex Application

• There are a few ways to build Flex Application….– Using the Flex SDK directly.

• Similar to Java SDK. Command-line compiles

– Flex Builder (to be renamed Flash Builder)• Complete IDE to help with building apps both in

design / code view

– Flash Designer Professional• Timeline based – best for visual designers

– FDT & others

Building a Flex Application

Flex SDK Flash Builder

Flash Designer

FDT Amethyst

IDE None Eclipse Timeline Own Visual Studio

Design Mode

No Yes Yes No No **

AIR Yes Yes Yes No No

Cost Free, Open Source

Free for MSU **

~ $500 ~ $500 ~ $1,200

Deploying your application

• Deploying your Flex application is easy!– Simply deploy your .SWF file to your server, just

as you do any other image!– No server-side requirements at all **. Works with

Apache/IIS, Linux/Windows/Unix, etc. Even works off MSU AFS Space.

• ** If you want to interact with data that lives on your server, you will need something that supports REST / Web Services / AMF / XMLdump

YOUR FIRST FLEX APPLICATION

Displaying the US Parks Data

What happened?

Enhancing the App

• How about we talk about doing some realtime work?– Another open-source application that is

available from Adobe is called BlazeDS• BlazeDS is an application that allows AJAX, Flex

and PDF application to participate in REALTIME sharing of data (messaging)

• Doesn’t require polling, or heavy server load – uses TCP sockets to talk back to server

ENHANCED PARK LISTING

Add-ins and Open Source Projects

• Mapping? ArcGIS!– Available to map Campus-owned data

• 3D? Papervision 3D!– 3D rendering engine.

• Sound? AudioSpike!– Create “music” filters easily. Create music.

• Graphics? Degrafa!– Create graphics declaratively!

COOL DEMO STUFF

THIS BRINGS US TO AIRThe Adobe Integrated Runtime

What is AIR

• AIR is a runtime that allows a developer to create cross platform, cross device applications using the knowledge they already have.– ActionScript 3– AJAX / JavaScript / HTML– PDF Bundling

Cross Platform?

• Supported on :– Mac OSX, Windows 2000, XP, Vista, 7– Linux (CentOS, RedHat, Ubuntu, SuSE, etc)– Various mobile devices (coming soon)

• One .AIR file will install and run on ALL the above platforms. All will work exactly the same way.– Mobile platforms don’t have file systems.

Popular AIR applications

• Twitter Clients– Tweetdeck, Twirhl, Pownce, etc.

• Music Applications– Pandora, Finetune

• Commercial Apps– eBay Desktop, CraigsList Desktop, Google

Analytics, AIR iPhone

BUILDING AN AIR APP

Advantages of AIR

• Direct file system access.

• SQLite baked right in

• Webkit baked right in

• Chrome-less applications.

Where to find out more?

• Join the Usergroup!– http://www.TheFlexGroup.org FREE! Meets

on campus on the 2nd Thursday of the month.

• Download FlexBuilder!– https://freeriatools.adobe.com/

• See the Flex/AIR/ColdFusion Roadshow!– June 18th, 7PM, 147 ComArts. Free pizza!

THANK YOU!!nk@msu.edu nick@theFlexGroup.org campus: 2-2528