Creating Web 2.0 applications

apatheticyogurtSoftware and s/w Development

Dec 13, 2013 (3 years and 8 months ago)

69 views

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.

0
10
20
30
40
50
60
70
80
90
100
Internet Connected Computers
All Devices
The Adobe ecosystem

Flash
Builder

Flash CS
4
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

Sample Applications….


Tour de California :
http://www.amgentourofcalifornia.com/docr
oot/tourtracker
2007
/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?

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

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


3
D?
Papervision

3
D!


3
D rendering engine.


Sound?
AudioSpike
!


Create “music” filters easily. Create music.


Graphics?
Degrafa
!


Create graphics declaratively!


COOL DEMO STUFF

THIS BRINGS US TO AIR

The 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
2
nd

Thursday of the month.


Download
FlexBuilder
!


https://freeriatools.adobe.com/



See the Flex/AIR/ColdFusion
Roadshow
!


June
18
th
,
7
PM,
147
ComArts
. Free pizza!


THANK YOU!!

nk@msu.edu

nick@theFlexGroup.org

campus:
2
-
2528