Developing Enterprise Reports Using MyEclipse Reports™

1. Create a Report Web Project

There are two methods for creating a Report Web project. The first method is using the Report Web project wizard to create a new project. The second method is to add the Report Web Runtime facet to an existing MyEclipse Web project. 

Note: Reporting features are not available to MyEclipse Standard subscribers.

1.1 Creating a New Report Web Project

1. Select File>New>Report Web Project. 
2. Type reportdemo in the Project name field, and click Next.
   
   Note: This tutorial uses the default JavaEE 6 version; however, JavaEE 7 is an available option when creating new projects.
   
   Creating a new Report Web project
3. Configure the project folder structure, and click Next.
   
   Project folder configuration
4. Change or accept the default web module folder names, and click Next.
   
   Setting web module folder names
5. Configure deployment settings, specify the logging level of  the report engine, and click Finish.
   
   Specifying a report engine logging level
   Report project structure

1.2 Adding the Report Web Runtime Facet to an Existing Web Project

You can install the Report Web Runtime facet to any existing MyEclipse Web project.

1. Right-click the project, and select MyEclipse>Project Facets>Install MyEclipse Report Web Runtime Facet.
   
   Adding the report web runtime facet
2. Complete the wizard, and click Finish to update the project.

When the wizard closes, you are prompted to open the MyEclipse Report Design perspective. Select Yes. Otherwise, you can open the perspective by selecting Window>Open Perspective>Other, and choosing MyEclipse Report Design.

2. Create a Report

1. Select the reportdemo project, and select File>New>Report, or click . (Report toolbar options appear when using the MyEclipse Report Design perspective.)
2. Type demo_report.rptdesign in the File name field. Reports should be named with the file extension .rptdesign.   
3. Leave the Generate report access webpage option selected, and click Next.
   
   Selecting a report project
4. Select Blank Report from the templates list, and click Next.
   
   Choosing a report templateThe next page allows you to create a sample JSP web page that demonstrates how to work with the new report. For example the sample JSP page can be configured to either contain a link to your report or embed it. 
   
   Note: If you choose not to generate a sample report access page at this time, you can always generate a page later by right-clicking the report, and selecting MyEclipse>Generate Sample Report Access WebPage. 
5. Use the default folder location, and type demo_report.jsp as the JSP file name.
6. Select the An embedded report viewer [JSP Tag] option, and click Finish.
   
   Report Access webpage options
7. Create a JDBC data source for retrieving report data. This example uses a table from in the MyEclipse Derby server.

3. Create a Data Set

A data set is a collection of data retrieved from a data source. This data will be displayed in a report. This example uses a SQL data source.

1. In the Data Explorer, right-click Data Sets, and select New Data Set.
   
   Creating a new data set
2. Select the data source you created in the previous section. 
3. Accept the default MyEclipse SQL Select Query data set type.
4. Type Customers in the Data Set Name field, and click Next.
   
   Selecting the data source
5. Enter the following SQL query, and click Finish to execute the SQL query and create the data set.
   
   select CUSTOMERNAME, CONTACTFIRSTNAME, CONTACTLASTNAME, PHONE
from CLASSICCARS.CUSTOMER
   
   Data set query editor

The SQL query retrieves data for this data set. As you enter a SQL query, the query editor offers content assist of schema and table names. You can also double-click a table or column in the tree view to have the qualified name of that element inserted into the query at the last place of editing.

If there were no problems creating the data set, the Edit Data Set window opens, allowing you to further customize the data set. Select Preview Results to display the data results of the SQL query.

Data set editor

4. Lay Out the Report

The next step is to add user interface elements to the report for displaying data from the Customers data set. You can insert report elements in the Report Designer by right-clicking the report page, and selecting an item from the Insert menu. Or, use the palette in the Palette view. Tabs at the bottom of the Report Designer allow you to switch views.

Report Designer

Start by adding a table element to the report using the palette. Then, bind columns from the data set elements to the columns in the report table. It is important to understand the function of the table:

• The table iterates through all the data rows of a data set.
• It enables you to layout data easily in a row and column format.

1. Open the Palette to view report elements.
   
   Palette view
2. Drag a table element from the palette, and drop it on the report in the editor.
3. Specify 3 columns, 1 detail, and click Next.
   
   Creating a new table
4. Select Customers from the Data Set drop-down, click Select All, and click Finish. A table with three columns and one detail row appears in the editor.
   
   Binding the dataset
