【AIR中文帮助】 第三章 设置Flex SDK

在Windows下安装和配置Flex 3 SDK

    Adobe AIR 命令行工具需要安装Java，可以是JRE或JDK（1.4.2版本以上），JRE到这里下载 http://java.sun.com/j2se/1.4.2/download.html，JDK到这里下载http://java.sun.com/javase/downloads/index.jsp 。

 注意：终端用户不需要Java环境。

Flex SDK 包含AIR API和命令行工具用于打包，编译和调试AIR应用程序。

1. 如果还没有，可到Adobe Labs上下载一份Flex 3 SDK。

2. 解压缩SDK到指定目录。

3, 定位到bin子目录。

编译器设置

    Flex SDK中包含两个编译器，mxmlc 编译器编译MXML和ActionScript代码为SWF文件，compc编译器编译组件和库为SWC文件。两个编译器都可作为本地二进制程序或Java程序在命令行下运行。（本地二进制程序实际上是调用Java程序）如果要使用本地二进制程序，需要把Flex 3 SDK\bin目录加入环境变量path中。如果使用Java程序命令，需要把mxmlc.jar和compc.jar加入到环境变量中。

编译器配置文件

    使用编译器时可以指定编译的一些可选参数，全局Flex SDK 配置文件包含一个默认值，你可以编辑这个文件定制自己的开发环境。air_config.xml这个全局配置文件在Flex 3 SDK的frameworks 目录中。

注意：如果使用amxmlc命令启动编译器时air_config.xml会代替flex_config.xml。

关于编译器的可选选项可参考(http://livedocs.macromedia.com/flex/2/docs/00001490.html)

调试器设置

    AIR直接支持调试功能，因此不需要一个调试版本的运行时环境。要想管理命令行调试，需要使用调试版的Flash播放器，只需要设置下环境变量指定这些命令的所在目录即可。

调试版的Flash播放器已在Flex 3 SDK目录中。二进制命令fdb.exe在bin目录，Java版的在lib目录。AIR调试启动器adl.exe或ADL在bin目录

注意，你不能直接用FDB启动AIR程序，因为FDB会试图用Flash播放器运行程序，因此你必须让AIR程序连接FDB回话。

应用程序打包器设置

AIR开发工具(ADT)，用来把程序打包为AIR文件，要想运行ADT，必须安装Java环境。

SDK包含一个脚本来执行ADT。要运行ADT脚本需要把Flex SDK的bin目录加到系统path变量中。
 

 

用Flex程序开发截屏功能

在最近的Flex项目中需要做个屏幕截图功能，然后保存为图片文件，以前好像在哪里看到这样的例子，找了半天没找着，其实实现起来也挺简单的。

具体步骤如下：

创建一个BitmapData对象
拷贝目标组件的象素数据到BitmapData对象上
转换BitmapData对象为PNG编码的ByteArray (需要用到PNGEnc库)
转换ByteArray为Base64Encoded字符串，这样便于发送数据给后台处理
在后台程序中(如PHP等)，对数据解码然后写入文件
PNG Encoder 库是由Tinic Uro编写的。

这里是Flex代码：

 <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.utils.Base64Encoder;
import mx.rpc.events.ResultEvent;
import mx.utils.ObjectUtil;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.core.UIComponent;

public function onResult(event:ResultEvent) :void
{
Alert.show(ObjectUtil.toString(event.result));
}

public function onFault(event:FaultEvent) :void
{
Alert.show("Got error: "+event.message);
}

public function takeSnapshot(target:UIComponent) :void
{
var bd:BitmapData = new BitmapData(target.width,target.height);
bd.draw(target);
var ba:ByteArray = PNGEnc.encode(bd);
var be:Base64Encoder = new Base64Encoder();
be.encodeBytes(ba);
var encodedData:String = be.flush();
ro.saveImage(encodedData);
}
]]>

</mx:Script>

<mx:Button click="takeSnapshot(targetPanel)" label="Save Image" x="10" y="100"/>

<mx:Panel id="targetPanel">
<mx:Canvas backgroundColor="#EEEEEE">
<mx:Label text="Hello World" />
</mx:Canvas>
</mx:Panel>

<mx:RemoteObject id="ro" destination="serviceEndpoint" result="onResult(event)" fault="onFault(event)"/>
</mx:Application>
 

后台的PHP代码：

public function saveImage($encodedPNGData)
{
if ($encodedPNGData != "")
{
$binaryData = base64_decode($encodedPNGData);
$file = "assets/images/something.png";
file_put_contents($file, $binaryData);
return $file;
}
return null;
}

 

开源的FDS服务器替代品GDS

GDS服务器（Granite Data Services） 目前版本为0.4.0 RC1,下载地址为http://www.graniteds.org/confluence/display/INTRO/Granite+Data+Services

该版本的特性如下：

