Flex移动应用程序开发的技巧和窍门(四)

范例文件

• flex-mobile-dev-tips-tricks-pt4.zip

这是本系列文章的第四部分，该系列文章涵盖Flex移动开发的秘诀与窍门。 第一部分关注切换视图以及切换执行应用时的数据处理。 第二部分 关注动作条的样式以及你的移动应用中的标签组件。在 第三部分中,你学会了如何隐藏那些组件，并且你看到了如何将标签组件移动至应用的最顶端。而本部分是关于mx.controls.Alert类在移动应用中的一个替代者。

当你使用Flex 4.5开发移动应用时，你可能会很快发现你无法使用mx.controls.Alert类。此时，你很可能想知道显示一个提示或者一个弹出消息的最佳实践方法是什么。在Flex 4.5移动应用中推荐使用的显示弹出窗口的方法是通过一个新的叫SkinnablePopUpContainer的Spark类。

为了阐明如何使用这个类，我为Adobe AIR Launchpad和Tour de Flex创建了一个示例。我同样还创建了一个简单的例子用以展示如何用这个类来建立一个提示弹出框控制或者一个更通用的带皮肤的弹出框体。如果你要亲自尝试这个应用，下载该示例文件然后解压将并此项目导入Adobe Flash Builder。

创建一个简单的提示

当运行这个应用时，你会看到两个标签：Simple Alert和Skinned PopUp（见图 1）。第一个标签中有一个Show Alert按钮，当点击时会激活一个AlertMsg组件。

图 1. 示例应用的主界面（左）和一个简单的提示框体（右）。

AlertMsg组件使用一个SkinnablePopUpContainer来显示一个基本的提示消息。下面是代码：

<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark" title="SampleAlert" > <fx:Declarations> <fx:Component className="AlertMsg"> <s:SkinnablePopUpContainer x="70" y="300"> <s:TitleWindow title="My Message" close="close()"> <s:VGroup horizontalAlign="center" paddingTop="8" paddingBottom="8" paddingLeft="8" paddingRight="8" gap="5" width="100%"> <s:Label text="My alert message text here..."/> <s:Button label="OK" click="close()"/> </s:VGroup> </s:TitleWindow> </s:SkinnablePopUpContainer> </fx:Component> </fx:Declarations> <s:layout> <s:VerticalLayout paddingTop="5" paddingBottom="5" paddingLeft="5" paddingRight="5" gap="10" horizontalAlign="center" verticalAlign="top"/> </s:layout> <s:TextArea text="This sample shows how you can display a simple alert message in a mobile application using the Spark SkinnablePopUpContainer. The mx.controls.Alert is not recommended for mobile." width="98%" editable="false"/> <s:Button label="Show Alert" click="(new AlertMsg()).open(this, false)"/> </s:View>

如果你把open()中的第二个参数设为true，那么提示消息将会以一个模态对话框（modal）的形式出现。

创建一个有皮肤的弹出框框体

本应用的第二个标签展示了一个带皮肤的弹出框体（见图 2）。

图 2. 带皮肤的弹出框视图（左）和带皮肤的弹出框本身（右）。

视图本身的代码与前面视图的代码很相似。主要的区别是本视图使用了MyPopupComponent.mxml类以便于创建皮肤：

<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="SkinnablePopUpContainer" xmlns:components="components.*"> <!-- Note: This class uses the MyPopupComponent.mxml class --> <fx:Declarations> <components:MyPopupComponent id="popup"/> </fx:Declarations> <s:layout> <s:VerticalLayout paddingTop="5" paddingBottom="5" paddingLeft="5" paddingRight="5" gap="10" horizontalAlign="center" verticalAlign="top"/> </s:layout> <s:TextArea width="98%" editable="false" text="Creates a skinnable pop-up that might be used as a simple window such as an alert or help that appears as a pop-up window on top of its parent rather than within the layout and is typically defined in its' own MXML file."/> <s:Label id="txt"/> <s:HGroup> <s:Button label="Open Popup" click="popup.open(this)"/> </s:HGroup> </s:View>

下面是MyPopComponent类的代码，其中用到了SkinnablePopUpContainer和MyPopupSkin类：

<?xml version="1.0" encoding="utf-8"?> <s:SkinnablePopUpContainer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" skinClass="skins.MyPopupSkin" x="70" y="300"> <!-- Also uses the MyPopupSkin.mxml class --> <s:VGroup paddingTop="8" paddingBottom="8" paddingLeft="8" paddingRight="8" horizontalAlign="center"> <s:Label text="My Skinned Popup Showing..."/> <s:Button label="Close" click="this.close()"/> </s:VGroup> </s:SkinnablePopUpContainer>

最后，下面是皮肤类本身的相关部分，它对右上角进行了圆化处理并添加了阴影：

<!--- Defines the background and content group used by this skin. --> <s:Group id="chrome" left="0" right="0" top="0" bottom="0" visible.closedGroup="false"> <!-- Background and border - sets one corner rounded and adds a drop shadow filter--> <s:Rect left="0" right="0" top="1" bottom="0" id="background" topRightRadiusX="15"> <s:filters> <s:DropShadowFilter color="0x000000" blurX="20" /> </s:filters> <s:fill> <s:SolidColor color="0xF9F1D3"/> </s:fill> <s:stroke> <s:SolidColorStroke weight="2" color="#323232" joints="bevel" alpha=".5"/> </s:stroke> </s:Rect> <!--- @copy spark.components.SkinnableContainer#contentGroup --> <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0"> <s:layout> <s:BasicLayout/> </s:layout> </s:Group> </s:Group>