移动设备应用程序中的第一个标签通常是以下标签之一:
-
<s:ViewNavigatorApplication> 标签用于定义只有一个部分的移动设备应用程序。
-
<s:TabbedViewNavigatorApplication> 标签用于定义有多个部分的移动设备应用程序。
开发用于平板电脑的应用程序时,屏幕大小限制并不像在手机应用程序中那样重要。因此,对于平板电脑,不需要以小视图来构建应用程序。可以使用标准 Spark Application 容器以及受支持的移动设备组件和外观来构建应用程序。
移动设备应用程序容器具有以下默认的特性:
特性 | Spark ViewNavigatorApplication 和 TabbedViewNavigatorApplication 容器 |
---|---|
默认大小 | 100% 高,100% 宽,占整个可用屏幕空间。 |
子代布局 | 由组成应用程序视图的各 View 容器定义。 |
默认内边距 | 0 像素。 |
滚动条 | 无。如果在应用程序容器的外观中添加滚动栏,用户可以滚动整个应用程序。包括应用程序的 ActionBar 和选项卡栏区域。您通常并不希望滚动视图的这些区域。因此,将滚动条添加到应用程序的各 View 容器中,而不是添加到应用程序容器的外观中。 |
移动设备应用程序容器与 Spark Application 容器的区别
Spark 移动设备应用程序容器的大部分功能与 Spark Application 容器相同。例如,可以对移动设备应用程序容器应用样式,其方法与 Spark Application 容器的样式应用方法相同。
Spark 移动设备应用程序容器有一些与 Spark Application 容器不同的特征:
-
支持持久化
支持在磁盘中存储和加载数据。通过持久化机制,用户可以中断移动设备应用程序的运行,例如接听电话,然后在通话结束时恢复应用程序的状态。
-
支持视图导航
ViewNavigatorApplication 容器自动创建一个 ViewNavigator 容器,以控制视图之间的导航。
TabbedViewNavigatorApplication 容器自动创建一个 TabbedViewNavigator 容器,以控制部分之间的导航。
-
支持设备的后退和菜单按钮
当用户按下后退按钮时,应用程序将导航回到堆栈中的上一个视图。当用户按下菜单按钮时,将显示当前视图的 ViewMenu 容器(如果已经定义)。
有关 Spark 应用程序容器的更多信息,请参阅 About the Application container。
处理应用程序级别的事件
NativeApplication 类代表一个 AIR 应用程序。它负责提供应用程序信息和应用程序级功能,并分派应用程序级事件。可以使用静态属性 NativeApplication.nativeApplication 来访问与移动设备应用程序对应的 NativeApplication 类的实例。
例如,NativeApplication 类定义了可以在移动设备应用程序中处理的 invoke 和 exiting 事件。下面的示例引用该 NativeApplication 类,来定义 exiting 事件的事件处理函数:
<?xml version="1.0" encoding="utf-8"?> <!-- containers\mobile\SparkNativeApplicationEvent.mxml --> <s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.EmployeeMainView" creationComplete="creationCompleteHandler(event);"> <fx:Script> <![CDATA[ import mx.events.FlexEvent; protected function creationCompleteHandler(event:FlexEvent):void { // Reference NativeApplication to assign the event handler. NativeApplication.nativeApplication.addEventListener(Event.EXITING, myExiting); } protected function myExiting(event:Event):void { // Handle exiting event. } ]]> </fx:Script> </s:ViewNavigatorApplication>
请注意,需使用 ViewNavigatorApplication.navigator 属性来访问 ViewNavigator。
在应用程序中添加启动屏幕
Spark Application 容器是 ViewNavigatorApplication 和 TabbedViewNavigatorApplication 容器的基类。用于 Spark 主题时,Spark Application 容器支持应用程序预加载器,以显示应用程序 SWF 文件的下载和初始化进度。
用于 Mobile 主题时,则可以显示启动屏幕。启动屏幕在应用程序启动期间显示。
Adobe 建议 | 有要分享的教程? | ||
为具有多个屏幕大小的应用程序自定义 Flex 应用程序 DPI(英文)Renaun Erickson构建可跨智能移动设备和平板电脑运行的 Flex 移动设备应用程序需要了解屏幕大小、屏幕每英寸点数 (DPI) 和屏幕分辨率。 |
从图像文件中添加启动屏幕
可以直接从图像文件中加载启动屏幕。要配置启动屏幕,请使用应用程序类的 splashScreenImage、splashScreenScaleMode 和 splashScreenMinimumDisplayTime 属性。
例如,以下示例从使用信箱格式的 JPG 文件中加载启动屏幕。
<?xml version="1.0" encoding="utf-8"?> <!-- containers\mobile\SparkMobileSplashScreen.mxml --> <s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.EmployeeMainView" splashScreenImage="@Embed('assets/logo.jpg')" splashScreenScaleMode="letterbox"> </s:ViewNavigatorApplication>
从自定义组件中添加启动屏幕
上一部分中的示例使用 JPG 文件定义启动屏幕。该机制的缺点是:无论运行应用程序的移动设备具有什么功能,应用程序都使用相同的图像。
移动设备具有不同的屏幕分辨率和大小。您可以定义自定义组件,而不是将单个图像用作启动屏幕。此组件决定着移动设备的功能并将合适的图像用作启动屏幕。
使用 SplashScreenImage 类定义自定义组件,如下例所示:
<?xml version="1.0" encoding="utf-8"?> <!-- containers\mobile\myComponents\MySplashScreen.mxml --> <s:SplashScreenImage xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <!-- Default splashscreen image. --> <s:SplashScreenImageSource source="@Embed('../assets/logoDefault.jpg')"/> <s:SplashScreenImageSource source="@Embed('../assets/logo240Portrait.jpg')" dpi="240" aspectRatio="portrait"/> <s:SplashScreenImageSource source="@Embed('../assets/logo240Landscape.jpg')" dpi="240" aspectRatio="landscape"/> <s:SplashScreenImageSource source="@Embed('../assets/logo160.jpg')" dpi="160" aspectRatio="portrait" minResolution="960"/> </s:SplashScreenImage>
在组件定义内,使用 SplashScreenImageSource 类定义每个启动屏幕图像。SplashScreenImageSource.source 属性指定图像文件。SplashScreenImageSource dpi、aspectRatio 和 minResolution 属性定义显示图像所需的移动设备功能。
例如,第一个 SplashScreenImageSource 定义仅指定图像的 source 属性。由于没有用于 dpi、aspectRatio 和 minResolution 属性的设置,此图像可以在任何设备上使用。因此,它可以定义在没有其它图像与设备功能相符时显示的默认图像。
第二和第三个 SplashScreenImageSource 定义指定在纵向或横向模式下用于 240 DPI 设备的图像。
最后一个 SplashScreenImageSource 定义指定在纵向模式下用于 160 DPI 设备、最低分辨率为 960 像素的图像。minResolution 属性的值与 Stage.stageWidth 和 Stage.stageHeight 属性值中的较大值进行对照。这两个值中的较大值必须等于或大于 minResolution 属性。
以下移动设备应用程序使用此组件:
<?xml version="1.0" encoding="utf-8"?> <!-- containers\mobile\SparkMobileSplashComp.mxml --> <s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.EmployeeMainView" splashScreenImage="myComponents.MySplashScreen"> </s:ViewNavigatorApplication>
SplashScreenImage 类自动确定与设备功能最匹配的图像。此匹配操作基于每个 SplashScreenImageSource 定义的 dpi、aspectRatio 和 minResolution 属性。
决定最佳匹配项的步骤如下所示:
-
决定所有与移动设备设置匹配的所有 SplashScreenImageSource 定义。匹配发生在以下情况:
-
SplashScreenImageSource 定义没有对此设置进行显式定义。例如,dpi 属性的设置不与任何设备的 DPI 设置。
-
对于 dpi 或 aspectRatio 属性,此属性必须与移动设备的相应设置完全匹配。
-
对于 minResolution 属性,当 Stage.stageWidth 和 Stage.stageHeight 属性值中的较大值等于或大于 minResolution 时,此属性与设备上的设置匹配。
-
-
如果有多个 SplashScreenImageSource 定义与设备匹配,则:
-
选择显式设置数最大的定义。例如,与仅指定 dpi 属性的 SplashScreenImageSource 定义相比,同时指定 dpi 和 aspectRatio 属性的 SplashScreenImageSource 定义是更佳匹配项。
-
如果仍存在多个匹配项,请选择 minResolution 值最大的匹配项。
-
如果仍存在多个匹配项,请选择组件中定义的第一个匹配项。
-
显式选择启动屏幕图像
SplashScreenImage.getImageClass() 方法决定与移动设备功能最匹配的 SplashScreenImageSource 定义。您可以重写此方法以添加自己的自定义逻辑,如下例所示。
在该示例中,添加用于 iOS 启动屏幕的 SplashScreenImageSource 定义。在重写 getImageClass() 方法的主体中,首先确定应用程序是否在 iOS 中运行。如果是这样,显示特定于 iOS 的图像。
如果应用程序未在 iOS 中运行,则调用 super.getImageClass() 方法。此方法使用默认实现决定要显示的 SplashScreenImageSource 实例:
<?xml version="1.0" encoding="utf-8"?> <!-- containers\mobile\myComponents\MyIOSSplashScreen.mxml --> <s:SplashScreenImage xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <fx:Script> <![CDATA[ // Override getImageClass() to return an image for iOS. override public function getImageClass(aspectRatio:String, dpi:Number, resolution:Number):Class { // Is the application running on iOS? if (Capabilities.version.indexOf("IOS") == 0) return iosImage.source; return super.getImageClass(aspectRatio, dpi, resolution); } ]]> </fx:Script> <!-- Default splashscreen image. --> <s:SplashScreenImageSource source="@Embed('../assets/logoDefault.jpg')"/> <s:SplashScreenImageSource source="@Embed('../assets/logo240Portrait.jpg')" dpi="240" aspectRatio="portrait"/> <s:SplashScreenImageSource source="@Embed('../assets/logo240Landscape.jpg')" dpi="240" aspectRatio="landscape"/> <s:SplashScreenImageSource source="@Embed('../assets/logo160.jpg')" dpi="160" aspectRatio="portrait" minResolution="960"/> <!-- iOS splashscreen image. --> <s:SplashScreenImageSource id="iosImage" source="@Embed('../assets/logoIOS.jpg')"/> </s:SplashScreenImage>