flex in nam 1.0.ppt

8/9/2019 Flex in Nam 1.0.ppt

1/115

1

What is Flex?

Adobe Flex is user interface

framework for developing

rich internet application(RIA)

You can use it fordeveloping web application

type of I

Forms

!pread sheets

"ree control


2/115

2006 Adobe Systems Incorporated. All Rights Reserved.2

HTML vs Flex vs Flash

Unlike HTML, Flex was designed for applicationdevelopment (no more creating navars !

slicing "p images#$

HTML !SS "les

Incl#des

$avaScript

libraries Tag%based

HTML o#tp#t

HTML Flex Flash

M&ML !SS "les

!omponents

ActionScript

classes Tag%based

S'( o#tp#t

(LA "les

Symbols

ActionScript

classes Timeline%based

S'( o#tp#t

)ormat

re#se

behavior

metaphor

o#tp#t


3/115

3

*eeper dives


4/115


%pplication str"ct"re

Flex Application Framework

Flex Application Framework

#ode

behind

(A!)

#ode

behind

(A!)

#!!

#!!

#omponent

#omponent$%$&

$%$&

#omponent

#omponent

App'specific

component

(A!$%$&)

App'specific

component

(A!$%$&)

Reusable component library

Reusable component library

!tate !tate!tate!F

!F

S+ins ,

Styles

Layo#t ,

-ects

/ehavior ,

*ata !omponents

&esigner &eveloper


5/115


&esigners and developers

Responsible )ors+inning and stylingthro#gh !SS and S'(

*oes initial layo#t.May do "nal layo#tvia tool1

*oes eect and

transition design.

Responsible )orprogram logic andcomponentdevelopment

May be responsible)or "nal layo#t viacontainers1

May implementeects and transitions

!onnects to data andservices

*esigner *eveloper

$%$&

A!#!!!F


6/115

6

Workspaces


7/115

7

UseWorkspacesto 'ta! rgani)ed

!lose old proects.3se separatene4 4or+spaces.

!l#ttered Slo4 !lean(ast


8/115

8

Workspace*+roect hierarch!

5roect

'or+space

Main *eployable M&ML (ile

pper!amel!ase


9/115

9

'etting "p


10/115

10

3se the de)a#lts consistency acrossproectsorganiations1

73nless #sing local developmentserver de"ne path d#ring proect creation

process

Flex proect o"tp"t

*evelopment8 9bin%deb#g*eployment8 9bin%

release:


11/115

11

'o"rce code

Standard #sed by other lang#ages $ava; !1

5lace!ode Here


12/11512

Managing 'W- dependencies

3se libs directoryRe)erence shared S'! libraries #sing (le#mber@alidator

-mail@alidator


43/115

43

Formatters

To manipuate data +or the purpose o+ dispa6in7 it in the @I

Tri77ered b6 cain7 the +ormatB method

The base cass +or the buit-in +ormatters is

mx.formatters.Formatter


44/115

44

Numer Formatter


45/115

45

Simple application % Hello4orld

1mx&Panel x8944:9 !89;;0

layout23absolute34

15mx&Panel4


46/115

46

Adding Te


47/115

47

Adding styles


48/115

48

@mxA."tton x89B:9 !89B=;9 lael89Good!e9

click89m!+anelvisile8(false$9*C

4

Adding behavior

&one I clicking 0Good!e2 makes it


49/115

49

&one I clicking Good!e makes it

disappear

+, ", I-"./RA". F&.% I- Y,R A00&I#A"I,-


50/115

50

+, ", I-"./RA". F&.% I- Y,R A00&I#A"I,-

commun!cat!n. to remote /er+er -rom -lex

al!cat!on

(Ser+!ce

ebSer+!ce

Bla,eS


51/115

51

Mate application

)

)

)

S);


52/115


53/115

53

ArrayCollection

Retrieved

from

server

MovieList.mxml


54/115

54

Application Server


55/115

55

MovieList

EventBus


56/115

56

EventBus

EventMapMovieList


57/115

57

EventBus

EventMap

)etAllo&ies

lo)in

)eto&ie

MovieList


58/115

58

event

