IBM Mashup Center Need-to-know tips and tricks, Part 2: Building mashups and leveraging widgets

Accelerating your use of IBM Mashup Center versions 2 and 3

IBM® Mashup Center is a powerful tool aimed at gaining insight and sharing information by rapidly assembling and visualizing data. This article shares some of the essential "need-to-know" tips we have collected in our experience with the product. In Part 1 of this "IBM Mashup Center — Need-to-know tips and tricks" series, we reviewed the components of IBM Mashup Center and some terminology, then provided nine practical tips on working with feeds and building data mashups. Now we'll cover tips and tricks around building mashups and leveraging widgets. This article applies to Mashup Center V2 and V3.

Aaron Kasman (akasman@us.ibm.com), Advisory Software Engineer, IBM

 Aaron KasmanAaron Kasman is an advisory software engineer in the Innovation Engineering team in the IBM CIO Office where he focuses on internal Platform-as-a-Service (PaaS) offerings, with an interest toward supporting innovators and situational application development. Prior to this role, he was part of the IBM Software Services for WebSphere team developing IBM.com’s e-commerce presence. His interests include WebSphere sMash, Platform and Software-as-a-Service technologies, content and community management with Drupal and CiviCRM, and visual design.



Klaus Roder, Solutions Architect, IBM Mashup Center, IBM

Klaus RoderKlaus Roder is a solutions architect for IBM Mashup Center at the IBM Silicon Valley Lab, working for the Information Management CTO Office. His current focus is developing and deploying enterprise mashups with customers using IBM Mashup Center. Prior to his current role, he worked on the IBM Web Interface for Content Management (WEBI) project and the WebSphere Information Integrator Content Edition (IICE) development team. He holds a master's degree in computer science from the University of Applied Science in Würzburg and is a member of the San Francisco Bay Area ACM chapter. He also gave various guest lectures at Sonoma State University, San Jose State University, and Carnegie Mellon University.



13 October 2011

Also available in Portuguese

Overview

IBM Mashup Center is a powerful tool for quickly combining data sources to gain insight and share feed-formatted and visualized information. It can be used to develop rich web interfaces without programming through the reuse of flexible components. Alternately, it can be customized extensively through the development of components (themes and widgets) for specific scenarios. This article leans toward the former use case, helping you quickly get deep into Mashup Center by reusing existing components. We'll assume you have basic familiarity with the product. For links to introductory material, check out the Resources section.

In Part 1, we review the components of IBM Mashup Center and some terminology, then provide nine practical tips for working with feeds and building data mashups. Now in Part 2, we cover the front end, where you design your data presentation without coding using the Mashup Builder.


The Mashup Builder

The Mashup Builder component of Mashup Center lets you display data to users by composing pages consisting of widgets, and connecting data sources to those widgets. The data can come from sources within Mashup Center, such as the results of a data mashup in the MashupHub, or external to it, such as a third-party URL, like a Twitter feed. We'll touch on some of the terminology we'll use before diving into the tips and tricks:

  • The Mashup Builder is the front end of your mashup, where you design your data presentation pages without coding. It's the place where you create and host pages that contain widgets that display data you wish to present.
  • Spaces are collections of pages where your mashups reside. Access control is defined at the space level. Think of a space as a website for your project within Mashup Center that you will invite your visitors to.
  • Pages live within spaces. Each page contains one or more widgets. You can set the layout of a page, as well as its theme, to control its look and feel. Think of a page as analogous to a web page.
  • Widgets are the components that make up pages and convey information to your users. Think of them as small applications or pieces of dynamic content that can be easily placed on a page. Examples of widgets include the Mapping Widget or Charting Widget. Widgets are uploaded through Mashup Center's catalog, then published to Mashup Builder. Once in Mashup Builder they can be selected from the pallet/toolbox and placed on your pages. By configuring a widget, you supply data to it. This is done by configuring the widget to point to the URL where to obtain a data feed. We'll have more to say about widgets shortly.
  • Wires help make mashups interactive. Rather than having a page of stand-alone widgets, wires let you relate the content of one widget to another widget. For example, you may want to design your page so that when a user clicks on a chart segment in one widget, a detailed table related to that segment would be rendered in another widget. Wires let you configure which event on the source widget should affect an aspect of the target widget and what data should be passed from one widget to the other.

