Flex the world

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控件动态读取文件夹列表，打开选择的文件。

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, 休息了

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>

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教程。

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

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

<!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
<!--<systemChrome></systemChrome> -->

去掉对systemChrome的注释，改为

<!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
<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文件，设置以下内容。

<!-- Whether the window is transparent. Only applicable when systemChrome is none. Optional. Default false. -->
<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下开发。