Flex程序包装页面（wrapper）结构解析

Flex程序通常使以swf文件的形式嵌入到web页面（html, ASP, JSP, cold Fusion等）中运行的，这些称作Flex程序的包装页面（wrapper）。

最简单的包装页面只需要将编译好的Flex程序的swf格式文件用<object>和<embed>标签嵌入到WEB页面即可。这里处理方法虽然简单，但是也存在很多问题，比如：假如浏览器的flash payer版本不满足要求怎么办？假如浏览器没有安装flash player插件怎么办？假如浏览器不支持JavaScript和ActiveX空间怎么办？这些情况下Flex程序没法运行或者没法实现某些功能。因此必须对html的包装页面功能进行扩充。

手动编写JavaScript当然也可以解决上面的问题，但是费时费力，其实Flex的SDK已经根据不同的需求给我们准备好了包装页面的模板，这些模板存放在install_dir/sdk/3.0.0/templates里面，Flex程序发布的时候，Flex Builder会根据编译选项的设置加载不同的模板从而生成满足用户需求的包装页面。

继续下面的内容之前先要了解一下flex里面两个基本的概念：快速安装（express install）和深度链接(deep linking)。快速安装是指客户端封装页面提供的一种功能，利用它可以监测flash插件版本，如果插件未安装或者版本太低那么就从指定链接下载安装新flash插件；深度链接给Flex程序提供URL映射以及书签的功能：程序状态变化的时候更新URL、根据URL确定程序状态、响应浏览器地址栏的变化等。

我们可以修改项目的编译选项来定制我们的包装页面，右键单击项目名称，选择“ properties”，打开属性页（如下图所示）：





点击窗口左侧的“Flex Compiler”，窗口右侧会出现“HTML wrapper”的信息，这些信息都是关于封装页面的。“Generate HTML wrapper file”表示是否生成包装页面，如果不选择这项，编译的时候只生成单独的swf文件；第二项指定Flex程序运行所需要的flash插件的最低版本；User Express Install表示是否启用快速安装；而Enable integration with browser navigation这项实际上就是指的是否启动深度链接，使用户可以根据浏览器URL对程序进行导航。

保持默认选项不变（全选），然后选择Project à Export Release Build…生成Flex程序的发布版本，工程的目录结构如下图所示：



上面的bin-release就是Flex程序运行需要的所有文件，对于一般应用我们将Flex生成的这些文件发布到web服务器上，Flex程序就可以运行了。但是很多时候我们会面临着一些特殊的要求，比如flex程序是整个web项目的一部分，它需要和web项目的其它部分进行数据交流；比如flex程序运行于某一内网上，flash插件需要从内网指定服务器下载；比如flex程序需要js的支持，在浏览器禁止js的时候需要对用户进行提示等等。在上述情况下我们就必须对flex
builder自动生成的封装页面进行一些修改才能满足我们的需要。

哪些文件是我们需要修改的呢？哪些功能我们可以直接使用？首先需要了解下这些文件功能以及重要文件的内部逻辑。展开上图所示的bin-release目录，其中wrapper.swf是编译后的flex程序，可以单独使用，其它的文件是封装页面的所有支持文件。和项目同名的html文件wrapper.html是封装页面主文件，playProductInstall.swf嵌入到主文件里，主要完成flash浏览器插件的下载安装，history目录下所有文件为flex程序提供深度链接的功能，AC_OETags.js是html文件使用的脚本文件，可以进行flash浏览器插件版本检测，以及用脚本的形式完成swf文件的嵌入。

这些文件中需要重点了解AC_OETags.js和wrapper.html的页面逻辑。AC_OETags.js中有两个重要的函数：DetectFlashVer(reqMajorVer,
reqMinorVer, reqRevision)，主要完成flash浏览器版本的检测，比如flex程序需要运行在9.0.28版本或者以上，只需要调用DetectFlashVer(9,
0, 28)，如果返回true表示插件满足条件。另外一个重要函数是AC_FL_RunContent(“插件属性1名称”,
“插件属性1取值”,……, “插件属性n名称”, “插件属性n取值”
)，它以<Object>和<Embed>两个html标签的形式将swf文件嵌入到html页面中，函数传入的参数是swf嵌入对象的属性名称以及属性取值，以配对的形式传入。

html主页面分成两个部分<script>和<noscript>，分别于对应浏览器支持插件和不支持插件两种情况的页面显示。如果你的程序必须有js的支持，那么可以将<noscript>部分改成提示用户打开浏览器js功能的文本即可。html封装页面的主要逻辑如下面代码所示：

……..

<script language="JavaScript" type="text/javascript">

//
嵌入js脚本文件

<script src="AC_OETags.js" language="javascript"></script>

<script src="history/history.js" language="javascript"></script>

//
定义程序运行所需版本号

var requiredMajorVersion = 9;

var requiredMinorVersion = 0;

var requiredRevision = 28;

//
首先检测是否有playerProductInstall.swf运行需要的flash浏览器插件；

hasProductInstall = DetectFlashVer(6, 0, 65);

//
然后检测是否有主程序运行（wrapper.swf）需要的flash浏览器插件；

hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);

if ( hasProductInstall & ! hasRequestedVersion) {

//
运行playerProductInstall.swf，打开插件下载安装页面

……

AC_FL_RunContent(……);

} else (hasRequestedVersion) {

//
嵌入flex程序

……

AC_FL_RunContent(……);

} else {

//
如果探测不到任何flash浏览器插件，那么直接嵌入flash插件下载链接

document.write(“flash插件下载超链接”)

}

<script>

<noscript>

//
这里可插入提示用户打开浏览器js功能的文本

<object>

……..

</object>

</noscript>

flex的封装页面逻辑其实非常简单，很多判断模板都提供了可调用的函数，在了解了封装页面各部分的功能和逻辑之后，如果我们需要对flex程序的封装页面进行裁剪或者修改就非常简单了。下一部分将结合一个例子进行说明。