Flex the world

搬家了

2009-01-02T22:30:00.003+08:00

忙了一天，终于把博客这里搬到了搬到了新家 :)

www.flextheworld.com

写给想学FLEX的新人们

2009-01-01T19:10:00.005+08:00

前前言
新年到了，一切从头开始，学 FLEX就从这里开始

前言

什么是RIA, FLEX, AIR, ActionScript3, FlexBuilder....学FLEX之前有必要了解一下这些名词之间的关系。

1. RIA -- (Rich Internet Application，富互联网应用系统) 顾名思义就是比传统的 web site 更丰富的web 应用。目前以Abobe Flash 平台以及微软的silverlight技术开发的web 应用为代表。

2. FLEX -- FLEX是用于构建和维护在所有主要浏览器、桌面和操作系统一致地部署的极具表现力的 Web 应用程序的高效率的开放源码框架。我们常见的FLEX应用有FLEX web应用 (我们常常把这个直接叫Flex) 以及桌面应用AIR。

3. AIR -- FLEX的桌面应用，所以AIR与FLEX并不是两样东西。千万不要觉得要学的东西很多

4. ActionScript 3 -- FLEX的开发语言

5. FlexBuilder -- 开发FLEX最好用的工具

将学习进行到底:

怎样才能进入FLEX的世界呢，FLEX的开发语言Action script 3.0和C#、Java非常的类似，所以不管你有哪个语言的基础，或者你对OO有比较好的认识，那么学习FLEX会很容易。 MXML是FLEX中的标记语言，与Jsp与Aspx相识，它与ActionScript3之间的关系与aspx与c#的关系类似。

Ascription3可以完全描述任何用MXML写的页面，比如我们新建一个MXML(以HBOX为例，假设文件名MyHBox)

<mx:hbox mx="http://www.adobe.com/2006/mxml">

......

</mx:hbox>

这与AS3中

public class MyHBox extends HBox {

public functionMyHBox(){

}
....

}

表示一个意思，区别是在MXML中不能写构造函数。

开始学一门语言，我认为实践是最好的学习方法。拿着书看一天比不上动手2小时，先实践出结果，再根据结果学习理论，比先学理论，再来实践效果要好很多，不信就试试

最后，可以试试从我学flex时的 “快速入门指南”(Flex中文帮助1－－4章，看完前3章是很有必要的)开始你的Flex学习，之后可以去看看Flex教程索引贴

iMagnifyingGlass控件 -- 放大镜容器(Magnifying glass panel)

2008-12-26T21:07:00.010+08:00

控件名称 (Component Name)：iMagnifyingGlass.as
作用 (Description)：控件继承于Panel, 和普通panel使用方法相同，对放入其中的所有Image，当鼠标划过时有放大镜效果。 (iMagnifyingGlass extends from panel that can enlarge all passed in images when mouseover)

接口 (apis)：

属性(Attributes)：

multiple:Number －－设置放大倍数，默认2倍 (Default value is 2)
glassHeight:Number -- 设置镜片高度，默认150px (Magnifying glass height, default value is 150px)
glassWidth:Number -- 设置镜片宽度, 默认150px (default value is 150px)
glassStyleName: Number -- 设置镜片样式表 (set the style name of glass)

方法 (Function):

setGlassStyle(stylrProp:String,newValue:Object) -- 设置镜片样式 (set styles of glass)

Demo:

Demo:

<component:iMagnifyingGlass hideEffect="" title="放大镜Demo" multiple="4" layout="vertical" id="mG" >
<mx:HBox>
<mx:Image source="{pic1}" width="256" height="192" />
<mx:Image source="{pic2}" width="256" height="192" />
</mx:HBox>
<mx:HBox>
<mx:Image source="{pic3}" width="256" height="192" />
<mx:Image source="{pic4}" width="256" height="192" />
</mx:HBox>
</component:iMagnifyingGlass>

Demo和源文件下载

年末活动：参与论坛交流，获赠上市新书！

2008-12-22T20:43:00.005+08:00

最近在AIRIA的Flex板块进行了一项活动，“年末活动：参与论坛交流，获赠上市新书！” 目的是鼓励大家多在论坛交流，每星期将送出2本《Flex 3 RIA开发详解与精深实践》。

在AIRIA已经2个月了，越来越喜欢这个地方，希望在自己和大家的努力下可以把论坛越弄越好。废话不多说了，有兴趣的朋友去参加活动吧：）

活动连接 http://www.flexcoders.cn/FLEX/thread-3147-1-1.aspx

活动说明

大家好，为活跃论坛气氛，促进论坛发展，也是为了答谢大家长期对论坛的支持。AIRIA论坛2008年12月18日起开展名为《参与论坛交流，获赠上市新书！》主题活动。活动持续1个月，分3批发放。

活动规则：

本次活动人人都有参与和获赠机会。论坛每周将统计出发帖总数最高的2位会员，每人获赠我们精选的FLEX新书《Flex 3 RIA开发详解与精深实践》一本。

发贴说明：

- 新发帖内容不满100字不含在计数范围。(“发帖说明”这段话有70余字)
- 新发贴内容杂乱无章不含在计数范围 (转载内容请调整好格式，如有必要加上自己的注释)。
- 与论坛现有内容所重复的内容不包含在计数范围。
- 发表原创教程、案例（含源码，与比较详细的描述）的记为3贴。
- 发表原创源码的记为2贴

我会每星期周末公布本周的统计情况，下次统计日期为12月27日

特别说明

不管你是不是新人，只要是好贴都有机会获得奖品，大家都加油吧！帖子不限于Flex板块。
为了让活动更加公平，各板块斑竹的帖子不参加本次活动

奖品展示：

书籍详细介绍：http://www.airia.cn/AIR_FLEX_EBOOK/Flex3RIA_kaifa_ebook/

与市面上的Flex书籍相比，本书重点突出了企业级开发实践，通过实际案例中提炼的项目引导读者进行Flex企业级开发。

同时，用两个章节专门讲述了AIR桌面开发，结合典型实例展示AIR应用。三位作者皆为Java软件工程师出身，并长期从事JavaEE企业级开发，因此在Flex与JavaEE的结合方向上把握的相当到位。

特别感谢：

《Flex 3 RIA开发详解与精深实践》一书三位作者杨占坡、杨铭、翁颖提供书籍。

另外值得高兴的是，这三位主创人员也已加入到AIRIA的大家庭中来，随时与AIRIA网友或购买这本书的朋友进行线上技术交流。

Adobe Flex迷你教程 -- DataGrid，搜索数据，搜索结果多页显示

2008-12-20T19:18:00.003+08:00

有朋友问到这个问题，这个问题主要涉及到dataProvider的操作，比较有针对性，所以写做教程。

这篇教程的核心是，Grid如果数据并不是操作Grid，而是操作它的dataProvider, Grid只是显示数据的载体。

Demo操作:

1. 开始显示从A到Z的国家列表。可以前后翻页，每页显示10条
2. 从search框中输入搜索信息，grid将显示含有搜索字母的所有城市.
3. 同样可以对search结果进行翻页。

