咨询电话
4007001020

Loding the player....

本视频来由慧都学院提供   查看原视频>>

手把手教你用MyEclipse Reports™创建Web报表

组织良好的业务数据可以显著改善关键的决策过程。使用MyEclipse Reports™工具来开发各种Web报表。在本教程中,您将学习到:

  • 创建一个报表Web项目和数据源
  • 创建、布局和格式化的报表
  • 创建一个数据集
  • 排序报表数据
  • 部署和测试报表项目

耗费时间:30分钟

没有MyEclipse?立即下载

1. 创建一个报表Web项目

这里有两种方法来创建报表Web项目。第一种方法是使用报表向导来创建一个新的项目;第二种方法是添加报表Web Runtime Facet到一个现有的MyEclipse Web项目中。

注意:MyEclipse标准用户不能使用报表功能。

1.1 创建一个新的报表Web项目

(1)选择File>New>Report Web Project。

(2)在项目名称字段中输入reportdemo,然后单击下一步。

注意:本教程使用默认的JavaEE 6版本;然而,在创建新的项目是JavaEE 7也是可行的。

MyEclipse中的报表工具
创建一个新的报表Web项目

(3)配置项目文件夹结构,然后单击下一步。

MyEclipse中的报表工具
项目文件夹配置

(4)更改或接受默认的Web模块文件夹名称,然后单击下一步。

MyEclipse中的报表工具
设置Web模块的文件夹名称

(5)配置部署设置,指定报表引擎的日志记录级别,然后单击完成。

MyEclipse中的报表工具
指定报表引擎的日志记录级别
MyEclipse中的报表工具
报表项目结构

1.2 添加报表Web Runtime Facet到现有的Web项目中

您可以安装报表Web Runtime facet到任何现有的MyEclipse Web项目中。

(1)右键单击该项目,并选择MyEclipse>Project Facets>Install MyEclipse Report Web Runtime Facet。

MyEclipse中的报表工具
添加report web runtime facet

(2)完成向导,然后单击Finish来更新项目。

当向导关闭时,系统会提示您打开MyEclipse Report Design视角,此时选择Yes。否则,您打开视角只能通过选择Window>Open Perspective>Other,然后选择MyEclipse Report Design才能打开。

2. 创建报表

(1)选择reportdemo项目,并选择File>New>Report。(当使用MyEclipse Report Design perspective时会出现报表工具栏选项)

(2)在文件名称字段中输入demo_report.rptdesign。报表的扩展名应该被命名为.rptdesign。

(3)请选中生成报表访问的网页选项,然后单击下一步。

MyEclipse中的报表工具
选择项目报表

(4)从模板列表中选择空白报表,然后单击下一步。

MyEclipse中的报表工具
选择一个报表模板

下一个页面,您可以创建一个示例JSP网页来演示如何使用新的报表进行工作。示例的样本JSP网页可以适当配置一个链接到您的报表中,或者直接将其嵌入报表中。

注意:如果您不在此时选择生成一个示例报表访问页面,以后可以随时通过右键单击该报表,并选择MyEclipse>Generate Sample Report Access WebPage。

(5)使用默认的文件夹位置,并输入demo_report.jsp作为JSP文件名。

(6)选择嵌入式报表查看器[JSP Tag]选项,然后单击Finish。

MyEclipse中的报表工具
报表访问的网页选项

(7)为检索报表数据创建一个JDBC数据源,这个示例使用MyEclipse Derby数据库中的表。

3. 创建一个数据集

数据组是一个从数据源检索数据的集合。此数据将会显示在一个报表中,本示例中使用的是SQL数据源。

(1)在数据资源管理器中,右键单击数据集,并选择New Data Set。

MyEclipse中的报表工具
创建一个新的数据集

(2)选择在上一节中创建的数据源。

(3)接受默认的MyEclipse SQL Select Query数据集类型。

(4)在数据集名称字段中输入Customers,然后单击下一步。

MyEclipse中的报表工具
选择数据源

(5)输入以下SQL查询,然后单击Finish来执行SQL查询和创建数据集。

select CUSTOMERNAME, CONTACTFIRSTNAME, CONTACTLASTNAME, PHONE

from CLASSICCARS.CUSTOMER

MyEclipse中的报表工具
数据集查询编辑器

