Flex 移动开发技巧与诀窍 第4部分：创建弹出式警告与其他蒙皮的弹出式控件

要求：

必要知识

如果读者之前学过创建应用程序（但不一定是Flex移动应用程序），则可更好地利用这篇文章。

用户级别

中级

要求的软件产品

Flash Builder （下载试用版）

样本文件

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

 

本文是Flex 移动开发技巧与诀窍系列文章的第4部分。第1部分重点介绍视图切换和应用程序执行切换时的数据处理；第2部分介绍用户移动应用程序中的动作条及标签组件的样式化；第3部分学习如何隐藏这些组件以及如何将标签组件移至应用程序的顶部。本部分介绍的是mx.controls.Alert类的移动替代类。

用户在使用Flex 4.5开发移动应用程序时，很快就会发现自己无法使用mx.controls.Alert类。此时，用户可能很想了解如何最好地显示警告信息和弹出式信息。建议采用新的Spark SkinnablePopUpContainer 类在Flex 4.5移动应用程序中显示弹出式窗口。

为解释如何使用该类，笔者建立了AdobeAIR Launchpad和Tour de Flex的样本，同时创建了一个应用程序，用于显示如何使用该类来创建弹出式警告控件或更为通用的蒙皮的弹出式容器。如果用户想尝试使用本应用程序，可下载、解压本文的样本文件，将本项目导入Adobe Flash Builder中。

创建简单的警告

用户在运行应用程序时，会发现两个标签：简单的警告标签及蒙皮的弹出式标签（参见图1）。第一个标签带有Show Alert按钮，用户点击时，该按钮可对AlertMsg组件实例化。

      图1. 样本应用程序的主屏幕（左图）及简单的弹出式警告（右图）

AlertMsg使用SkinnablePopUpContainer来显示基本的警告信息。代码如下：

如果用户将open()调用中的第二个参数设置为“true”，则警告信息为模态化。

创建蒙皮的弹出式容器

应用程序中的第二个标签显示出蒙皮的弹出式容器（参见图2）。

      图2. 蒙皮的弹出式视图（左图）及蒙皮弹出式标签（右图）

视图本身的代码与上一视图代码很相似，主要区别在于该视图使用MyPopupComponent.mxml类来促进蒙皮：

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

最后是skin类的相关部分，这些部分环绕在右上角位置，并添加了阴影：

总结

如果用户想了解关于Flex移动应用程序蒙皮的更多内容，请阅读Jason San Jose系列，首先阅读Flex移动皮肤——第1部分：优化蒙皮基础。如果用户没有阅读过这些文章，或许还想阅读：Flex移动技巧与诀窍——第2部分：用户应用程序标签及动作条的样式化，这篇文章介绍了应用程序样式化（非蒙皮）的某些方式。

同时，如果用户想了解如何将视图过渡到移动应用程序中，请阅读该系列的第5部分。