5. In the Data Explorer, expand the Customers data set to view the columns you specified in the query.
6. Drag the CUSTOMERNAME column from the Data Explorer, and drop it in the first cell of the table’s detail row to bind data set elements to the table column.
   
   The table detail row defines the columns of the data set and their order of display in each data row of the table. In the finished report, the detail row is repeated for each row of data in the data set.
   
   Dragging a data set column and dropping it in a table cell
   When the CUSTOMERNAME column from the data set was dropped on the detail row, the Layout editor added the [CUSTOMERNAME] data binding element. Additionally, in the header row above the new [CUSTOMERNAME] data element, the Layout editor added a column heading label with text, e.g., CUSTOMERNAME.
   
   Data and label elements in a table
7. Drop the PHONE column into the second cell of the detail row.
8. Drop the CONTACTFIRSTNAME column into the third cell of the detail row.
9. Drop the CONTACTLASTNAME column into the third cell of the detail row, below CONTACTFIRSTNAME.

   The report layout should appear as shown below.
   
   Customer and contact information added to a table

10. To confirm that the report data and table layout are correct, click the Preview tab at bottom of the Report Designer. 
    
    Preview of report data

5. Sort the Data

Default data row ordering can be influenced by many factors, such as the order in which data was created in the database. In most cases, you will want to change the order in which data appears in the report.

1. In the Report Designer, click the Layout tab to return to the Layout editor.
2. In the Layout editor, click the Table tab in the lower left corner. This tab appears when you hover the mouse pointer over this area. The Property editor displays the properties of the selected table.
   
   If the Property Editor view is not visible, select Window>Show View>Property Editor.
   
   Table tab
3. Click the Sorting tab, and click Add to specify a sort key.
   
   Table Property editor
4. Select CUSTOMERNAME from the Key drop-down, select Ascending from the Direction drop-down, and click OK. The Sort tab adds the new CUSTOMERNAME sort key that you defined for the table.
   
   Specifying a sort key
5. Preview the report again. This time the data rows appear in ascending sort order on the CUSTOMERNAME column data.
   
   Preview of data sorted on the CUSTOMERNAME columnNotice that names with uppercase letters appear at the top of the list. MyEclipse Reports sorts string data by UCS2 code point values. In ASCII-based character sets, uppercase letters have lower code point values than lowercase letters. Therefore, uppercase letters appear before lowercase letters.
   
   Next, sort the customer names without regard to case so that ANG Resellers appears after American Souvenirs Inc. rather than before it.
6. In the Property editor, click the Sorting tab, select the CUSTOMERNAME sort key, and click Edit.
   
   Editing the sort key
7. In the Sort Key editor, change the Sort Key expression to the following, and click OK.
   
   row["CUSTOMERNAME"].toUpperCase()

This expression uses the JavaScript toUpperCase() function to convert all the customer name values to uppercase before sorting. JavaScript function names are case-sensitive, so you must type toUpperCase() exactly as shown. References to column names are also case-sensitive. In this expression, row[“CUSTOMERNAME”] is the correct name to use. If you type row[“customername”], for example, the Report Designer displays an error when you run the report. You can verify the capitalization of a column name by looking at its spelling in the Data Explorer.
   
   Preview the report and confirm that the customer names appear in ascending order, regardless of case.

6. Format the Report

Now that the report displays the data in the correct order, you can turn your attention to improving the report’s appearance.

6.1 Edit Column Heading Labels

1. In the Report Designer, click the Layout tab to return to the Layout editor.
2. Replace the CUSTOMERNAME column heading with Customer. The Layout editor allows you to edit labels directly by placing the cursor in the label text. Press Enter to save the new label text.
3. Repeat step 2 to change the second and third column headings to Phone and Contact, respectively.
   
   The report design should look like the one shown below.
   
   Revised column headings

6.2 Format Column Head Labels

To format a report element, you set its properties. You can accomplish this task in two ways:

• Set an element’s properties through the Property editor.
• Define a style that contains the desired properties and apply the style to an element. Use this method to define format properties once and apply them to more than one element.

First, set the column headings to bold using Property editor.

1. Select all the column headings. To select multiple elements, press the Shift key as you click each element. The Property editor displays the properties for the selected elements.
2. Click the B button to format the selected column headings as bold text.
   
   Setting the style of selected text
3. Deselect the column headings by clicking the white space outside the table.

Next, add a background color to the header row by defining and applying a style.

1. Select Element>Style>New Style.
2. Select the Custom Style option, and type table_header_row in the Custom Style Name field.
   
   Creating a new style
3. Select Background from the list of property categories.
4. Specify a color for the Background Color property, using one of the following methods: 
   
   Select the button next to the property, then select a color from the color palette that appears.
   
   Select a color from the drop-down list.
5. Click OK.
6. In the Layout editor, select the table by clicking the Table tab in the lower left corner. This tab appears when you hover the mouse pointer over the lower left corner of the table. Clicking the tab causes guide cells to appear at the top and left side of the table.
7. Select the guide cell next to the header row. The Property editor displays the properties for the selected row.
   
   Guide cells at top and left of a table
