DevelopingMobileAppbyFlex46.docx

1、DevelopingMobileAppbyFlex46Developing_mobile_apps_flex_4.6 notesBecause of the smaller screen sizes available on mobile devices, mobile applicatin typicaly ollow different design patterns from browser-based applications. When developing for mobile applications, you typically divide the content into

2、a series of views for display on a mobile device.Each view contains components that are focused on a single task o r that contain a single set of information. The user typicallly “drills down”, or changes, from one view to another by tapping components in the view. The user can then use the devices

3、back button to return to a previous view. or build navigation into the application.Considerations in designing and developing mobile applications; Applications for mobile touchscreen devices differ from desktop and browser applications in several ways: To allow for easy manipulation by touch input,

4、mobile components generally have larger hit areas than they do in desktop or browser applications. The interaction patterns for actions like scrolling are different or touchscreen devices. Because of the limited screen area, mobile appplications are typically designed with only a small smount of the

5、 user interface visible on the screen at one time. User interface designs must take into account differences in screen resolution across devices. CPU and GPU performance in smore limited on phones and tablets than on desktop devices. Owining to the limited memory available on mobile devices , applic

6、atons must be carefult to conserve memory. Mobile applications can be quit and restarted at any time, such as when the device receives a call or text message.Therefore, building an application for a mobile device is not just a matter of scaling down a desktop application to a different screen size.

7、Flex lets you create sparate user interfaces appropriate for each form factor, while sharing underlying model and data access code among mobile, browser, and desktop projects.Restrictions on using Spark and MX components in a mobile applicationUse the Spark component set when creation mobile applica

8、tions in Flex. The Spark compnents are defined in the ponents.* packages. However, for perfomance reasons or because not all Spark components have skins for the Mobile theme, mobile applications do not support the entire Spark component set.Except for the MX charting controls and the MX Spacer contr

9、ol, mobile applications do not support the MX component set defined in the mx.* packages.Show the following table lists:ComponetComponentUse in mobile ?NotesSpark ActionBarSpark BusyIndicatorSpark CalloutSpark CalloutButtonSpark DateSpinnerSpark SpinnerListSpark SpinnerListContainerSpark TabbedViewN

10、avigatorSpark TabbedViewNavigtorApplicationSpark ToggleSwitchSpark ViewSpark ViewMenuSpark ViewNavigatorSpark ViewNavigatorApplicationYesThese new components support moible applicationsSpark ButtonSpark CheckBoxSpark DataGroupSpark Group/HGroup/VGroup/TitleGroupSpark Image/BitmapImageSpark LabelSpar

11、k ListSpark RadioButton/RadioButtonGroupSpark SkinnableContainerSpark ScrollerSpark TextAreaSpark Text InputYesMost of these components have skins for the Mobile theme. Label, Image, and BitmapImage can be used even though they do not have a mobile skin.Some Spark layout containers, such as Group an

12、d its sublasses, do not have skins. Therefore, you can use them in a mobile application.Other Spark skinnable componentsDiscouragedSkinnable Spark Components other than the ones listed above are discouraged because they do not have a skin for the Mobile theme. If the component does not have a skin f

13、or the Mobile theme, you can create one for your application.Spark DataGridSpark RichEditableTextSpark RichTextDiscouragedThese components are discouraged for performance reasons. While you can use them in a mobile application, doing so can affect performance.For the DataGrid control, performance is

14、 based on the amount of data that you render. For the RichEditableText and RichText controls, performance is based on the amount of text, and the mnumber of controls in the appplication.MX components other than Spacer and chartsNoMobile applications do not support MX components, such as the MX Butto

15、n, CheckBox, List, or DataGrid. These components correspond to the Flex 3 components in the mx.controls.* and mx.cotainers.* packages.MX SpacerYesSpacer does not use a skin, so it can be used in a mobile application.MX chart componentsYes, but with performance implicationsYou can use the MX chart co

16、ntrols, such as the AreaChart and BarChart, in a mobile application. The MX chart controls are in the mx.charts.* packages.The following Flex features are not supported in mobile applications: No support for drag-and-drop operations No support for the ToolTip Control No support for RSLsSpark Contain

17、er (in mobile)ContainerTypeDescriptionUsually associated with compnents(tag)Mobile/Web/DesktopUsing suggestionPerformance considerations with mobile applicationsOwing to the performance constraints of mobile devices, some aspects of mobile application development differ from development for browser

