介绍
目的
本文档介绍了如何在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:列表和图表同时展开时的报表输出
使用jQuery的animate()函数
我们还可以在报表中添加动画效果。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的特色和功能测试上有四年以上经验。