主要方法：

调用这个方法根据currentPage和searchedData设置Grid显示当前页

private function setCurrentPage():void{
currentPageData = new XMLListCollection(); //清空数据
var startIndex:int = currentPage * pageSize - pageSize; //开始位置
var endIndex:int = currentPage * pageSize;//结束位置
if(endIndex >= searchedData.length){ //如果结束位置大于search data的长度，结束位置为search data的长度
endIndex = searchedData.length;
this.lastPage = this.currentPage;
}
for(var i:int = startIndex; i< style="color: rgb(0, 0, 204);">/设置当前页数据
currentPageData.addItem(searchedData[i]);
}
}

调用此方法查询从 allData中查询数据，并显示第一页

private function doSearch():void{
this.searchedData = new XMLListCollection() //清空数据
for each(var item:XML in allData){ //从allData中搜索数据，将搜索到的数据添加到searchData
var value:String =item.@name.toString()
if(value.indexOf(searchValue.text) != -1){
this.searchedData.addItem(item);
}
}
this.currentPage = 1; //显示第一页
this.setCurrentPage();
}

源文件下载

Adobe AIR 迷你教程索引

2008-12-17T19:39:00.000+08:00

1. Adobe AIR迷你教程 -- 在Flex builder3 中创建、发布AIR程序以及 AIR程序的安装运行
2. Adobe AIR迷你教程 -- 使用自定义窗口以及对窗口的移动，缩放，关闭操作
3. Adobe AIR迷你教程 -- 创建多窗口以及弹出窗口与父窗口的通讯
4. Adobe AIR迷你教程 -- 本地文件(XML文件)的操作（1）
5. Adobe AIR迷你教程 -- 本地文件的操作(与文件选择器的结合)（2）
6. Adobe AIR迷你教程 - 监测网络状态，离线/在线应用程序的实现

Adobe Flex 迷你教程索引

2008-12-17T19:31:00.007+08:00

1. Adobe Flex迷你教程 - Super easy实现Mac系统下滑式Alert窗口
2. Adobe Flex迷你教程 - Super easy获取ip所在城市
3. Adobe Flex迷你教程 - 合理使用Module分割项目以及对Module的使用
4. Adobe Flex迷你教程 -使用Share object保存信息到客户端
5. Adobe Flex迷你教程 -- DataGrid，itemrender以及多行多列值的控制
6. Adobe Flex迷你教程 -- DataGrid，全选，删除选中项
7. Adobe Flex迷你教程 -- DataGrid，搜索数据，搜索结果多页显示 [New]

基于Stratus service在flash player10中用RTMFP开发点对点应用程序.（翻译）

2008-12-16T21:07:00.005+08:00

Edison今天发给我的连接，Abobe 11号发布了 Stratus service beta. 把一片文章翻译跟大家分享下。

Stratus service for developing end-to-end applications using RTMFP in Flash Player

Adobe Flash Player 10 和 Adobe AIR 1.5 引入了一个新的通讯协议 -- 实时媒体流协议(RTMF, Real-Time Media Flow Protocol), 它的低延迟，端到端，安全性以及可扩展性让其非常适合开发实时协作的应用程序。它不仅带来卓越的用户体验，同时也降低了运营商的成本。

较早版本的Flash palyer 通过实时消息协议（RTMP,Real-Time Messaging Protocol）以及FMS（Flash media server）实现有协作功能的应用程序（比如，Adobe Acrobat Connect Pro) 或音频/视频流。虽然RTMP在流媒体，共享对象等方面是不错的选择，但是它无法很好的满足实时性很高的音频与视频通讯。(题外话：我认为不仅是实时的问题，服务器的压力也是一个重要的方面)

为了使用RTMFP, flash player终端必须连接到一个支持RTMFP的服务器，比如Adobe Stratus service beta或者未来的FMS。Stratus是一个中转式的服务，它的作用式建立flash player之间的通讯。与FMS不同，Stratus不支持媒体转播，共享对象，脚本等等，你只能开发客户端之间直接联系的应用程序。

Flash player已经是网络视频播放的领导者。RTMFP以及优秀的媒体压缩技术同样会让Flash player10在实时通讯领域占据有力地位。

在本文中，我首先强调了通过RTMFP实现实时通讯应用，第二，我描述了AS3对RTMFP的 API。最后，我提供我们的实例 -- VideoPhone

相关教程:

1.Flex 迷你教程 — 基于Stratus的P2P网络电话 (1)
2.Flex 迷你教程 — 基于Stratus的P2P网络电话 (2)

原文: http://www.adobe.com/devnet/flashplayer/articles/rtmfp_stratus_app.html

Adobe Flex迷你教程 -- DataGrid，全选，删除选中项

2008-12-14T14:20:00.004+08:00

这个demo是对上一个DataGrid demo的修改，目的是为了实现控制checkBox itemrender全选所有项，然后删除所有项。

在上一个版本中，我在ICheckBox.as的set data function中根据当前value选中checkbox并且将选中的value push到selectedItems array中，这里有一个问题是grid不会初始化被scrollbar 隐藏的项 (谢谢lianyedie找到问题)，所以会导致一个问题，没有显示部分的选中的item没有被正确加入到selectedItems array中。这个版本中我主要简化了iCheckBox.as, 不在setvlaue中设置选中项（同时也防止了重复插入选中项的问题）。

Demo内容：

1. 点击check box选中item，或点击全选，选中所有项。
2. 点击删除选中项，选中项的 status将变成 Deleted.

iCheckBox.as

package
{
import flash.events.Event;

import mx.controls.CheckBox;
import mx.core.Application;

public class iCheckBox extends CheckBox
{
private var currentData:Object; //保存当前一行值的对象

public function iCheckBox()
{
super();
this.addEventListener(Event.CHANGE,changeHandle)
}

override public function set data(value:Object):void{
this.selected = value.action.toString() == "true"?true:false;
this.currentData = value; //保存整行的引用
}
//点击check box时，根据状况向selectedItems array中添加当前行的引用，或者从array中移除
private function changeHandle(e:Event):void{
var itemArray:Array = Application.application.selectedItems
this.currentData.action = this.selected.toString()
if(this.selected){
itemArray.push(this.currentData)
}else{
for(var i:int = 0; i<itemArray.length; i++){
if(itemArray[i] == this.currentData){
itemArray.splice(i,1)
}
}
}
}

}
}

GridDemo.mxml

//从dataProvider中将选中的项放入 selectedItems array
private function initSelectedItems():void{
for(var i:int=0; i <idata.length; i++){
if(idata[i].action.toString() == "true"){
this.selectedItems.push(idata[i])
}
}
}

源文件下载

Adobe Flex迷你教程 -- DataGrid，checkbox itemrender以及多行多列值的控制

2008-12-13T13:09:00.006+08:00

写了一个简单的Demo，目的是帮助大家初步了解itemrender的使用，以及如何对多行数据同时操作。

Demo操作过程。

1. DataGrid为3列，第一列是check box.
2. 点击选中多行的check box.
3. 点击删除选中行，所有被选中的行的第三列的值改变为 Deleted.