对该数据集进行SQL查询检索数据。当您输入一个SQL查询时,查询编辑器提供内容辅助的模式和表名。您也可以在树形视图中双击一个表或列,并在编辑最后的地方插入查询该元素的限定名称。

如果创建数据集没有问题,那么打开编辑数据集窗口,让您进一步自定义数据集。选择Preview Results来显示SQL查询的数据结果。

MyEclipse中的报表工具
数据集编辑器

4. 制定报表

下一个步骤就是将用户界面元素添加到报表中,用于从Customers数据集中显示数据。您可以通过右键单击报表页面来将报表元素插入到Report Designer中,然后从插入菜单中选择一个项目。或者在Palette视图中使用palette。Report Designer底部的标签允许您切换视图。

MyEclipse中的报表工具
Report Designer

首先报表使用palette来添加表格元素。然后,从报表的数据表的列集合元素中绑定列。对于理解表功能是很重要的:

  • 表遍历所有数据行的数据集。
  • 它使您能够在一个行和列的格式中很容易地布局数据。

(1)打开Palette来查看报表元素。

MyEclipse中的报表工具
Palette视图

(2)从palette中拖出一个表元素,并将其放在编辑器的报表中。

(3)指定3列、1行,然后单击下一步。

MyEclipse中的报表工具
创建新表

(4)从数据集的下拉列表中选择Customers,点击全选,然后单击Finish。表的3列、1行会出现在编辑器中。

MyEclipse中的报表工具
绑定数据集

(5)在数据资源管理器中,展开Customers数据集,查看您在查询中指定的列。

(6)从数据资源浏览器中拖动CUSTOMERNAME列,并将其放置在详细行的第一个单元格来绑定表格列的数据集元素。

表格中的详细行定义了数据集的列和它们表格中每一个数据行的显示顺序。在已完成的报表中,详细列的每一行数据都会在数据集中被重复。

MyEclipse中的报表工具
拖动一个数据集列并放到表格单元格中

当CUSTOMERNAME列表从数据集被拖放到详细行时,在布局编辑器中加入[CUSTOMERNAME]数据绑定元素。此外标题行在新的[CUSTOMERNAME]数据元素上面,布局编辑器添加列标题标签,例如CUSTOMERNAME。

MyEclipse中的报表工具
在表中的数据和标签要素

(7)拖放PHONE列在详细行的第二个单元格中。

(8)拖放CONTACTFIRSTNAME列在详细行的第三个单元格中。

(9)拖放CONTACTLASTNAME列在详细行的第三个单元格中,下面是CONTACTFIRSTNAME。

该报表的布局应该如下所示。

MyEclipse中的报表工具
将Customer联系信息添加到表中

(10)为了确认该报表的数据和表格布局是正确的,在Report Designer底部单击预览选项。

MyEclipse中的报表工具
预览报表数据

在使用MyEclipse Reports创建Web报表(上)一文中,小编为大家介绍了如何创建报表Web项目、创建报表、创建数据集以及制定一个报表。接下来小编将为大家介绍另外几节的内容,希望能够帮助到大家。

5. 数据排序

默认的数据行排序受许多因素的影响,例如受在数据库中创建数据顺序的影响。在很多情况下,您可能会想改变数据出现在报表中的顺序。

(1)在报表设计器中,单击布局选项来返回布局编辑器。

(2)在布局编辑器中,单击左下角的表格选项。当鼠标停留在该区域时标签会出现。属性编辑器会显示所选表的属性。

如果属性编辑器视图是不可见的,那么选择Window>Show View>Property Editor。

使用MyEclipse Reports创建Web报表(下)
表标签

(3)点击排序选项,然后单击添加指定排序的关键字。

使用MyEclipse Reports创建Web报表(下)
表属性编辑器

(4)从关键字的下拉列表中选择CUSTOMERNAME,然后再从Direction的下拉列表中选择升序,同时单击确定。排序选项为您定义的表格添加新的CUSTOMERNAME排序关键字。

使用MyEclipse Reports创建Web报表(下)
指定排序关键字

(5)再次预览报表。这次数据行出现在CUSTOMERNAME列数据的升序排序中。

使用MyEclipse Reports创建Web报表(下)

预览数据排序的CUSTOMERNAME列时,注意大写字母的名称出现在列表的顶部。MyEclipse报表通过UCS2代码值排序字符串数据。在基于ASCII字符的集合,大写字母比小写字母的代码值低,因此大写字母在小写字母之前。

