Adobe Flex builder by elmagnif

47
Mbaye CAMARA - Adobe Developer

description

Introduction to flex programming

Transcript of Adobe Flex builder by elmagnif

Page 1: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

Page 2: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

MBAYE CAMARA

Développeur Flash/Flex (adobe)

Msp Technology (Microsoft Student Partners)

@elmagnif

Ingénieur en Téléinformatique

Page 3: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

Page 4: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

Rich Internet Applications:

v3

Adobe Flex & AIR Microsoft Siverlight Sun Java FX Firefox 3

Flash & Flex

Page 5: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

NAVIGATEURS WEB

Page 6: Adobe Flex builder  by elmagnif

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

Page 7: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer4

More succinctly:

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

Page 8: Adobe Flex builder  by elmagnif

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

Page 9: Adobe Flex builder  by elmagnif

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

Page 10: Adobe Flex builder  by elmagnif

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

Page 11: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer6

ActionScript

Timeline

Layers

Canvas

Stage

Movieclips

Page 12: Adobe Flex builder  by elmagnif

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.

Page 13: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer8

Page 14: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer9

Drawing tools

Page 15: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

Timeline

10

Page 16: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

Stage

11

Page 17: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

Library & components

12

Page 18: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

Actionscripteditor

13

Page 19: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer14

ActionScript

Tags

Source

Dataservices

MXMLView

Html &Css

Perspectives

Page 20: Adobe Flex builder  by elmagnif

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.

Page 21: Adobe Flex builder  by elmagnif

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

Page 22: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

FLEXBUILDER

17

Page 23: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

ECLIPSE PLUGIN

18

Page 24: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

QCan Flex can be a companion toyour existing technology stack?

19

Page 25: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

Probably.

20

Page 26: Adobe Flex builder  by elmagnif

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

Page 27: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

Execution Time

Page 28: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

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

27

Page 29: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

(:p)

28

YES

Page 30: Adobe Flex builder  by elmagnif

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/

Page 31: Adobe Flex builder  by elmagnif

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

Page 32: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

Page 33: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

QDo users need anything special torun Flex applications?

32

Page 34: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

Yes.

33

Page 35: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

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

34

Page 36: Adobe Flex builder  by elmagnif

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

Page 37: Adobe Flex builder  by elmagnif

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

Page 38: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

Finetune Deskop

}}

Music streaming fromInternet source

+Music from my localiTunes library

49

Page 39: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer20

DEEZER

Page 40: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

Pownce

Page 41: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

ebay Desktop

53

Page 42: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

Multiple window support

55

Page 43: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

Live updating

56

Page 44: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

Page 45: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer

FINALLY

62

Page 46: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer62

RICH INTERNET APPLICATION

Is the future

Page 47: Adobe Flex builder  by elmagnif

Mbaye CAMARA - Adobe Developer62

THANKS FOR WATCHING