Widgets: Use an existing one or create a new one?

When planning a mashup project, it's helpful to think through how you plan to present your data. Mashup Center provides a number of general out-of-the box widgets you can add to your mashup pages. These are available in the pallet/toolbox and are ready for you to use. For example, we frequently use the data viewer widget to display tabular data.

In addition to the out-of-the-box widgets, numerous useful widgets have been contributed by the Mashup Center community. You can browse through the catalog to see widgets available in Lotus® Greenhouse, IBM's public sandbox for Lotus products. You can find a link to Greenhouse in the Resources section. If there's a widget you find useful in the Greenhouse, you can download it and then import it to the catalog in your Mashup Center installation. Once you have imported the widget, in order to make it available to be placed on a page, you must choose Add to Mashup Builder from the widget's page in your catalog.

Sometimes, more specialized functionality is required from a widget than what one of the existing widgets offers. To that end, you can create your own widget to suit your project's needs. The design and creation of new widgets involves marking up the HTML as well as programming using languages such as JavaScript and frameworks such as Dojo, JQuery, or Prototype to display your data. You may also want to use visualizations that leverage Adobe® Flash®. Mashup Center supports a number of widget formats, and you can use a variety of tools to create them, including Eclipse or IBM Rational® Application Developer. In fact, Mashup Center includes Widget Factory, an Eclipse add-on to help you build and design widgets.

As a rule of thumb, we have found it helpful, whenever possible, to save time by reusing an existing widget if it provides enough functionality for the situation, rather than trying to create a widget that's unique to a situation.

We've described three approaches to the selection of widgets: using out-of-the-box widgets, using those created by the community, or developing your own. While it is attractive to reuse existing generic widgets, you may run into scenarios that require just a little bit of customization of an existing widget. There are a couple approaches you can take. Perhaps you have a feed which requires some more advanced filtering than you can accomplish with a standard Data Viewer widget offers. While you could build a custom widget to do this, an approach worth considering would be to do that filtering in a data mashup. With this pre-processing complete in the data mashup, we can achieve the desired data output in a standard data viewer widget. This can help avoid the need to custom code widgets. Another approach, which focuses more on the presentation layer of mashup leverages the JavaScript Adapter Widget to accomplish some light tweaking. We'll give an example of where and how to use it later.

With the key Mashup Builder concepts in mind, let's take a look at some tips for making the most of working with Mashup Center.

Tips for building mashups and leveraging widgets


1. Wiring tips

Wiring dialog

Wiring lets you define the relationships among your widgets. More so, it's the functionality that transforms your mashup page from simply being a collection of widgets on the same page into a rich application of programmatically related widgets. The best part is that you can accomplish this without coding.

To shed some more light, you wire widgets to one another to indicate the flow of data when an event occurs in a widget. For example: An event is fired when a user clicks on a row in a Data Viewer widget. By wiring that instance of the Data Viewer to another widget on the page, you are setting up the connection such that when users click on a row in the Data Viewer, some data from that clicked row will be sent to the widget that is receiving the event's payload over the wire.

The configuration of the wiring is done in the wiring dialog, which lets you specify not only which widget will receive the data but also the format of data being sent over the wire. Figure 1 illustrates the wiring dialog. Keep in mind that the scope of wiring is a mashup page: You can't wire to or from widgets on another mashup page.

Figure 1. Example of a wiring dialog
Image shows a wiring dialog

Wiring graph

At times, especially when a widget receives or sends multiple events, it is helpful to see an overview of what events are wired to and from that particular widget. That's exactly what the wiring graph does. To see the wiring graph for a particular widget, in the context menu of that widget, choose Wiring Graph. You will see a graphical view of the events connected to that widget.

Figure 2 illustrates an example of a wiring graph for a data viewer widget. In this case, you have a data viewer wired to a number of URL customizer widgets. The implication is that when a row is selected in the data viewer, some piece of data will be updated in each of the URL customizers. A couple notes to keep in mind in this example: The format of the data sent over each wire might be different. For example, the first URL customizer might receive the data from one column of the data viewer, while another URL customizer might receive the entire row's worth of data. Those configurations are specified in the wiring dialog (as shown in Figure 1). Also, it's likely that the each URL customizer is wired to another respective widget displaying the data at the URL it specifies. We don't see those follow-on widgets in this graph as the graph in the figure is for the Alert Info Data Viewer, and the Wiring Graph only shows widgets connected directly to the widget being graphed.

