Tải bản đầy đủ - 0 (trang)
Chapter 16. Adobe Flex 2 and Rich Internet Applications

Chapter 16. Adobe Flex 2 and Rich Internet Applications

Tải bản đầy đủ - 0trang

—CharlotteBrontë

Geniusistheabilitytoputintoeffectwhatisonyour

mind.

—F.ScottFitzgerald

Afairrequestshouldbefollowedbythedeedin

silence.

—Dante

Thetransitionfromcausetoeffect,fromeventto

event,isoftencarriedonbysecretsteps,whichour

foresightcannotdivine,andoursagacityisunableto

trace.

—JosephAddison

Outline

16.1 Introduction

16.2 FlexPlatformOverview

16.3 CreatingaSimpleUserInterface

16.4 AccessingXMLDatafromYourApplication

16.5 InteractingwithServer-SideApplications

16.6 CustomizingYourUserInterface

16.7 CreatingChartsandGraphs

16.8 Connection-IndependentRIAsontheDesktop:

AdobeIntegratedRuntime(AIR)

16.9 Flex3Beta

16.10 WebResources



16.1.Introduction



InChapter13,weintroducedAjax,whichusesacombinationof

XHTML,JavaScriptandXMLtoproduceawebapplicationwitha

desktop-likefeelthroughclient-sideprocessing.Inthischapter,

weintroduceAdobeFlex,anothermeansofachievingthat

samegoal.FlexusesAdobe'subiquitousFlashplatformto

deliverarichgraphicaluserinterfacebackedbyActionScript

3,Adobe'simplementationofECMAScript4(betterknownas

JavaScript2).TherelationshipbetweenFlexandActionScriptis

similartothatbetweenAjaxlibrariesandJavaScript.The

powerfulgraphicalcapabilitiesandcross-platformnatureof

FlashallowwebdeveloperstodeliverRichInternetApplications

(RIAs)toalargeuserbase.ThetermRIAwascoinedin2001

byMacromedia,thecreatorofFlashandFlex;Adobeacquired

Macromediain2005.

Flexprovidesuserinterfacelibraryelementsthatcaneasilybe

accessedandcustomized.Youcanseetheseuserinterface

elementsinactionusingAdobe'sFlex2ComponentExplorerat

examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html

Theuserinterfacelibraryhelpsyoupresentaconsistentuser

experienceinallapplications,aqualitythatvariousAjaxand

Flashapplicationslack.Additionally,Flashhastheadvantageof

alargeinstalledbase—98.6%penetrationforFlash6andup,

and84.0%penetrationforFlash9intheUnitedStatesasof

March2007.[1]ThisallowsapplicationsdevelopedinFlextobe

usedonmostWindows,MacandLinuxcomputers.Sincethe

Flashengineisvirtuallyequivalentacrossbrowsersand

platforms,Flexdeveloperscanavoidthecross-platform

conflictsofAjaxandevenJava.Thissignificantlyreduces

developmenttime.

[1]AdobeFlashPlayerVersionPenetration,March2007,



www.adobe.com/products/player_census/flashplayer/version_penetration.html.



TheFlexframeworkenablesawidevarietyofwebapplications,

fromsimpleimageviewerstoRSSfeedreaderstocomplexdata

analysistools.ThisflexibilityispartlyderivedfromFlex's

separationoftheuserinterfacefromthedata.Visually



appealingandconsistentuserinterfacesareeasilydescribed

usingtheMXMLmarkuplanguage,whichisconvertedto

Flash'sexecutableSWF(ShockwaveFlash)formatwhenthe

applicationiscompiled.

Flexisappropriateforonlinestores,whereFlex'sversatileuser

interfacelibraryallowsfordrag-and-drop,dynamiccontent,

multimedia,visualfeedbackandmore.Applicationsthatrequire

real-timestreamingdatabenefitfromFlex'sabilitytoaccept

data"pushed"fromtheserverandinstantlyupdatecontent,

