flex3.0新特性(2)---升级AIR应用程序， Flex 3.0中使用Ajax技术

23.3  升级AIR应用程序
AIR桌面应用程序可导出为air文件。双击此文件就能开始安装应用程序。若系统中已安装旧版的AIR应用程序，双击air文件时会提示更新AIR应用程序。这种方式是非程序性的方式。Flex 3.0中新增Update类，用以升级AIR应用程序。本小节将介绍使用Flex 3.0实现AIR应用程序的升级。

23.3.1  升级前的准备
升级前需要做些准备，包括导出最新版本的AIR应用程序和定义版本信息的文件。

1．导出AIR应用程序
导出的AIR应用程序得到的是一个安装包（.air格式），可双击打开并安装。导出AIR应用程序的步骤如下所示。

单击“File”|“Export…”命令，弹出导出类型对话框，如图23-4所示。

在树型号列表中选择“Adobe AIR”|“Adobe AIR Package”选项，单击“Next”按钮，弹出“设置AIR安装包”对话框，如图23-5所示。

       

图23-4  导出类型对话框                      图23-5  设置AIR安装包对话框

在“Project”文本框中输入导出的工程名。在“Application”文本框中输入工程的启动页（MXML文件）。在“Include files”区域选择要导出的文件。在“Save as”文本框中输入导出的路径。单击“Finish”按钮，完成AIR应用程序的导出。

2．定义版本信息文件
用户可将当前AIR应用程序的版本信息手动存储于TXT文件中，用以判断AIR应用程序是否需要升级。

23.3.2  检查版本信息
用户可使用FileStream类加载版本信息文件，从而获得当前AIR应用程序的版本号。若当前的版本号小于最新的版本号，说明AIR应用程序需要更新。以下代码使用FileStream类加载“version.txt”文件，并判断是否需要更新AIR应用程序。

var theNewestVersion:Number=5;                          //定义最新的版本号

…

private function checkVersion():void                    //检查版本号信息

{

    /*读取版本号*/

    var stream:FileStream = new FileStream();

    stream.open(new File("version.txt"), FileMode.READ);

    var currVersion:String = stream.readUTFBytes(stream.bytesAvailable);

    stream.close();

    //若当前版本号小于最新版本号，需要下载最新的air文件

    if (currVersion<theNewestVersion)

    {

        //升级AIR程序

    }

}

23.3.3  使用FileStream类下载最新版本
在更新AIR应用程序前，需要下载最新版本的AIR安装包。使用FileStream类可下载任何格式的文件。其语法如下所示。

var FileStream变量:FileStream=new FileStream();

FileStream变量.open(下载文件路径,FileMode.WRITE);

FileStream变量.writeBytes(ByteArray变量,0,ByteArray变量.length);

ByteArray类型用以存储二进制的数据集。其length属性记录了ByteArray变量的长度。以下代码使用FileStream类下载最新版本安装包“p1.air”。

public var fileData:ByteArray = new ByteArray();

…

private function writeAirFile():void                    //下载air文件处理函数

{

     var file1:File = File.desktopDirectory.resolve("p1.air");//下载路径为桌面

    var fileStream:FileStream = new FileStream();

    fileStream.openAsync(file1, FileMode.WRITE);

    fileStream.writeBytes(fileData, 0, fileData.length);//开始写文件

    fileStream.close();

}

23.3.4  使用Updater类升级AIR应用程序
在下载完成最新版本的AIR安装包后，可使用Updater类的update方法升级应用程序。其语法如下所示。

Updater变量.update(AIR路径,版本字符串);

版本字符串可自定义，如“1.2”，“1.3”等。以下代码使用Update类将应用程序升级至最新版本。

var ud:Updater=new Updater();

ud.update(new File("newest.air"),"1.3");

23.3.5  升级AIR应用程序实例
本实例中假设最新导出的AIR安装包为1.3版本，并放置于工程“bin”文件夹下。

升级AIR应用程序实例的步骤如下所示。

新建AIR工程。

