Flex 移动应用技巧

今天，Flash Builder Burrito (仍在测试版) 允许您为 Android 设备和 BlackBerry PlayBook 开发原生应用程序。新的 <s:MobileApplication> 标签和 Flex Hero 的新移动组件极大地改善了您的应用程序设计方式。它已经是开发多屏幕应用程序最高效的框架，而这仅仅是个开始，因为 Adobe 将会支持越来越多的设备。

技巧 #1：关闭您的应用程序

这是 Flash 开发者在 Android 应用方面最常误解的一点。当您退出应用程序时 (例如按下主屏幕按钮)，应用程序仍在后台运行。您需要了解这种默认行为并加以控制。这是从 Android 继承来的一个非常强大的行为，但有时会破坏智能手机上的用户体验。让我给您举个例子。AIR 2.5 中引入的 Geolocation API 会实时返回您的坐标。在 Android 上，它直接利用了操作系统的 GPS API，我们都知道这会消耗大量资源。在这个示例中，我只是使用 Geolocation API 来获取我的位置，并在一个文本字段中显示纬度。别忘了在 XML 清单中添加 Android 权限 “ACCESS_FINE_LOCATION”。

在第一个屏幕上，您可以看到我的应用程序正在寻找我的位置，Android GPS 图标出现在了状态栏。然后我点击主屏幕按钮 (屏幕 2)。GPS 仍在后台工作！如果我查看正在运行的服务，tip1quitHandler 应用确实还活着。它毫无意义地消耗着我的资源。

要控制应用程序的行为，您必须侦听原生应用程序上的 DEACTIVATE 事件。只需在您的主 MXML 文件中添加这些代码行：

<?xml version="1.0" encoding="utf-8"?>
<s:MobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark"
		firstView="views.tip1quitHandlerHome"
		creationComplete="mobileapplication1_creationCompleteHandler(event)">
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
 
			protected function mobileapplication1_creationCompleteHandler(
                               event:FlexEvent):void
			{
 
				NativeApplication.nativeApplication.addEventListener(
                                        Event.DEACTIVATE, onDeactivateApp);
			}
 
			protected function onDeactivateApp(event:Event):void
			{
				NativeApplication.nativeApplication.exit();
			}
 
		]]>
	</fx:Script>
</s:MobileApplication>

在这种情况下，当用户返回主屏幕时，我只是关闭了应用程序。您也可以选择移除 Geolocation 的事件侦听器，并在 Event.ACTIVATE 事件触发时重新激活它。这为您在 Android 上的操作提供了前所未有的自由度和控制力。

技巧 #2：在导航到新视图之前加载数据

这是由于新的 MobileApplication 架构而导致的另一个经典错误。当您需要从互联网下载一些数据时，不要在视图中调用该服务。如果您这样做，每次返回该视图时都会发起一个无用的请求。更新主应用程序文件以调用您的服务，并在结果事件上导航到视图。删除 MobileApplication 标签中的 firstView 参数，并在 creationComplete 事件上调用您的服务。当您收到 resultEvent 时，导航到第一个视图，并将 event.result 对象作为 ArrayCollection 传递。

protected function operation1():void
	{
		Operation1Result.token = speakersDevoxx.Operation1();
	}
 
	protected function mobileapplication1_creationCompleteHandler(
             event:FlexEvent):void
	{
		// TODO Auto-generated method stub
		operation1();
	}
 
	protected function Operation1Result_resultHandler(event:ResultEvent):void
	{
		// TODO Auto-generated method stub
		navigator.pushView(views.tip2devoxxHome,
                      event.result as ArrayCollection);
	}

查看视频，了解我是如何在 5 分钟内使用 Flash Builder 4 的 Data Wizard 构建一个连接到 DEVOXX REST 服务的应用程序的。一旦您的数据加载完成，它就会在视图之间保持持久化。在我的示例中，我获取了演讲者的列表并将它们存储在 Array Collection 中。当我想要显示某个演讲者的详细信息时，我只需导航到一个新视图，并将 list.selectedItem 对象传递过去。借助 AIR 2.5，您还可以选择将数据本地存储在 SQLite 数据库中。