GridDemo.mxml

public var selectedItems:Array = new Array(); //保存选中行

//将数组中的行的status 改为Delete,并且刷新Grid
private function removeSelectedItems():void{
for(var i:int = 0; i

<mx:DataGrid id="grid" dataProvider="{idata}">
<mx:columns>
<mx:DataGridColumn headerText="删除" dataField="action" itemRenderer="{new ClassFactory(iCheckBox)}" />
<mx:DataGridColumn headerText="姓名" dataField="name" />
<mx:DataGridColumn headerText="状态" dataField="status" />

</mx:columns>
</mx:DataGrid>

iCheckBox.as (ItemRender)

override public function set data(value:Object):void{
if(value.action.toString() == "true"){ //如果action为true,选中check box
this.selected = true;
Application.application.selectedItems.push(value) //将选中的数据保存起来
}else{
this.selected = false;
}
this.currentData = value; //保存整行的引用
}

//点击check box时，根据状况向selectedItems array中添加当前行的引用，或者从array中移除
private function changeHandle(e:Event):void{
var itemArray:Array = Application.application.selectedItems
this.currentData.action = this.selected.toString()
if(this.selected){
itemArray.push(this.currentData)
}else{
for(var i:int = 0; i<itemArray.length; i++){
if(itemArray[i] == this.currentData){
itemArray.splice(i,1)
}
}
}
}

GirdDemo.zip是上面的例子。
GridDemo1.zip是修改了checkBox为不在dataProvider中的column, tab切换可以Z字跳转。

iComponents 索引

2008-12-12T22:31:00.000+08:00

1. iScrollBox控件-- 对传入控件的iphone式滚动 (iphone scroll panel)
2. iMagnifyingGlass控件 -- 放大镜容器(Magnifying glass panel)

iScrollBox控件-- 对传入控件的iphone式滚动 (iphone scroll panel)

2008-12-01T23:06:00.006+08:00

控件名称 (Component Name): iScrollBox.as
作用 (Description):对放入的控件实现iphone式的滚动条 (A panel with iphone scroll style)
接口 (apis):

var iphoneList:iScrollBox= newiScrollBox(displayObject, speed); //创建iList对象时传入要实现滚动的对象,以及设定滚动速度。

iList.displayObj; //返回传入的对象

Demo: List, Image

List Demo

1. 以拖拽方式滚动list.(Drag to scroll the list)
2. 快速拖拽后放手，会根据拖拽的速度继续向拖拽方向滚动一段时间。慢慢滚动不会引发额外移动。(The list will scroll like iphone when you draging and release the mouse)
3. 滚动时点击item会停止滚动。(click item to stop scroll immediately)

Note: 现在有个bug，拖拽滚动时不能将鼠标划出List。(There is a bug that you can not let mouse out of list when dragging)

Image demo

1. 这个demo模拟地图的移动，试试上下左右拖拽(Just try to drag the "map")
2. 快速拖拽后放手，会根据拖拽的速度继续向拖拽方向滚动一段时间。慢慢滚动不会引发额外移动
3. 滚动时点击item会停止滚动。

附件里面是demo和iScrollBox.as (Attached demo and source codes)

Adobe AIR迷你教程 -- 本地文件的操作(与文件选择器的结合)（2）

2008-11-29T19:04:00.004+08:00

接上一篇教程，我们来扩展一些内容。

Demo内容

1. 保存文本框内容到指定路径，创建名为saveFileDemo.xml的文件。
2. 读取txt与xml类型文件到文本框。
3. 重新以文本框的内容更新打开的文件。

1. 保存文本框内容到指定路径，创建名为saveFileDemo.xml的文件。

//打开文件选择器 private function saveFileTo():void{
var file:File = File.documentsDirectory; //默认为文档文件夹
file.browseForDirectory("请选择保存路径"); //打开文件夹选择器
file.addEventListener(Event.SELECT,directoySelectHandle) //监听文件夹选择事件
}

//用文本框内容创建文件
private function directoySelectHandle(e:Event):void{
var file:File = new File(e.target.nativePath).resolvePath("saveFileDemo.xml"); //创建名为saveFileDemo.xml的文件
fileStream.open(file,FileMode.WRITE); //Write方式打开
var content:XML =
{this.content.text}

fileStream.writeUTFBytes(content.toXMLString()); //将内容写入文件
fileStream.close()
Alert.show("文件创建成功","提示")

}

2. 读取txt与xml类型文件到文本框。

//打开类型为txt和xml的文件。
private function openFile():void{
var file:File = File.documentsDirectory;
var openFileFilter:FileFilter = new FileFilter("Text/XML", "*.txt;*.xml"); //过滤文件
file.browseForOpen("请选择要打开的文件",[openFileFilter]); //打开文件选择器
file.addEventListener(Event.SELECT,fileSelectHandle) //监听文件选择事件
}

//将打开文件内容写入文本框
private function fileSelectHandle(e:Event):void{
var file:File = e.target as File;
fileStream.open(file,FileMode.READ);
this.content.text = fileStream.readUTFBytes(fileStream.bytesAvailable) //只读方式打开文件，将内容放到TextArea
this.updateBtn.enabled = true;
this.saveNew.enabled = false;
fileStream.open(file,FileMode.WRITE); //以Write方式重新打开文件，这样我们就可以更新它

}
3. 重新以文本框的内容更新打开的文件。

//更新打开的文件 private function saveOpenFile():void{
fileStream.writeUTFBytes(this.content.text); //更新打开的文件
fileStream.close() Alert.show("文件更新成功","提示")
this.updateBtn.enabled = false;
this.saveNew.enabled = true;
}

OK, 下一篇是最后一篇关于文件的操作，讲解Tree控件动态读取文件夹列表，打开选择的文件。

Adobe Flex迷你教程 --使用Share object保存信息到客户端

2008-11-27T13:40:00.003+08:00

Share object一般用来保存前来访问的用户的个人信息到用户的机器上。比如用户登陆过后保存他的名字，下次访问时自动显示，或者保存用户的个性化设置等等。每个网站对应100K的默认大小，如果尝试写入超过100K的数据到客户端硬盘，flash player会有提示。这篇教程没有什么特别之处，网上也有很多关于Share objecy的介绍，Share object很简单，我这里主要提供一个demo给大家。

Demo操作过程
1. 第一次运行后你可以看倒提示说您第一次来。
2. 填写用户名和爱好，点击记住我，你会看到你填写信息的显示。
3. 重新运行demo, 你的信息会被读出。
4. 点击忘记我，清空share object.
5. 填写新信息，点记住我，老信息会被替换。

下面是demo中使用的方法。

private var shData:SharedObject;

private function init():void{
shData = SharedObject.getLocal("demoData") //获取名称为demoData的 share object
this.showLocalData()
}
private function saveToLocal():void{
shData.data.userName = userName.text; //保存用户名
shData.data.like = like.text; //保存爱好
shData.flush(); //写入local
this.showLocalData();
}

