Display enterprise data as dynamic HTML using IBM Mashup Center

Generating distinctive content from enterprise data sources that can be used in a mashup

IBM® Mashup Center comes with widgets for displaying data in different formats, such as in a table, on a map, or in a chart. These widgets allow for very quick page assembly, but typically only provide a limited set of customization abilities, including font size, alignment, color. To have greater control, IBM Mashup Center V3 supports the generation of any XML directly using data from enterprise data sources. Learn how to generate HTML (XHTML, since the feed is well-formed) for more distinctive presentations using the data mashup builder. In addition, this article also describes a simple widget that can display arbitrary HTML and can intercept mouse clicks to trigger events that can be wired to other widgets.

Louis Mau, Solution Architect, IBM

Louis Mau is part of the InfoSphere MashupHub development team. His current focus is to help customers build situational applications using the IBM Mashup Center. Prior to this role, he was the architect for DB2 Everyplace Sync Server, which helps synchronize data from enterprise databases onto a small-footprint database running on mobile devices.



Rajesh Kartha (kartha@us.ibm.com), Software Engineer, IBM Cloudscape Group

Rajesh Kartha works at IBM Silicon Valley Lab in San Jose as a Solution Architect for IBM Mashup Center. He has extensive experience in software development on various IBM Information Management products.



16 June 2011

Also available in Russian Portuguese Spanish

Overview

IBM Mashup Center comes with a set of widgets for quick data visualization. These widgets provide common customizations, such as font size, alignment, and color. For more unique presentation or interaction requirements, the expectation is that customers will develop custom widgets. Developing a custom widget is a programming task requiring knowledge of JavaScript, familiarity with the IBM Mashup Center Widget client API, and potentially Dojo or another third-party JavaScript package. The effort required might not be justifiable or the necessary skills might not be available. For cases where the unique presentation can be achieved through static HTML and CSS without the use of dynamic JavaScript, an alternative approach is to generate HTML directly from enterprise data sources using the IBM Mashup Center data mashup builder.

IBM Mashup Center includes InfoSphere MashupHub and Lotus® Mashups.

In this article, you will learn how to use the data mashup builder to generate HTML — XML-conforming HTML — that could be displayed using the out-of-the-box Website Displayer widget or in a browser. With CSS, this could produce some distinctive presentations. We also describe a simple widget that can display arbitrary HTML and intercept mouse clicks to trigger events that can be wired to other widgets.

This article assumes familiarity with using the IBM Mashup Center to build mashups and feeds. In particular, for the first part of the article, you should have experience using the IBM Mashup Center data mashup builder. The Resources section contains a link to the article "Creating a feed from an enterprise database (JDBC)," which can help get you get up to speed on the basics of building data mashups. To follow the section on building the special widget, you should know how to program in JavaScript and the basics of writing a widget. See Resources for additional helpful information.


IBM Mashup Center data mashup builder

The latest version of IBM Mashup Center V3 data mashup builder introduced several significant features, including:

  • Namespace declaration support — Namespace is often used in XML documents to identify mark up vocabulary defined by different organizations. Starting in V3, the transform operator in the data mashup builder supports the manipulation of namespace declaration. Namespace declaration may be created, modified, and deleted from any element; and any element may be assigned to any of the namespaces valid within its scope.
  • Ability to manipulate feed header — Namespace declaration and attributes can be added to the root element. Additional elements can be added to the root element as siblings or as s parent to the repeating entries. In fact, a complete XML fragment for the header and footer can be imported into the Publish operator to be incorporated into the output.
  • Ability to specify the MIME type in the Publish operator — Browsers rely on the MIME type to determine what program to use and how to display the received content. For example: text/xml, text/html, application/xml, application/rss+xml image/svg+xml, application/atom+xml, application/vnd.google-earth.kml+xml, etc.

Generating HTML using the data mashup builder

IBM Mashup Center has a rich set of feed generators that can extract information from enterprise data sources into ATOM format. With the use of the data mashup builder, these feeds can be converted to other standard forms like ATOM, JSON, or even a custom XML structure with its corresponding MIME type. In particular, by converting to HTML, the enterprise data could be displayed in the out-of-the-box Website Displayer widget. The user can use the full power of HTML and CSS to create unique visualizations and not be constrained by the layout or appearance of any particular widget.

We will illustrate HTML generation with a simple example. To make it easy to follow along, we will use the "MyCo Customer List" sample feed shipped with the product. We will convert the ATOM feed into an HTML table. The following figure shows how it renders in the Website Displayer widget.