withoutconstantlypollingtheserverassomeAjaxapplications

do.Applicationsthatrequiredatavisualizationbenefitfrom

Flex'sChartinglibrarywhichcancreateinteractiveand

customizedchartsandgraphs.ActionScriptaddstothepower

oftheFlexuserinterfacelibrarybyallowingyoutocode

powerfullogicintoyourFlexapplications.

Inthischapter,you'lllearnhowtoimplementtheseelementsin

real-worldapplications.You'llruntheexamplesfromyourlocal

computeraswellasfromdeitel.com.Acomprehensivelistof

FlexresourcesisavailableinourFlexResourceCenterat

www.deitel.com/flex.AnotherhelpfulresourceisAdobe'sFlex2

LanguageReferenceatwww.adobe.com/go/flex2_apiref.



16.Adobe®Flex™2andRichInternet

Applications

Objectives

Inthischapteryouwilllearn:

WhatFlexisandwhatit'susedfor.

HowtodesignuserinterfacesinFlex'suserinterface

markuplanguage,MXML.

HowtoembedmultimediainaFlexapplication.

Howtousedatabindingtocreateresponsiveuser

interfaces.

HowtoaccessXMLdatafromaFlexapplication.

Client-sidescriptinginActionScript3.0,Flex'sobjectorientedscriptinglanguage.

Howtointeractwithawebservice.

Howtocreateanadvanceduserinterface.

HowtheAdobeIntegratedRuntimeallowsFlex

applicationstorunonthedesktopwithoutanInternet

connection.

Becomingmoreflexible,open-minded,havinga

capacitytodealwithchangeisagoodthing.

—EdaLeShan

Wewoveawebinchildhood,awebofsunnyair.



—CharlotteBrontë

Geniusistheabilitytoputintoeffectwhatisonyour

mind.

—F.ScottFitzgerald

Afairrequestshouldbefollowedbythedeedin

silence.

—Dante

Thetransitionfromcausetoeffect,fromeventto

event,isoftencarriedonbysecretsteps,whichour

foresightcannotdivine,andoursagacityisunableto

trace.

—JosephAddison

Outline

16.1 Introduction

16.2 FlexPlatformOverview

16.3 CreatingaSimpleUserInterface

16.4 AccessingXMLDatafromYourApplication

16.5 InteractingwithServer-SideApplications

16.6 CustomizingYourUserInterface

16.7 CreatingChartsandGraphs

16.8 Connection-IndependentRIAsontheDesktop:

AdobeIntegratedRuntime(AIR)

16.9 Flex3Beta

16.10 WebResources



16.1.Introduction



InChapter13,weintroducedAjax,whichusesacombinationof

XHTML,JavaScriptandXMLtoproduceawebapplicationwitha

desktop-likefeelthroughclient-sideprocessing.Inthischapter,

weintroduceAdobeFlex,anothermeansofachievingthat

samegoal.FlexusesAdobe'subiquitousFlashplatformto

deliverarichgraphicaluserinterfacebackedbyActionScript

3,Adobe'simplementationofECMAScript4(betterknownas

JavaScript2).TherelationshipbetweenFlexandActionScriptis

similartothatbetweenAjaxlibrariesandJavaScript.The

powerfulgraphicalcapabilitiesandcross-platformnatureof

FlashallowwebdeveloperstodeliverRichInternetApplications

(RIAs)toalargeuserbase.ThetermRIAwascoinedin2001

byMacromedia,thecreatorofFlashandFlex;Adobeacquired

Macromediain2005.

Flexprovidesuserinterfacelibraryelementsthatcaneasilybe

accessedandcustomized.Youcanseetheseuserinterface

elementsinactionusingAdobe'sFlex2ComponentExplorerat

examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html

Theuserinterfacelibraryhelpsyoupresentaconsistentuser

experienceinallapplications,aqualitythatvariousAjaxand

Flashapplicationslack.Additionally,Flashhastheadvantageof

