1. Creating Web 2.0 applications with Adobe Flex and AIR Nick Kwiatkowski MSU Telecom Systems

2. 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)

3. WHAT IS WEB 2.0 TO YOU?

4. WHAT IS A RICH INTERNET APPLICATION (RIA) ?

5. 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

6. 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….

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

8. 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.

9. 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 Player AIR BlazeDS Data Services

10. Sample Applications…. Tour de California : http://www.amgentourofcalifornia.com/docr oot/tourtracker2007/index.html http://www.amgentourofcalifornia.com/docr oot/tourtracker2007/index.html Buzzword : http://www.acrobat.comhttp://www.acrobat.com VW Used Car Search : http://www.volkswagen.co.uk/used/search http://www.volkswagen.co.uk/used/search Pandora : http://www.pandora.comhttp://www.pandora.com

11. 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

12. Building a Flex Application Flex SDKFlash Builder Flash Designer FDTAmethyst IDENoneEclipseTimelineOwnVisual Studio Design Mode NoYes NoNo ** AIRYes No CostFree, Open Source Free for MSU ** ~ $500 ~ $1,200

13. 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

14. YOUR FIRST FLEX APPLICATION Displaying the US Parks Data

15. What happened? Started Flex Builder Added a new Project (Flex) Choose our server type, defined name Added a data- grid Added a connecter to our server Connected up the pieces with “binding” Ran our project Rejoiced in the basking glory of the SWF

16. 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

17. ENHANCED PARK LISTING

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

19. COOL DEMO STUFF

20. THIS BRINGS US TO AIR The Adobe Integrated Runtime

21. 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

22. 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.

23. Popular AIR applications Twitter Clients –Tweetdeck, Twirhl, Pownce, etc. Music Applications –Pandora, Finetune Commercial Apps –eBay Desktop, CraigsList Desktop, Google Analytics, AIR iPhone

24. BUILDING AN AIR APP

25. Advantages of AIR Direct file system access. SQLite baked right in Webkit baked right in Chrome-less applications.

26. Where to find out more? Join the Usergroup! –http://www.TheFlexGroup.org FREE! Meets on campus on the 2 nd Thursday of the month.http://www.TheFlexGroup.org Download FlexBuilder! –https://freeriatools.adobe.com/https://freeriatools.adobe.com/ See the Flex/AIR/ColdFusion Roadshow! –June 18 th, 7PM, 147 ComArts. Free pizza!

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