EventMap{ CalltheserverStorethedataMovieListShow

movies


59/115

59

event

EventMap 2

Remote!"ect

Mana#erclassMovieList

Show

movies


60/115

60

9e -vent Map


61/115

61

DK%% -vent Maps %%

Dmaps8Main-ventMap

DK%% @ie4s %%

Dvie4s8Main3I

Dm


62/115

62

com$movix$

!%siness

maps

%i&views'itemrenderers'controls(

vos

events


63/115

63

D-ventHandlers

MainEventMap.mxml

DE


64/115

DE


65/115

65

D-ventMap ...

D-ventHandlers typeF9NMovie-vent.B-TOALLP9

DRemotebectInvo+er

so#rceF9services.MovieBate4ay9 ...

methodF9getAll9

D-ventHandlers

D-ventMap

Application Server

DE


66/115

66

D-ventMap ...

D-ventHandlerstypeF9NMovie-vent.B-TOALLP9

DRemotebectInvo+er

so#rceF9services.MovieBate4ay9

methodF9getAll9

Dres#ltHandlers

StorethedataDres#ltHandlers

DRemotebectInvo+er

D-ventHandlers

D-ventMap

Movies

Mana#er

Model


67/115

67

Omovies F ne4 Array!ollectionmovies1Q

p#blic class MoviesManager e


68/115

68D-ventMap

D-ventMap ...

D-ventHandlers typeF9NMovie-vent.B-TOALLP9

DRemotebectInvo+erso#rceF9services.MovieBate4ay9 .

methodF9getAll9

Dres#ltHandlers

Dres#ltHandlers

DMethodInvo+ergeneratorF9NMoviesManager

methodF9storeMovies9

arg#mentsF9Nres#ltbec

DRemotebectInvo+er


69/115

69

5op#lating vie4

S%pervisin# presenter


70/115

70

Movies

Mana#er

Movie)etail

S%pervisin# presenter

Movie)etail*resenterpresenter+nows

a!o%tview

Mana#erfeeds

datavia!indin#s

@JvantMapC


71/115

71

1$n8ectorstarget23{MovieDetailPresenter}34

1Property$n8ectortarget9ey23movies3

source23{MoviesManager}3 source9ey23movies3 54

15$n8ectors4

1$n8ectorstarget23{MovieList}3 4

1Property$n8ectortarget9ey23model3source23{MovieDetailPresenter}3 54

15$n8ectors4

15Event*ap4


72/115


73/115

73

'hy (le< in >AME


74/115

74

'hy (le< in >AME

!itiris+ is migrating its 4hole application to (leAM application is migrated to (L-&

(le< V.J

/lae *S

(le< /#ilder

$ava G.6

-clipse

Flex with ava %rchitect"re


76/115

76

Flex with ava %rchitect"re

Login +age


77/115

77

Login +age

!omponents Incl#ded

, 5anel

, Te


78/115

78

-AM Application

(le< Implemented in >AM


79/115

79


Home +age


80/115

80

Home +age

!omponents Incl#ded

, Men# /ar

, Lin+

, 5anel

, Label

-AM Application


81/115

81

-AM Application



82/115

82


-reate Kew Transaction


83/115

83

-reate Kew Transaction

!omponents Incl#ded

, (orm Items

, *ate (ield

, Te


84/115

84

-AM Application


85/115

85

5alidation


86/115

86

5alidation

Single (ield @alidation

M#ltiple (ield @alidation

, String @alidator

, *ate @alidator

, >#mber @alidator etc

-AM Application


87/115

87

-AM Application


88/115

88



89/115

89


List +age


90/115

90

g

!omponents Incl#ded

*ata grid

-


91/115

91

g pp



92/115

92

p



93/115

p

-


94/115

94

p ;

(le< Implemented in >AM -


95/115

95

to -


96/115

96

p

5rint 5revie4


97/115

97

&etail +age


98/115

98

g

!omponents Incl#ded

, 5anel

, (orm Item

, Label

, *atagrid

, -


99/115

99



100/115

100

System Administration


101/115

101

>avigator

Search !omponent

A#to !omplete

(ilter

!hec+ /oAM


103/115

103

-AM Application


104/115

104



105/115

105



106/115

106



107/115

107

-AM Application


108/115

108



109/115

109

List ) Re#sable !omponent


110/115

110

!#stom *ate@alidator

!#stom 5535 Handler

A#to 5op#lation in search

(iltering in data Brid !ol#mn

-


111/115

111

Started 4itho#t (le< -


112/115

112

K%M

-


113/115

113

Hi Sridharan;

I 4o#ld li+e to specially than+ to the team 4or+ing in the Adobe (le

flex in nam 1.0.ppt

Documents