接下来,排序customer names不考虑ANG经销商出现在American Souvenirs Inc之前的情况。

(6)在属性编辑器中,单击排序选项,选择CUSTOMERNAME排序关键字,然后单击编辑。

使用MyEclipse Reports创建Web报表(下)
编辑排序关键字

(7)在排序关键字编辑器中,更改排序关键字表达了以下内容,然后单击确定。

row["CUSTOMERNAME"].toUpperCase()

此表达式使用JavaScript的toUpperCase()函数来将所有的customer名称值排序在大写字母之前。JavaScript函数的名称是区分大小写的,所以您的输入必须和toUpperCase()完全相同,如图所示。引用的列名称也是区分大小写。在这个表达式中,行["CUSTOMERNAME"]要求使用正确的名称。如果您输入行["customername"],例如在您运行报表时报表运行器显示错误。您可以通过查看其所在的数据资源管理器列名称拼写的大小写来验证。

预览报表并确认customer名称出现在升序排列中。

6. 格式化的报表

现在,该报表显示数据的正确顺序,您可以将注意力放在改善报表外观上。

6.1 编辑列标题标签

(1)在报表设计器中,单击布局选项,返回布局编辑器。

(2)更换Customer的CUSTOMERNAME列标题。布局编辑器允许您直接将光标放在标签文本上来编辑标签。按Enter键保存新的标签文本。

(3)重复步骤2来分别更换PhoneContact这两个列标题。

使用MyEclipse Reports创建Web报表(下)
修订后的列标题

6.2 格式化列头标签

要格式化报表元素,设置其属性。您有两种方法来完成这个任务:

  • 通过属性编辑器设置元素的属性。
  • 定义包含所需特性的格式并将格式应用到的元素中。使用这种方法可以一次定义格式属性,并且它能应用到多个元素中。

首先,使用属性编辑器设置列标题加粗。

(1)选择所有列标题。要选择多个元素,按Shift键单击每个元素即可。属性编辑器显示所选择的元素属性。

(2)单击B按钮格式化选定的列标题为粗体文字。

使用MyEclipse Reports创建Web报表(下)
设置所选文本的样式

(3)通过单击表外的空白区域取消选中的列标题。

接着,通过定义和应用样式给标题行添加背景颜色。

(1)选择Element>Style>New Style。

(2)选择自定义样式选项,并在自定义样式名称字段中键入table_header_row。

使用MyEclipse Reports创建Web报表(下)
创建一个新的样式

(3)从属性类别列表中选择背景。

(4)为背景颜色属性指定一种颜色,使用下列方法当中的一个:

  • 选择属性旁边的按钮,然后从出现的调色板中选择颜色。
  • 从下拉列表中选择颜色。

(5)点击确定。

(6)在布局编辑器中,通过点击左下角的表选项来选择表。当您的鼠标移动到表格的左下角时会显示该选项。单击标签会导致导向单元格出现在表格的顶部和左侧。

(7)选择旁边标题行的导向单元格。属性编辑器显示选定行的属性。

使用MyEclipse Reports创建Web报表(下)
引导在表左边或顶部的单元格

(8)选择属性,然后一般显示该行的常规属性。

(9)通过从样式下拉列表中选择的table_header_row来应用样式。您也可以更改标题文本的颜色,如果需要的话,可以将文本向左对齐。

使用MyEclipse Reports创建Web报表(下)
使用样式设置文本格式

(10)预览报表。报表标题背景显示您所选择的颜色。

6.3 在同一行中显示姓和名

当您创建多个元素的单个单元格时,MyEclipse报表设计器创建块级元素。如果您熟悉HTML,就知道每个块元素会开始一个新的行。要在同一行中显示多个元素,需要将他们设置为内联元素。或者,可以将姓和名的值显示在一个单一的数据元素中,具体过程如下所述。

(1)在报表设计器中,单击布局选项,返回布局编辑器。

(2)删除显示[CONTACTLASTNAME]的数据元素。

(3)双击显示[CONTACTFIRSTNAME]的数据元素。

编辑数据项绑定窗口提供与当前数据元素相关的数据信息。在表达式字段,dataSetRow["CONTACTFIRSTNAME"]表示在数据集中从CONTACTFIRSTNAME字段中显示数据。