private function showLocalData():void{
if(shData.data.userName == undefined || shData.data.userName == "" || shData.data.like ==""){
this.info.text = "您第一次来，请填写你的信息并点击记住我"
}else{
this.info.text = "您好，爱好" shData.data.like "的" shData.data.userName
}
}

源代码下载

Adobe AIR迷你教程 -- 本地文件(XML文件)的操作（1）

2008-11-22T22:46:00.011+08:00

买了战争机器2，写完教程准备杀到睡觉，现在先做第一步，写教程。AIR的文件操作不难，看完教程应该可以满足你对文件的所有基本操作。这篇教程主要以实际操作中遇到的情况来讲解

我们想想文件操作都会有什么内容，无非是创建，修改，删除，移动，拷贝。在这个过程中我们会涉及到一些周边的操作，比如文件夹，文件选择器，文件列表，文件信息获取等。我就围绕创建，修改，删除，移动，拷贝来展开我们的教程。因为内容比较多，基于迷你教程每篇都短小，易读的原则。我分为两篇，今天先讲第一篇，基本的操作，下一篇我再加入上面所说周边的操作相对深一步的讲解。

Air的文件操做主要涉及两个类，FIle和FileStream。一般来说我们不会直接以文本形式保存文件，那样的内容不易于修改，所以这里我以xml 文件为例。

Note: 下面所有的function可以直接复制到你的代码中运行

1.创建新文件。

public function createFileDemo():void{

var file:File = File.desktopDirectory.resolvePath("test.xml") //尝试从系统桌面获取test.xml文件。
var fileStream:FileStream = new FileStream(); // 创建FileStream 对象，用于读写文件
fileStream.open(file,FileMode.WRITE); //以WRITE方式打开file, 如果file中对应的文件不存在，创建新文件

//准备文件的内容
var content:XML =
我们的第一个文件创建完毕

fileStream.writeUTFBytes(content.toXMLString()); //像文件中写入内容。
fileStream.close(); //完成写入，这时我们打开桌面的test.txt可以看到内容。

}

上面五句代码让我在我的桌面创建了名为test.xml的文件，并且写入了content。

这里有三个地方我们要注意

1. File.desktopDirectory -- 因为AIR可以在Mac和Windows下运行，所以我们最好不要指定固定的地址，这里File.desktopDirectory的意思就是指向我系统的桌面，因为我是mac，所以实际返回的是 /kevinluo/Desktop. 除此之外我们还可以得到如下面这些地址

File.documentsDirectory; //指向用户文档文件夹
File.applicationDirectory; //应用程序安装目录
File.getRootDirectories(); //文件系统根目录

等等，我就不一一列举了，具体的大家可以看File帮助中描述。

2.File.desktopDirectory.resolvePath("test.xml") -- 获取桌面下的test.xml。这里我们还可以这样写

var file:File = File.desktopDirectory
file = file.resolvePath("test.xml")

不过我建议还是直接写在一排，如果像这样分开写的话，当fileStream.open(file,FileMode.WRITE) 打开文件时，如果文件不存在就会报错而不会像上面那样创建新的文件。

3. fileStream.open(file,FileMode.WRITE) --FileMode.WRITE是打开文件的方法，打开文件的方法一共有如下四种

FileMode.READ // 只读方式打开文件
FileMode.WRITE // 写方式打开文件，文件的原有内容会被清除。文件不存在的话创建新文件
FileMode.APPEND //追加方式打开文件，写入的内容总是会添加到文件的末尾。文件不存在的话创建新文件
FileMode.UPDATE //直接打开文件，可以根据需要在指定位置插入数据。文件不存在的话创建新文件

这里我们以WRITE方式创建了新文件，并写入了“我们的第一个文件创建完毕”。

2. 读取已有的文件，修改内容，再更新文件。

publuc function modifyFileDemo():void{

var file2:File = File.desktopDirectory.resolvePath("test.xml"); //读取刚才创建的test.xml
var fs:FileStream = new FileStream();
fs.open(file2,FileMode.READ); //以只读方式打开
var ct:XML = new XML(fs.readUTFBytes(fs.bytesAvailable)); //获取xml内容
ct.content = "我们的第一个文件修改完毕" //修改content节点下的内容
fs.open(file2,FileMode.WRITE); //重新以写方式打开文件，目的在于清除原有的内容
fs.writeUTFBytes(ct.toXMLString()) //写入修改过后的XML
fs.close()

}

这里我用了READ和WRITE的组合。在实际的使用中我们可以判断一个xml文件的大小来限制单个文件写入过大。

3.删除文件。

删除文件是最简单的。

public function deleteFIleDemo():void{

var file2:File = File.desktopDirectory.resolvePath("test.xml");
if(file2.exists){ //判断文件是否存在
file2.deleteFile() //删除文件
}

}

如果使用file2.moveToTrash()则将文件移到垃圾箱

4.拷贝文件/移动文件

public function copyFileDemo():void{

var sourceFile:File = File.desktopDirectory.resolvePath("test.xml") //获取源文件
var newFile:File = File.desktopDirectory.resolvePath("test2.xml") //创建目标文件
sourceFile.copyTo(newFile,true) //执行拷贝，如果是移动的话sourceFile.moveTo(newFile,true)

}

5. 异步与同步

AIR对文件的操作分为异步与同步两种方式。上面1--4介绍的是同步方式，其中的一些方法有另一个异步方式，看下面的列表

File.copyTo() -- File.copyToAsync()
File.moveTo() -- File.moveToAsync()
File.deleteDirectory() -- File.deleteDirectoryAsync()
File.deleteFile() -- File.deleteFileAsync()
File.getDirectoryListing() - File.getDirectoryListingAsync()
File.moveToTrash() -- File.moveToTrashAsync()

FileStream.open -- FileStream.openAsync()

使用异步方式时我们需要监听EVENT.COMPLETE和IOErrorEvent.IO_ERROR事件来获取file的操作结果。我拿上面的拷贝做个例子

pirvate funnction copyFile(sourceFIlePath:String, targetFIlePath:String):void{

var sourceFile:File = File.desktopDirectory.resolvePath(sourceFIlePath) //获取源文件
var newFile:File = File.desktopDirectory.resolvePath(targetFIlePath) //创建目标文件
sourceFile.addEventListener(Event.COMPLETE,completeHandle) //监听文件操作complete事件
sourceFile.copyToAsync(newFile,true) ; //开始拷贝，异步方式
this. showLoadingBar() //打开loading图标

}

private function completeHandle():void{

Alert.show("拷贝文件完成")
this.closeLoadingBar() //关闭loading图标

}

异步方式的好处是我们可以从中实行一些别的操作，比如出现一个loading的提示之类。

OK, 休息了

Adobe Flex迷你教程 -- 合理使用Module分割项目以及对Module的使用

2008-11-20T12:37:00.005+08:00

现在说说Module，这篇教程代码不是最重要的，怎么样合理的使用Module以及注意的问题才是关键，所以建议大家注意下面红色语句。Module，可以将我们的项目按需划分为N个模块，在编译时将项目编译为主文件以及N个module的swf。Module基本上可以分为两种：

