RIA爱好者

在Flex Chart中绘制虚网格线

riafan@163.com(Flying) — Sun,20 Jun 2010 23:39:02 +0800

GridLines类可在图表的数据区域内绘制网格线。默认情况下，网格线的线型为实线，如何让绘制的网格线为虚线呢？

思路是这样的，扩展GridLines类，给它自定义线型样式属性，然后根据线型样式绘制相应线型的网格线。怎样绘制虚直线呢？我使用了Ely(Quietly Scheming)写的一个工具类GraphicsUtils，其中drawDashedLine()方法是用来绘制虚直线的，参数pattern用来定义虚线间隔。我为参数pattern添加了一个错误处理：间隔为0时，抛出参数错误。为支持Flex 4，我对apply()方法作了一些更改。

另外，我在GridLines扩展类中还自定义了虚线间隔样式属性。关于怎样自定义Flex组件的样式属性，请参看：http://www.riafan.com/blogedit.asp?id=196。

点击此处查看该实例最终效果，点击此处下载该实例的源码。

Flex 4中LineSeries的两个Bug

riafan@163.com(Flying) — Sat,19 Jun 2010 09:22:44 +0800

Flex 4中LineSeries有两个Bug，使用SolidColorStroke自定义lineStroke后，DataTip无边框，Legend marker(图例标记)的填充色为始终为黑色。点击此处查看这两个Bug，下面我们将讲解造成这两个Bug的原因及解决方案。

打开Flex 4 SDK中的LineSeries.as，DataTip的边框是在findDataPoints方法中设置的，定位到该1543行：if (istroke is Stroke)，Stroke是SolidColorStroke的子类，因此这个代码块中是不会执行的。那为什么图例标记的填充色为始终为黑色呢？Legend使用Chart中各个Series的legendData作为默认数据提供者。定位到get legendData()方法，可以看出，图例以LineSeriesLegendMarker实例作为默认标记，LineSeriesLegendMarker辅助类，按F3打开代码定义，定位到2101行：if (Stroke is Stroke)。问题就出在这个代码块中，我想肯定是Flex 4 SDK开发工程师的粗心了。

明白了原因，具体怎么改就不难了，请参看源码中我扩展LineSeries的子类LineSeriesEx。

注意：如果是升级造成Bug，在Flash Builder中Debug的一个快捷方法就是：Copy源码，然后直接定位到时警告处。

当然，如果我们仍使用Stroke来自定义lineStroke，就不存在上述两个Bug。不过，既然建议在Flex 4 中使用SolidColorStroke来代替Stroke，Adobe最好能在下一个版本中修正这两个Bug。

点击此处查看该实例最终效果，点击此处下载该实例的源码。

让Spark文本组件支持Html标签

riafan@163.com(Flying) — Thu,17 Jun 2010 23:41:00 +0800

默认下Spark 文本组件是不支持Html标签的，但我们可以使用TextConverter类中的importToFlow()方法解决这个问题。

看下面代码：

package controls
{
	import flashx.textLayout.conversion.TextConverter;
	import flashx.textLayout.elements.TextFlow;
	
	import spark.components.RichText;
	
	public class RichHtmlText extends RichText
	{
		public function RichHtmlText()
		{
			super();
		}
		
		private var _htmlText:String
		
		public function get htmlText():String
		{
			return _htmlText;
		}
		
		public function set htmlText(value:String):void
		{
			_htmlText = value;
			var tf:TextFlow = TextConverter.importToFlow(value, TextConverter.TEXT_FIELD_HTML_FORMAT);
			this.textFlow = tf;
		}
	}
}

上面代码中，我们使用importToFlow()方法，基于Html格式的文本创建了TextFlow实例，再将该实例指定为该文本的TextFlow对象，从而扩展了RichText 类，使其支持支持Html标签。该自定义类用法很简单，将Html文本赋值给htmlText属性即可，和MX文本组件的用法类似。

如果要支持Html标签，Adobe建议使用MX文本组件，因为它们比Spark文本组件轻量，但MX文本组件不支持Text Layout Framework (TLF)中的新特性。因此是使用MX文本组件还是本文中扩展的Spark 文本组件，视项目需要而定。

慎用Flex RSL

riafan@163.com(Flying) — Sun,13 Jun 2010 15:25:15 +0800

Flex 4框架链接类型默认为RSL，使用框架RSL的优点是SWF文件较小下载更快，缺点是消耗的内存更多，第一个使用框架RSL的应用第一次加载很慢。这对第一个使用该技术的人是不公平的。