8. Choose Properties, and then General to display the general properties for the row.
9. Apply the style that you created by selecting table_header_row from the Style drop-down. You can also change header text color, if necessary, and the text alignment to left.
   
   Using a style to format text
   
10. Preview the report. The report header background displays the color you selected.

6.3 Display First and Last Names on the Same Line

When you place multiple elements in a single cell, MyEclipse Report Designer creates block-level elements. If you are familiar with HTML, you know that each block element starts on a new line. To display multiple elements on the same line, you need to set them as inline elements. Alternatively, you can concatenate the first and last name values to display in a single data element as described in the following procedure.

1. In the Report Designer, click the Layout tab to return to the Layout editor.
2. Delete the data element that displays [CONTACTLASTNAME].
3. Double-click the data element that displays [CONTACTFIRSTNAME].
   
   The Edit Data Item Binding window provides information about the data associated with the current data element. In the Expression field, dataSetRow[“CONTACTFIRSTNAME”] indicates that the data element displays data from the CONTACTFIRSTNAME field in the data set.
4. Click the Expression Builder button next to the Expression field.
   
   Editing data binding
   The Expression Builder displays the expression in the text area at the top of the window.
5. To concatenate the first and last names, edit the expression as follows:
   
   dataSetRow[“CONTACTFIRSTNAME”]+” “+ dataSetRow[“CONTACTLASTNAME”]
   
   Concatenated data in the Expression Builder created by choosing a data set fieldThe empty quotation marks ( ” “) add a space between the first name and last name. You can type the expression in the text area, or double-click an item in the lower right of the window to insert it into the expression. The figure above shows a column name that you can double-click to insert into the expression.
6. Click OK to close expression builder. The edited expression appears in the Edit Data Item Binding window. Click OK to save the changes to the data element.
7. Preview the report. The report should look like the one shown below.
   
   Report preview

6.4 Increase Space Between Rows

The default layout adds minimum space between table rows. Typically, you might want to adjust the spacing between rows.

1. Click the Layout tab.
2. Select the table’s detail row,  i.e., the middle row. The Property editor displays the properties for the row. The title that appears in the Property editor shows the type of element that you select, so you should see Property Editor – Row.
3. In the General properties, set Height to 24 points to increase the height of each row.
   
   Selecting a table row in the Layout editor
4. Preview the report. The report contains more space between the rows of data.

7. Add a Report Title

To display a title, you can use either a label element, a text element, or a data element.

• The label element is suitable for short, static text, such as column headings.
• The data element is suitable for displaying dynamic values from a data set field or a computed field.
• The text element is suitable for multi-line text that contains different formatting or dynamic values.

This procedure uses a text element and HTML tags to format the text. Note that you are not required to use HTML to create formatted text. If, however, you are well-versed in HTML or web design, you might prefer using HTML to create a block of formatted text.

1. Click the Layout tab.
2. From the palette, drag a text element and drop it above the table to open the Text Item editor.
3. On Edit Text Item, select HTML from the drop-down that displays Auto. Selecting HTML enables you to embed HTML tags or CSS properties in the text. You can type the tags or you can insert the commonly used HTML tags the text editor provides.
4. Enter the following HTML in the text area:
   

   <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>

   
   
   
   
   Text with HTML tags
5. Click OK, and then preview the report. The report should appear similar to the report below.
   
   Report preview with formatted report title

As you can see, using the text element with embedded HTML enables you to:

• Use different formatting for each line in a multi-line text block.
• Insert dynamic values such as the current date.

Alternatively, you can use:

• Two label elements to display the first and second lines of static text
• A data element to display the third line that contains the dynamic value

8. Deploy and Test the Report

With the report designed and styled, the next step is to deploy to a web server and test the report’s operation using a web browser.

1. Right-click the reportdemo project, select Run As>MyEclipse Server Application, and select the MyEclipse Tomcat server. The MyEclipse integrated web browser opens with an initial URL similar to http://localhost:8080/reportdemo/.
2. Append the name of the report access webpage to the URL, so it looks something like http://localhost:8080/reportdemo/demo_report.jsp.
3. Click Go or press Enter to load your report in the browser.
   
   Customer List report accessed from a web browser

Note: Since the report is linked to the MyEclipse Derby server, you must ensure the server is running or else the report engine will be unable to connect and fetch data from it. You started the Derby server while creating the Customers data set. If you have not manually stopped it, it should still be running.Because a report web project is an extended web project with the report runtime facet, it can be deployed to any Java EE web server. See Using MyEclipse Application Servers for more details on setting up and deploying to other web servers.