alargeinstalledbase—98.6%penetrationforFlash6andup,

and84.0%penetrationforFlash9intheUnitedStatesasof

March2007.[1]ThisallowsapplicationsdevelopedinFlextobe

usedonmostWindows,MacandLinuxcomputers.Sincethe

Flashengineisvirtuallyequivalentacrossbrowsersand

platforms,Flexdeveloperscanavoidthecross-platform

conflictsofAjaxandevenJava.Thissignificantlyreduces

developmenttime.

[1]AdobeFlashPlayerVersionPenetration,March2007,



www.adobe.com/products/player_census/flashplayer/version_penetration.html.



TheFlexframeworkenablesawidevarietyofwebapplications,

fromsimpleimageviewerstoRSSfeedreaderstocomplexdata

analysistools.ThisflexibilityispartlyderivedfromFlex's

separationoftheuserinterfacefromthedata.Visually



appealingandconsistentuserinterfacesareeasilydescribed

usingtheMXMLmarkuplanguage,whichisconvertedto

Flash'sexecutableSWF(ShockwaveFlash)formatwhenthe

applicationiscompiled.

Flexisappropriateforonlinestores,whereFlex'sversatileuser

interfacelibraryallowsfordrag-and-drop,dynamiccontent,

multimedia,visualfeedbackandmore.Applicationsthatrequire

real-timestreamingdatabenefitfromFlex'sabilitytoaccept

data"pushed"fromtheserverandinstantlyupdatecontent,

withoutconstantlypollingtheserverassomeAjaxapplications

do.Applicationsthatrequiredatavisualizationbenefitfrom

Flex'sChartinglibrarywhichcancreateinteractiveand

customizedchartsandgraphs.ActionScriptaddstothepower

oftheFlexuserinterfacelibrarybyallowingyoutocode

powerfullogicintoyourFlexapplications.

Inthischapter,you'lllearnhowtoimplementtheseelementsin

real-worldapplications.You'llruntheexamplesfromyourlocal

computeraswellasfromdeitel.com.Acomprehensivelistof

FlexresourcesisavailableinourFlexResourceCenterat

www.deitel.com/flex.AnotherhelpfulresourceisAdobe'sFlex2

LanguageReferenceatwww.adobe.com/go/flex2_apiref.



16.2.FlexPlatformOverview

TheFlexplatformrequirestheFlashPlayer9runtime

environment.FlashPlayer9providestheActionScriptVirtual

MachineandgraphicalcapabilitiesthatexecuteFlex

applications.FlashPlayer9,asdescribedinChapters14–15,is

amultimedia-richapplicationenvironmentthatrunsonmost

platforms.FlashPlayerinstallationisdetailedinthosechapters,

butforendusers,onlytheFlashPlayer9browserplug-inis

required.Theplug-in,includingadebugversion,isincludedas

partoftheFlexSDK(SoftwareDevelopmentKit)

installation.FlexapplicationsareessentiallyFlashprograms

thatusetheFlexframeworkofuserinterfaceelements,web

services,animationsandmore.TheFlexdevelopment

environmentisprogramming-centricincontrasttothe

animation-centricFlashauthoringtool.

Inadditiontodescribinguserinterfaces,MXMLcandescribe

webservices,dataobjects,visualeffectsandmore.Flex'suser

interfaceelementsaremuchricherandmoreconsistentthan

thoseofHTMLandAJAXbecausethey'rerenderedthesame

wayonallplatformsbytheFlashplayer.Therootelementof

everyMXMLapplicationistheApplicationelement

(),insidewhichallFlexelementsreside.

TheFlexSDKisafreedownload,whichyoucangetfrom

www.adobe.com/products/flex/downloads.ItincludesanMXML

compileranddebugger,theFlexframework,theuserinterface

components,andsometemplatesandexamples.Youcan

extractthezipfileanywhereonyourcomputer.Thecompiler

