用户触手可及的XPagesWeb图表控件

XPages开发实践：一个用户触手可及的XPagesWeb图表控件背景概述XPages：新的Web设计元素XPages使用户可以利用所有Web必备的功能，可在现有应用程序上构建或创建新的设计元素，可以充分利用它为现有的项目呈现Web客户机用户界面。LotusDominoDesigner8.5.1为XPages用户提供了集成EclipseIDE的可视化开发环境，用户可以获得“所见即所得”的体验。对XPages中的每一个页面、控件和对象，都可以直接通过可视化的方式修改它们的属性，并可及时预览修改结果。XPages也提供分门别类的对象事件向导，帮助用户编辑和管理事件响应脚本。对于习惯通过开发Agent操作Domino数据的用户来说，XPages提供了灵活的可编程性和可扩展性。用户可以通过集成的EclipseIDE开发自己的Java函数库，然后使用XPages服务器端Javascript来调用这些Java函数。不仅如此，XPages还支持在页面中使用Dojo对象，用户可以充分利用Domino服务器内嵌的Dojo工具包，在Web页面中扩展Domino数据的展现形式。本文中，我们介绍了如何应用XPages和Domino8.5.1包含的Dojo1.3.2工具包开发一个通用的XPages定制控件，使用Dojo的图表工具来展现传统Domino视图中的统计数据。Domino视图：丰富的统计数据和灵活的可定制性Domino视图是文档集合的列表，它丰富的层次结构和灵活的可定制性使它成为浏览Domino数据库的强大工具。通过定制，Domino视图可以展现有层次的统计数据。与文档一样，Domino视图既支持Notes客户端的访问方式，也支持Web浏览方式。然而缺省的Web视图格式已经远远不能满足Web2.0用户的需求，它的页面格式完全受限于数据库已有的视图，不易定制，也无法方便地将统计数据以图表方式呈现。Domino的JavaAPI：在Java程序中访问Domino数据Domino的JavaAPI为用户提供了在Java程序中访问Domino数据的能力。用户可以在DominoAgent、Applet、Servlet中通过Domino的JavaAPI读取和操作Domino数据。现在，通过Designer集成环境，用户可以在Domino数据库中编写Java函数库，然后在XPages页面中使用Javascript调用Java函数，完成各种数据操作。Dojo：开源的JavaScript工具库Dojo是一个面向对象的、开源的JavaScript工具库。Dojo为Web开发提供了大量基于DHTML,CSS和Javascript等技术的客户端组件。Dojo项目开发的最初目标是解决开发DHTML应用程序时遇到的那些长期存在的问题，如：跨浏览器问题。使用Dojo，开发者可以轻松地为XPages页面加入Web2.0元素，或在任何稳定健的支持Javascript语言的环境中发挥作用。而Dojo在代码质量，运行性能以及文档支持等方面在同类的开发项目中都可说是首屈一指。Domino数据库内嵌了Dojo工具包，可以在服务器的(DominoPath)\data\domino\js\目录下找到它。JSON：轻量级的数据交换格式JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。它基于JavaScript的一个子集。JSON对象是一个无序的“‘名称/值’对”集合。JSON值（value）可以是双引号括起来的字符串（String）、数值(number)、true、false、null、对象(object)或者数组(array)。这些结构是可以嵌套的。回页首应用场景Domino视图的应用Domino视图是组织、浏览文档的元素。用户可以设计和编辑视图的目录层次格式，并且可以运用Domino公式语言执行动态计算，从而在视图中显示所需的统计数据。图1是一个简单的视图统计数据的例子：这是一个在软件测试中记录bug的数据库，数据库中的每一个文档记录了关于一个bug的各种信息。其中的一个信息是bug“状态”，对应于bug在测试流程中的某个阶段。对于测试经理来说，他需要根据当前所有bug的状态统计出“有效”和“无效”bug的数量。因为“有效/无效”信息无法直接从文档中读取，于是他在视图中添加一列，并使用Domino公式@If((Status=Resolved)|(Status=Open);Valid;Invalid)计算出该信息。图1.Notes客户端呈现的Domino视图用Domino视图数据生成统计图当用户得到了Domino视图的统计数据后，为了以更直观的形式让他人了解这些数据的分布情况，一个明显的需求是，希望能将这些数据以图表的方式呈现，如饼图，带状图等等。而在现有的方法中，并没有能够直接实现这一需求的工具。用户往往采用自行开发agent的方式遍历文档，或者在第三方工具（如Excel）的辅助下通过手工复制/映射表格的方式完成转换。现有的方法要么不具有普遍适用性，如第一种方法，agent只能针对于特定数据库的特定视图，要应用到别的视图上就必须修改agent，代码可复用性差，不能动态适应用户需求；要么依赖于第三方工具，还要完成大量的手工操作。使用本文控件的三大理由本文开发的控件有三大优势：（1）“所见即所得”。用户可以直观地根据视图选择所需数据，并设定约束条件作为统计数据源，而无需将其映射为异构表格；（2）内嵌的工具，无需布署第三方应用。因为使用了Domino内嵌的XPages和Dojo工具包，控件的开发和使用都无需布署任何第三方的工具；（3）通用的XPages用户控件，可以方便地复用在任何的Domino数据库中。回页首使用Dojo图表展现Domino视图统计数据图2中，服务器端的Domino数据库设计元素和客户端Web页面运行时的元素被列举了出来，并且标明了客户端Dojo图表“用户数据（1）”、“Javascript（2）”、“CSS（3）”的数据来源。图2.Dojo图表的数据来源认识Domino视图结构和对象由图2可知，Dojo图表中使用的“用户数据（在客户端以JSON格式存在）”是从Domino视图获取。Domino视图是文档的排序或分类列表，它是对存储在数据库中的数据进行访问的入口。图3Domino视图结构和对象Domino视图包含了视图列，视图行，视图导航指针等对象，如图3所示。视图行：访问Domino文档的入口，Domino文档是存储数据的地方，用户数据通过多个“数据域”的形式存储在文档中，一个文档通常包含多个数据域。视图列：规定了每个视图行在该列中所显示的内容，这些内容可能是文档某个数据域的值，也可能是一个或多个数据域的计算值。视图导航指针：一个Domino视图通常由按照用户定制的规则排序或分类的多个视图行组成，视图导航指针则是遍历视图行的工具。在XPages中通过JavaAPI访问Domino视图对象Domino的JavaAPI为用户提供了在Java程序中访问Domino数据的能力。与Domino视图结构和对象相对应，在JavaAPI中，定义了视图列、视图行、视图导航指针、文档、视图行集合等对象，也定义了访问这些对象的方法。一个典型的用户应用是：遍历视图中所有的视图行，读取某个视图列的数据，并进一步分析和操作数据。它的Java函数伪代码形式如下：代码1.用JavaAPI中访问Domino数据importlotus.domino.*;//在Java中访问Domino数据必须包含该包publicvoidRetrievalViewColumn(Sessionsession,StringdbName,StringviewName,StringcolumnIdx){try{Databasedb=session.getDatabase(null,dbName);Viewview=db.getView(viewName);ViewEntryCollectioncollection=view.getAllEntries();intidxColumn=Integer.parseInt(columnIdx)-1;ViewEntryentry=collection.getFirstEntry();while(entry!=null){Vectorentries=entry.getColumnValues();Stringvalue=entries.elementAt(idxColumn).toString().trim();(Dosomethingbyusers….//用户在此处加入自己的处理和计算)entry=collection.getNextEntry();}}catch(Exceptione){return;}}现在，通过Designer集成环境，用户可以在Domino数据库中编写Java函数库，在XPages页面中，通过编写服务器端Javascript脚本，可以调用其中的Java函数，从而完成各种数据操作。假设上述的Java函数RetrievalViewColumn定义在类DominoUtil中，该类放置在com.ibm.lotus.xpages包中，该函数的作用是返回某个视图中某列出现最多的值。那么下面Javascript函数的作用就是：根据用户传入的视图名称和视图列的序号（从左到右的序号），得到该视图该列中出现最多的值。代码2.服务器端JavascriptfunctiongetColumnMostValue(viewName,columnIdx){if(!viewName||viewName==)return;//database和下面的session是Xpages中的环境变量vardbName=database.getFilePath();if(!dbName||dbName==)return;varutil:com.ibm.lotus.xpages.DominoUtil=newcom.ibm.lotus.xpages.DominoUtil();varmost=util.RetrievalViewColumn(session,dbName,viewName,columnIdx);returnmost;}接下来，用户需要将上述Javascript函数添加到数据库的“服务器端Javascript函数库”中，这样就可以在XPages页面的某个计算域中调用该函数，得到需要的数据了。用Domino数据构造Dojo图表数据得到了Domino的数据，下一步就是要将这些数据以Dojo图表的形式展现。在Dojo中，以JSON格式定义各种对象的数据格式和它们的含义。各种Dojo图表都有它们对应的JSON格式，用户将数据转换成特定的格式，才能被Dojo图表对象理解并展现出来。以Dojo的饼图（Piechart）为例，它的JSON字串是一个无序的“多个‘名称/值’对”集合，集合中的每个元素代表了饼图的一个扇区，每个扇区中的多个‘名称/值’代表了该扇区的属性，如数值、显示文字，鼠标悬浮时的浮动文字等等。下面是一个简单饼图JSON字串的例子。它所生成的Dojo饼图如图4所示。[{y:5,text:Valid,tooltip:Validis83%},{y:1,text:Invalid,tooltip:Invalidis16%}]图4.一个Dojo饼图和它的JSON数据示例对饼图而言，还有许多可定制的JSON“名称/值”对，感兴趣的用户可以查阅Dojo相关的技术文章。由Domino数据构造Dojo图表数据是数据展现的关键一步，它决定了是否能根据用户需求，合理组织统计数据，最终展现成既符合用户需求又美观方便的图表。其思考的逻辑应该是：根据用户需求，分析饼图所需要获取的数据。根据数据写出JSON的格式，并将该格式作为Java函数的输出形式。用Java和Javascript得到满足需求的数据格式。至此，我们已经介绍了如何在XPag