IBM Cognos最佳实践:在Cognos中使用jQuery实现动态报表

浏览: 2853

介绍

目的

本文档介绍了如何在IBM Cognos Report Studio中使用jQuery,以在报表中向最终用户展现更多动态和交互性的方法。同时,也描述了开发人员如何使用强大的开源JavaScript库jQuery添加动态的用户界面元素到报表中。

适用范围

本文档使用IBM Cognos BI版本10.1.1和10.2在所有支持的平台上测试过,并且也可能支持后续的发布版本。

概述

目前。我们可以在Report Studio中使用HTML Item组件嵌入JavaScript代码到报表中。为了在报表中使用JavaScript,报表开发人员需要具有JavaScript开发经验,或者,至少了解JavaScript。这就导致报表开发变得复杂,开发过程花费更高,难于维护和升级。通过使用jQuery,以上问题可以被减少,并使动态报表的开发比较容易实现和理解。

jQuery是什么?

jQuery是一种快速和简洁的JavaScript库,简化了HTML文档的遍历,事件处理和图形制作。其跨浏览器特性、强大的功能以及易用性,使它成为流行的JavaScript网络框架。

有两种理想的嵌入jQuery库到网页中的解决方案:

•    使用谷歌服务器内容发布网络(Content Delivery Network (CDN))中包含jQuery的一个版本。

•    从jQuery.com下载自己的jQuery版本到服务器上或者本地文件系统中。

jQuery插件可以在IBM Cognos Viewer中使用,这样一来,报表开发人员没有必要同时是JavaScript开发者。对于Report Studio对象来说,代码是快捷、松耦合的,并且当报表需要修改时,代码页很容易修改。

更多关于jQuery的信息,请参考:http://jquery.com/

IBM Report Studio中使用jQuery

在此节中,我们将创建一张使用jQuery改进的默认的IBM Cognos报表。此例中我们使用GO Sales (query)数据包和谷歌服务器版本的jQuery。

1. 创建一张空白报表。

2. 从工具箱拖拽一个Block报表对象到报表工作区。

3. 从工具箱拖拽一个Table到block对象中,2列1行。

4. 在每个table单元格中,各放置一个block对象。

5. 拖拽一个List对象到第一列的的block中,Column Chart对象到第二列的block中。此时,你的报表看起来应该如图1。

图1:在添加数据前包含列表和图表对象的报表

6. 在Source标签中,展开Sales (query)名空间,从Products查询主题中,拖拽Product line和Product type到列表中。

7. 展开Sales查询主题,拖拽Quantity到列表中,位于Product type的左侧。

8. 选中图表,修改其Query属性为使用Query1。从Data Item标签中,拖拽Product line到图表中作为chart Categories,Quantity作为Default measure。报表现在看起来应该如图2。

图2:在添加数据后包含列表和图表对象的报表

为了在报表对象上使用jQuery动作,我们需要      在其上应用一些类,以把列表和jQuery代码关联起来。为了向我们使用的报表对象提供类,我们需要各放置一个HTML Item对象在List和Chart对象前后。

9. 从工具箱中,各拖拽一个HTML Item到List对象前后,如下图3所示。此步骤使用Page Structure视图或许比较方便。

图3:在列表前后放置了HTML Item的报表

10. 添加下面的代码到列表前的HTML Item中:

<div class="ShowHideClicker">Click here to show/hide the List Report</div>

<div class="ShowHideList">

11. 添加以下代码到列表后的HTML Item中用以关闭第一个HTML Item中的开始的<div>标签。

</div>

12. 对于Chart对象,重复9 – 11步,修改<div>类'ShowHideClicker' 为'ShowHideClick','ShowHideList' 为 ‘ShowHideChart’。

<div class="ShowHideClick">Click here to show/hide the Chart Report</div>

<div class="ShowHideChart">

此时,报表看起来应该如图4。

图4:在列表和图表前后放置了HTML Item的报表

现在我们需要添加两个HTML Item到整个报表的最前面并添加一些jQuery在运行报表时用来隐藏和显示列表和图表对象。当一个报表中含有数个报表对象,并且一次只需要显示用户感兴趣的对象时,这个技巧很有用。