Figure 1. MyCo Customer List as HTML table
Simple Data Mashup for HTML conversion

The data mashup used for creating the above HTML is simple.

Figure 2. Simple data mashup for HTML conversion
Simple data mashup for HTML conversion

Let's get rolling. We use a source operator to load the data feed into the editor. Next, we connect the source operator to the transform operator. To convert each entry from the input source feed to show up a row in an HTML table:

  • Create the appropriate <tr> element for the row as the parent.
  • Create all the <td> elements for the column or cell values as the child elements of the <tr> element in the right-hand tree of the transform operator.
  • For the first <td> element corresponding to the company name, create a <a> child element with an href attribute and copy the text value of the <URL> element from the left-hand tree to the href attribute. This will enable the company name to have a hyperlink.
  • Copy the respective text values from the left-hand tree to each of <td> elements as needed.
Figure 3. Transform operator in data mashup for HTML conversion
Transform operator

The output from the transform is connected to the publish operator, where most of the customizations are done:

  • Select the Custom Header option and for the Feed type, choose Custom MIME type from the drop-down and select text/html as the MIME type.
  • In the Header Template section, right-click on root and select the Set Template Tree setting to provide a custom template.
Figure 4. Publish operator in data mashup for HTML conversion
Image shows publish operator in data mashup for HTML conversion
  • A template can be provided in the publish operator. The template can be generated using any standard HTML authoring tool. Please refer to the Download section for the HTML template used in the current example. The template to be added will be as indicated below.