Figure 2. Wiring Graph
Image shows the wiring graph

2. Debug your mashup page with the Event Explorer widget

As we've described, your mashup page is your canvas for quickly wiring widgets together. To help debug your work, you may want to know exactly what data is being passed over the wire between two widgets when an event is triggered. That's where the Event Explorer widget comes in handy. The Event Explorer isn't the type of widget you would want to display to end users of your mashup; rather, it's a utility for you, a mashup page creator, to use for debugging.

For example, say you already have a Data Viewer populated with data and you want to find out what data is passed from a Data Viewer for an event when a row is selected. Drag an Event Explorer widget onto the canvas and wire a specific event from the Data Viewer to the Event Explorer. This is shown in Figure 3, where the event in the Data Viewer is formatted to send a Row as Table.

Figure 3. Event Explorer wiring for a Data Viewer
Configuration of an Event Explorer

The output of the data flowing over the wire will be shown in the Event Explorer after the event is triggered. In this case, the event is the table row detecting a user click. This is helpful in checking that the output for different output formats of a widget's outputs and can be especially handy for debugging output from the JavaScript Adapter. Figure 4 shows the data in the Data Viewer widget and the output of the Table as Row wiring in the Event Explorer, based on the wiring described above. Since you have been using your Event Explorer for debugging purposes, don't forget to delete or hide it before you share your mashup pages.

Figure 4. Event Explorer showing results of wiring from Data Viewer
Data Viewer and wire contents illustrated in an Event Explorer

3. Inject functionality with the JavaScript Adapter widget

As we've noted, Mashup Center allows you to create mashup pages and perform data manipulation without any coding. But sometimes, especially if you are a developer, you may want to write a few lines of code to help you fulfill what you want to accomplish. Mashup Center has you covered by providing the JavaScript Adapter widget.

Let's say you want to use a User Input widget where you let the user specify a date, and you want to default the widget to show the current date. You can use the JavaScript Adapter to generate the current date and pass it to your User Input widget. Here is what you would need to do: First, add an instance of the JavaScript Adapter widget to your page, and supply it with the code listed in Listing 1.

Listing 1. JavaScript that returns current date
if(payload==null)
{      
	var currentTime = new Date(); 
	var month = currentTime.getMonth() + 1; 
	var day = currentTime.getDate(); 
	var year = currentTime.getFullYear();  
	var currentDate = year + "-" + month + "-" + day; 
	var payload = currentDate;      
	this.iContext.iEvents.publishEvent ("Provide Edited Data",  payload);  
	//The last line is where the event is fired!! 
	//(See the Mashup Center Client Side API JavaDoc Reference 
	//- a link is in the Resource section - for more details)
}    
return currentDate;

Next, add a User Input widget to your page and configure it to have a date field (as shown in Figure 6). With your JavaScript Adapter and User Input widgets in place, wire the output of the JavaScript Adapter to the User Input's widget "Start Date" field as shown in Figure 5).

Figure 5. Wiring the JavaScript Adapter output to the User Input widget
Image shows wiring of the JavaScript Adapter to the User Input widget

Now, because the JavaScript Adapter widget is automatically triggered each time the page is loaded, on page loads, the User Input widget will display the current date in the Start Date date picker. Figure 6 shows the current date in the User Input widget as a result of the wiring from the JavaScript Adapter.

Figure 6. The current date displayed in a User Input widget with the help of some JavaScript
Image shows JavaScriptAdapterCurrentDate

In the above example, we wired the current date to an User Input widget, but you could also send the current date to any other widget that takes a parameter. For example, you may have a data feed that has a date field parameter. You could use the current date output of your JavaScript Adapter as input to a data viewer that is displaying the feed. In this case, you could wire the output of your JavaScript into a URLCustomizer that supplies the Data Viewer with its source. The Data Viewer then would display data based on the current date.

4. Add a widget to a web page

You may encounter a situation where you have a Mashup Center widget that you would like to embed in a page outside of Mashup Center. Mashup Center can generate the HTML code for you to embed a widget in any web page's source code. Here's how: When you select a widget from your palette, you can choose to add it to an external page, rather than your mashup page. Figure 7 illustrates the option to add to the web page.

