DevelopingMobileAppbyFlex46.docx

DevelopingMobileAppbyFlex46.docx

《DevelopingMobileAppbyFlex46.docx》由会员分享，可在线阅读，更多相关《DevelopingMobileAppbyFlex46.docx（83页珍藏版）》请在冰豆网上搜索。

DevelopingMobileAppbyFlex46

Developing_mobile_apps_flex_4.6notes

Becauseofthesmallerscreensizesavailableonmobiledevices,mobileapplicatintypicalyollowdifferentdesignpatternsfrombrowser-basedapplications.Whendevelopingformobileapplications,youtypicallydividethecontentintoaseriesofviewsfordisplayonamobiledevice.

Eachviewcontainscomponentsthatarefocusedonasingletaskorthatcontainasinglesetofinformation.Theusertypicallly“drillsdown”,orchanges,fromoneviewtoanotherbytappingcomponentsintheview.Theusercanthenusethedevice’sbackbuttontoreturntoapreviousview.orbuildnavigationintotheapplication.

Considerationsindesigninganddevelopingmobileapplications;

✧Applicationsformobiletouchscreendevicesdifferfromdesktopandbrowserapplicationsinseveralways:

✧Toallowforeasymanipulationbytouchinput,mobilecomponentsgenerallyhavelargerhitareasthantheydoindesktoporbrowserapplications.

✧Theinteractionpatternsforactionslikescrollingaredifferentortouchscreendevices.

✧Becauseofthelimitedscreenarea,mobileappplicationsaretypicallydesignedwithonlyasmallsmountoftheuserinterfacevisibleonthescreenatonetime.

✧Userinterfacedesignsmusttakeintoaccountdifferencesinscreenresolutionacrossdevices.

✧CPUandGPUperformanceinsmorelimitedonphonesandtabletsthanondesktopdevices.

✧Owiningtothelimitedmemoryavailableonmobiledevices,applicatonsmustbecarefulttoconservememory.

✧Mobileapplicationscanbequitandrestartedatanytime,suchaswhenthedevicereceivesacallortextmessage.

Therefore,buildinganapplicationforamobiledeviceisnotjustamatterofscalingdownadesktopapplicationtoadifferentscreensize.Flexletsyoucreatesparateuserinterfacesappropriateforeachformfactor,whilesharingunderlyingmodelanddataaccesscodeamongmobile,browser,anddesktopprojects.

RestrictionsonusingSparkandMXcomponentsinamobileapplication

UsetheSparkcomponentsetwhencreationmobileapplicationsinFlex.TheSparkcompnentsaredefinedintheponents.*packages.However,forperfomancereasonsorbecausenotallSparkcomponentshaveskinsfortheMobiletheme,mobileapplicationsdonotsupporttheentireSparkcomponentset.

ExceptfortheMXchartingcontrolsandtheMXSpacercontrol,mobileapplicationsdonotsupporttheMXcomponentsetdefinedinthemx.*packages.

Showthefollowingtablelists:

Componet

Component

Useinmobile?

Notes

SparkActionBar

SparkBusyIndicator

SparkCallout

SparkCalloutButton

SparkDateSpinner

SparkSpinnerList

SparkSpinnerListContainer

SparkTabbedViewNavigator

SparkTabbedViewNavigtorApplication

SparkToggleSwitch

SparkView

SparkViewMenu

SparkViewNavigator

SparkViewNavigatorApplication

Yes

Thesenewcomponentssupportmoibleapplications

SparkButton

SparkCheckBox

SparkDataGroup

SparkGroup/HGroup/VGroup/TitleGroup

SparkImage/BitmapImage

SparkLabel

SparkList

SparkRadioButton/RadioButtonGroup

SparkSkinnableContainer

SparkScroller

SparkTextArea

SparkTextInput

Yes

MostofthesecomponentshaveskinsfortheMobiletheme.Label,Image,andBitmapImagecanbeusedeventhoughtheydonothaveamobileskin.

SomeSparklayoutcontainers,suchasGroupanditssublasses,donothaveskins.Therefore,youcanusetheminamobileapplication.

OtherSparkskinnablecomponents

Discouraged

SkinnableSparkComponentsotherthantheoneslistedabovearediscouragedbecausetheydonothaveaskinfortheMobiletheme.IfthecomponentdoesnothaveaskinfortheMobiletheme,youcancreateoneforyourapplication.

SparkDataGrid

SparkRichEditableText

SparkRichText

Discouraged

Thesecomponentsarediscouragedforperformancereasons.Whileyoucanusetheminamobileapplication,doingsocanaffectperformance.

FortheDataGridcontrol,performanceisbasedontheamountofdatathatyourender.FortheRichEditableTextandRichTextcontrols,performanceisbasedontheamountoftext,andthemnumberofcontrolsintheappplication.

MXcomponentsotherthanSpacerandcharts

No

MobileapplicationsdonotsupportMXcomponents,suchastheMXButton,CheckBox,List,orDataGrid.ThesecomponentscorrespondtotheFlex3componentsinthemx.controls.*andmx.cotainers.*packages.

MXSpacer

Yes

Spacerdoesnotuseaskin,soitcanbeusedinamobileapplication.

MXchartcomponents

Yes,butwithperformanceimplications

YoucanusetheMXchartcontrols,suchastheAreaChartandBarChart,inamobileapplication.TheMXchartcontrolsareinthemx.charts.*packages.

ThefollowingFlexfeaturesarenotsupportedinmobileapplications:

✧Nosupportfordrag-and-dropoperations

✧NosupportfortheToolTipControl

✧NosupportforRSLs

SparkContainer（inmobile）

Container

Type

Description

Usuallyassociatedwithcompnents（tag）