在“bin”文件夹下的“Preferences”文件夹下创建“version.txt”文件。“version.txt”文件中存储当前应用程序的版本号，如“1.2”（小于最新版本号）。

编写检查版本号函数checkVersion。checkVersion函数的主要功能是读取“version.txt”中的版本号。判断是否需要升级AIR程序。以下代码定义了checkVersion函数。

private function checkVersion():void            //检查版本号信息

{

    /*读取版本号*/

    var stream:FileStream = new FileStream();

    stream.open(file, FileMode.READ);           //file变量指向“version.txt”

    var prevVersion:String = stream.readUTFBytes(stream.bytesAvailable);

    stream.close();

    //记录的版本小于当前最新版本号时，需要下载最新的air文件

    if (prevVersion < currentVersion)

    {

        urlStream.addEventListener(Event.COMPLETE, loaded);                                                                     //添加对加载完成的监听

        urlStream.load(urlReq);                 //加载air文件

    }

}

编写下载最新版本函数loaded。loaded函数使用FileStream类获得AIR应用程序的二进制数据，并将二进制数据写入到本地的AIR文件中。以下代码定义了loaded函数和writeAirFile函数。

private function loaded(event:Event):void           //加载完成后，下载air文件

{

    urlStream.readBytes(fileData, 0, urlStream.bytesAvailable);                                                                     //数据读取到fileData数组中

    writeAirFile();                                 //下载air文件

}

private function writeAirFile():void                //写入新的air文件

{

     var file1:File = File.desktopDirectory.resolve("p1.air");    //路径为桌面

    var fileStream:FileStream = new FileStream();

     fileStream.addEventListener(Event.CLOSE, fileClosed);   //添加写文件完成的监听

    fileStream.openAsync(file1, FileMode.WRITE);

     fileStream.writeBytes(fileData, 0, fileData.length);   //开始写文件

    fileStream.close();

}

编写更新AIR应用程序代码。将最新版本AIR应用程序写入本地路径后，使用update方法更新原程序，同时修改“version.txt”文件。以下代码更新AIR应用程序，并修改“version.txt”文件内的版本号。

private function fileClosed(event:Event):void       //下载文件完成处理函数

{

    Alert.show("下载文件完成");

    /*升级版本*/

    var updater:Updater = new Updater();

    var airFile:File = File.desktopDirectory.resolve("p1.air");

    var version:String = currentVersion;

    updater.update(airFile, version);               //开始升级版本

    saveFile();                                     //存储当前版本信息

}

private function saveFile():void                    //存储最新版本号

{

    var stream:FileStream = new FileStream();

    stream.open(file, FileMode.WRITE);          //file变量指向“version.txt”

    stream.writeUTFBytes(currentVersion);

    stream.close();

}

完成剩余代码。剩余代码包括程序初始化函数、变量定义、类的引用等。

以下代码是完整的应用程序代码。