技巧 #3：显示自定义标签

在使用移动项目渲染器来滚动数据列表时，可以获得最佳性能。别忘了，在 List 中您也可以使用 labelFunction 参数，而不是经典的 labelField。一个典型的用例是当您想在列表中显示用户的全名时。例如，如果您只从服务中获取名字和姓氏，则可以使用这个简单的技巧。

<fx:Script>
		<![CDATA[
			public function myFullName(obj:Object):String
			{
				return(obj.lastName + " " + obj.firstName);
			}
 
			protected function list1_clickHandler(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				navigator.pushView(views.mySpeaker,
                                        list.selectedItem);
			}
 
		]]>
	</fx:Script>
	<s:List id="list" width="100%" height="100%" dataProvider="{data}" 
             labelFunction="myFullName" click="list1_clickHandler(event)">
 
	</s:List>

技巧 #4：始终声明一个启动画面

您的 AIR 应用程序启动总是需要一秒钟。Flex Hero 框架对当前的 Preloader 类进行了一些调整，以便在经典的加载体验之前显示一张图像。始终在您的主 MobileApplication 标签中声明一个启动画面 (仅一张静态图像)，以改善用户体验。用一张图片来欢迎您的用户总比一个黑色的背景要好。有几个“ratio”参数可用于控制启动画面的显示。您应该考虑 letterbox 和 zoom ratio 缩放模式。使用 MobileApplication 的 splashScreenImage 和 splashScreenScaleMode 参数。

<s:MobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:speakersdevoxx="services.speakersdevoxx.*"
	creationComplete="mobileapplication1_creationCompleteHandler(event)" 
         title="Loading..."
	splashScreenImage="@Embed('devoxxSplash.png')" splashScreenScaleMode="zoom">

技巧 #5：检查屏幕方向

我非常喜欢 Flex 4 的自定义布局。您可以在此处阅读我关于自定义布局的文章：http://www.riagora.com/2010/05/flex-4-and-custom-layouts/ 默认情况下，移动 List 组件将使用 VerticalLayout 类。根据您显示的内容，VerticalLayout 并不总是最佳选择。根据您设备的屏幕方向 (纵向或横向)，您可能还希望更改与列表关联的布局。当我显示图片时，我更喜欢 TileLayout 和“rows”方向，但是当我切换到横向模式时，我更喜欢 TileLayout 和“columns”方向。这里有两个相同的应用程序截图，根据屏幕方向使用两种不同的布局。

左边是纵向模式，右边是横向模式。为了检测用户何时旋转屏幕，我侦听视图上的 ResizeEvent…我不确定这是最好的处理方式…但它有效

protected function checkOrientation():void{
				if(navigator.landscapeOrientation == true){
					currentState = "landScapeView";
				}else{
					currentState = "portrait";
				}
			}
 
			protected function onResizeView(event:ResizeEvent):void
			{
				checkOrientation();
			}

然后只需声明应用程序的状态以及与这些状态相关联的布局。

<s:states>
		<s:State name="portrait"/>
		<s:State name="landScapeView"/>
	</s:states>
	<s:List width="100%"  height="100%" dataProvider="{myData}" 
             itemRenderer="views.mySecondIR">
		<s:layout.portrait>
			<s:TileLayout orientation="rows"/>
		</s:layout.portrait>
		<s:layout.landScapeView>
			<s:TileLayout orientation="columns"/>
		</s:layout.landScapeView>
	</s:List>

技巧 #6：使用自定义布局

我尝试使用我的自定义 coverflow 布局，并且我对它在我的 Android 设备上的良好性能感到非常惊讶。查看视频了解它是如何工作的。

技巧 #7：您的技巧

现在我需要您的技巧 如果您发现了能改善 Flex 移动用户体验的好技巧，请发表评论或链接到您的博客文章。