Mbaye CAMARA - Adobe Developer

Mbaye CAMARA - Adobe Developer

MBAYE CAMARA

Développeur Flash/Flex (adobe)

Msp Technology (Microsoft Student Partners)

@elmagnif

Ingénieur en Téléinformatique

Mbaye CAMARA - Adobe Developer

Mbaye CAMARA - Adobe Developer

Rich Internet Applications:

v3

Adobe Flex & AIR Microsoft Siverlight Sun Java FX Firefox 3

Flash & Flex

Mbaye CAMARA - Adobe Developer

NAVIGATEURS WEB

Mbaye CAMARA - Adobe Developer3

FLEX

“Adobe® Flex™ 2 is a complete, powerful applicationdevelopment solution for creating and delivering cross-platform rich Internet applications (RIAs) within theenterprise and across the web. It enables the creation ofexpressive and interactive web applications that can reachvirtually anyone on any platform. ”

Mbaye CAMARA - Adobe Developer4

More succinctly:

“Flex is a way to develop Flash applications by programming”

Mbaye CAMARA - Adobe Developer5

How is Flex different from Flash?

Flash Flex

ActionScript

MXML

HTML/CSS

Javascript

Drawing Tools

Library

Layout Engine

Animation Timeline

Layers

Yes

No

Yes

Limited

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

No

No

Yes

No

No

Mbaye CAMARA - Adobe Developer

Flash

5

EMCA standardized, like

Javascript, yet object-oriented like java

Flex

ActionScript

MXML

HTML/CSS

Javascript

Drawing Tools

Library

Layout Engine

Animation Timeline

Layers

Yes

No

Yes

Limited

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

No

No

Yes

No

No

Mbaye CAMARA - Adobe Developer

Flash

5

EMCA standardized, like

Javascript, yet object-oriented like java

Flex

ActionScript

MXML

Yes Yes

Yes

HTML/CSS - Yes

Javascript

Drawing Tools

Library

Layout Engine

Animation Timeline

Layers

Yes

Yes

Yes

Yes

Yes

Yes

No

No

Yes

No

No

Declaritive XML

LIke XUL

Mbaye CAMARA - Adobe Developer6

ActionScript

Timeline

Layers

Canvas

Stage

Movieclips

Mbaye CAMARA - Adobe Developer

Flash documents (.FLA) are binary files created inthe Adobe Flash authoring environment.

Interface elements are “drawn” manipulatedover a timeline using tweens, key frames, and

layers (or programmatically).

A .FLA file is compiled into a .SWF file andembedded into an HTML page.

Mbaye CAMARA - Adobe Developer8

Mbaye CAMARA - Adobe Developer9

Drawing tools

Mbaye CAMARA - Adobe Developer

Timeline

10

Mbaye CAMARA - Adobe Developer

Stage

11

Mbaye CAMARA - Adobe Developer

Library & components

12

Mbaye CAMARA - Adobe Developer

Actionscripteditor

13

Mbaye CAMARA - Adobe Developer14

ActionScript

Tags

Source

Dataservices

MXMLView

Html &Css

Perspectives

Mbaye CAMARA - Adobe Developer15

Flex documents (.MXML) are text files authored in AdobeFlexBuilder (based on Eclipse). Alternatively, Eclipse RCP can

be used with a free FlexBuilder plug-in.

In Flex, interface elements and components are created usingdeclaritive XML-like tags.

Mbaye CAMARA - Adobe Developer

private function requestPhotos():void{photoService.cancel();

var params:Object = new Object();params.format = 'rss_200_enc';params.tags = searchTerms.text;photoService.send(params);}

private function photoHandler(event:ResultEvent):void{photoFeed = event.result.rss.channel.item as ArrayCollection;

}]]></mx:Script><mx:HTTPService id="photoService"

url="http://api.flickr.com/services/feeds/photos_public.gne" result="photoHandler(event)"/><mx:HBox width="391">

<mx:TextInput id="searchTerms" /><mx:Button label="Button" click="requestPhotos()"/>

</mx:HBox><mx:TileList width="100%" height="100%"

dataProvider="{photoFeed}"><mx:itemRenderer>

<mx:Component><mx:VBox width="125" height="125"

paddingBottom="5"paddingLeft="5"paddingTop="5"paddingRight="5">

<mx:Image width="75" height="75"source="{data.thumbnail.url}"/>

<mx:Text text="{data.credit}"/></mx:VBox>

</mx:Component></mx:itemRenderer>

</mx:TileList>

</mx:WindowedApplication>

16

Mbaye CAMARA - Adobe Developer

FLEXBUILDER

17

Mbaye CAMARA - Adobe Developer

ECLIPSE PLUGIN

18

Mbaye CAMARA - Adobe Developer

QCan Flex can be a companion toyour existing technology stack?

19

Mbaye CAMARA - Adobe Developer

Probably.

20

Mbaye CAMARA - Adobe Developer

EXAMPLE

Benson

CLASS FILE

SWF

Web ServerM Séne

Base donnée

Bo y Baldé

FlexBuilder EclipseMoi-même (:p)

21

Mbaye CAMARA - Adobe Developer

Execution Time

Mbaye CAMARA - Adobe Developer

QDo we you any special technologyto run and deploy Flex apps?

27

Mbaye CAMARA - Adobe Developer

(:p)

28

YES

Mbaye CAMARA - Adobe Developer

Flex Data Services 2“A powerful solution for creating data-intensive rich applications”

• Deployed as standard J2EE application• Real-time data push and pub/sub messaging• Allows for occasionally connected applications

20.OOO fcfa /CPU

Read More:http://www.adobe.com/products/flex/dataservices/

Mbaye CAMARA - Adobe Developer

WebORB for Java“WebORB for Java is server-side technology enabling connectivity between Flash Remoting andAJAX clients and Java applications.”

500.000 fcfa/CPU

Mbaye CAMARA - Adobe Developer

Mbaye CAMARA - Adobe Developer

QDo users need anything special torun Flex applications?

32

Mbaye CAMARA - Adobe Developer

Yes.

33

Mbaye CAMARA - Adobe Developer

96% of PC’s have what they need to runa Flex application.

34

Mbaye CAMARA - Adobe Developer

AIR

“Adobe® AIR™ lets developers use their existing webdevelopment skills in HTML, AJAX, Flash and Flex tobuild and deploy rich Internet applications to thedesktop.”

47

Mbaye CAMARA - Adobe Developer

?Application.airFlash Content Web Content Flex Content Java Applet

AIR RUNTIME WebKitBrowser

FlashPlayer

PDFSupport

SQLiteDatabase

Windows 2000Windows XP

Mac OSXLinux BETA

OS integration via:File System I/O System Drag & DropOnline/Offline Full Network StackWindowing Clipboard Sync

Native Menu APIRight-click support

48

Mbaye CAMARA - Adobe Developer

Finetune Deskop

}}

Music streaming fromInternet source

+Music from my localiTunes library

49

Mbaye CAMARA - Adobe Developer20

DEEZER

Mbaye CAMARA - Adobe Developer

Pownce

Mbaye CAMARA - Adobe Developer

ebay Desktop

53

Mbaye CAMARA - Adobe Developer

Multiple window support

55

Mbaye CAMARA - Adobe Developer

Live updating

56

Mbaye CAMARA - Adobe Developer

Mbaye CAMARA - Adobe Developer

FINALLY

62

Mbaye CAMARA - Adobe Developer62

RICH INTERNET APPLICATION

Is the future

Mbaye CAMARA - Adobe Developer62

THANKS FOR WATCHING