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.οnlοad=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实例的运行效果
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