使用RSL技术的应用程序SWF文件较小，但第一次会连同所有框架类一起加载，而不只是仅仅加载应用程序所需类，所以首次加载时会花更多的时间。因为RSL能保存在Flash player的缓存中，能跨应用、跨域跨浏览器访问，所以从第二次加载或加载其他应用程序时会快得多。但如果客户只关心的第一印象，使用RSL只能弄巧成拙。因此要慎用下面加快第一次加载的一些建议：

1. 只加载必需的框架RSL。如果使用Flash Builder 4，请选择“属性”>Flex构建路径>库路径，选择没有用到的swc，然后单击删除按钮。

2. 从你的远程服务器上加载框架RSL。如果使用Flash Builder 4，请重复步骤1，打开目标swc，然后双击RSL链接类型，默认部署在Adobe服务器上，替换为自己的服务器。

我上面提到的一点更为重要：RSL对第一个使用框架RSL的人是不公平的。所以Adobe应想考虑在安装播放器后就将框架RSL存贮在Flash player缓存中。

使用externalInterface.addCallback()容易犯的两个错误

riafan@163.com(Flying) — Sat,05 Jun 2010 23:27:50 +0800

ExternalInterface类是实现JavaScript与ActionScript之间通信的编程接口，其中addCallback()方法使用最广泛，该方法将ActionScript方法注册为可从容器调用。如果浏览器不支持调用或无权访问的安全沙箱，将引发错误，大家可以参考帮助解决这些常见问题。本文讲述的实际应用中使用addCallback()方法容易犯的其它两个错误。

1. 错误：对象不支持此属性或方法。这是因为ActionScript方法还没注册成功就在容器中调用。最简单的解决方法是在注册ActionScript方法后，使用call()方法调用JS函数来检验注册状态，再在该函数体中调用ActionScript方法。

在本实例中，如果使用就会出现上述错误。如果在注册addCallback()方法后，调用isReady()函数。因为这两句ActionScript是顺序执行的，所以再在该JavaScript函数中调用selectCatalog(1)函数就没有问题了。

2. 错误：在IE成功中调用addCallback()，而在Firefox中却没有反应。这是因为它们对swf对象的引用语法不一样，IE中用window[movieName]，而Firefox中使用document[movieName]，需要判断一下浏览器的类型再分别处理，或者用document.getElementById("movieName")。

在本实例中，如果使用Main.getSongList(data)就会出现上述错误，我们使用thisMovie()函数解决了这一问题。

点击此处查看该实例最终效果，点击此处下载该实例的源码。

让SuperTabNavigator支持NavigatorContent

riafan@163.com(Flying) — Sun,30 May 2010 09:39:26 +0800

flexlib已经升级到Flex 4了，最近有用到SuperTabNavigator。我用NavigatorContent作为其子容器，结果出错：TypeError: Error #1009: 无法访问空对象引用的属性或方法。at flexlib.containers::SuperTabNavigator/reorderTabList()[E:\Exercise\Flex\Tutorials\Demo\src\flexlib\containers\SuperTabNavigator.as:1181]。

我花了一点时间解决了修正了这个Bug。打开SuperTabNavigator.as源码，定位到1181行附近。

var child:Container = this.getChildAt(i) as Container;

var obj:Object = new Object();
//setting the type to an empty string bypasses a bug in MenuItemRenderer (or in 
//DefaultDataDescriptor, depending on how you look at it). Try commenting out the
//line and check out the menu items.
obj.type = "";
obj.label = (child.label != "") ? child.label : "Untitled Tab";
obj.icon = child.icon;

popupMenuDP.addItem(obj);

原来是将child的类型由NavigatorContent强制转化成Container时失败，child为null，当然无法访问其label属性。在Flex 4中，Container和NavigatorContent都实现INavigatorContent接口，因此只要将child的类型由Container改为INavigatorContent就可以支持NavigatorContent了。

使用Flex Chart画移动平均线

riafan@163.com(Flying) — Sat,22 May 2010 15:52:03 +0800

移动平均线通常是指算术移动平均线，在计算移动平均值时，通常采用最近n天的收市价格。我们把新的收市价格逐日地加入数组，而往前倒数的第n+1个收市价则被剔去。然后再把新的总和除以n，就得到了新的一天的平均值(n天平均值)。

那如何在在Flex Chart中画移动平均线呢？请看下面的方法。

