闪无忧
 
首 页 业界新闻 业界杂谈 Flash教程 Flash源码 Flash图书 Flash酷站 Flex & AIR 供求信息
   本栏目通告:   请大家多多关注AIR,欢迎大家踊跃投稿
当前位置 :首页>Flex-AIR>AIR资讯>列表

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

[来源:网络 | 作者:adobe | 时间:2008-12-20 | 点击:  | 收藏本文  【 】]

在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 。


文章如果有错误或者缺少文件,请发邮件提交给我们
上一篇:【AIR中文帮助】 第二章. 设置Flex Builder
下一篇:【AIR中文帮助】 第四章 用Flex Builder创建第一个Flex AIR程序
Tags:    
>>> 最新评论:(共有 0 位网友发表了评论)      查看所有评论
  发表评论
用户名: 新注册) 密码: 匿名评论
评论内容:(不能超过250字,需审核后才会公布,请自觉遵守互联网相关政策法规。
·本站发布内容均为客观表达作者观点,不代表闪无忧立场,请勿攻击和漫骂
·用户发表意见仅代表其个人意见,并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯,提倡就事论事,杜绝漫骂和人身攻击等不文明行为
  Flex及AIR分类
  Flex资料   Flex动态
  Flex案例   Flex源码
  AIR资讯
  搜索本站资料
Google
  Flex相关
  什么是Flex   什么是AIR
  寻找Flex工作机会
  发布Flex工作机会
  热门文章
·AIR及Flex3之mp3播放器教程
·【AIR中文帮助】 第十章. 窗体(Windo
·AIR是什么
·Adobe AIR教程范例分享及源文件下载
·【AIR中文帮助】 第一章 什么是 Adobe
·让Adobe AIR 程序离线运行(翻译)
·HTML 與JavaScript也能實現Adobe AIR
·摆脱浏览器限制-AIR系列应用
·【AIR中文帮助】 第三章 设置Flex SDK
·70 个AIR 程序源码下载
·AIR热门应用-IM篇图文介绍
关于我们 - 版权声明 - 网站地图 - 广告服务 - 联系我们 - 友情链接 - 用户注册
©CopyRight 2006-2008, 5UFlash.COM, Inc. All Rights Reserved
鲁ICP备06034971号