Full AMF3 support. See GDS AMF3 documentation.
EJB3 services with transparent externalization mechanism and lazy initialized ActionScript 3 beans (Entity Beans / Hibernate). See EJB3 Services and Externalizers and Lazy Initialization.
EJB3 Entity Bean to ActionScript 3 classes code generator. See AS3 Generation.
Spring services. See documentation on Spring Services.
POJO services (remote calls to simple Java classes that expose public methods). See Pojo Services.
(planned) Data push. A Comet-like implementation with AMF3 data polling over HTTP (event/listener based architecture).
(planned) Entity repository: a client side entity repository that ensures uniqueness (only one instance of each entity is present in the flash VM), weakness (only currently bound objects are kept in memory), and that acts as a services frontend (all server calls/events are managed by this central component). This will be loosely inspired by Cairngorm.
(planned) Seam integration: a reliable GDS/Seam integration with full scopes (at least conversation) support.
(planned) A set of Flex components suitable for complex data structures.

设置TitleWindow组件的样式

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/10/styling-the-titlewindow-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        /* Style the Window title message. */
        .windowStyles {
            color: haloBlue;
            letterSpacing: 2;
        }

        /* Style the Window status message. */
        .windowStatus {
            color: red;
            fontWeight: bold;
        }

        TitleWindow {
            dropShadowEnabled: false;
            borderAlpha: 1.0;
            borderColor: haloSilver;
            backgroundColor: haloSilver;
            cornerRadius: 0;
        }
    </mx:Style>

    <mx:TitleWindow id="titleWindow"
            title="Title"
            status="Status"
            width="160">
        <mx:Text htmlText="The quick brown fox jumped over the lazy dog."
                selectable="false"
                width="100%" />
        <mx:ControlBar horizontalAlign="right">
            <mx:Button label="Button" />
        </mx:ControlBar>
    </mx:TitleWindow>

</mx:Application>

效果

 

修改组件样式的各种写法（Button为例）

1:

<mx:Button label="Button 1" borderColor="red" />

2:

<mx:Button label="Button 2">
    <mx:borderColor>red</mx:borderColor>
</mx:Button>

3:

<mx:Style>
    .MyButton {
        borderColor: red;
    }
</mx:Style>

<mx:Button label="Button 3" styleName="MyButton" />

4:

<mx:Style>
    Button {
        borderColor: red;
    }
</mx:Style>

<mx:Button label="Button 3" />

5:

<mx:Style source="styles.css" />

<mx:Button label="Button 3" />/**//* CSS file */
Button {...}{
    borderColor: red;
}

6:

<mx:Script>
    <![CDATA[
        private function button4_init():void {
            button4.setStyle("borderColor", "red");
        }
    ]]>
</mx:Script>

<mx:Button id="button4"
        label="Button 4"
        creationComplete="button4_init();" />

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init()">

    <mx:Script>
        <![CDATA[
            import flash.text.Font;

            private function init():void {
                arr = Font.enumerateFonts(true);
                arr.sortOn("fontName", Array.CASEINSENSITIVE);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr" />
    <mx:String id="str">The quick brown fox jumped over the lazy dog.</mx:String>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="String:" />
        <mx:TextInput id="textInput" text="{str}" />

        <mx:Spacer width="100%" />

        <mx:Label text="Number of installed fonts: {arr.length}" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid" dataProvider="{arr}">
        <mx:columns>
            <mx:DataGridColumn dataField="fontName"
                    width="200"
                    itemRenderer="mx.controls.Label" />
            <mx:DataGridColumn dataField="fontStyle" />
            <mx:DataGridColumn dataField="fontType" />
        </mx:columns>
    </mx:DataGrid>

    <mx:Label id="lbl"
            text="{textInput.text}"
            width="{dataGrid.width}"
            height="32"
            fontFamily="{dataGrid.selectedItem.fontName}"
            fontSize="16" />

</mx:Application>

 

如果修改上面的例子，并使用下面的代码嵌入一个字体，那么在表格中也会显示出来“Base02"字体：

<mx:Style>
    @font-face{
        src: url("./fonts/base02.ttf");
        fontFamily: "Base02";
    }
</mx:Style>

如果把 enumerateFonts()方法的参数改为flase，那么只会列举出嵌入字体：

<mx:Script>
    <![CDATA[
        import flash.text.Font;

        private function init():void {
            arr = Font.enumerateFonts(false);
            arr.sortOn("fontName", Array.CASEINSENSITIVE);
        }
    ]]>
</mx:Script>

 

删除mms.cfg设置

如果你事先修改了mms.cfg 文件(如Flash播放器的安全设置)，在测试AIR之前先删除它，在AIR的M2版本里，这个配置文件的一些设置会限制AIR的功能。

在Mac OS系统中，这个文件在/Library/Application Support/Macromedia/mms.cfg 。 
在Microsoft Windows系统中，这个文件在如C:\winnt\system32\macromed\flash\mms.cfg 。