1. 完整的Module,可以被外部app所使用 -- 会将所有涉及到的引用编译到module中，主文件的体积得到缩减，但是Module本身的体积可能会很大，比如Module和主程序都应用了对象C，那对象C会被编译到主程序以及Module中，这样Module的体积就会很大。

2. 关联到主程序的Module -- 比如Module和主程序都应用了对象C，那对象C会只编译在主程序中，从而减小Module的体积。我今天主要讲这一种Module,也是我们最常用到的。

了解了Module的种类，再简单说说使用Module要注意的地方。

1. 绝对不能在Module以外的地方直接引用Module中的对象。这样Module会被编译到引用它的模块中去，如果从主程序中引用，那么Module就实际上没有效果了。

2. 既然不能引用，那么建议对Module对象的使用用接口实现。在Module中实现接口方法，在外部使用这个接口不会导致Module被误编译。

3. Module可以引用主程序中的东西，但是不要引用其他Module中的东西。

Module可以做什么呢？我主要将Module用于以下下两种情况

1. 缩减主程序的体积，点击Module功能块时加载Module.
2. 再入主程序后在用户感觉不到的情况下预加载剩下的Module.

现在讲正题，在demo中我这样表现Module的使用。(为了体现Module的意义，主程序生成的大小是原始flex大小248K, module内嵌了两张图片是674K)

1. 如何创建Module.
2. 主程序中点击按钮加载Module PictureWindow.
3. 加载完毕后将模块添加到Box中，并通过接口调用PictureWindow中的方法setSelectIndex()设置显示的图片。

1. 如何创建Module.

可以通过New --> MXML Module -->Optmize for applicaiton --> OK 或者修改任意的已经创建好的Container组建(比如Canvas, panel)标签为Module，再或者继承Module的As class。

之后确保“鼠标右键项目”--> Property --> Flex Module 中有这个Module,没有的话点Add --> 选择Module的mxml或as文件 -->Optmize for applicaiton -- > OK

2. 主程序中点击按钮加载模块PictureWindow.

这里我使用了ModuleManager来动态加载需要的Module。这比ModuleLoder要灵活的多。

private function loadModule():void{
m = ModuleManager.getModule("PictureWindow.swf"); //设置Module地址，地址是编译后swf在bin中的位置 //设置事件监听 m.addEventListener(ModuleEvent.READY,loadReady);
m.addEventListener(ModuleEvent.PROGRESS,loadReady);
m.addEventListener(ModuleEvent.ERROR,loadError); m.load(); //加载Module
}

3. 加载完毕后将模块添加到Box中，并通过接口调用PictureWindow中的方法setSelectIndex()设置显示的图片。

PictureWindow实现了PictureWindowInterface接口，其中暴露了setSelectIndex方法。再次强调不要直接使用Module对象，如果我们不注意写成
var window:PictureWindow = e.module.factory.create() as PictureWindow，那整个Module就前功尽弃了

//Module加载完成
private function loadReady(e:ModuleEvent):void{
//将Module对象转换为PictureWindowInterface
var window:PictureWindowInterface = e.module.factory.create() as PictureWindowInterface
this.box.addChild(window as DisplayObject);
window.setSelectIndex(1); //通过Interface调用Module中的方法
}

好了，Module的使用就写这么多，看到这里你应该也可以创建自己的Module了，对于ModuleManager和IModuleInfo 中详细的内容，大家可以查阅Flex帮助。

源文件下载

Adobe Flex迷你教程 --Super easy获取ip所在城市

2008-11-18T21:17:00.012+08:00

看了Moon和Grubby两场比赛。看的很爽，写点有意思的，用javascript可以获取本地ip,这个我就先不说了，我说说怎么能通过ip获取城市，能获取城市的话用处就比较大了，比如......

现在说正题。获取城市最大的问题是ip对应城市数据库，我们自己建这个数据库的话太麻烦。杂办呢，网上有很多可以根据ip查城市的网站，我们就用他们。首先找一个速度比较快的ip地址查询网站。我找的是 www.ipxxx.com（大家在源代码看吧，写出来成做广告了）。接下来确定三步

1. 看网站的结果是怎么得到的，经过观察发现上述网站是通过get查询，那就好办了。
2. 看看结果页面，因为网站不会给我们提供数据源的，所以我们要从结果页面找到我们想要的东西。上述网站的结果页面很干净，过滤很方便。
3. 确定它的首页没有版权信息说不准从外部直接访问某某页面。

OK,接下来就可以开始通过这个网站获取城市了，非常简单，不到10行代码。

1.创建一个到目标网站的HTTPService。

<mx:HTTPService method="GET" resultFormat="text" useProxy="false" id="ipGetter" url="http://www.XXXX.com/ips.asp" result="resultHandle(event)" fault="faultHandle(event)" />

2.处理结果页面。

private function resultHandle(e:ResultEvent):void{
var contnet:String = e.result.toString()
var begIndex:int = contnet.indexOf("省")
var endIndex:int = contnet.indexOf(" ",begIndex)
if(begIndex <0){
begIndex = contnet.indexOf("主数据：")
endIndex = contnet.indexOf(" ",begIndex)
contnet = contnet.substring(begIndex+4,endIndex)
}else{
contnet = contnet.substring(begIndex+1,endIndex)
}
this.result.text ="结果是："+contnet;
}

OK,这样很节约我们的资源吧，不过这种方法有可能会涉及到版权问题，大家在尝试别的网站的时候要注意。

不过因为受到安全沙箱的限制我们不能直接这么用，我们可以在我们的服务器端用相同的方法取得ip, flex直接获取数据就好

源文件下载

Adobe AIR迷你教程 -- 创建多窗口以及弹出窗口与父窗口的通讯

2008-11-15T23:16:00.006+08:00

今天说一下AIR中的window, 作为桌面应用，免不了会有多窗口存在的可能。所以这也是AIR于Flex web的另一区别。flex web应用的“窗口”都是内部窗口，不管你怎么拖拽它也不会超出flash player的范围。而我们今天说的air中的窗口，是没有范围限制的，任一窗口都可以说是一个“独立”的存在，不受主程序窗口的限制。

Demo主要有以下功能。

1. 简单继承window类创建MyWindow。加入parentWindow属性以及advOpen()方法, 设置MyWindow默认样式。
2. 从主程序中弹出窗口1，从窗口1中弹出窗口2。每个窗口里有image和button
3. 窗口1可以关闭主程序窗口，窗口2可以关闭窗口1。（关闭父窗口）

1. 简单继承window类创建MyWindow。加入parentWindow属性以及advOpen()方法, 设置MyWindow默认样式。

下面是我继承于WIndow的MyWindow，构造方法中设置了默认样式，parentWindow用于在打开窗口时保存父窗口对象。