Figure 7. Add widget to web page
Image shows option to add widget to web page

After making this selection, you will be presented with a dialog where you can configure the dimensions of your widget. You can also edit the widget settings, such as choosing a data source, as you would if you were adding the widget to a page in Mashup Center. Once you have finished configuring your widget, refresh the markup. Then copy and paste it into the HTML code on your custom page outside of Mashup Center. Figure 8 shows the configuration dialog for the widget. Notice the markup code you can copy into your custom HTML code elsewhere.

Figure 8. Configure the widget
Image shows how to configure the widget before adding it to your web page

5. Display a mashup on a web page

In the previous tip, we walked you through how you can easily embed a single widget on a web page outside of Mashup Center. But it gets better: You can even take a complete mashup page and embed it into a web page. This is extremely useful if you want to embed your mashup, for example, on a themed intranet page. This way, you can invite users to your intranet page where your Mashup Center page is embedded and smoothly integrated (without the IBM Mashup Center masthead), and provide a seamless experience — both in terms of look and feel of the page as well as its location relative to other pages on your intranet site. If your mashup page requires authentication, your users will be prompted accordingly.

The technique is similar to the previous tip where we added a widget to an external page. Figure 9 shows the Mashup Center page menu where you retrieve the code (script tag) to embed your mashup on a page.

Images shows Data Viewer with visual cues

Figure 10 contains a sample dialog. Select the dimensions and other settings for your embedded mashup. Then take the generated HTML snippet and embed it in your web page outside of Mashup Center. That's all there is to it.

Figure 10. Configuring a mashup for display on an external page
Image shows Data Viewer with visual cues

6. Sharing spaces and pages

You can share a Mashup Page by clicking the share link in the page's Action menu. Keep in mind that to share a page with someone, you also need to give them access to the space where that page resides. Sharing of spaces is done through the Space Manager, while sharing of pages is managed in the page's menu.

If you share a space with someone, they, by default, have access to the entire space. On the page level, you can choose to revoke access to a particular page for someone who otherwise can generally access the space where that page resides. On the space and page levels, you can also change someone's access from read/write to read-only.

Figure 11 shows a share dialog for a page. Notice how, by default, the page inherits the permissions from a space. You can disable that inheritance from the space settings by unchecking the boxes labelled Include viewers from parent or Include editors from parent. The figure also shows that we're looking for a user named Klaus Roder to be add to the access rules for this page. Once the user is found in the directory, you can drag their name from left to right into the Add to View or Add to Edit area.

Figure 11. Sharing settings for a page
Image shows sharing settings for a page

7. Data Viewer with inline images

The out-of-the-box Data Viewer widget is a useful way to show tabular data on a mashup page. However, you may sometimes find it helpful to give your users some additional visual cues and indication that something is important or new.

You can accomplish this by using the Data Viewer in combination with a Data Mashup. We will leverage the power of Data Mashups to enrich the feed with HTML elements, in this case, an img (image) tag will be inserted to add images for newly added items. The image added into the feed simply needs to be URL addressable.

In this example, the data comes from a database and is brought into Mashup Center via the Enterprise JDBC Connector. In a Data Mashup, we compare the date the product was added to the catalog against the current date. For items added in the past 30 days, we add a NEW icon to the row.

Figure 12 shows the results of the Data Viewer displaying the described Data Mashup.

Figure 12. Data Viewer with Visual cues
Image shows Data Viewer with visual cues

Figure 13 shows the Data Mashup that dynamically enriches our source feed that comes from the database and adds the NEW icon for selected rows. As you can see, we are filtering the data for items added in the past 30 days and items that were added before then. For those items added within the past 30 days, we use a transform operator to add the NEW icon.

Figure 13. Data Mashup to add visual cues
Image shows Data Mashup to add visual cues

Let's drill down into the key aspects of this data mashup. Figure 14 shows the filter operator that gathers all the items added in the past 30 days.

Figure 14. Data Mashup filtering items added in the past 30 days
Image shows Excel icon HTML display