<?xml version="1.0" encoding="utf-8"?>

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"

    layout="absolute"

    applicationComplete="init()">

    <mx:Script>

        <![CDATA[

            import flash.filesystem.*;          //引用flash.filesystem下的类

            import mx.controls.Alert;           //引用Alert类

            public var file:File;               //定义File实例

            [Bindable]

            public var currentVersion:String = "1.3";   //定义最新版本号

            public var urlString:String ="p1.air";      //最新版本air的路径

            //定义URLRequest实例

            public var urlReq:URLRequest = new URLRequest(urlString);

            public var urlStream:URLStream = new URLStream();                                                                   //定义URLStream实例

            public var fileData:ByteArray = new ByteArray();                                                                    //定义ByteArray实例

            public function init():void         //应用程序初始化处理函数

            {

                //“version.txt”存储版本信息

                file = File.applicationResourceDirectory.resolve ("Preferences /version.txt");

                if(file.exists)                 //若文件存在时，检查版本号

                {

                    checkVersion();

                }

                else                            //若文件不存在时，创建文件

                {

                    firstRun();

                }

            }

            private function checkVersion():void        //检查版本号信息

            {

                /*读取版本号*/

                var stream:FileStream = new FileStream();

                stream.open(file, FileMode.READ);

                var prevVersion:String = stream.readUTFBytes(stream. bytes Available);

                stream.close();

                //记录的版本小于当前最新版本号时，需要下载最新的air文件

                if (prevVersion < currentVersion)

                {

                    //添加对加载完成的监听

                    urlStream.addEventListener(Event.COMPLETE, loaded);

                    urlStream.load(urlReq);             //加载air文件

                }

            }

            private function firstRun():void

            {

                saveFile();                             //存储当前版本号

            }

            private function saveFile():void            //存储当前版本处理函数

            {

                var stream:FileStream = new FileStream();

                stream.open(file, FileMode.WRITE);

                stream.writeUTFBytes(currentVersion);

                stream.close();

            }

            private function loaded(event:Event):void   //加载完成后，下载air文件

            {

                //数据读取到fileData数组中

                urlStream.readBytes(fileData, 0, urlStream.bytesAvailable);

                writeAirFile();                         //下载air文件

            }

            private function writeAirFile():void        //下载air文件处理函数

            {

                //下载路径为桌面

                var file1:File = File.desktopDirectory.resolve("p1.air");

                var fileStream:FileStream = new FileStream();

                //添加写文件完成的监听

                fileStream.addEventListener(Event.CLOSE, fileClosed);

                fileStream.openAsync(file1, FileMode.WRITE);

                fileStream.writeBytes(fileData, 0, fileData.length);    //开始写文件

                fileStream.close();

            }

            private function fileClosed(event:Event):void               //下载文件完成处理函数

            {

                Alert.show("下载文件完成");

                /*升级版本*/

                var updater:Updater = new Updater();

                var airFile:File = File.desktopDirectory.resolve("p1.air");

                var version:String = currentVersion;

                updater.update(airFile, version);           //开始升级版本

                saveFile();                                 //存储当前版本信息

            }

        ]]>

    </mx:Script>

    <mx:Label fontSize="35" text="版本{currentVersion}" horizontalCenter="0" verticalCenter="0"/>

</mx:WindowedApplication>

按下Ctrl+F11键，编译运行程序。运行效果如图23-6所示。



图23-7  升级AIR应用程序实例的运行效果

23.4  Flex 3.0中使用Ajax技术
在前面章节里曾介绍过Flex 3.0中如何使用其他Web开发技术，但未涉及Ajax技术。Ajax技术是一种非常流行的Web开发技术，其主要特点是无刷新性。本章将介绍Ajax技术的基础知识及如何在Flex 3.0中使用Ajax技术。

23.4.1  Ajax技术简介
Ajax是“Asynchronous JavaScript and XML”（异步JavaScript和XML）的简称。Ajax技术是一组技术的结合。Ajax利用通信技术（以SOAP和XML为代表）向服务器发送和接收异步请求和响应，然后使用JavaScript、DOM、HTML、CSS技术来处理响应。

Ajax技术通过JavaScript语言调用服务器端的方法，而不需要刷新浏览器，从而减轻了服务器端的负担，也更快捷地响应用户交互。另外，Ajax不需要任何浏览器插件，但浏览器需要允许运行JavaScript。

Ajax技术具体包括如下五种技术：

（47）       使用XHTML+CSS的表示样式。

（48）       使用DOM（Document Object Model）进行动态显示及交互。

（49）       使用XML和XSLT进行数据交换及相关操作。

（50）       使用XMLHttpRequest类进行异步数据查询、检索。

（51）       使用JavaScript整合所有技术。

使用Ajax开发Web应用程序最关键的技术是JavaScript语言和XMLHttpRequest类。本书中不展开详解Ajax技术开发，着重介绍如何在Flex 3.0中调用Ajax技术。

23.4.2  使用<mx:HTML>组件调用Ajax技术
在Flex 3.0中使用<mx:HTML>组件可加载包含Ajax技术的网页，其语法如下所示。

<mx:HTML id="HTML组件id"… location="网页路径"/>

