The feed mashup builder is where mashups are created. The drag and drop environment enables mashup creation by importing and manipulating data in a visual environment via a browser.
Estimated time to complete this lesson: 15 minutes
This lesson explores how to use the feed mashup builder, how to place operators on the canvas, and how to connect operators.
: In this lesson you walk through some of the steps to create a feed mashup, but the feed mashup will not be saved. This is to help you become familiar with using the feed mashup builder.
1. To launch the feed mashup builder, select New Feed Mashup
under the Create
category from the MashupHub home tab.
2. The feed mashup builder appears in a new tab as the following image shows. The left part of the page contains the operators that are used to create the mashup. The large area to the right is called the canvas, where the operators are placed and then manipulated to modify the data.
3. Operators are placed on the canvas by double-clicking them or dragging them to the canvas. Once they appear on the canvas, they are connected by placing the plug of one operator into the socket of the next. The data flows from one operator to the next, and the effect the operator has on the data can be viewed at any time.
4. Every mashup must be started with a Source
operator. The source operator provides the required data for the mashup.
a. Double-click the Source
operator from the left side of the feed mashup builder. The operator is placed on the canvas.
An alternate method is to click and drag the operator from the left side of the feed mashup builder to the canvas.
5. The Details
The first operator placed on a new canvas of the feed mashup builder automatically opens the Details
window. Each subsequent operator must be clicked to open the Details
a. From the Details
window click the Load
button from the Properties
tab for the URL
: The URL field is pre-populated with a sample URL so you can load the URL and see what the results look like in the Preview
The following image shows what the Details
window looks like:
b. Click the Preview
tab to see the output from the feed. Expand the tree structure under the result
element to view the individual entries of the IBM Software News
c. Close the Details
window after you have finished viewing the feed.
6. Once a Source
operator is added to the mashup, the next operator placed on the canvas receives the data from the Source
operator by dragging the plug from the Source
to the socket of the next operator.
a. Place a Filter
operator on the canvas and pull the plug from the Source
operator to the socket of the Filter
The yellow box should appear around the operator being plugged in to if the connection is valid. If you are having trouble connecting the operators, make sure you see this yellow box around the operator before you let go of the plug.
Another way to connect operators is to right-click the first operator and select Connect to
. Then chose the operator from the list you want to connect to. In this example the Source
operator is right-clicked and the Filter
operator is chosen as the operator to connect to.
b. To open the Details
window for the Filter
operator, click the Filter
7. The data now flows from the Source
operator to the Filter
operator. This is a demonstration of how to connect the operators and bring up the Details
window, but we haven't talked yet about how to create a meaningful feed mashup. Don't save the mashup at this time.
a. Close the Details
window and close the tab for the unsaved mashup.
Before you create your first mashup in an upcoming lesson, it is a good idea to gain a basic understanding of what each operator in the feed mashup builder is capable of. The next lesson explains what each mashup builder operator is used for.
Lesson 2: Understanding the Feed Mashup Builder Operators V1.0
MashupHub Tutorial - Table of Contents:
Welcome to MashupHub V1.0
Module 1: Introduction to MashupHub V1.0
Module 2: Creating Feeds V1.0
Module 3: Creating Feed Mashups V1.0
Module 4: Using MashupHub Objects in Lotus Mashups V1.0
Module 5: Additional Resources and Summary V1.0