Figure 15 shows how to use the transform operator to add the HTML snippet to include the NEW icon. Note that we're not embedding the icon but simply including an img tag with a URL to load the icon from a third-party location. To include some HTML in the output, we create an element in our output tree and insert HTML markup as the text value for that node. The right-hand side of the transform operator renders the img tag to show the new icon, and the tool tip shows the img tag used to embed the image.

Figure 15. Transform operator in a Data Mashup is used to dynamically add icon to new items
Image shows transform operator used to embed HTML

8. Automatic refresh with Action Timer

When you create a mashup page, the content rendered on the page is generally static, aside from events generated by the user, such as clicking on a row in a data viewer or refreshing a charting widget. In many cases, that's sufficient. But sometimes, you may want a certain widget to automatically refresh at a predefined interval so it will continually display new or updated data on your mashup page. That's where the Action Timer widget comes in to play.

Consider an example where the Action Timer triggers an event to a URL Customizer widget every 10 seconds. The URL Customizer contains a URL that retrieves the latest tweets on Twitter containing the term "IBM." The URL Customizer is wired to the feed-reader widget, which displays the feed.

Figure 16. The Action Timer triggers to display every 10 seconds
Image shows Action Timer

Figure 17 shows the Edit Settings dialog of the Action Timer widget, where you can specify how frequently you would like the timer to be triggered. For this type of example, at each trigger, we reset the counter to 0. Figure 18 is the wiring graph for the URL Customizer widget, which visualizes the wiring between the Action Timer, URL Customizer, and feed-reader widgets.

Figure 17. Action Timer Edit Settings Dialog specifying refresh interval
Image shows Action Timer Edit Settings
Figure 18. Action Timer Wiring Graph
Image shows Action Timer Wiring Graph

9. Themes and skins

Mashup Center gives you the ability to add reusable widgets to each page, but how about changing the look and feel of your mashup pages? The look and feel of each mashup page is determined by its theme. You can choose a different theme for each of your pages in the Edit Page Properties dialog box. Themes can affect elements of your pages like masthead, navigation, background, fonts, and widget stylings, which are otherwise known as skins. You can customize themes to completely change the look and feel of your mashup page as shown in the following two figures. These examples feature custom themes called "Slick Black" and "Smarter Buildings," respectively.

Figure 19. Slick Black Theme used to create a slick, visually appealing look and feel
Image shows mashup page with the SlickBlackTheme
Figure 20. Smarter Buildings mashup with appealing look and feel, and custom navigation
Image shows mashup page with Smarter Buildings theme

A theme can also be used to provide company branding, such as the "IBM Theme" illustrated in Figure 21 that gives Mashup Center a look and feel that resembles the IBM.com website.

Figure 21. Changes to look and feel of the navigation, and adds IBM company branding
Image shows a theme with company branding

Each theme can also provide one or more sets of widget skins. Skins are applied to widgets and give each widget a specific look. Figure 22 shows how the Data Viewer widget looks with a "Frosted Glass" skin and with a "Cap Blue" skin.

Figure 22. Data Viewer widget once with a "Frosted Glass" skin and once with a "Cap Blue" skin
Image shows Data Viewer with different skins

You can apply a different skin to your widget by clicking on the widget's context menu and choosing Select Skin, as shown in Figure 23.

Figure 23. Selecting a different skin will give a widget a different look and feel
Image shows skin selection

Custom themes and skins are most easily created by copying and modifying the CSS, HTML, and images of a default theme. Once you've created your theme (which can include custom skins), you can upload it to your Mashup Center instance using a WebDAV client. You can read more about how to create your own custom themes in the Mashup Center Information Center (see Resources).


Wrapping up

In Part 1 of our series of tips and tricks for using Mashup Center, we shared some useful nuggets for using the Mashup Hub portion of the product. In this second and final installment, we have listed some pointers on using the front-end Mashup Builder part of the product to help get you going creating pages, using widgets, and sharing your results with your colleagues. Putting these pieces together, you're now armed with a set of pointers that will help optimize your experience with this powerful platform.

We hope to have shown you how Mashup Center's robust toolkit lets you develop data-driven applications in hours and days, and not weeks and months, as often required by conventional development.

Resources

Learn

Get products and technologies

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. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. 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, Web development
ArticleID=764967
ArticleTitle=IBM Mashup Center — Need-to-know tips and tricks, Part 2: Building mashups and leveraging widgets
publish-date=10132011