CPEDIA's Blog - yui在cpedialog中的应用

yui是继dojo后我用过的第2个ajax library。因为工作原因一直使用dojo0.4，最近公司portal升级也开始迁移到dojo1.1，从0.4到1.1的升级应该是让很多人诟病的一件事情，但尽管如此dojo仍不失为一个优秀的javascript toolkit。

为什么我没有选择dojo用在cpedialog里呢？原因很简单，dojo1.1的发行版源文件个数太多（去掉测试和样例后还有2000多个），超过了appengine的免费版本的文件个数配额限制，而yahoo为yui提供了免费hosting服务 (参考： "Serving YUI Files from Yahoo!" )。这是yui最开始吸引我的最主要原因，但是后来发现yui带给我的是一连串的惊喜。

yui意即Yahoo! UI Library，它的component里除了一些js library外，还有几个CSS Tools. 首先被用在cpedialog里的便是CSS Grids，使用它可以很方便的通过yui定义的几个div来规划网页的布局，使用cpedialog的用户可以很方便的通过修改既定div的id和class就可以重新定义layout。 yui的css Grids应该是经过精心设计的，除了可以很快的重新分布你的网页布局，还有其他一些考量，譬如对搜索引擎优化（SEO)。

第2个使用的component是Connection Manager，这个是用于XHR/Ajax的，类似与dojo的io。 cpedialog系统管理模块的ajax调用都是通过它实现的，在后台实现中参照了这篇文章：Using AJAX to Enable Client RPC Requests，所有后台暴露的PRC方法都通过一个统一的入口，除了安全的集中控制还可以得到一些扩展的好处，另外使用simplejson来做python对象和json之间的转换。Ajax很美，但是我为什么只用在后台管理模块呢？其实我是基于这样的考虑，我个人是个win mobile fans，用手机上网是件频繁的事情，在中国用2.5G的网络搭配像UCWEB这样优秀的手机浏览器上网体验应该说还不算坏，大量的使用Ajax意味着你的网站在通过手机访问时存在问题（至少对目前很多手机浏览器都是如此，目前还没有任何手机浏览器能达到A-Grade Browser Support）。

在后台管理模块中yui的DataTable也被使用。你可以看到一个实现了inline editable, deletable的table。在了解yui的DataTable后彻底发现dojo1.1里的grid应该是参照了yui的设计实现，table clumn和data的分离，另外定义详细的table内元素事件，yui的DataTable设计是很优美的，初次使用你可以会遇到小小的麻烦，尤其是当你对datatable API不是很熟悉的时候，强烈建议你认真阅读Daniel Barreiro (screen name Satyam)发表在yblog里的两篇文章 (Part One: Getting Started; Part Two: Changing Data in the DataTable)，文章里的代码可能需要根据yui最新发行版作小小的改动。另外我找到了Satyam的个人站点http://www.satyam.com.ar/，里面有不少好东西，http://www.satyam.com.ar/yui/ 目录里有一些yui的code sample。

yui的calendar是下一个将会被使用在cpedialog里的component，请继续关注cpedialog。