以下代码使用<mx:HTML>组件加载了“www.google.cn”网页。

<mx:HTML id="html" location="www.google.cn"/>

<mx:HTML>组件在加载网页时，加载网页中的全部内容，包括JavaScript（JavaScript是Ajax技术实现的关键）。Flex 3.0中调用JavaScript函数的语法如下所示。

HTML组件id.htmlControl.window.javascript函数(参数列表);

以下代码在单击“OK”按钮时，调用“test.html”网页中的javascript函数init。

<mx:HTML id="html" location="test.html"/>

<mx:Button label="OK" click="html.htmlControl.window.init();"/>

23.4.3  Flex应用程序结合Ajax技术实例
Ajax技术已广泛应用于互联网的开发。许多无刷新的网页或有动态效果网页都使用了Ajax技术。其中，应用Ajax技术最成功的例子是Google的地图搜索。本小节中将调用Google公司免费提供的包含Ajax技术的测试网页来实现地图搜索功能。Flex 3.0结合Ajax技术实例的步骤如下所示。

新建AIR工程。

编写“yahoo.html”文件。

“yahoo.html”文件是HTML网页，包含了自定义的javascript函数来完成地图搜索功能。以下代码是“yahoo.html”文件的源代码。

<!DOCTYPEhtml

    PUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <script src="http://api.maps.yahoo.com/ajaxymap?v=3.4&appid=mapsnap0" type="text/javascript"/>

    <script type="text/javascript">

        var Imap;                                           //定义变量Imap

        function init()//初始化函数

        {

            Imap = new YMap(document.getElementById('map'));    //使用YMap类初始化Imap变量

            Imap.addTypeControl();                          //添加类型面板

            Imap.addPanControl();                           //添加方向面板

            Imap.addZoomLong();                             //添加缩放长条

            Imap.addZoomShort();                            //添加缩入短条

            //绘制地图

            Imap.drawZoomAndCenter('601 Townsend St. San Francisco, CA 94103', 5);

        }

        function lookupAddress(address)                     //搜索地址函数

        {

            //根据地址绘制地图

            YEvent.Capture(Imap,

                        EventsList.onEndGeoCode,

                        function (result)

                        {

                            if (!result.success)

                            {

                                alert('This address could not be geo-coded.');

                                return;

                            }

                            Imap.drawZoomAndCenter(result.GeoPoint, 2);

                        });

            Imap.geoCodeAddress(address);

        }

        window.onload =init;                        //在网页加载时调用init函数

    </script>

</head>

<body>

    <div id="map"/>

</body>

</html>

（52）       javascript代码定义于<head>标签下的<script>标签下。

（53）       “<scriptsrc="http://api.maps.yahoo.com/ajaxymap?v=3.4&appid=mapsnap0" type="text/ javascript"/>”表示引用该地址下的javascript类文件。程序中出现的YMap和YEvent类均在此类文件中定义，但对用户不可见。用户可查看Google Maps官方的使用说明。

（54）       HTML网页不会自动执行javascript函数。“window.onload=init;”表示在网页加载时调用init函数。

编写Flex应用程序的外观模型。Flex应用程序的外观模型包括<mx:HTML>组件、输入框组件、按钮组件等。以下代码是外观模型的MXML代码。

<mx:VBox paddingTop="0" paddingLeft="0" width="100%" height="100%">

    <mx:HBox width="100%">

        <mx:Label text="位置:" color="#ffffff" width="5%"/>

        <mx:TextInput width="55%" id="address"/>

        <mx:Button label="加载中..." enabled="false" id="mapButton" width="10%"/>

        <mx:Button label="保存" width="10%"/>

        <mx:Button label="复制" width="10%"/>

    </mx:HBox>

    <mx:HTML id="map" width="800" height="600"/><!--HTML组件，用以加载网页-->

</mx:VBox>

外观模型效果如图23-8所示。



图23-8  Flex结合Ajax实例的外观效果

