Flex组件开发阶段小结

公司最近在推进一个项目，需要将客户的各类凭证都制作成模板。之前是要求客户用word制作好上传到服务器的。结果客户嫌word编辑一些表达式麻烦，要求有WEB设计器。（神啊，什么样的WEB设计器才能比word方便啊？！其实客户就是想偷懒，让我们公司派驻点到他们那边帮忙做模板而已啦。）

产品经理问我这个WEB设计器技术上能不能实现，我说技术上肯定是可以做的，但是...(此处省略数百字)。一周之后，产品经理开会的时候说，已经答应下来做WEB设计器了！昏！

好吧，赶鸭子上架也得做啊。先研究了一下FlexPaper。到sf上下载了最新的源代码，当时版本是2.1.2，编译之后，只有swc文件。而且2.1.2版本使用了mx+spark，引用的mx定义文件变成2009版本的，运行的时候老是有问题。干脆去下了个2.0.9版本的来用，效果还可以，就是有一些小BUG，不影响使用。

用百度找了一些FlexPaper二次开发的文章来看，基本上都是讲怎么去掉LOGO的。国内对知识产权的重视程度可见一斑，连程序员自己都这样，还能指望别人。找了两个星期，都没有发现哪个文章有讲解FlexPaper的设计或架构的，只好自己研究了。

FlexPaper虽然是开源项目，但是源代码都是没有注释的。这一点大家可以理解，毕竟还是要卖商业版本的嘛。程序员最痛恨的事情，大概就是看别人的代码了。比看别人代码更痛恨的事情，就是别人的代码没注释！比看没注释的代码更痛恨的事情，就是要修改这些代码！好吧，一轮看下来，发现了不少问题，比如重复代码，比如有些动作重复执行。

在Viewer类中有两个定时器，其中一个是只在加载多个swf文件时采用的，但剩下的那个Timer就很有问题了。我简单做了一些日志，发现初始化的时候，方法repositionPapers被调用的次数是不确定的，而且被Timer调用的顺序也是不确定的。这样导致的问题是，Viewer在文档初始化完成之后，必须重复调用一次文档位置定位过程，才能正确显示文档。否则有些步骤的执行顺序不正确，文档就不显示。

第2个问题是视图模式。Viewer内置实现了普通视图和缩略图，然后以插件的形式实现了单页视图、双页视图和CAD视图。先不说CAD视图里面复杂的算法到底干嘛用的，剩下四个视图的页面加载过程看得我是眼花缭乱，重复代码、奇怪的有问题的判断逻辑、各种引用viewer的public属性和方法，真怀疑本来所有视图都是在viewer内部实现的。

第3个问题是文本搜索和选中功能。这个功能在公司的项目里面是没有用的，但是，它占了viewer几乎一半的代码行。我删我删我删删删，终于删完了，编译一下，不能运行。

第4个问题是插件功能。我本来打算是以插件的方式实现WEB设计器的。结果发现FlexPaper里面根本就没有插件什么事。打印、标记、搜索等等功能都是实现在viewer内部的。

当然，还有第5、6、7、8、9等等问题。问题一多，干脆自己做算了。

先重新规划了一下结构。首先和网络传输相关的归为一类，各种扩展UI组件归到一类，然后是各种工具类，顺便引进as3core做一些数据处理。

接下来实现普通视图和缩略图模式。抛开FlexPaper的源代码，发现其实视图模式的实现很简单。基本上顺序就是：计算页面高度，计算组件高度，计算滚动条位置，确定页码，加载页面内容。FlexPaper的实现那么复杂，很大的原因应该是viewer里面的代码太多，混在一起不好控制。两个视图模式实现之后，顺便实现了一下单页模式，发现只需要重写一个方法就行了。

打印功能比较简单，如果不使用分页加载的话，只要一帧帧遍历MovieClip获取打印内容添加到打印容器即可，分页的时候控制有点复杂，FlexPaper的实现方式有点问题。有点奇怪的是，打印容器必须是初始化的时候就添加到视图层，否则不能打印。这个还没有发现原因。

实现WEB设计器之前，先定义了一个插件接口，方便将来扩展其他功能。编写WEB设计器还挺快的，因为和上面的模块全部是松耦合的，只要实现功能就行了。不过为了有更好的视觉效果，特地去研究了一下颜色、透明度和滤镜，弄了一个方法做样式计算，效果还不错。

最后，花了两周时间，做了两件事情：混淆变量名和授权验证。混淆变量名是将swf文件解压缩，用Java写了个类做变量名替换，然后再重新压缩。不过失败的概率挺高的，常常要混淆十几次才能生成一个可以正常使用的swf文件。原因可能是我用了0x00~0xFF所有的值来替换变量名，产生了一些特殊的变量名，导致执行时异常。授权验证采用FlashCC编译了一个RSA公钥解密算法来验证授权码。按照FlashCC的示例05编译出来的swc有400多K，导致最后生成的swf文件大小翻倍。最后研究了一下-flto-api参数，总算将swc大小压缩到200K左右，但又带来了新的问题，验证方法只能被调用一次，第二次调用卡死。找了两天没有找到原因，怀疑是C内存没有释放导致的。但是源代码里面又看不出什么，FlashCC的资源又太少，实在是解决不了了。不过，反正授权验证也只需要在初始化的时候调用一次而已。

最后，总结三条算是走过的弯路吧：

1. 奇葩的Flex SDK有木有，4.5和4.6计算组件height的方式居然不同有木有？！一个是组件原始大小，另一个是组件实际显示大小有木有？！

2. mx:List组件内部如果要自定义Renderer，稍微复杂一点的那种（比如一个复选框加文本框），而List绑定的IList又定义了sort和filter，则Renderer一定不能用xml来定义，一定要自己写类来实现。

3. Swf文件如果要使用系统字体，在WebKit浏览器中只能识别中文名称标识的字体，比如“宋体”，IE浏览器只能识别英文名称标识的字体，比如“SimSun”，而且区分大小写。