AIR/Flex学习笔记（4）

c 本来这篇想介绍一下AIR/Flex的调试，但是仔细一想这些都是要靠经验积累的，而且如果熟悉其他开发环境的话（比如VS），基本上试着用几下就熟练了。关于这部分内容，可以参考Adobe的帮助文档，或者这篇文章—Debugging Flex 4 applications。

    这篇还是以一个实例为基础，讲一下基于Flex4 spark组件的AIR程序开发，让我们体验一下spark组件的魅力，体验一下AIR/Flex开发的惊艳和快感。

 

    本文中用到的例子来自Flex Developer Center上的一篇文章Skinning a Flex 4 desktop application with MXML graphics，请大家自行去下载源代码。另外如果你英文不好，可以参考有人翻译的中文版。本人非常感谢作者的这篇文章，我学习AIR/Flex就是靠研究这篇文章和一周学习Flex4视频中文版入门的。

    言归正传，我们下载后拿到appskin_solution.fxp文件，fxp是Flex工程的打包文件，我们可以直接通过Flash Builer的“File -> Import Flex Project (FXP)...”来导入项目，导入时有两种方式可供选择。其实，很多时候我们拿到的不是fxp格式的打包文件，而是源码文件夹，此时是找不到类似vc工程中.sln或.vcproj的工程文件的，怎样在已有的代码上创建一个Flex工程呢？很简单，我们只要选择Flash Builer的“File -> New -> Flex Project”，在弹出对话框中“Project location”项中选择源码文件夹，将“Project name”指定为与文件夹根目录下的mxml文件同名（注：AIR工程会有一个projectName-app.xml文件），并指定“Project type”为AIR，选择好sdk版本即可。事实上，如果你将刚才的appskin_solution.fxp文件后缀改为.zip，然后解压缩一下，就能看到工程源代码了，fxp只是简单打了个包。我们可以用“在源代码基础上创建一个flex工程”的方式，建一个“PhotoGallery”工程，然后运行一下，一个拥有漂亮界面的桌面程序便跑起来了，很惊艳吧。

 

 

    对于这个程序的讲解，原文已经非常详细了，希望大家能仔细研究有所收获，在这里我们再深入讨论几个问题，另外我们还要对这个程序进行一番改造！

    1、PhotoGallery-app.xml文件

    面对一个AIR程序，我们首先应该关注根目录下的project.mxml和project-app.xml两个文件。xml文件用来做程序的外观配置，我们可以看到对程序标题、边框、尺寸、图标等做修改是非常方便的，具体可以参考这篇文章：AIR 配置文件 (*-app.xml) 说明。

    2、PhotoGallery.mxml文件

    打开看一下，这个文件的代码非常简单，设置了一下WindowedApplication组件的属性，并添加了一个SlideShow控件。有几个小知识点如下：

    a、s代表spark组件空间，“xmlns:s="library://ns.adobe.com/flex/spark"”这句即引入了s域；

    b、其他空间：fx到Flex4换到了2009，mx是旧版本的Flex组件空间；“xmlns:view="view.*"”一句表示view空间包含src/view目录下的代码文件，事实上Flex代码将工程目录的src文件夹视为空间目录的根；

    c、WindowedApplication组件是AIR程序必须的组件，表示主窗口程序，像“showStatusBar”、最大化最小化特效等属性都可以配置；

    d、一般可皮肤化的组件（继承自SkinnableComponent）都有“skinClass”属性，通过该属性可以定制组件皮肤，是自定义UI的有效方法，后面会具体讲；

    e、“<view:SlideShow/>”标签表示在窗口视图中实例化了一个SlideShow组件，Flex的mxml文件中通过标签方式实例化组件，且将非可视化的实例放在“fx:Declarations”标签内；而在ActionScript文件中，则需要通过定义变量或者new的方式实例化对象；

    f、SlideShow算是Group组件的子类和扩展，严格来说算不上组件开发，关于组件开发后面的文章会仔细讲。

 

    好了，下面我们要对这个程序做一番改造了。也许你发现了，这个AIR程序虽然很酷，但是主窗口的标题栏和边框采用的是Windows本地窗口皮肤风格，能不能对他们进行自定义呢？我们开始吧！

    首先在PhotoGallery-app.xml文件的“initialWindow”标签下找到“systemChrome”这个标签，将其值设为none。然后打开PhotoGallery.mxml文件，将WindowedApplication的skinClass属性值设为“spark.skins.spark.SparkChromeWindowedApplicationSkin”，并将showStatusBar属性值设为false，代码如下：

AIR/Flex学习笔记（4）

    运行一下，我们看到了一个全新的Windows窗口风格，不过视图显示不正常了，如下图：

AIR/Flex学习笔记（4）

    我们通过skinClass属性为WindowedApplication组件设置了Flex4支持的一种spark皮肤——SparkChromeWindowedApplicationSkin，该皮肤主要修改了标题栏、状态栏和边框的外观（在Flex中一般称呼窗口边框为Chrome），当然我们将状态栏去掉了。修改的思路是将原生窗口的TitleWindow、StatusBar和Chrome隐藏，然后自绘，我们也可以按照这个思路写代码自定义窗口风格。

   为什么视图显示不正常了呢？我们知道原程序是将WindowedApplication的皮肤设置为自定义的CustomAppSkin，而我们将皮肤指定为SparkChromeWindowedApplicationSkin。打开CustomAppSkin.mxml文件代码，分析如下：

AIR/Flex学习笔记（4）

    我们可以看到各部分显示控件的代码，其中id为contentGroup的Group组件是WindowedApplication组件定义好的标准组成构件，当你在主应用文件中声明视觉对象的时候，他们在应用启动的时候自动添加到contentGroup容器。当你使用一个自定义皮肤的时候，你必须在皮肤中定义group，然后把contentGroup的id指派给他，框架便知道要把在主应用文件里定义的视觉组件放到哪里。在这个程序中，contenGroup中放置的是PhotoGallery.mxml中的“<view:SlideShow/>”标签。而我们改动后的皮肤是没有contenGroup以外的内容的（StatusBar也去掉了），因此显示的窗口中只有了图片，并且按照默认布局方式被显示到了左上角。

    继续改造！我们需要做的就是将“圆角矩形背景”、“顶部文字”、“SlideShow”和“底部图片名称”全部放到contentGroup中，按原来的布局放好。将PhotoGallery.mxml的代码改为如下图所示即可，其实几乎是将CustomAppSkin.mxml中的代码直接拷贝过来，只是修改了一些位置和布局参数。

 

    ok，再来看一下效果吧，是不是漂亮了很多呢？记住在Flex中，如果可视组件发生z轴方向上的层叠，那么将会按照代码标签声明的次序依次显示组件。

AIR/Flex学习笔记（4）

 

    大功告成，但是意犹未尽。下一篇我们要将这个程序改造成自定义窗口风格和皮肤的桌面程序，将会是更加激动人心的尝