Creating Web 2.0 applications with Adobe Flex and AIR Nick Kwiatkowski MSU Telecom Systems.
-
date post
19-Dec-2015 -
Category
Documents
-
view
216 -
download
1
Transcript of Creating Web 2.0 applications with Adobe Flex and AIR Nick Kwiatkowski MSU Telecom Systems.
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 [email protected] [email protected] campus: 2-2528