(4)点击表达式字段旁边的表达式生成器按钮。

使用MyEclipse Reports创建Web报表(下)
编辑数据绑定

表达式生成器在顶部窗口的文本区域显示表达式。

(5)要连接姓和名,编辑表达式如下:

dataSetRow["CONTACTFIRSTNAME"]+" "+ dataSetRow["CONTACTLASTNAME"]

使用MyEclipse Reports创建Web报表(下)

在表达式生成器中通过选择一个数据集区域的空引号("")来在姓和名之间添加一个空格来创建级联数据。可以在文本区域输入表达式,或双击窗口的右下角来将表达式插入一个项目中。如图所示,您可以双击来将表达式插入列中。

(6)单击确定关闭表达式生成器。编辑的表达式出现在编辑数据项绑定窗口。单击确定将更改保存到数据元素。

(7)预览报表。该报表应如下所示。

使用MyEclipse Reports创建Web报表(下)
报表预览

6.4 增加行距

默认布局添加表行之间的最小空间。通常情况下,您可能需要调行与行之间的间距。

(1)单击布局选项。

(2)选择表的详细信息行,即中间行。属性编辑器显示属性行。显示在属性编辑器的标题显示的是您选择的元素类型,所以您应该看见属性编辑器 – 行。

(3)在常规属性中,设置高度为24,以增加每行的高度。

使用MyEclipse Reports创建Web报表(下)
在布局编辑器中选择一个表行

(4)预览报表。报表包含的数据行之间有更多的空间。

7. 添加报表标题

要显示的标题,您可以使用标签元素、文本元素或数据元素。

  • 标签元素适合短期、静态文本,如列标题。
  • 所述数据元素适于从数据集字段或计算字段中显示动态值。
  • 文本元素适合于包含不同格式或动态值的多行文本。

此过程使用文本元素和HTML标记来格式化文本。请注意,您没有使用创建HTML格式的文本要求。但是,如果您精通HTML或网页设计,可能更喜欢使用创建HTML的格式化文本块。

(1)单击布局选项。

(2)从调色板中拖动文本元素并将其放在表格上,打开文本编辑器项目。

(3)在编辑文本项目中,从下拉列表中选择自动HTML。选择HTML使您可以嵌入HTML标记或CSS属性中的文本。您可以输入标签,同时也可以将常用的HTML标签提供给文本编辑器。

(4)在文本区域输入下面的HTML:

<CENTER>
<SPAN style="font-size: larger">
<B>Customer List</B>
</SPAN>
<BR>
<FONT size="small">For internal use only</FONT>
<BR><BR>
Report generated on <VALUE-OF>new Date( )</VALUE-OF>
</CENTER>
<BR><BR>
使用MyEclipse Reports创建Web报表(下)
HTML标记文本

(5)单击确定,然后预览报表。报表应类似于下面的报表。

使用MyEclipse Reports创建Web报表(下)
报表预览格式化的报表标题

正如你所看到的,使用嵌入HTML文本元素,您可以:

  • 在多行文本块的每一行使用不同的格式。
  • 插入动态值,如当前日期。

另外,您也可以使用:

  • 两个标签元素来显示静态文本,第一和第二行。
  • 数据元素来显示包含动态值的第三行。 

8. 部署和测试报表

该报表已经被设计和格式化了,下一步便是部署到Web服务器上,同时使网络浏览器进行测试报表操作。

(1)右键单击reportdemo项目,选择Run As>MyEclipse Server Application,并选择MyEclipse Tomcat服务器。MyEclipse集成的Web浏览器打开类似于初始的URL:http://localhost:8080/reportdemo/

(2)附加的报表访问网页的URL名称,类似于http://localhost:8080/reportdemo/demo_report.jsp

(3)点击开始或按Enter键加载在浏览器中的报表。

使用MyEclipse Reports创建Web报表(下)
从Web浏览器访问Customer列表报表

注意:由于报表连接到MyEclipse Derby服务器,您必须确保服务器正常运行,否则报表引擎将无法连接,同时也无法从中获取数据。您在创建爱你Customers数据集时启动Derby服务器。如果您没有手动停止它,那么它应该一直运行。由于报表Web项目是一个扩展的报表运行时Web项目,它可以部署到任何的JEE Web服务器上。更多设置和部署到其他Web服务器上的信息请查看Using MyEclipse Application Servers