Listing 1. Header template for HTML feed generation
<html>
	<head>
		<style>
			table { 
				background:#FFFFFF;
				border:1px solid gray;
			...
			...
			.description{
				font:bold 11px verdana;
			} 
			p {
				white-space:normal;
			} 	
		</style>
	</head>
	<body>
	<div class="content">
	  MyCo Customer List:
	</div>
	<div class="description">Here is the transformed MyCo Customer list sample feed 
	presented in a CSS formatted HTML Table using a data mashup:
	</div>
		<table>
			<caption>My Customer List</caption>
			<th>Customer</th>
			...
		</table>
	</body>
</html>
  • Add the above HTML template in the Set Template Tree box and click OK in the subsequent dialogs. The HTML template is rendered in tree form, which allows further modifications like adding new child elements, attributes, namespaces, etc. and even adding desired elements from the upstream operator.
  • Attach the actual data provided by the preceding operator under the <table> element. For this, right-click on the <table> element and select Attach repeating element.
Figure 5. Attaching the repeating element in the publish operator
Image shows attaching the repeating element in the publish operator
  • In the Attach Repeating Element dialog, select the <tr> element, which is the output coming from the preceding transform operator, and click Attach.
Figure 6. Select the <tr> element for attachment as repeating element
Image shows selecting the <tr> element for attachment as repeating element
  • The <tr> element now becomes the child element of the <table> element, as required.
  • Save the data mashup and execute it to confirm that the output does show up as expected, which is a well-formatted HTML table.

The above data mashup feed could be used directly in the Website Displayer widget. Just go to Edit Settings for the widget and specify the URL. The table could be styled to have a different appearance by changing the CSS in the HTML template. It is good practice to maintain separation between presentation and data transformation logic. If the enterprise data needs to be transformed, grouped, or augmented, those operations should be done in a separate data mashup. The result can then be converted into HTML using a different data mashup. Keeping them separate makes it easier to change the presentation as requirements change.


A simple widget to add eventing support

What we have done up to now only involves the data mashup builder. This is all good if you just want to create unique visual. If you want the generated HTML content to be able to interact with other widgets on a page, you need the help of a special widget. In this section, we'll guide you through the process of creating a widget that:

  • Can display arbitrary HTML fragments just like the out-of-the-box HTML markup widget
  • Through the use of a custom attribute, make arbitrary HTML elements generate iWidget events when clicked.

As mentioned in the Overview, we'll assume that you are familiar with the widget definition file and the basics of writing an iWidget. In what follows, we will only give a brief description of our widget. Since our widget captures mouse clicks and converts them into iWidget events, we call our widget "HTMLEvent." We will start by looking at our iWidget file in Listing 2 below.

Listing 2. Part of the iwidget.xml file
<iw:iwidget name="sample.mashupcenter.HTMLEvent"
            xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget" 
            allowInstanceContent="true"
            supportedModes="view edit"
            mode="view" 
            iScope="sample.mashupcenter.HTMLEvent">

<iw:resource uri="HTMLEvent.js" />

<iw:event id="HtmlUrl" eventDescName="HtmlUrlDesc"
           handled="true" onEvent="handleHtmlUrl" />  
   <iw:eventDescription  id="HtmlUrlDesc" payloadType="text"
                          description="Url to retrieve HTML fragment" lang="en" > 
</iw:eventDescription>

<iw:content mode="view">
<![CDATA[
    <div  id="_IWID_HtmlArea"></div>
]]>
</iw:content>

Some notes on the iwidget.xml content:

  1. The iWidget element's iScope attribute defines the name of the JavaScript Dojo class that implements the widget.
  2. The iresource element specifies the JavaScript file containing the JavaScript implementation and should be loaded before the widget is instantiated.
  3. Observe that we have only defined a single receive event for changing the URL, but no send events. The latter are dynamically created and specified in the HTML fragment. We will discuss that in detail later.
  4. The content element with mode attribute set to view defines the HTML to be displayed in view mode. It is very simple and consists of an empty div. Note that it has an id attribute consisting of the string _IWID_HtmlArea. The special _IWID_ prefix will be replaced with the actual widget instance ID generated by the framework when the widget is instantiated. The actual content displayed will come from the input feed, which is assumed to contain the HTML fragment.

To tell the widget where to capture mouse-click events, add an attribute MCEVENTonclick="eventName" to any element in the HTML fragment you want to make clickable. Here, eventName should be replaced with the desired text value used to generate event names appearing in the widget's wiring dialog. As shown in Listing 3 below, the callback function _cbHtmlReceived in the widget will pre-process the HTML fragment and look for all occurrences of such attributes. The value of such attributes are extracted and saved in a newEvents object to be used to dynamically register Send events. These events, once registered, will appear in the "Send tab" of the wiring dialog. Then the _insertOnclick function will be called with the HTML input fragment, the complete attribute string and the event name. (The latter is redundant since it is included in the complete attribute string already.)

Listing 3. _cbHtmlReceived function body
var  newEvents = {};
var  beg = strHtml.indexOf( "MCEVENTonclick=" );
var  len = 14 + 1; // length of "MCEVENTonclick="
while ( beg > 0 ) {
    var  quote = strHtml.charAt( beg + len );
    var  end   = strHtml.indexOf( quote, beg + len + 1 );
    var  name  = strHtml.substring( beg + len + 1, end );
    newEvents[ name ] = true;
    strHtml = this._insertOnclick( strHtml, strHtml.substring(beg,end+1), name );

    beg = strHtml.indexOf( "MCEVENTonclick=" );
}

this.updateDynamicEvents( newEvents );

this.htmlFragment = strHtml;
var node = dojo.byId(this.uid + "HtmlArea" );
node.innerHTML = this.htmlFragment;

The _insertOnclick function is very simple and is reproduced in its entirety in Listing 4 below. For a given eventName, it uses JavaScript regular expression support to replace all occurrences of MCEVENTonclick="eventName" with the DOM onclick attribute specifying the script to run when the HTML element is clicked. The script should call our handleOnclick function with the eventName as the parameter so our widget can generate an iWidget event for the specified name. More precisely, since there can be multiple instances of this widget on a single web page, we need to call the handleOnclick function from "this" instance. To locate this iWidget instance, prepend the widget ID contained in the variable this.uid to iContext and call the iScope function. The widget ID is initialized in the onLoad function. For this and other details, please consult the widget implementation JavaScript file from the Download section.

Listing 4. The _insertOnclick function body
_insertOnclick: function( strHtml, srchString, eventName )
{
    this.debugTrace( "_insertOnclick srchString,event=" + srchString + "," + eventName ); 

    var rexp  = new RegExp(srchString, "g");  // global
    // Beware: flipping between using single and double quote for wrapping strings.
    var sTo   = " onclick='JavaScript: "
              + this.uid + 'iContext.iScope().handleOnclick( "'
              + eventName
              + '", this );'
              + "return false;' ";
    var result = strHtml.replace( rexp, sTo );
    return result;
},

Once the HTML pre-processing is complete, we locate the DOM node with ID _IWID_HtmlArea defined in the view mode section of the iWidget definition file. The widget displays the HTML fragment by simply assigning it to the DOM element innerHTML. When any clickable HTML element is clicked, an iWidget event will fire. If the HTML element is an anchor link, the href value is used as event data. For all other elements, it is the element text content.

The widget supports additional features like transparent background and dynamically inserting CSS for styling. For those interested, please consult the widget-implementation JavaScript file. Now let's see the widget in action.


Put the HTMLEvent widget in action

In the previous section, we covered the creation of the simple HTMLEvent widget. In this section, we will see how it can be wired to other widgets and be used in a dynamic mashup page.

To begin using any custom widget in a mashup builder, the ZIP (lightweight widgets) or WAR (for iWidgets) file needs to be uploaded to the catalog first followed by the Add to Mashup Builder action on it. The same process applies to the HTMLEvent widget created above.

Next, we need a feed that has the MCEVENTonclick event attribute added to its elements, which can be useful in the HTMLEvent widget for event generation. For this, we will use the same data mashup created in the Generating HTML using the data mashup builder section to add the MCEVENTonclick event attribute. Open the data mashup for editing, and in the transform operator, right-click on the <a> element and add the event attribute MCEVENTonclick=mytest as shown below. The attribute value for MCEVENTonclick indicates the event name to be mytest and will enable passing the value of the href attribute under the <a> element once properly wired.

Figure 7. Add MCEVENTonclick attribute
Image shows adding MCEVENTonclick attribute

Save the mashup and execute the feed to confirm that no error exists.

Create a new page in the mashup builder and add the HTMLEvent widget to the page. Click on Edit settings and for the HTML URL, provide the URL for the data mashup that was edited in the previous step. Note that the HTMLEvent widget also provides a section for adding custom CSS for formatting the HTML feed. Because the HTML fragment is inserted, not all browsers support the inclusion of inline HTML style tags. In the current example, extract the body of the style tag from the HTML header template shown in Listing 1 and paste into the CSS text area. Click Save to save the widget settings. (Note that there is no need to include the style tag in the HTML template when constructing the data mashup for the HTMLEvent widget. In fact, there is no need to generate html and body tags. Since these extra tags are ignored, there is no need to remove them from the data mashup.)

Add a Website Displayer widget to the same page, click on its Edit Wiring to enable wiring between the HTMLEvent widget and the Website Displayer widget. In the wiring dialog, select the URL using Text option for the Website Displayer, then select the HTMLEvent widget as the widget to send the context. Note that the HTMLEvent widget exposes the mytest value coming from the MCEVENTonclick=mytest attribute, select that as the content to send, as shown below. Click Done to save the widget wiring.

Figure 8. Wiring the HTMLEvent widget
Wiring the HTMLEvent widget

The two widgets — HTMLEvent and Website Displayer — are now wired. This can be tested by clicking on the link for the customer within the HTML table. It should now open the underlying URL, corresponding to the customer selected in the Website Display widget.

Figure 9. Wired HTMLEvent and Website Displayer widget in action
Wired HTMLEvent and Website Displayer widget in action

Other uses

Most widgets from IBM Mashup Center are optimized for displaying data within the constraint of the browser window size. If there are more data elements than can be made visible all at once, pagination and scrolling are often used to display the hidden data. More specifically, consider a simple page with a data viewer widget wired to a user input widget, where search values can be entered. If the data viewer is configured to show only 20 rows and 100 are returned, printing the screen will only capture the 20 visible rows. How do we make a printed copy of all the rows? One approach is to use the data mashup builder to reformat the feed content into HTML and add a print icon on the page to display it in a separate browser page, where the standard print function can be used to print the content. Using the same sample feed as earlier, we use another data mashup to generate HTML markup that can be displayed in a browser page and sized properly for printing.

Figure 10. Sample table content formatted for printing
Sample table content formatted for printing

Note: Once the feed content is in HTML table format, standard desktop applications like Microsoft® Excel® can import them easily.


Conclusion

This article showed how to use the IBM Mashup Center data mashup builder to generate displayable content directly from enterprise data sources. For illustrative purposes, the chosen examples were fairly simple. Visually rich presentation could be generated by using the full power of HTML and CSS. More importantly, through the use of a special convention, an attribute inserted into the generated data, you can develop a widget that could display the generated presentation and interact with other widgets. We hope a reader will introduce another convention and extend the widget further to provide additional behaviors.


Download

DescriptionNameSize
Format examplegenHtmlDownloadPkg.zip8KB

Resources

Learn

Get products and technologies

  • To get hands-on experience with the IBM Mashup Center, visit the Lotus Greenhouse.
  • Download a free trial version of IBM Mashup Center from developerWorks.
  • Build your next development project with IBM trial software, available for download directly from developerWorks.

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Select information in your profile (name, country/region, and company) is displayed to the public and will accompany any content you post. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Information management on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Information Management, Lotus
ArticleID=680483
ArticleTitle=Display enterprise data as dynamic HTML using IBM Mashup Center
publish-date=06162011