第七章. 使用Flex AIR组件
关于Flex AIR组件
Flext提供了下列AIR组件：
WindowedApplication 容器
AIR应用程序的顶层组件，该组件提供一些与桌面窗口有关的功能。
HTML 控件
可显示HTML页面
FileSystemComboBox控件
定义一个组合框用于选择本地文件
FileSystemDataGrid 控件
用表格来显示文件信息，其信息包括文件名，创建日期，修改日期，类型，大小。
FileSystemHistoryButton 控件
使用FileSystemList或FileSystemDataGrid控件的时候用此控件可导航历史操作记录。
FileSystemList控件
显示文件系统目录内容。
FileSystemTree控件
以树结构的形式显示文件系统目录内容。
更多信息请参阅Flex 3 Language Reference.
例子：用Flex AIR显示一个目录结构
下面的例子使用了WindowedApplication容器和FileSystemTree以及FileSystemDataGrid控件。在这里例子中，FileSystemTree控件显示目录结构，FileSystemTree控件中的目录名，FileSystemDataGrid控件就显示该目录下的文件信息：
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:HDividedBox>
<mx:FileSystemTree id="tree"
width="200" height="100%"
directory="{new File('C:\')}"
enumerationMode="directoriesOnly"
change="dataGrid.directory = File(tree.selectedItem);"/>????
<mx:FileSystemDataGrid id="dataGrid"
width="100%" height="100%"
directory="{new File('C:\')}"/>
</mx:HDividedBox>
</mx:WindowedApplication>
使用WindowedApplication组件
mx:WindowedApplication容器组件定义了包含AIR应用程序的窗口控件。在MXML AIR 程序里<Application> 标签被替换为<WindowedApplication>标签。
一个WindowedApplication组件提供下列控件：
1. 一个标题栏
2. 一个最小化按钮
3. 一个最大化按钮
4. 一个关闭按钮
WindowedApplication组件的窗口遵循底层操作系统的标准行为，比如可以拖到标题栏移动窗口以及改变窗口大小。
默认下，WindowedApplication组件创建的应用程序窗口，其windowMode 属性设置为systemChrome，visibile设置为true，这些设置都在application.xml 文件中。
下面的例子简单演示了WindowedApplication组件：
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
<mx:Text text="Hello World" />
</mx:WindowedApplication>
关于HTML组件
HTML组件用于显示HTML网页内容，被用于在AIR程序中渲染外部的指定HTML内容。它提供了轻量级的浏览器的功能，包括载入HTML页面，历史记录导航，以及访问HTML内容的能力。HTML组件并不是用来代替Text 和 TextArea组件来显示格式化文本数据。
创建一个HTML 组件
使用<mx:HTML> 标签在MXML中定义一个HTML组件，下面的例子中，给其指定一个id以便在其他地方能够引用。
指定HTML页面的location 属性显示指定页面内容。
下面的例子演示如何使用HTML组件。HTML组件的location属性设置为"http://labs.adobe.com/"，这样当载入时URL地址将被打开，另外"back" 和"forward" 按钮调用组件的historyBack() 和historyForward()方法。TextInput 组件让用户输入url 地址，当"go"按钮被点击后，HTML组件的location属性被设置为TextInput 的text 属性值。
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:ControlBar width="100%">
<mx:Button label="< Back" click="content.historyBack();"/>
<mx:Button label="Forward >" click="content.historyForward();"/>
<mx:TextInput id="address" text="{content.location}" width="100%"/>
<mx:Button label="Go!" click="content.location = address.text"/>
</mx:ControlBar>
<mx:Canvas width="100%" height="100%">
<mx:HTML id="content" location="http://labs.adobe.com/"/>
</mx:Canvas>
</mx:WindowedApplication>
HTML 组件之用户交互能力
对于用户交互性而言，HTML组件就像一个简单的浏览器，没有菜单栏和导航按钮。HTML页面的内容显示在组件中。用户通过表单域，按钮和超链接操作内容，任何动作都会使浏览器载入新页面（比如点击一个连接或提交一个表单），改变组件的location属性可载入新的页面。
Window 容器
Window组件是一个Flex容器，用于定义一个程序运行后出现所包含的内容和布局的操作系统窗口，也就是说它不同于初始或主窗口（如WindowedApplication或Application组件）。除此之外和WindowedApplication组件具有共同的功能，Window组件允许定义窗口的特性如窗口类型，样式，是否包含特定的窗口操作（如改变大小和最大化）。这些都是通过组件初始化时（还没有显示出来）设置其属性来访问，但是，一旦窗口打开后，这些属性将不能被设置和访问。
创建和使用Window容器
<mx:Window>容器定义了包含自身的AIR程序对象。在MXML AIR程序里<mx:Window> 标签作为MXML部件的最顶层标签，MXML部件的文档内容作为window容器内容，Window 组件不能用在其他MXML文档中，只能通过ActionScript来创建组件实例。
因许多Window组件只能在window打开之前进行设置，所以其属性可以在 <mx:Window> MXML 标签中或用ActionScript代码进行设置。
一旦windows的初始属性设置完毕，调用Window组件的open() 方法后操作系统将会把它显示在用户桌面上。
下面是一个简单使用Window组件的例子，这个例子包含两个MXML文件，第一个使用Application容器且是程序的初始窗口，第二个使用Window容器作为程序的第二个窗口，在这个例子中，主窗口模拟一个应用程序的欢迎屏幕窗口，3秒后关闭欢迎屏幕且打开第二个窗口。
下面的代码定义主程序MXML文件，包含当程序运行时自动打开的初始化窗口(欢迎屏幕窗口)：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">
<mx:Script>
<![CDATA[
private const LOAD_DELAY:int = 3;
private var timeElapsed:int = 0;
private var loadTimer:Timer;
private var splashScreen:NativeWindow;
private var docWindow:DocumentWindow;
private function init():void
{
// center the window on the screen
splashScreen = Shell.shell.openedWindows[0];
var screenBounds:Rectangle = Screen.mainScreen.bounds;
splashScreen.x = (screenBounds.width - splashScreen.width) / 2;
splashScreen.y = (screenBounds.height - splashScreen.height) / 2;
// start the timer, which simulates a loading delay
loadTimer = new Timer(1000);
loadTimer.addEventListener(TimerEvent.TIMER, incrementTime);
loadTimer.start();
updateStatus();
}
private function incrementTime(event:TimerEvent):void
{
timeElapsed++;
updateStatus();
// if the loading delay has passed, stop the timer,
// close the splash screen, and open the document window
if ((LOAD_DELAY - timeElapsed) == 0)
{
loadTimer.stop();
loadTimer.removeEventListener(TimerEvent.TIMER, incrementTime);
loadTimer = null;
splashScreen.close();
// open a new instance of the document window
docWindow = new DocumentWindow();
docWindow.open();
}
}
private function updateStatus():void
{
loadStatusMessage.text = "initializing...??" + (LOAD_DELAY - timeElapsed).toString() + " seconds remaining.";
}
]]>
</mx:Script>
<mx:VBox horizontalCenter="0" verticalCenter="0">
<mx:Text text="My Splash Screen" fontFamily="Courier New" fontSize="36"/>
<mx:Text id="loadStatusMessage" text="initializing..."/>
</mx:VBox>
</mx:Application>
incrementTime()方法每秒钟调用一次，当时间结束时DocumentWindow实例被创建并调用其open()方法。DocumentWindow类被独立定义在MXML文件中，其顶层标签为<mx:Window>，也就是说它是Window类（Window组件）的子类。下面是DocumentWindow MXML文件代码：
<?xml version="1.0" encoding="utf-8"?>
<mx:Window xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
title="Document window"
width="550" height="450">
<mx:Text text="This is a document window." horizontalCenter="0" verticalCenter="0"/>
</mx:Window>
关于Window容器的更多信息，请参阅Flex 3 语言参考