添加搜索地图的ActionScript 3.0代码。ActionScript 3.0代码中调用“yahoo.html”文件中的lookupAddress函数来完成搜索功能。实例中有两处需要添加搜索地图的ActionScript 3.0代码：输入框组件的enter事件和“开始搜索”按钮的click事件。enter事件在用户输入数据并按下回车键时触发。以下代码是添加处理后的输入框组件和按钮组件。

<mx:TextInput width="55%" id="address" enter="map.htmlControl.window. lookup Address(address.text);"/>

<mx:Button label="加载中..." enabled="false" id="mapButton" width="10%" click="map.htmlControl.window.lookupAddress(address.text);"/>

按钮mapButton用以搜索地图。先是显示“加载中…”，在网页加载完成后显示“开始搜索”。

编写函数takeSnapshot。takeSnapshot函数用以截图并保存图片。以下代码定义了takeSnapshot函数。

private function takeSnapshot():void                        //保存图片处理函数

{

    var home:File = File.desktopDirectory.resolve("map.png");   //设置保存路径

    //添加对选择路径事件的监听，并定义其处理代码

    home.addEventListener(Event.SELECT,

                    function (e:Event):void

                    {

                        var img:ByteArray = getImage();         //获得图片资源

                        /*使用FileStream类保存图片*/

                        var stream:FileStream = new FileStream();

                        stream.openAsync(File(e.target), FileMode.WRITE);

                        stream.addEventListener(Event.CLOSE,

                            function(ee:Event):void

                            {

                                Alert.show("图片保存成功!", "提示", Alert.OK);

                            });

                        stream.writeBytes(img);

                        stream.close();

                    });

    home.browseForSave("图片保存路径?");             //打开选择路径窗口

}

private function getImage():ByteArray               //获得图片资源

{

    var bd:BitmapData = getBitmapData(map.width, map.height);                                                                       //获得图片数据

    var pnge:PNGEncoder=new PNGEncoder();           //定义PNGEncoder类型变量

    var img:ByteArray = pnge.encode(bd);            //对图片数据进行编码

    return img;

}

private function getBitmapData(width:uint, height:uint):BitmapData                                                                  //获得图片数据

{

    var bd:BitmapData = new BitmapData(width, height);

    bd.draw(map);

    return bd;

}

（55）       “bd.draw(map);”语句表示对<mx:HTML>组件截图。

（56）       addEventListenner方法的第二个参数一般为处理函数名，但也可直接定义处理代码，此时不需要函数名。

编写函数copyToClipboard。copyToClipboard函数用于将截图复制到剪切板中。以下代码定义了copyToClipboard函数。

private function copyToClipboard():void             //复制图片资源至剪切板

{

    var mapFile:File = getMapFile();                    //获得图片文件

    //复制至剪切板

    ClipboardManager.accessClipboard()

        function ():void

        {

            var td:TransferableData = new TransferableData();       //定义TransferableData类型变量

            //数据处理

            td.addData([mapFile], TransferableFormats.FILE_LIST_FORMAT);

            ClipboardManager.data = td;                         //复制至剪切板

            Alert.show("图片已复制至剪切板!", "提示", Alert.OK);   //提示复制成功

        });

}

ClipboardManager类中的accessClipboard方法用以传递数据至剪切板。

完成剩余代码。剩余代码包括初始化处理函数、变量定义、类的引用等。

以下代码是完整的应用程序代码。