private function getMACollection(collection:ArrayCollection, offset:int):ArrayCollection
{
	var newCollection:ArrayCollection = new ArrayCollection();
	var len:int = collection.length;
	for (var i:int = 0; i < len - offset + 1; i++) 
	{
		var sumClose:Number = 0;
		for (var j:int = i ; j < offset + i; j++) 
		{
			var o:Object = collection.getItemAt(j);
			sumClose +=  o.stockA;
		} 
		var item:Object = new Object();
		item.date = collection.getItemAt(i  + offset - 1).date; 
		item.stockA = sumClose/offset;
		newCollection.addItem(item);
	} 
	return newCollection;
}

点击此处查看该实例最终效果，点击此处下载该实例的源码。

Adobe CS5英文版下载

riafan@163.com(Flying) — Sat,01 May 2010 12:04:07 +0800

昨天，Adobe正式发售Adobe CS5英文版。你可以在上Adobe官方网使用你的Adobe ID下载试用，也可以通过下面的链接直接下载。

1. Adobe Creative Suite 5 Design Premium

1) Windows(2.84G)

http://trials2.adobe.com/AdobeProducts/MDIA/CS5/win32/DesignPremium_CS5_LS1.7z

http://trials2.adobe.com/AdobeProducts/MDIA/CS5/win32/DesignPremium_CS5_LS1.exe

2) MAC(3.50G)

http://trials2.adobe.com/AdobeProducts/MDIA/CS5/osx10/DesignPremium_CS5_LS1.dmg

2. Adobe Creative Suite 5 Web Premium

1) Windows(3.09G)

http://trials2.adobe.com/AdobeProducts/WEBB/CS5/win32/WebPremium_CS5_LS1.7z

http://trials2.adobe.com/AdobeProducts/WEBB/CS5/win32/WebPremium_CS5_LS1.exe

2) MAC(3.78G)

http://trials2.adobe.com/AdobeProducts/WEBB/CS5/osx10/WebPremium_CS5_LS1.dmg

3. Adobe Creative Suite 5 Production Premium

1) Windows(7.17G)

http://trials2.adobe.com/AdobeProducts/STVD/CS5/win32/ProductionPremium_CS5_LS7.7z

http://trials2.adobe.com/AdobeProducts/STVD/CS5/win32/ProductionPremium_CS5_LS7.exe

2) MAC(8.59G)

http://trials2.adobe.com/AdobeProducts/STVD/CS5/osx10/ProductionPremium_CS5_LS7.dmg

4. Adobe Creative Suite 5 Master Collection

1) Windows(4.45G)

http://trials2.adobe.com/AdobeProducts/STAM/CS5/win32/MasterCollection_CS5_LS1.7z

http://trials2.adobe.com/AdobeProducts/STAM/CS5/win32/MasterCollection_CS5_LS1.exe

2) MAC(5.62G)

http://trials2.adobe.com/AdobeProducts/STAM/CS5/osx10/MasterCollection_CS5_LS1.dmg

中文版将在5月中旬提供下载。

Flex 4中NumericStepper的新增功能

riafan@163.com(Flying) — Thu,15 Apr 2010 17:36:36 +0800

本文讲述的是spark组件中的NumericStepper控件。与mx版的NumericStepper控件相比，spark版的NumericStepper的新增了valueFormatFunction和valueParseFunction两个属性，它们有什么作用呢？

看下面实例：

在本实例中，我们通过valueFormatFunction回调函数，实现了NumericStepper控件的文本区域显示值为String。通过valueParseFunction回调函数，实现了返回的值为Number。而旧版的NumericStepper控件的文本区域只能显示Number型数据，要实现类似功能，一般得覆写value访问器(getter/setter)。

Flex 4中DateTimeAxis的一个Bug

riafan@163.com(Flying) — Wed,14 Apr 2010 13:29:49 +0800

我的主要工作是做Finance Chart，因此很关注Flex Chart，最近将一个Flex Chart应用升级到Flex 4时遇到一个问题。

当DateTimeAxis的labelUnits属性为months时，用Flex 4编译，标签会按日期降序显示，用Flex 3编译则没有这个问题。这是Flex 4的Bug，见http://bugs.adobe.com/jira/browse/FLEXDMV-2344。

在Flex 4中，DateTimeAxis的父类NumericAxis增加了一个属性：direction，这使得DateTimeAxis标签可以按日期升序或降序显示。

但此处不能用direction解决这个Bug，得覆写DateTimeAxis是的的buildLabelCache()方法，或是设置disabledDays或disabledRanges属性。