Mobile/Web/

Desktop

Usingsuggestion

Performanceconsiderationswithmobileapplications

Owingtotheperformanceconstraintsofmobiledevices,someaspectsofmobileapplicationdevelopmentdifferfromdevelopmentforbrowseranddesktopapplications.Someperformanceconsiderationsincludethefollowing:

1.WriteitemrenderersinActionScript

Formobileapplications,youwantlistscrollingtohavethehighestperformancepossible.WriteitemrenderersinActionScripttoachievethehighestperformance.WhileyoucanwriteitemrenerersinMXML,yourapplicationperfomancecansuffer.

Flexprovidestwoitemrenderesthatareoptimizedforuseinamobileapplication:

ponents.LabelItemRendererandponents.IconItemRenderer;Formoreinformationontheseitemrenderers,seeUsingamobileitemrendererwithaSparklist-basedcontrol;

2.UseActionScriptandcompiledFXGgraphicsorbitmapstodevelopcustomskins

ThemobileskinsshippedwithFlexarewritteninActionScriptwithcompiledFXGgraphicstoprovidethehighestperformance.SeeSparkSkiningandFXGandMXMLgraphics.

3.UsetextinputcomponentsthatuseStageText;seeUsetextinamobileapplication

4.TakecarewhenusingMXchartcomponentsinamobileapplication

MXchartcontrols,however,theycanaffectperformancedependingonthesizeandtypeofchartingdata.

5.Utilizingdecreasedmemory:

一、尽量记住使用事件侦听与删除，特别是对于一次性事件一定要记得完成后删除事件；当对象不再使用时，可以让其为null;记得使用System.gc（）方法回收内存；（Deleteallreferencestoobjectstomakesurethatgarbagecollectionistriggered.）；Freezingandunfreezingareimportantforallobjects,butareespeciallyimportantfordisplayobjects.Evenifdisplayobjectsarenolongerinthedisplaylistandarewaitingtobegarbagecollected,theycouldstillbeusingCPU-intensivecode.Forexample,theycanstillbeusingEvent.ENTER_FRAME.Asaresult,itiscriticaltofreezeandunfreezeobjectsproperlywiththeEvent.REMOVED_FROM_STAGEandEvent.ADDED_TO_STAGEevents.Thefollowingexampleshowsamovieclipplayingonstagethatinteractswiththekeyboard:

//Listentokeyboardevents

stage.addEventListener（KeyboardEvent.KEY_DOWN,keyIsDown）;

stage.addEventListener（KeyboardEvent.KEY_UP,keyIsUp）;

//Createobjecttostorekeystates

varkeys:

Dictionary=newDictionary（true）;

functionkeyIsDown（e:

KeyboardEvent）:

void

{

//Rememberthatthekeywaspressed.

keys[e.keyCode]=true;

if（e.keyCode==Keyboard.LEFT||e.keyCode=Keyboard.RIGHT）

{

runningBoy.play（）;

}

}

functionkeyIsUp（e:

KeyboardEvent）:

void

{

//Rememberthatthekeywasreleased

keys[e.keyCode]=false;

foreach（varvalue:

Booleaninkeys）

if（value）return;

runningBoy.stop（）;

}

runningBoy.addEventListener（Event.ENTER_FRAME,handleMovement）;

runningBoy.stop（）;

varcurrentState:

Number=runningBoy.scaleX;

varspeed:

Number=15;

functionhandleMovement（e:

Event）:

void

{

if（keys[Keyboard.RIGHT]）

{

e.currentTarget.x+=speed;

e.currentTarget.scaleX=currentState;

}elseif（keys[Keyboard.LEFT]）

{

e.currentTarget.x-=speed;

e.currentTarget.scaleX=-currentState;

}

}

shownBtn.addEventListener（MouseEvent.CLICK,showIt）;

removeBtn.addEventListener（MouseEvent.CLICK,removeIt）;

functionshowIt（e:

MouseEvent）:

void

{

addChild（runningBoy）;

}

functionremoveIt（e:

MouseEvent）:

void

{

if（contains（runningBoy））removeChild（runningBoy）;

}

//ListentoEvent.ADDED_TO_STAGEandEvent.REMOVED_FROM_STAGE

runningBoy.addEventListener（Event.ADDED_TO_STAGE,activate）;

runningBoy.addEventListener（Event.REMOVED_FROM_STAGE,deactivate）;

functionactivate（e:

Event）:

void

{

//Restarteverything

e.currentTarget.addEventListener（Event.ENTER_FRAME,handleMovement）;

}

functiondeactivate（e:

Event）:

void

{

//Freezetherunningboy–consumesfewerCPUresourceswhenntoshown

e.currentTarget.removeEventListener（Event.ENTER_FRAME,handleMovement）;

e.currentTarget.stop（）;

}

二、针对显示对象；{Shape,Sprite（Flash）},View（Flex）因其对应的功能与属性的不一样，其大小也不一样，在使用时一定要正确的创建对象；

三、另一种方法就是在脚本调用创建对象时，在有可能的情况下重复使用同一个对象，避免重建对象；如以下两个不同的代码：

一个应用实例，创建一图形来填充为背景：

varmyImage:

BitmapData;

varmyContainer:

Bitmap;

constMAX_NUM:

int=300;

for（vari:

int=0;i

{

//createa20x20pixelbitmap,non-transparent

myImage=newBitmapData（20,20,false0xF0D062）;

//createacontainerforeachBitmapDatainstance

myContainer=newBitmap（myImage）;

//Addittothedisplaylist

addChild（myContainer）;

//palaceeachcontainer

myContainer.x=（myContainer.width+8）*Math.round（i%20）;

myContainer.y=（myContainer.height+8）*int（i