public class MyWindow extends Window
{
public var parentWindow:Object;

public function MyWindow()
{
this.systemChrome = "none"; //不显示系统窗口
this.showStatusBar = false; //不显示底部状态栏
this.showGripper = false; //不显示底部大小控制按钮
}

/**
* 自定义open()打开窗口并且保存调用此方法的对象
*/
public function advOpen(parentWindow:Object,openWindowActive:Boolean = true):void{
this.parentWindow = parentWindow;
this.open(true)
}

}

2. 从主程序中弹出窗口1，从窗口1中弹出窗口2。每个窗口里有image和button
3. 窗口1可以关闭主程序窗口，窗口2可以关闭窗口1。（关闭父窗口）

下面是窗口1类，继承于MyWindow。在主程序中用了与下面相同的openWin打开窗口1，可以看倒在调用winX.advOpen时传入了当前对象作为被打开窗口的parentWindow. 下面的closeParent()中利用保存的 parentWindow关闭父窗口。

<local:MyWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="435" height="320" xmlns:local="*">
<mx:Script>
<![CDATA[
import mx.core.Window;

//打开窗口2
private function openWin():void{
var win2:PicTwo = new PicTwo();
win2.advOpen(this);
win2.move(500,50)
}

//关闭父窗口
private function closeParent():void{
if(this.parentWindow.hasOwnProperty("close")){ //检查父窗口中是否有close方法。
this.parentWindow.close(); //调用父窗口的close方法
}
}
]]>
</mx:Script>
<mx:Canvas>
<mx:Image source="@Embed('images/2.png')" />
<mx:Button label="打开我的表情2" click="openWin()" x="325" y="174"/>
<mx:Button label="关闭父窗口" click="closeParent()" x="342" y="204"/>
</mx:Canvas>
</local:MyWindow>

主程序

<mx:WindowedApplication showStatusBar="false" showGripper="false" xmlns:mx="http://www.adobe.com/2006/mxml" width="430" height="328" layout="absolute">
<mx:Script>
<![CDATA[
import mx.core.Window;
private function openWin():void{
//新建window对象
var win:PicOne = new PicOne();
win.advOpen(this); //弹出窗口
win.move(50,50);

}
]]>
</mx:Script>
<mx:Canvas>
<mx:Image source="@Embed('images/1.png')" />
<mx:Button label="打开我的表情1" click="openWin()" x="325" y="174"/>
</mx:Canvas>

</mx:WindowedApplication>

源文件下载
Demo

Adobe Flex迷你教程 -- Super easy实现Mac系统下滑式Alert窗口

2008-11-14T09:01:00.010+08:00

睡前没事突然想起有次在哪见过一个苹果样式的弹出窗口demo. 因为当时没有源码，也没有注意是怎么实现的。今天用一个简单的方式做一个试试。

我们知道Flex中内置了很多默认的Effect，其实只要我们稍加组合，可以实现很多很有意思的效果，这次的下滑菜单就用了其中两个效果,wipeUp和Move,然后用Parallel把他们组合起来用。我现在来详解。

Demo中我创建了一个KAlert类，用它弹出的信息框就是下滑样式了，这其中我只添加了一个静态的show()方法，重点就是我在其中调用的 setAppleStyle(alert)和setOpenEffect(alert)。
分别用来设置样式和设置弹出动画。

public static function show(text:String,modal:Boolean = false):void{
var alert:Alert = new Alert();

setAppleStyle(alert);
setOpenEffect(alert);

alert.text = text;
var parent:Sprite = Sprite(Application.application);
PopUpManager.addPopUp(alert, parent, modal);
alert.x = Application.application.width/2-100;
alert.setActualSize(alert.getExplicitOrMeasuredWidth(), alert.getExplicitOrMeasuredHeight());

}

样式设置就是让弹出框看上去更像mac的样式。我们主要来看下面的setOpenEffect(alert);，看其中的注释既可，demo就靠这个方法实现下滑弹出窗口。

//设置弹出动画
private static function setOpenEffect(alert:Alert):void{
var wipeUp:WipeUp = new WipeUp(); //Wipe效果，方向向上
var move:Move = new Move(); //移定效果
var parallel:Parallel = new Parallel(); //加入其中的效果会被并发执行
parallel.addChild(move);
parallel.addChild(wipeUp);

//设置弹出框在正中央
move.xFrom = Application.application.width/2-100;
move.xTo = Application.application.width/2-100;

//弹出时从－100移动到100，同时wipeUp
move.yFrom = -100;
move.yTo = -1;
//动画执行时间为300毫秒
wipeUp.duration = 300;
move.duration=300;
//在当前控件被加入舞台时执行
alert.setStyle("addedEffect",parallel)
}

源文件下载

Adobe AIR 迷你教程 -- 监测网络状态，离线/在线应用程序的实现

2008-11-09T17:00:00.010+08:00

AIR与Flex web应用的另一区别在于可以动态监测网络状态，可以让开发者在网络连通或断线时用不同的方式处理程序，在Demo中我将用以下情况来表现AIR的离线与在线应用。

1. 用户在文本框中输入内容。文本框下方的保存按钮会动态显示当前网络状态: (在线)保存与(离线)保存.
2. 在用户点击保存按钮时如果网络在线，将对话框内容保存在服务器。
3. 如果保存时处于断线状态，将内容保存在本地文件中。
4. 当网络恢复时检查本地文件，如果有已经保存的内容，将内容传入服务器。

源代码很简单，不到100行，大家可以在最下方下载。现在我开始讲解

1. 启动应用程序后监控网络状态。

我们在 App的CreationComplete()中调用netWorkSyc来监控网络状态。

private function networkSyc():void{
//创建一个联接，使用HEAD表示不需要加载玩全部的页面。
var request:URLRequest = new URLRequest( "http://www.google.com");
request.method = "HEAD";

//用url创建监测对象，每3秒检查一次网络状态，如果网络状态发生变化，将结果返回到netWorkStatusHandle()
urlMonitor = new URLMonitor(request);
urlMonitor.pollInterval = 3000;
urlMonitor.addEventListener(StatusEvent.STATUS,netWorkStatusHandle);
urlMonitor.start();
}

//网络状态改变时响应该事件
private function netWorkStatusHandle(e:StatusEvent):void{
if(urlMonitor.available){
//如果有本地文件，假装上传服务器
if(this.checkLoaclFile()){
//Kevin TODO 上传服务骑
this.showAlert("缓存内容已上传服务器");
}
saveBtn.label = "（在线）保存"
}else{
saveBtn.label = "（离线）保存"
}
}

上面的networkSyc()方法中我使用了两个类的对象来实现网络监控，URLRequest 和 URLMonitor。我用URLRequest来建立一个连接对象request，连接的地址是www.google.com。然后已request作为构造参数创建URLMonitor对象。我就是靠它来完成对网络状态的监控。

监控原理很简单，当第一次执行networkSyc()时，urlMonitor会尝试连接www.google.com，然后将连接的结果发回到netWorkStatusHandle(), 如果连接成功，urlMonitor.available会为true,反之为false。接下来每3秒检查一次网络状态，如果发生改变(连接成功变为连接失败或者连接失败变为连接成功)，那么将再度触发StatusEvent.STATUS事件，调用netWorkStatusHandle()返回网络状态。