18、and desktop applications. Some performance considerations include the following:1. Write item renderers in ActionScriptFor mobile applications, you want list scrolling to have the highest performance possible. Write item renderers in ActionScript to achieve the highest performance.While you can writ

19、e item renerers in MXML, your application perfomance can suffer.Flex provides two item renderes that are optimized for use in a mobile application:ponents.LabelItemRenderer and ponents.IconItemRenderer; For more information on these item renderers, see Using a mobile item renderer with a Spark list-

20、based control;2. Use ActionScript and compiled FXG graphics or bitmaps to develop custom skinsThe mobile skins shipped with Flex are written in ActionScript with compiled FXG graphics to provide the highest performance. See Spark Skining and FXG and MXML graphics.3. Use text input components that us

21、e StageText; see Use text in a mobile application4. Take care when using MX chart components in a mobile applicationMX chart controls, however, they can affect performance depending on the size and type of charting data.5. Utilizing decreased memory:一、 尽量记住使用事件侦听与删除，特别是对于一次性事件一定要记得完成后删除事件；当对象不再使用时，可

22、以让其为null;记得使用System.gc()方法回收内存；（Delete all references to objects to make sure that garbage collection is triggered.）；Freezing and unfreezing are important for all objects, but are especially important for display objects. Even if display objects are no longer in the display list and are waiting to b

23、e garbage collected, they could still be using CPU-intensive code. For example, they can still be using Event.ENTER_FRAME. As a result, it is critical to freeze and unfreeze objects properly with the Event.REMOVED_FROM_STAGE and Event.ADDED_TO_STAGE events. The following example shows a movie clip p

24、laying on stage that interacts with the keyboard:/ Listen to keyboard eventsstage.addEventListener( KeyboardEvent.KEY_DOWN, keyIsDown);stage.addEventListener(KeyboardEvent.KEY_UP, keyIsUp);/Create object to store key statesvar keys:Dictionary=new Dictionary(true);function keyIsDown(e:KeyboardEvent):

25、void/Remember that the key was pressed.keyse.keyCode=true;if(e.keyCode=Keyboard.LEFT | e.keyCode=Keyboard.RIGHT) runningBoy.play(); function keyIsUp(e:KeyboardEvent):void /Remember that the key was released keyse.keyCode=false; for each (var value:Boolean in keys) if(value) return; runningBoy.stop()

26、; runningBoy.addEventListener(Event.ENTER_FRAME, handleMovement ); runningBoy.stop(); var currentState:Number=runningBoy.scaleX; var speed:Number=15; function handleMovement(e:Event):void if(keys Keyboard.RIGHT) e.currentTarget.x +=speed; e.currentTarget.scaleX=currentState; else if (keysKeyboard.LE

27、FT) e.currentTarget.x -=speed; e.currentTarget.scaleX = -currentState; shownBtn.addEventListener(MouseEvent.CLICK, showIt); removeBtn.addEventListener(MouseEvent.CLICK, removeIt); function showIt (e:MouseEvent):void addChild(runningBoy); function removeIt(e:MouseEvent) :void if(contains(runningBoy)

28、removeChild(runningBoy); / Listen to Event.ADDED_TO_STAGE and Event.REMOVED_FROM_STAGE runningBoy.addEventListener(Event.ADDED_TO_STAGE, activate); runningBoy.addEventListener(Event.REMOVED_FROM_STAGE, deactivate); function activate(e:Event) :void /Restart everything e.currentTarget.addEventListener

29、(Event.ENTER_FRAME, handleMovement); function deactivate(e:Event):void /Freeze the running boy consumes fewer CPU resources when nto shown e.currentTarget.removeEventListener(Event.ENTER_FRAME, handleMovement); e.currentTarget.stop(); 二、 针对显示对象； Shape, Sprite (Flash), View(Flex)因其对应的功能与属性的不一样，其大小也不一

30、样，在使用时一定要正确的创建对象； 三、 另一种方法就是在脚本调用创建对象时，在有可能的情况下重复使用同一个对象，避免重建对象；如以下两个不同的代码：一个应用实例，创建一图形来填充为背景：var myImage:BitmapData;var myContainer:Bitmap;const MAX_NUM:int=300;for (var i: int=0; iMAX_NUM; i+) /create a 20 x20 pixel bitmap, non-transparent myImage=new BitmapData(20,20,false 0xF0D062); /create a container for each BitmapData instance myContainer=new Bitmap(myImage); /Add it to the display list addChild(myContainer); /palace each container myContainer.x=(myContainer.width+8)*Math.round(i%20); myContainer.y=(myContainer.height+8)*int(i