DevelopingMobileAppbyFlex46.docx
《DevelopingMobileAppbyFlex46.docx》由会员分享,可在线阅读,更多相关《DevelopingMobileAppbyFlex46.docx(83页珍藏版)》请在冰豆网上搜索。
![DevelopingMobileAppbyFlex46.docx](https://file1.bdocx.com/fileroot1/2023-1/22/ea617ded-6468-495f-8a48-59f952f5ce9d/ea617ded-6468-495f-8a48-59f952f5ce9d1.gif)
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