以上就是AIR监控网络的方式，大家如果感兴趣想知道更多URLMonitor的内容，可以在Help中搜索ServiceMonitor,它的sub class就是URLMonitor和SockterMonitor。

Demo中并没有真正在本地保存文件，保存与读取文件的方法我会在下一篇教程--“AIR的文件操作”中教给大家。

PS: demo操作方法

1. 按装运行demo，如果网络连接正常，你会看到文本框下的按钮为 (在线) 保存。
2. 输入任意信息，点击（在线）保存。你会看倒信息 “内容已上传服务器”。
3. 切断网络。大概3－5秒后你会看到文本框下方按钮变为（离线）保存。
4. 点击保存，你会看倒信息“内容已经在本地保存，会在下次连线时自动上传到服务器”。
5. 接痛网络,大概3－－5秒后你会看倒信息 “缓存内容已上传服务器”。
6. Demo结束。

源文件下载
Demo

小白，小白，小白的桌子

2008-11-06T21:40:00.006+08:00

搬来这里后一直没有一张书桌，周末和Meg, Jabco去宜家买了桌面和四个腿，白色的桌面和黑色的腿，为了拼桌子还弄伤了手－－掌。哎，不过为了我的小白，忍痛了。下面就看看小白和它的桌子吧。

桌面和桌腿一共199块，桌面有黑色跟白色，桌腿有白、黑、红、灰等各种颜色，我选的白面黑腿，组合起来还是蛮不错的。作为一个工作台大小高度刚刚好，确是物美价廉。

最后感谢Meg送的仙人掌，可以延长我的寿命。

Adobe AIR迷你教程 -- 在Flex builder3 中创建、发布AIR程序以及 AIR程序的安装运行

2008-11-05T21:36:00.001+08:00

这篇教程应该算是AIR的 Hello world，写给那些知道一点AIR，想要开始AIR开发的人。读这篇教程你可以没有任何Flex的基础，我会告诉你如何创建你的第一个项目，并且发布一个HelloWorld程序。

为什么要叫迷你教程，因为我想要每个demo的源程序都尽量简短，易懂。我觉得这样的教程看来比较容易吸收东西，也不会让大家花费太多时间在一个问题上。

下面我们开始讲解以下的内容。

1. 准备工作。
2. 第一个 AIR程序（编写、运行、调试）
3. 发布AIR程序。
4. 安装已发布的AIR安装包。

1.准备工作。

AIR的开发环境非常简单，你唯一需要的就是FlexBuilder3,下载地址我就不提供了，只需要在google中搜索"Flex builder3 下载"，你会得到一大把地址。 Flexbuilder的安装也很简单，直接运行安装程序，然后一路按照导航菜单下去既可。

2. 第一个 AIR程序（编写、运行、调试）（图片点击可以放大）

现在我们打开刚安装好的FlexBuilder3,见下图,选择打开File -- New -- Flex project.

接下来是输入程序名，我写的是My first air app, 在Applicaiton Type那选择Desktop application(runs in Adobe AIR),接这直接点Finish,项目将创建在安装FlexBuilder时设置的work space里，这个文件夹没什么特别（你以后可以把你的项目放在任意的文件夹中，使用File -- Import -- Flex project导入）

现在你可以在左侧的导航中看见你的项目My first air app。你可以看倒项目主程序main.mxml和配制文件main-app.xml（在AIR迷你教程--使用自定义窗口...,中我们有用到这个文件，现在不需要管他）。右边的主窗口区域就是已经打开的main.mxml的内容。

按照下图的内容写我们的第一个air程序，也可以算我们第一个flex程序(Flex和AIR开发完全一样，只是在 AIR中多了一些包的支持使我们的程序成为桌面程序)。程序中有一个按钮，点击触发click事件，接着trace(trace是flex中用来在控制面版输出信息的命令，在Debug模式中我们经常会使用它来帮助我们调试程序)出 event 的内容，并且执行弹出窗口现在一段文字。

下面我们运行程序，按照下图，右键点击main.mxml -- Run As -- Adobe AIR Application.

运行后我们点击按钮，完成我们整个demo的内容。

好，现在我们已经结束从编写到运行的过程。下面我们来调试(Debug)。如图，我们在第9行代码左边蓝色小点的位置，左键单击，这样你应该可以看倒和图上一样的蓝色小点了，这就是我们设置的程序断点，在调试模式中，程序会在这样的位置停下来。

我们开始调试，右键点击main.mxml -- Debug As -- Adobe AIR Application.

然后你可能会看倒这样的提示，这是问你是否要将我们的主窗口切换到调试模式。你可以看见图片右上角有显示“Flex” 旁边有一个flex的图标，你可以点开那个菜单看见里面有三种视图Debugging, Development和Profiling。我们已经用了其中2个，Development就是我们上面写程序的视图，Debugging是我们即将要切换到的视图，Profiling是用来帮助我们检查程序的性能的工具，可以帮助我们解决Memory leak等等的问题，这个不需要知道，以后有机会用到的时候再研究也不迟。现在点Yes继续。

程序运行后，点击按钮，你会发现程序停在了下面的位置，一个绿色的横杠标示出程序现在停在了短点的位置，这个时候我们就可以查看这一时刻当前对象的各种我们感兴趣的信息了，你可以试着切换屏幕右上窗口的 Variables选像卡，会看到当前活动的对象，这里我们也不多说，尝试多调试下程序后你自然就明白Variables里面的内容了，都是很直观的信息。接下来如果我们点上面绿色的箭头，程序会继续执行直到遇到下一个断点，如果按F6，会单步执行。

以上就是全部第2点的内容。

3. 发布AIR程序。

既然 AIR是桌面应用程序，那它自然也需要按装，现在我们就来看怎么把我们写好的程序发布成按装包。点击图上红色圆圈的按钮，弹出如图所示窗口。在Export file中填上你想要的按装包的名字，点击Next

这里我们发布程序需要有一个Key,那是你程序的证书。因为第一次发布，所以点Create。

打开如图所示窗口，填上名字，密码，点击Browser选择保存位置。我的是Mac击所以界面有些不一样，但是操作和windows是一样的。我保存了名叫MyKey的证书。

上图点击OK后你可以看倒证书已经选择完毕。填上你的密码，点击Finish.

如下红色圆圈所示，在你的项目文件夹里出现一个main.air的文件，那就是我们发布的AIR程序安装包了。

4. 安装已发布的AIR安装包。

使用AIR程序的人当然不需要flexbuilder这样的东西，他们只需要按装已下air程序的运行环境。就像run java app需要java runtime, 运行 air需要 air runtime,这里是下载地址 http://labs.adobe.com/downloads/air.html. 下载 windows版或者mac版。下载后安装既可。

按装完runtime之后，双击main.air就可以开始将air程序，安装过程和普通应用程序无异。

好了，看完以上内容，相信你已经可以开始自己的AIR程序。至于更深入的内容大家可以继续看以后的AIR教程。

Adobe AIR迷你教程 -- 使用自定义窗口以及对窗口的移动，缩放，关闭操作