13. 从工具箱中拖拽两个HTML Item对象到整个报表的最前面。

14. 在新添加到报表中的第一个HTML Item对象中,添加如下代码。此代码将显示和隐藏List对象。

<script type="text/javascript"

  src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript"

  src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery-ui.min.js"></script>

<script type="text/javascript">

var j = jQuery.noConflict();

j(document).ready(function()

{

  j('.ShowHideList').hide();

  j('.ShowHideClicker').click(function()

  {

    j(this).next().toggle();

  });

});

</script>

15. 添加如下代码到第二个HTML Item项目中用来显示和隐藏图标对象。

<script type="text/javascript"

  src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript"

  src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery-ui.min.js"></script>

<script type="text/javascript">

var j = jQuery.noConflict();

j(document).ready(function()

{

  j('.ShowHideChart').hide();

  j('.ShowHideClick').click(function()

  {

    j(this).next().toggle();

  });

});

</script>

报表现在看起来应该如图5所示。

图5:完整的包含列表和图表对象以及HTML Item的报表

16. 运行报表。运行结果应该如图6所示。最开始,列表和图表都不可见,直到用户点击Click here to show/hide List或者点击Click here to show/hide the Chart Report时,相应的报表对象才会显示。。

图6:初始报表输出(列表和图表隐藏)

17.点击文本Click here to see the List Report,注意列表对象此时可见(图7)。

图7:列表对象展开时的报表输出

18. 点击Click here to see the Chart Report文本,展开图表对象(图8)。

图8:列表和图表同时展开时的报表输出

使用jQueryanimate()函数

我们还可以在报表中添加动画效果。jQuery的animate()函数是非常强大API,用来操纵HTML元素和添加动画功能。animate()函数使用起来非常简答,使用方法如下所示:

.animate( properties, [ duration ], [ easing ], [ callback ] )

•    properties:一个将要实现的动画的CSS属性映射。

•    duration:一个决定动画运行时间的字符串或者数字。

•    easing:一个用来定位在转换中使用哪一个缓动函数的字符串。

•    callback:一个动画结束时调用的函数。

在我们的示例报表中做一些基本的动画。

1. 在菜单栏中,按照以下导航,添加一个报表页眉到报表中:

Structure > Headers & Footers > Page Header and Footer…勾选Header(图9)。

图9:Header对象被选中的Page Header & Footer属性。

2. 从工具箱中,拖拽一个text Item 到Header中,在弹出的对话框中输入“Cognos Report”,点击OK。

3. 添加3个HTML Item到Header区域。其中,一个HTML Item对象位于Text item 之前,另外两个位于Text Item之后。此时报表看起来如图10所示。

图10:在Header区域中的Text Item前后添加了HTML Item的报表

4. 在Text Item前的HTML Item中输入一下代码:

<div class="FirstHeader">

5. 在Text Item后的第一个HTML Item中,输入一下代码用来关闭上一个HTML Item中开始的<div>标签:

</div>

6. 在Text Item后的第二个HTML Item中输入以下代码。此代码通过增加页眉中文本的字体大小,并将文本从左侧边框往中间移动实现动画效果。

<script type="text/javascript"

  src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript">

jQuery(document).ready(function()

{

  jQuery('.FirstHeader').animate(

  {

    opacity:0.4,

    marginLeft:'50px',

    fontSize:'50px'

  },1500);

});

</script>

7. 运行报表。如图11所示,文本“Cognos Report”应该从左侧边框向中间显示动画效果。

图11:使用改进过报表标题的报表输出

关于作者

Sonal Bhatt

Sonal Bhatt是位于印度普纳的印度软件实验室的IBM Cognos BI Fix PackTeam的成员。她拥有计算科学工程学士学位。Sonal在不同版本的Cognos BI的特色和功能测试上有四年以上经验。

推荐 0
本文由 zhengyi1943 创作,采用 知识共享署名-相同方式共享 3.0 中国大陆许可协议 进行许可。
转载、引用前需联系作者,并署名作者且注明文章出处。
本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责。本站是一个个人学习交流的平台,并不用于任何商业目的,如果有任何问题,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

0 个评论

要回复文章请先登录注册