<?xml version="1.0" encoding="utf-8"?>

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"

    title="结合Ajax实例"

    creationComplete="init();"

    width="805" maxWidth="805" height="675"

    fontSize="13"

    maxHeight="675" paddingTop="2"

    paddingLeft="2" verticalScrollPolicy="off"

    horizontalScrollPolicy="off"

    showStatusBar="false">

    <mx:Script>

        <![CDATA[

            import flash.filesystem.*;      //引用"flash.filesystem"下的全部类

            import mx.controls.Alert;       //引用Alert类

            import flash.desktop.*;         //引用"flash.desktop"下的全部类

            import mx.graphics.codec.PNGEncoder;        //引用PNGEncoder类

            private const WIN_WIDTH:uint = 820;     //定义宽度

            private const WIN_HEIGHT:uint = 670;        //定义高度

            private function init():void                //应用程序初始化处理函数

            {

                //HTML组件map加载完成时的处理代码

                map.addEventListener(Event.COMPLETE,

                    function():void

                    {

                        mapButton.label = "开始搜索";

                        mapButton.enabled = true;

                    });

                map.location = "app-resource:/yahoo.html";  //HTML组件map的URL地址

                window.visible = true;

            }

           

            private function takeSnapshot():void            //保存图片处理函数

            {

                //设置保存路径

                var home:File = File.desktopDirectory.resolve("map.png");

                //添加对选择路径事件的监听，并定义其处理代码

                home.addEventListener(Event.SELECT,

                    function (e:Event):void

                    {

                        var img:ByteArray = getImage(); //获得图片资源

                        /*使用FileStream类保存图片*/

                        var stream:FileStream = new FileStream();

                        stream.openAsync(File(e.target), FileMode.WRITE);

                        stream.addEventListener(Event.CLOSE,

                            function(ee:Event):void

                            {

                                Alert.show("图片保存成功!", "提示", Alert.OK);

                            });

                        stream.writeBytes(img);

                        stream.close();

                    });

                home.browseForSave("图片保存路径?");      //打开选择路径窗口

            }

            private function copyToClipboard():void //复制图片资源至剪切板

            {

                var mapFile:File = getMapFile();        //获得图片文件

                //复制至剪切板

                ClipboardManager.accessClipboard(

                    function ():void

                    {

                        //定义TransferableData类型变量

                        var td:TransferableData = new TransferableData();

                        //数据处理

                        td.addData([mapFile], TransferableFormats.FILE_ LIST_FORMAT);

                        ClipboardManager.data = td;     //复制至剪切板

                        //提示复制成功

                        Alert.show("图片已复制至剪切板!", "提示", Alert.OK);

                    });

            }

            private function getImage():ByteArray       //获得图片资源

            {

                //获得图片数据

                var bd:BitmapData = getBitmapData(map.width, map.height);

                var pnge:PNGEncoder=new PNGEncoder();   //定义PNGEncoder类型变量

                var img:ByteArray = pnge.encode(bd);    //对图片数据进行编码

                return img;

            }

            //获得图片数据

            private function getBitmapData(width:uint, height:uint):BitmapData

            {

                var bd:BitmapData = new BitmapData(width, height);

                bd.draw(map);

                return bd;

            }

            private function getMapFile():File          //获得图片文件

            {

                //创建"map.png"文件

                   var mapFile:File = File.createTempDirectory().resolve("map.png");

                var img:ByteArray = getImage();         //获得图片数据

                //将图片数据写入到"map.png"文件中

                var stream:FileStream = new FileStream();

                stream.open(mapFile, FileMode.WRITE);

                stream.writeBytes(img);

                stream.close();

                return mapFile;

            }

        ]]>

    </mx:Script>

    <mx:VBox paddingTop="0" paddingLeft="0" width="100%" height="100%">

        <mx:HBox width="100%">

            <mx:Label text="位置:" color="#ffffff" width="5%"/>

            <mx:TextInputwidth="55%"id="address" enter="map.htmlControl.window.lookupAddress(address.text);"/>

            <mx:Buttonlabel="加载中..."enabled="false"id="mapButton" width="10%" click="map.htmlControl.window.lookupAddress(address.text);"/>

            <mx:Button label="保存" width="10%" click="takeSnapshot();"/>

            <mx:Button label="拷贝" width="10%" click="copyToClipboard();"/>

        </mx:HBox>

        <mx:HTML id="map" width="800" height="600"/>        <!--HTML组件，用以加载网页-->

    </mx:VBox>

</mx:WindowedApplication>

按下Ctrl+F11快捷键，编译运行程序。运行效果如图23-9所示。



图23-9  Flex结合Ajax实例的运行效果