2008-11-02T12:38:00.002+08:00

这个教程主要针对对flex有一定基础，准备开始AIR开发的朋友。由于AIR是针对桌面应用程序，所以相对于flex的web应用，自然就多出了对应用程序窗口的控制。而 AIR的一大特点就是允许开发者使用自定义的窗口代替系统窗口从而使开发者对程序UI的设计更加随心所欲，设计出独具个性风格的跨平台的桌面应用程序。

罗嗦的话到次为止，下面正式开始主题，本教程主要实现了以下功能。

1. 屏蔽系统窗口、 flash窗口、窗口底部状态栏。使用自定义窗口。
2. 对自定义窗口的缩放、移动、关闭。

在实现以上操作的过程中，我加入了一些额外的操作来丰富我们的demo，都是很简单，很实用的东西。

3. 移动窗口时实现半透明效果，移动结束时还原。
4. 关闭窗口动画。
5. 窗口背景填充。

1. 屏蔽系统窗口， flash窗口，窗口底部状态栏。使用自定义窗口。

当一个AIR项目创建成功后，你会发现相对与 web项目，你的工程目录下多了一个名为 XXX-app.xml的文件，这是我们项目的配制文件，实现自定义窗口就是靠它。打开它，修改如下代码:




去掉对systemChrome的注释，改为


<systemChrome>none</systemChrome>

这样我们就去掉了系统窗口，转而使用了flash的自带窗口，下面我们把flash窗口也去掉。在你的主mxml文件中设置WindowedApplication 的这些属性

<mx:WindowedApplication showTitleBar="false" borderThickness="0" showStatusBar="false" showGripper="false" ..... />

这样就完全去掉了所有的窗口，程序运行后只显现应用程序的内容。大家可以参考帮助手册来了解以上属性的意思。说到这里就引出了下一个问题，屏蔽了所有窗口以后如何对窗口进行基本的，放大，缩放，关闭操作呢。我们看下面。

2. 对自定义窗口的缩放，移动，关闭。

AIR比flex web应用多了一个类叫NativeWindow,我们就是靠这个类对窗口就行操作。在demo中，我用了以下几个方法来移定窗口，他们都在鼠标MouseDown event中被触发。

this.nativeWindow.startResize("L");
this.nativeWindow.startResize("R");
this.nativeWindow.startResize("T");
this.nativeWindow.startResize("B");
this.nativeWindow.startResize("TL");
this.nativeWindow.startResize("RB");

很容易可以看出，L R B T代表 Left, Right, Bottom 和 Top, 所以在调用startResize时设置适当的参数我们就可以轻易的实现对窗口各个方向的缩放。对于窗口的移定，在mouseDown event中使用

this.nativeWindow.startMove();

而对窗口的关闭，则很简单的在按钮click事件调用this.close()。

好了，以上就是对自定义窗口的操作。下面的东西我是用来完善我的demo，使它cool一点。相信大家在自己的应用程序中也会需要类似的东西，一个应用程序除了功能，细节上的处理也是很重要的。

3. 移动窗口时实现半透明效果，移动结束时还原。

要实现这个效果我们需要重新打开我们的XXX-app.xml文件，设置以下内容。


<transparent>true</transparent>

这个可以允许我们让应用程序的背景透明，这个很有用，比方说QQ宠物就是一个背景透明的应用程序，利用背景透明，我们可以开发出很独特的应用程序。接下来要做的就简单了。

在上面移动窗口的mouseDown事件中加入 this.alpha = 0.x; 下面是demo中的代码。我将透明度设为0.6,this. alpha只针对应用程序的背景设置透明，如果你想让更多的东西透明，只需要对相应的控件设置alpha既可。

private function moveMe():void{
this.nativeWindow.startMove();
this.alpha = 0.6;
}

让透明还原我在mouseUp事件中设置alpha =1;

private function mouseUpHandle():void{
this.alpha = 1;
}

这样简单的设置也许就会使你的应用程序看起来不一样，怎么不试试呢：）

4. 关闭窗口动画。

我使用了下面的Iris效果对在窗口关闭时使用。有什么效果呢，大家关闭一下就知道了。 flex中内置了很多效果给我们使用，很多时候我们只需要适当的组合，就能得到意想不到的效果，比如 Move与 WipeDown一起可以实现Mac系统，菜单向下滑出的效果。诸如此类，只要有想像力，我们可以用很简单的代码，实现很有用的功能。在demo 中，如下设置得到关闭动画

<mx:WindowedApplication closeEffect="irisIn" ..... />

<mx:Iris id="irisIn" duration="500" showTarget="false" />

5. 窗口背景填充。

这个功能其实在开发程序的时候用的不多，我是不想让demo看起来太单调所以加了背景，我们知道flex是不能像Html那样轻易的让背景重复显示的，所以我们的用一些特殊方法处理以下，demo中的 setBackground方法用于设置整个背景。这里面涉及到的 Bitmap, BitmapData, Graphics类的具体作用，大家感兴趣的话可以看帮助手册，我的观点是当里用到的时候查帮助也不迟，只要知道有这么些个类可以为你干什么活就好。

private function setBackground():void{

var backgroundImage :Bitmap;
var backgroundBitmapData :BitmapData;

backgroundImage = new bg();
backgroundBitmapData = new BitmapData( backgroundImage.width, backgroundImage.height );
backgroundBitmapData.draw( backgroundImage );

workarea.graphics.beginBitmapFill( backgroundBitmapData, null,true );
workarea.graphics.drawRect(0,0, 2000, 2000);
workarea.graphics.endFill();
}

以上就是demo的全部内容，下面有源文件和Demo给大家下载。因为AIR是跨平台的应用程序，所以不管在Mac或者Window上开发过程都是一样的。Demo是在 Leopard下开发。

源文件下载
Demo

第一篇

2008-10-26T23:10:00.000+08:00

弄了一晚上，看了50个摸板最后选了这一个。喜欢这种简单的颜色。淡淡的，可以把人的注意力集中在文字上，但又不会因为看得太久感觉眼累。以后博客的内容大概会以技术与生活为主。会写一些简单实用的教程，一些自己开发的小程序（比如博客插件，小的工具等等）以及其他任何事。关于小程序，会以我比较熟悉的flex作为开发语言，另外加上php作为server端支持，如果程序需要的话。

作为一个apple fan, 对apple的每一个app都有盲目的欣赏。有朋友说apple的东西很多都扼杀自由主义思想，但也是他说的，自由主义思想已经死了。 apple的东西总是没有多余的成分，在我看来拥有完美的设计和不错的Usability。非常喜欢iphone中的Notebook。所以决定做一个和他她一样的桌面版和博客插件。
会先开始做桌面版，用AIR开发。我会将在开发过程中发现的小技巧或者有用的东西写做教程，希望可以帮到有需要的人。

预告一下下一篇博文是一简单教程，关于AIR的窗口基本操作。实现以下功能：

1. 显示自定义窗口。
2. 最小化，最大化，移动窗口。
3. 移动窗口时实现程序半透明，移动结束时恢复。