AS3独当一面：AIR演绎《Visualizing Data》[GettingStarted]

相关链接：
MSN SkyDriver Books 《Visualizing Data》
Getting Started演示代码
Preface：AS3独当一面：AIR演绎《Visualizing Data》

运行本系列文章的代码，需要准备如下工具：
Flex SDK4.0(amxmlc)
AIR SDK(adl)
AIR1.5Runtime
原样还原压缩包，在根目录下执行如下两行命令：
1.amxmlc -output bin/VisualData.swf -compiler.source-path=src src/net/wargrey /vdata/VisualData.as
2.adl air-app.xml

---

《Visualizing Data》的章节是按照如下“数据可视化”的七个步骤展开的：

1.Acquire:获取数据，无所谓是来自文件、磁盘亦或是网络等；
2.Parse:分析数据结构，分类排序；
3.Filter:过滤，去掉所有不感兴趣的数据；
4.Mine:综合使用统计、数据挖掘等方法来识别出这些数据的模型或者将这些数据置于一个数学环境中；
5.Represent:选择诸如棒图、列表、树等的可视化模型来描绘数据；
6.Refine:精炼基本表示法，使数据描绘的更清楚，更具视觉效果；
7.Interact:添加一些用于控制或操作数据的交互方法。

 

本系列文章并非教程，所以书上有的内容在这里就不赘述了 。直接进入代码部分(而且代码部分能在api文档里找到的也不赘述 )，加压开GettingStart.tar.bz2文件，会得到如下(IDE无关)的目录结构：

VisualizingData：根目录
air-app.xml：AIR应用程序配置文件；
bin：swf输出目录；
res：资源文件目录，内按章节设置子目录（如果章节需要本地资源）；
src：源码文件，package为net.wargrey.vdata。

 

详细说明：
虽然Adobe官方一直没有提供直接使用纯actionscript来开发flex/air应用程序的资料，而做这个尝试的国内外应该都有人的，当然也许 匿名的编程爱好者居多。但其实这个并非不可能，因为本质上讲flex和air本身就是as实现的flash库(air还多了一个新的runtime)，而 且mxmlc的实现方式本来就是将mxml标签代码转化为as代码再编译之的。这么一来我们只需要看一下生成的as代码就可以自己动手了。所以所有代码的 组织方式如下：

 

除了VisualData.as和WarGreyAIRManager.as这两个结构性类外，各章节所讲解的技能各自对应一个类文件，如图中的 HelloVData.as、Mapping.as、TimeSeries.as(后两个是接下来两篇文章的主题)，并且这些类都继承自 mx.core.UIComponent，以便可以作为可视化对象被加载到Stage上，后续文章将只关注这些类的实现。而在此简单说明一下这些类是如何 与主应用程序整合的。

 

所有的AIR应用程序都至少有三部分组成 ：
1.主应用程序mx.core.WindowsedApplication，这里即为VisualData.as，用于执行一些全局的初始化工作（其实也 没有多少），初始化执行结束new一个具体的可视化类，比如HelloVData.as，以自行转交控制。注意，为了保证各程序互不干扰（主要是一些事件 处理），建议每次只new一个可视化类演示。

public function VisualData(){
	super();
	mx_internal::_document = this;
	mx_internal:: stylesInit();
	this.addEventListener("applicationComplete", this.main);

}
private function main(event:FlexEvent):void{
	new HelloVData();
}

 

2.系统管理器mx.managers.SystemManager，这个用于管理主应用程序窗口以使得其行为像一个“本地化GUI程序”，当然这些都有默认实现。

 

3.模块工厂mx.core.IFlexModuleFactory，这动态加载和创建模块，包括主应用程序窗口和一些控件如TextArea等。为了节 省外部类数量（而且这些类几乎永远不需要修改），模块工厂和系统管理器整合在一起为WarGreyAIRManager，并且以metadata形式关联 到了VisualData类里。

[Frame(extraClass="net.wargrey.vdata.WarGreyAIRManager")]
 //For 2
[Frame(factoryClass="net.wargrey.vdata.WarGreyAIRManager")]
 //For 3
public class VisualData extends WindowedApplication{

 

题外话，上述三个部分即是一个纯AS的Flex/AIR的开发框架，不仅仅是在此系列文章中，我的所有flash程序都是这样开始的，而真正的应用 程序入口其实就是从继承自UIComponent的构造函数。实际上，除了上述三个部分外还有一些自动生成的诸如Style的类文件，这个便是mxml文 件内部给出的规范可视化对象的样式默认设置，当然你可以在主应用程序加载之后再手动代码设置，不过为了不冲淡主题，全部使用其默认设置。

 

HelloVData.as是本系列文章正式开始的“Hello World”，当然这里的输出是矢量图了，对应于原书第二章《Getting Started with Processing》。

 

代码比较简单，不多说了，列举一些差异部分：
1.只是简单的展示了基本绘图API和鼠标的单击事件，参数基本按照书中例子来设；
2.没有演示外部数据的加载，这些在后续章节里都是基本操作；
3.没有考虑Processing特性操作的部分。

 

注意点：
1.在设置窗口size的时候，air应用程序多了个statusBar，所以传递过去的height参数应该额外加上statusBar的高度：stage.stageHeight=400+FlexGlobals.topLevelApplication.statusBar.height;

评论

2 楼 WarGrey 2009-09-13  

我晕，还有个人在我博客上也这么说。
我也是firefox。


能不能把这网页抓个图看看，要不然我没法验证啊，我都看得到的

1 楼 timshaw9791 2009-09-13  

这个看起来相当不错啊，但是你的附件截图好像看不了？我用ff。