anddebuggerincludedwiththeFlexSDKarecommand-line

utilities.They'rewritteninJava,soyoumusthaveJava

RuntimeEdition1.4.2_06(orlater)installed.Tocheckyour

currentversion,runjava-versioninyourcommandline.

ActionScript3isAdobe'sobject-orientedscriptinglanguage.

FlashPlayer9usesversion2oftheActionScriptVirtualMachine



(AVM2),whichaddssupportforActionScript3andprovides

manyperformanceimprovementsoverthepreviousversion.

Thisvirtualmachineisbeingsubmittedasopensourcetothe

MozillaFirefoxprojecttoprovidesupportforActionScript3and

JavaScript2.Thisengine,calledTamarin,isslatedtobe

includedinFirefox4.

ActionScript3supportssuchobject-orientedcapabilitiesas

inheritance,encapsulationandpolymorphism.Also,itusesan

asynchronousprogrammingmodel.Thismeansthatthe

programwillcontinuetoexecutewhileanotheroperationis

beingcompleted,suchasacalltoawebservice.Thisensures

thattheuserinterfaceisresponsiveevenwhiletheapplication

isbusyprocessingdata,animportantfeatureofRIAs.Inmany

cases,you'llneedtotakeadvantageofeventhandlinganddata

bindingtohandleasynchronousoperations.

FlexBuilderisAdobe'sgraphicalIDEforFlexapplications.A

30-dayfreetrialisavailableatwww.adobe.com/go/tryflex.Itis

basedonEclipse,apopularopensourceIDE.BecauseFlex

Buildercostsmoney,andbecauseyoucandevelopFlex

applicationswithoutit,wewon'tuseFlexBuilderinthisbook.

AdobeLiveCycleDataServicesESextendsFlex'sbuilt-in

dataconnectivity,allowingforsuchfeaturesasdatapushand

synchronization.ItalsoenablesFlexapplicationstohandle

disconnectionfromtheserver,synchronizingdataupon

reconnection.TheExpresseditionofAdobeLiveCycleData

ServicesESisavailableforfreeat

www.adobe.com/go/trylivecycle_dataservices/.Thisversionis

limitedtouseonasingleserverwithasingleCPU(thelicense

agreementisincludedwiththedownload).

FlexChartingprovidesanextensiblelibraryofplottingand

graphingelements,includingpiecharts,linegraphs,bar

graphs,bubblechartsandplots.FlexChartingalsoprovides

appealinganimationsfordynamicdatarepresentations.Flex

ChartingisavailableforpurchasefromAdobe,anda30-day

freetrialisavailableatwww.adobe.com/go/tryflex.Anexcellent



demonstrationofFlexChartingistheFlexChartingSampler

availableat

demo.quietlyscheming.com/ChartSampler/app.html.



16.3.CreatingaSimpleUserInterface

Ourfirstexampleapplicationisasimpleimageviewer(Fig.

16.1)thatdisplaysthumbnail(i.e.,small)imagesofseveral

Deitelbookcovers.Inthisexample,wespecifytheimageswith

astaticarraywithintheMXML,butyoucouldloadthistypeof

datadynamicallyfromawebservice.Youcanselecta

thumbnailtoviewalargercoverimage,orusethehorizontal

slidertoselectanimage.Thesetwoelementsareboundto

eachother,meaningthatwhentheuserchangesone,theother

isupdated.Theimagevieweralsoallowsyoutozoomthe

image.Youcantrythisapplicationat

test.deitel.com/examples/ajaxfp/flex/coverViewer/(Fig.

16.2).

Figure16.1.CreatingasimplebookcoverviewerinFlex

2.

CodeView:



1

2

3

4
5

6

7

8
9
10
11source="iw3htp4.jpg"/>

12
13
14
15source="vcsharphtp2.jpg"/>

16
17


Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Chapter 16. Adobe Flex 2 and Rich Internet Applications

Tải bản đầy đủ ngay(0 tr)

×