【实战】xGird，来自jQuery的神器（一）：正版xGrid以及CC
首先，因为Victor最近必将忙，所以白天的时候只能时不时地上来看看，没法系统地写一些东西，只好晚上花个大概1个小时左右的时间，给大家继续我们的XPages+之旅。
我抬头看了一眼表，现在已经是10：25了，加上最近睡得都比较晚，所以真的很困了，但是还是觉得先把xGrid这个实战开一个头，也让大家有个盼头，Victor计划本周主要是xGrid实战篇，通过一个非常成功，而且的确很好用的CC（Custom Control，Victor一直坚持使用英文版的Designer，一方面是为了方便和国外的同仁沟通，另一个好处就是容易拼出简写，当然还有一个原因，双字节的系统永远会更慢一点...）
xGrid实战篇，我们将以xGrid这个在OpenNTF上开源的成功CC为蓝图，以首先会用这个CC为目标，并逐渐分解和吃透这个CC的设计理念，并探寻这个CC涉及到的相关Web技术（json， RESTful，XAgent，jQuery），然后再优化这个CC并进行本土化，最后以这个CC为基础开发一个简单但却好用的客户信息数据录入、检索系统，xGrid实战篇的大致内容就是这样，看看能不能这周末把第一个实战给搞定。
Victor希望把技术分解给大家的同时，也能将Victor构筑XPages应用的一些习惯分享给大家，希望大家能在这个基础上开拓创新，提出更好的想法和思路，使得大家一起共同进步。
那么我们就开始吧：正版xGrid以及什么是Custom Control？
首先让我们来试用一下xGrid，看看这个CC到底能干什么？Demo地址：http://dev.openntf.org/demos/xgrid.nsf/xContactsSSJS.xsp，因为服务器在国外，所以如果网速不给力，可以换个时间再试试，进去后把所有能看到的按钮都点点，每一个列都按按试试，拖动一下试试，用完之后相信你会逐渐开始喜欢上这个grid了。
然后开始我们的实际操作，最重要的是你现在已经有了Lotus Designer 852/853 和 一台同版本的Domino服务器，而且最好已经打好了XPages Extension Library！关于如何打XPages Extension Library，请关注这篇帖子内的详细内容：http://www.lotuschina.net/club/thread-3023-1-1.html
然后我们来到OpenNTF上下载该项目的Release包，Project的下载地址：http://www.openntf.org/internal/home.nsf/project.xsp?action=openDocument&name=xGrid
好了，这个包里就是我说的正版xGrid，Victor其实后续在xGrid上做了一定的扩展，并大量使用了这个CC，但我必须说这个正版的xGrid才是最难的，一旦一个构思产生了，那后续的拓展是相对容易的，最难的就是设计灵感，所以如果你将来也使用并拓展任何已经开源的CC的话，请一定记得怀着一颗感激的心来感谢原作者，另外如果英文还可以的朋友可以顺带着看看这个应用的相关说明文档，看原作者的文档是一个很好的提高自己水平的方式。
下载完之后解压缩，里面有一个xGrid.nsf数据库，将它拷贝到你的Designer的Data目录下，然后再新建到服务器上，别忘了签名，部署完成之后，我们打开浏览器，运行一下试试，，这个时候你会发现看到的几乎是一个大白板，不必着急，在浏览器的地址栏后面加上“/xContactsSSJS.xsp/”然后回车看看，这次应该能看到了吧？这个问题是为什么呢？因为原作者有点粗心，把应用启动时首先打开的XPages页面设置成了一个根本就不存在的页面，根本解决这个问题需要我们用Designer打开xGrid，然后进入Application Properties，Lanuch，在如图的位置修改初始打开XPages为xContactsSSJS.xsp后保存（Ctrl+S）即可。
如何设置XPages的主页：
OK，我们现在来看看xGird到底有哪些设计元素？
正如我们看到的，xGrid中有很过的XPages，如果有兴趣的同学可以在浏览器中用url一个一个地打开看看，一些能看到界面，一些不能，不能的分两种，一种是因为环境的原因：xGrid中的几个Demo使用了XPages Extension Library的REST Services，所以如果你没有打XPages+的话，有几个页面看不到，而另外一个原因就是其中有几个XPages就是我们传说中的XAgent！这个有兴趣的可以看看代码，看不懂没有关系，我们的实战后面会讲到XAgent，包懂。
xGrid还是用到了一些JS和CSS文件，JS文件添加的位置很有讲究，是放到了Resource-File下，不是Code-Script Library哦。
最后我们发现在Custom Control那里只有一个CC，但少的有时候才是精华的，我们首先要研究的就是这个CC。（关于Custom Control是什么，及XPages是什么的入门，请看Victor的这篇文章，Victor带你重新认识XPages：http://www.lotuschina.net/club/thread-2971-1-1.html）
但不要着急打开这个CC，第一次研究CC的时候，如果直接开发来看的话，很多地方会看不懂，反而是浪费时间，比较好的办法还是到一个使用了这个CC的XPages中去看看XPages是如何使用这个CC的，这个方法同样适用于之后我们每一次拿到一个新的Demo时，当你已经习惯看code的时候，再直接研究CC才是更快的方法。
于是我们打开xContactsSSJS.xsp来看看，结果发现这个XPages中，除了用了一个ccxGrid之外基本都是空的（当然，切到Source看得话，可就不是这样了），这里有一个技巧，用好左下角的Outline，它一是能比较直观地告诉你当前的XPages或CC中都有什么已经结构是什么样子的，同时，它也是一个比较方便的选择设计元素的方式，有时候我们在中间XPages页面中可能很难点中你自己想要的一个设计元素，而在Source模式下，确定一个设计元素的边界又容易出错，所以Outline是一个非常好用的选择工具，可以先在连选中，在到中间的设计区域进行相关操作，这次我们就是这样，在Outline里面点击ccxGrid，然后DDE会自动帮我选中该CC。
你可以在Design和Source中进行自由的切换，当有一定的基础，并熟练之后Source模式会是一个更加准确和迅速的方式，但当前我们还是停留在Design模式下，并注意Properties-All Properties下的所有属性，请注意！在Design模式下，Properties-All Properties是一个非常有用的功能，我们的很多很多工作，特别是使用那个CC的工作都要在这里完成。你会发现ccxGrid的basics和styling属性都是空的，但custom属性却有很多东西，其实All Properties下的custom区域中的属性，和图中Custom Properties是一致的，但是Custom Properties具有一定的局限性，我还是更推荐直接看All Properties.
你会发现在xContactsSSJS这个XPages中的ccxGrid中的Custom Properties被一一设置了很多的值（xGrid原作者设置好的），我们的重点并不是去理解这些值是干什么的，这个工作你可以通过看xGrid的文档学习，我们的重点是，这些Custom Properties是如何被放到这里等待设置的？现在新建一个全新的XPages页面，然后从右侧拖入ccxGrid，然后再看看属性，发现区别了吗？YES！这就是Custom Control最好用的地方之一，Custom Properties可以被灵活配置，如果不能理解为什么需要灵活配置，或者不理解Custom Control实现这个功能有什么用的话，都无所谓，总之记得Custom Control有这么一个重要的功能，后面我们慢慢体会。
接下来我们要做的是本节最后的内容，也是重头戏，可能稍微有一点点难度，Custom Control是如何设置并被CC使用的？
第一个问题的答案，只要我们打开ccxGrid就会发现了，现在打开这个什么的CC吧，然后还是使用左下角的outline工具，不过这次我们要选择整个Custom Control，我们要来看看整个CC的All Properties，你会发现在resouce下有CSS的引入。
但是如果你的记忆力还不错的话，一定还记得NSF下有JS，那这些JS怎么被引入的呢？这次是真的没有办法了，请点击Source模式，你会看到答案，不用纠结为什么JS要这么引入，以及原理，总之记住JS可以这么引入就可以了，我们后面会陆续介绍一些其他的方法，现在这个不是重点。
重点在这里，CC的Property Definition，我们看到了ccxGrid一共设置了这么多的Custom Properties，而这些Property Definition在我们把这个CC拖入到XPages或者其他CC时，就变成了ccxGrid的Custom Properties，并可以在XPages或其他CC中进行配置，这种配置既可以是静态文本的，也可以是计算，是的，可以动态计算！这实在是太重要了...
现在把所有的Property Definition里的条目都看一遍吧，这会是一个快速地学习如何设置Property Definition的机会，然后再返回到xContactsSSJS.xsp中，看看对应的Custom Properties都设置成了什么，现在你应该可以对如何在CC中设置Property Definition，并在使用到这个CC的地方配置它的Custom Properties，以及整个这套设计机制有了一个完整的认识，如果有不理解的地方，可以在论坛里开新贴，以方便后来人查阅学习。
那我们现在就剩下最后的一个问题了，这些Custom Properties是如何被系统，或者更直接地说，如果和被代码使用的呢？代码怎么知道我在XPages中设置了什么样的值，或者代码如何获得动态计算出来的值，并使用呢？答案就是compositeData，我们在ccxGrid下进入Source模式，然后搜索一把compositeData，你会发现大量的匹配结果，然后再看看compositeData.后面的值，是不是似曾相识啊？是的，XPages技术就是通过compositeData对象，将CC上与之关联的Custom Properties的实际值传递给了代码。
最后以url这个值为例，我们首先在CC的Property Definition中定义了这个属性（是不是有点面向对象的感觉？），然后在CC中所有要使用到url值的地方使用compositeData.url来绑定，然后当我们真的将ccxGrid拖入到xContactsSSJS中时，我们就配置成了图中的值，你当然还可以配成其他的静态值，也可以通过不同的业务逻辑计算出一个值来，总之，当你设计ccxGrid这个Custom Control的时候，你不想也不应该将url这个值写死，你不清楚使用你CC的XPages可能使用的url值是如何的，那么就使用Custom Control Properties这个伟大的设计，将自己的CC设计成一个可以高度重用的CC吧，把一个CC做成一个开包即用的控件，让任何一个XPager都可以在自己的应用中使用你的CC，那么你才能说你自己设计出了一个高水平的CC。
好的，现在已经是00：20了...必须要睡觉了，好在第一节的内容也终于完成了，我们在第一节中，主要是介绍了如何配置和使用xGrid，并投入了比较大的精力来阐述CC中的核心概念Custom Properties（没有看明白这个概念的同学，如果英语还行的话，就看一下Mastering XPages这本书的相关章节，如果英文不习惯的话，也可以在论坛里发帖，但实事求是地说本人口才肯定不及Mastering XPages一书的好），当我们打下了这两个基础之后，我们一下步就是继续深入探究xGrid的实现原理，下一节将告诉大家xGird是如何被设计出来的，并介绍jQuery及json的相关知识点，以及我们如何把一个自己喜欢的任何一个jQuery或dojo控件变成一个XPages CC！
我抬头看了一眼表，现在已经是10：25了，加上最近睡得都比较晚，所以真的很困了，但是还是觉得先把xGrid这个实战开一个头，也让大家有个盼头，Victor计划本周主要是xGrid实战篇，通过一个非常成功，而且的确很好用的CC（Custom Control，Victor一直坚持使用英文版的Designer，一方面是为了方便和国外的同仁沟通，另一个好处就是容易拼出简写，当然还有一个原因，双字节的系统永远会更慢一点...）
xGrid实战篇，我们将以xGrid这个在OpenNTF上开源的成功CC为蓝图，以首先会用这个CC为目标，并逐渐分解和吃透这个CC的设计理念，并探寻这个CC涉及到的相关Web技术（json， RESTful，XAgent，jQuery），然后再优化这个CC并进行本土化，最后以这个CC为基础开发一个简单但却好用的客户信息数据录入、检索系统，xGrid实战篇的大致内容就是这样，看看能不能这周末把第一个实战给搞定。
Victor希望把技术分解给大家的同时，也能将Victor构筑XPages应用的一些习惯分享给大家，希望大家能在这个基础上开拓创新，提出更好的想法和思路，使得大家一起共同进步。
那么我们就开始吧：正版xGrid以及什么是Custom Control？
首先让我们来试用一下xGrid，看看这个CC到底能干什么？Demo地址：http://dev.openntf.org/demos/xgrid.nsf/xContactsSSJS.xsp，因为服务器在国外，所以如果网速不给力，可以换个时间再试试，进去后把所有能看到的按钮都点点，每一个列都按按试试，拖动一下试试，用完之后相信你会逐渐开始喜欢上这个grid了。
然后开始我们的实际操作，最重要的是你现在已经有了Lotus Designer 852/853 和 一台同版本的Domino服务器，而且最好已经打好了XPages Extension Library！关于如何打XPages Extension Library，请关注这篇帖子内的详细内容：http://www.lotuschina.net/club/thread-3023-1-1.html
然后我们来到OpenNTF上下载该项目的Release包，Project的下载地址：http://www.openntf.org/internal/home.nsf/project.xsp?action=openDocument&name=xGrid
好了，这个包里就是我说的正版xGrid，Victor其实后续在xGrid上做了一定的扩展，并大量使用了这个CC，但我必须说这个正版的xGrid才是最难的，一旦一个构思产生了，那后续的拓展是相对容易的，最难的就是设计灵感，所以如果你将来也使用并拓展任何已经开源的CC的话，请一定记得怀着一颗感激的心来感谢原作者，另外如果英文还可以的朋友可以顺带着看看这个应用的相关说明文档，看原作者的文档是一个很好的提高自己水平的方式。
下载完之后解压缩，里面有一个xGrid.nsf数据库，将它拷贝到你的Designer的Data目录下，然后再新建到服务器上，别忘了签名，部署完成之后，我们打开浏览器，运行一下试试，，这个时候你会发现看到的几乎是一个大白板，不必着急，在浏览器的地址栏后面加上“/xContactsSSJS.xsp/”然后回车看看，这次应该能看到了吧？这个问题是为什么呢？因为原作者有点粗心，把应用启动时首先打开的XPages页面设置成了一个根本就不存在的页面，根本解决这个问题需要我们用Designer打开xGrid，然后进入Application Properties，Lanuch，在如图的位置修改初始打开XPages为xContactsSSJS.xsp后保存（Ctrl+S）即可。
如何设置XPages的主页：
OK，我们现在来看看xGird到底有哪些设计元素？
正如我们看到的，xGrid中有很过的XPages，如果有兴趣的同学可以在浏览器中用url一个一个地打开看看，一些能看到界面，一些不能，不能的分两种，一种是因为环境的原因：xGrid中的几个Demo使用了XPages Extension Library的REST Services，所以如果你没有打XPages+的话，有几个页面看不到，而另外一个原因就是其中有几个XPages就是我们传说中的XAgent！这个有兴趣的可以看看代码，看不懂没有关系，我们的实战后面会讲到XAgent，包懂。
xGrid还是用到了一些JS和CSS文件，JS文件添加的位置很有讲究，是放到了Resource-File下，不是Code-Script Library哦。
最后我们发现在Custom Control那里只有一个CC，但少的有时候才是精华的，我们首先要研究的就是这个CC。（关于Custom Control是什么，及XPages是什么的入门，请看Victor的这篇文章，Victor带你重新认识XPages：http://www.lotuschina.net/club/thread-2971-1-1.html）
但不要着急打开这个CC，第一次研究CC的时候，如果直接开发来看的话，很多地方会看不懂，反而是浪费时间，比较好的办法还是到一个使用了这个CC的XPages中去看看XPages是如何使用这个CC的，这个方法同样适用于之后我们每一次拿到一个新的Demo时，当你已经习惯看code的时候，再直接研究CC才是更快的方法。
于是我们打开xContactsSSJS.xsp来看看，结果发现这个XPages中，除了用了一个ccxGrid之外基本都是空的（当然，切到Source看得话，可就不是这样了），这里有一个技巧，用好左下角的Outline，它一是能比较直观地告诉你当前的XPages或CC中都有什么已经结构是什么样子的，同时，它也是一个比较方便的选择设计元素的方式，有时候我们在中间XPages页面中可能很难点中你自己想要的一个设计元素，而在Source模式下，确定一个设计元素的边界又容易出错，所以Outline是一个非常好用的选择工具，可以先在连选中，在到中间的设计区域进行相关操作，这次我们就是这样，在Outline里面点击ccxGrid，然后DDE会自动帮我选中该CC。
你可以在Design和Source中进行自由的切换，当有一定的基础，并熟练之后Source模式会是一个更加准确和迅速的方式，但当前我们还是停留在Design模式下，并注意Properties-All Properties下的所有属性，请注意！在Design模式下，Properties-All Properties是一个非常有用的功能，我们的很多很多工作，特别是使用那个CC的工作都要在这里完成。你会发现ccxGrid的basics和styling属性都是空的，但custom属性却有很多东西，其实All Properties下的custom区域中的属性，和图中Custom Properties是一致的，但是Custom Properties具有一定的局限性，我还是更推荐直接看All Properties.
你会发现在xContactsSSJS这个XPages中的ccxGrid中的Custom Properties被一一设置了很多的值（xGrid原作者设置好的），我们的重点并不是去理解这些值是干什么的，这个工作你可以通过看xGrid的文档学习，我们的重点是，这些Custom Properties是如何被放到这里等待设置的？现在新建一个全新的XPages页面，然后从右侧拖入ccxGrid，然后再看看属性，发现区别了吗？YES！这就是Custom Control最好用的地方之一，Custom Properties可以被灵活配置，如果不能理解为什么需要灵活配置，或者不理解Custom Control实现这个功能有什么用的话，都无所谓，总之记得Custom Control有这么一个重要的功能，后面我们慢慢体会。
接下来我们要做的是本节最后的内容，也是重头戏，可能稍微有一点点难度，Custom Control是如何设置并被CC使用的？
第一个问题的答案，只要我们打开ccxGrid就会发现了，现在打开这个什么的CC吧，然后还是使用左下角的outline工具，不过这次我们要选择整个Custom Control，我们要来看看整个CC的All Properties，你会发现在resouce下有CSS的引入。
但是如果你的记忆力还不错的话，一定还记得NSF下有JS，那这些JS怎么被引入的呢？这次是真的没有办法了，请点击Source模式，你会看到答案，不用纠结为什么JS要这么引入，以及原理，总之记住JS可以这么引入就可以了，我们后面会陆续介绍一些其他的方法，现在这个不是重点。
重点在这里，CC的Property Definition，我们看到了ccxGrid一共设置了这么多的Custom Properties，而这些Property Definition在我们把这个CC拖入到XPages或者其他CC时，就变成了ccxGrid的Custom Properties，并可以在XPages或其他CC中进行配置，这种配置既可以是静态文本的，也可以是计算，是的，可以动态计算！这实在是太重要了...
现在把所有的Property Definition里的条目都看一遍吧，这会是一个快速地学习如何设置Property Definition的机会，然后再返回到xContactsSSJS.xsp中，看看对应的Custom Properties都设置成了什么，现在你应该可以对如何在CC中设置Property Definition，并在使用到这个CC的地方配置它的Custom Properties，以及整个这套设计机制有了一个完整的认识，如果有不理解的地方，可以在论坛里开新贴，以方便后来人查阅学习。
那我们现在就剩下最后的一个问题了，这些Custom Properties是如何被系统，或者更直接地说，如果和被代码使用的呢？代码怎么知道我在XPages中设置了什么样的值，或者代码如何获得动态计算出来的值，并使用呢？答案就是compositeData，我们在ccxGrid下进入Source模式，然后搜索一把compositeData，你会发现大量的匹配结果，然后再看看compositeData.后面的值，是不是似曾相识啊？是的，XPages技术就是通过compositeData对象，将CC上与之关联的Custom Properties的实际值传递给了代码。
最后以url这个值为例，我们首先在CC的Property Definition中定义了这个属性（是不是有点面向对象的感觉？），然后在CC中所有要使用到url值的地方使用compositeData.url来绑定，然后当我们真的将ccxGrid拖入到xContactsSSJS中时，我们就配置成了图中的值，你当然还可以配成其他的静态值，也可以通过不同的业务逻辑计算出一个值来，总之，当你设计ccxGrid这个Custom Control的时候，你不想也不应该将url这个值写死，你不清楚使用你CC的XPages可能使用的url值是如何的，那么就使用Custom Control Properties这个伟大的设计，将自己的CC设计成一个可以高度重用的CC吧，把一个CC做成一个开包即用的控件，让任何一个XPager都可以在自己的应用中使用你的CC，那么你才能说你自己设计出了一个高水平的CC。
好的，现在已经是00：20了...必须要睡觉了，好在第一节的内容也终于完成了，我们在第一节中，主要是介绍了如何配置和使用xGrid，并投入了比较大的精力来阐述CC中的核心概念Custom Properties（没有看明白这个概念的同学，如果英语还行的话，就看一下Mastering XPages这本书的相关章节，如果英文不习惯的话，也可以在论坛里发帖，但实事求是地说本人口才肯定不及Mastering XPages一书的好），当我们打下了这两个基础之后，我们一下步就是继续深入探究xGrid的实现原理，下一节将告诉大家xGird是如何被设计出来的，并介绍jQuery及json的相关知识点，以及我们如何把一个自己喜欢的任何一个jQuery或dojo控件变成一个XPages CC！
著作权归作者所有
如果觉得我的文章对您有用，请点赞。您的支持将鼓励我继续创作！
赞8Ctrl+Enter 发表
作者其他文章
评论 0 · 赞 7
评论 3 · 赞 4
评论 5 · 赞 4
评论 2 · 赞 4
评论 2 · 赞 1
添加新评论3 条评论
2013-02-20 18:08
2013-01-21 11:15
2012-09-12 15:03