基于Flex的Web流程设计器开发第二季---Tabbed Properties View

[b]第一季回顾[/b]
[url=http://edi.iteye.com/admin/blogs/269862]基于Flex的Web流程设计器开发第一季[/url]。
在08年四月份采用Flex开发完成了Web流程设计器第一个版本。具体请参见开篇的链接。这个版本的Web流程设计器的属性页采用的是HTML页面，当初主要考虑采用HTML属性页易于与业务系统的页面进行集成。HTML属性页虽然有易于集成的优点，但缺点太多。具体缺点如下：
[List]
[*]与流程设计器整体风格不一致，用户体验差；
[*]代码复杂，不易于维护；
[*]JavaScript存在浏览器兼容问题；
[*]运行效率低；
[/List]
综上原因，对属性页进行改良势在必行。

[b]Tabbed Properties View[/b]
通过回顾第一季，已经认知到HTML属性的不足，那么如何改进呢？在这里又要再次感谢Eclipse开源组织，因为Eclipse平台提供了Tabbed Properties View。在Eclipse版本的流程设计器中，属性页就采用了Tabbed Properties View。Tabbed Properties View不但布局美观，而且表现丰富，更重要的是可以按需灵活配置。所以萌发了用Flex实现一套Tabbed Properties View的想法。
语言总是枯燥的，我们还是上图吧。
Web流程设计器第二季全景如下图所示。
[img]http://www.iteye.com/upload/attachment/103422/ab067fe4-8b16-307d-a792-9f98e18299fc.png[/img]
希望这张能清晰点。
[img]http://edi.iteye.com/upload/attachment/103426/d98c192f-657d-372b-ba7e-a22ff67c28b3.png[/img]

[b]Flex Tabbed Properties View 设计思路[/b]
Flex Tabbed Properties View 实现参考了Eclipse Tabbed Properties View 的设计思路。但对其进行了精简，因为Flex Tabbed Properties View 只需要满足流程设计器自己的需求就可以。
Flex Tabbed Properties View 的设计目标是可以灵活的对属性页进行组装。构成属性页最小单元工件为Tab页
看看效果，开始节点属性只有一个Tab页构成。
[img]http://edi.iteye.com/upload/attachment/103432/80a1a831-1510-362b-ad2c-baa94a337daa.png[/img]
手动节点属性页由五个Tab页构成。
[img]http://edi.iteye.com/upload/attachment/103426/d98c192f-657d-372b-ba7e-a22ff67c28b3.png[/img]
用一句话来说设计思路---在配置文件中存储属性页配置信息，在运行期用反射进行控件初始化，然后进行属性页组装。

[b]经验总结[/b]
在开发中遇到的问题，可能也不都是Flex的缺陷，也有可能是我的用法有问题，和大家交流下。
[list]
[*]Flex的反射存在缺陷，不支持如Java那样根据类名生成实例对象。
[*]ComboBox控件要慎用，它在初始化data provider时，会触发Selection Change事件。
[*]RadioGroup控件也存在缺陷，在RadioGroup初始化完成前，无法check其中某个radio。
[/list]
因为保密协议的存在，我只能能谈谈设计思路，希望对读者有益。