IBM Mashup Center MLB Demonstration file:///C:/Documents%20and%20Settings/Administrator/Desktop/MLBD...
Baseball Mashup Demonstration
In this demonstration you will learn
how to build a sample American
Baseball demonstration. This
demonstration will use:
Five Widgets
Two Feeds
A Mashup Feed
It will also teach the concept of
creating a dynamic quot;listboxquot;
selection design element (widget)
using the data viewer widget.
This demonstration is
moderately advanced. It is
highly advised that you look at the
Wiki's quot;How Toquot; section and make
yourself familiar with IBM Mashup
Center prior to attempting this
demonstration.
Baseball Mashup
Some widgets used in this
demonstration are on Lotus
Greenhouse and may not be on
your local deployment. They may
be downloaded and installed into
your local environment from
Greenhouse.
1. Create a new page called
quot;Baseball Demonstration (Your
Initials)quot;. If you are unfamiliar with
creating a new mashup page
please see the Wiki for a quot;How Toquot;
on mashup page creation:
http://www-10.lotus.com/ldd/mashupswiki.nsf
/dx/creating-and-editing-pages-in-ibm-mashup-center
Creating a New page
1 of 16 6/1/2009 12:40 PM

IBM Mashup Center MLB Demonstration file:///C:/Documents%20and%20Settings/Administrator/Desktop/MLBD...
2. The First Task is to select the
mashup page configuration icon.
By selecting this icon you will be
able to change the physical
characteristics of the page.
Mashup Page Configuration Icon
3. You should see the Properties
for Freeform Layout screen. In the
URL field for the background
image, delete the current content
and enter this:
http://www-10.lotus.com/ldd/mashupswiki.nsf/dx/
bball.jpg/$file/bball.jpg
(it would be easier to
cut-and-paste this into the URL
field)
After this your screen should look
like this:
Properties for Freeform Layout
4. Let's place a few widgets on our
screen. Place two data viewer
widgets on the screen. The data
viewer widget can be found in the
Favorites Drawer in your mashup
toolbox. Drag two of these onto
your screen (or better still, onto
the quot;baseball fieldquot;).
Screen with Two Data Viewer Widgets
2 of 16 6/1/2009 12:40 PM

IBM Mashup Center MLB Demonstration file:///C:/Documents%20and%20Settings/Administrator/Desktop/MLBD...
When you are done you should
see something like the image to
the right.
5. The catalog needs to be
opened so we can get the feed
URLs we need for our two data
viewer widgets. Use the quot;Open
Catalogquot; option to go to the
catalog. Once there select quot;List
Feedsquot;.
In the catalog there are two feeds
available for this demonstration
(on Lotus Greenhouse only)
already prepared for you. They are
called:
MLB Schedule
MLB Teams
If you select the second feed, MLB
Teams, by clicking on it you will
get the feed details. Open Catalog
You can also search for these
feeds using the search bar at the
top.
Feeds List
If you do not have these feeds in
your environment you can
download them and install them in
your catalog. They can be found
here:
http://www-10.lotus.com/ldd/mashupswiki.nsf/
dx/mlbteams.xml/
$file/mlbteams.xml
http://www-10.lotus.com/ldd/mashupswiki.nsf
/dx/MLBSchedule.xml/$file/
MLBSchedule.xml
6. In the feed details of the MLB
Teams feed copy the feed URL as
shown in the red circle on the
right.
Feed URL
3 of 16 6/1/2009 12:40 PM

IBM Mashup Center MLB Demonstration file:///C:/Documents%20and%20Settings/Administrator/Desktop/MLBD...
7. Go back to your mashup page.
Select the data viewer widget
furthest to your left and enter the
widget configuration by selecting
Edit Properities.
Past the copied feed URL into the
URL field (as show in the red circle
to the right). Then, push the
quot;Loadquot; button. Data Viewer URL for Configuration
8. We are only interested in the
team column so deselect the
quot;Sitequot; column in the Configure
Data Viewer interface.
And, change the number of rows
per view to '10'.
Data Viewer Widget Configuration
Select quot;SAVEquot; when you are
finished.
9. You should now have a list of
teams in your first data viewer
widget. You have taken the first
big step in creating this
demonstration.
Now we are going to work on
building a mashup feed.
Widget Displaying Baseball Teams
4 of 16 6/1/2009 12:40 PM

IBM Mashup Center MLB Demonstration file:///C:/Documents%20and%20Settings/Administrator/Desktop/MLBD...
10. You need to return to the
catalog for this step. You can do
so by selecting Open Catalog from
this menu:
Creating a Feed Mashup
Once there you need to select
quot;New Feed Mashupquot;.
Feed Operators
You will see the data mashup
editor and now we need to build a
mashup feed for our Baseball
demonstration.
11. Let's start creating our Feed
Mashup. To do this first
drag-and-drop a Source operator
from the operator toolbar. Onto the
main work screen.
This will bring up the Details for
the Source operator screen. In the
Source select quot;From Catalogquot;. And
select quot;browsequot;.
Source Operation Details
You will now see a quot;Choose From
Catalogquot; interface. Press the arrow
at the bottom until you see the
feed titled quot;MLB Schedulequot;.
You can also search for this feed
by typing it in the top input box
and clicking on the quot;Searchquot;
5 of 16 6/1/2009 12:40 PM

IBM Mashup Center MLB Demonstration file:///C:/Documents%20and%20Settings/Administrator/Desktop/MLBD...
button.
Select this feed by clicking on it. It
will turn a darker color. Then
select quot;OKquot;.
Select the quot;Xquot; to close the details
view of the Source operator.
Selection Interface from Catalog
12. Drag-and-drop a Filter
operator from the operator toolbar
near the Source operator. Connect
them from the Source operator to
the Filter operator by dragging the
plug icon:
Drag the Filter plug into the
Publish operator using the same
method. Filter Operator and Connecting
When done your Mashup Feed will
look something like the image on
the right.
6 of 16 6/1/2009 12:40 PM

IBM Mashup Center MLB Demonstration file:///C:/Documents%20and%20Settings/Administrator/Desktop/MLBD...
13. Click on the Filter operator in
your Feed Mashup screen.
A Details screen will appear.
Select the down arrow in the Input
element field. A list of components
of the feed will appear.
Expand the content element.
Expand the row element.
Now select (without expanding)
the Home_Team element.
Input Elements for Filter
This element is the feed
component that has the
Home_Team information we need
to build our listbox.
After you have completed this step Filter Filter Element Display
the screen will look like the image
to the right.
14. Change the Comparison field
to quot;=quot;.
Then select the down arrow in the
Value field and select quot;Use a
variable to return the valuequot;. Filter Comparison Details
You will now see a screen that
looks like the one to the right
appear. This screen is for
7 of 16 6/1/2009 12:40 PM

IBM Mashup Center MLB Demonstration file:///C:/Documents%20and%20Settings/Administrator/Desktop/MLBD...
providing details on the Variables
you are going to be working with.
Filter Variables
15. In the Variables detail screen
enter quot;MLBTeamquot; in the variable
Name field.
Then click quot;OKquot;.
We also want to add another filter
for this feed so that quot;MLBTeamquot;
can also be equal to the visiting
team. You can do this by adding
an additional item in the filter
operator. Click on the quot;plusquot; icon
on the filter operator detail page: quot;Home Teamquot; Variable
Using quot;Away_Teamquot; for Content
This will bring up a new filter item
with its associated properties.
Return to step 13 and repeat all
the steps leading up clicking on
the quot;plusquot; icon. The only change
to make is that in the Input
8 of 16 6/1/2009 12:40 PM

IBM Mashup Center MLB Demonstration file:///C:/Documents%20and%20Settings/Administrator/Desktop/MLBD...
Element, choose the Away_Team
element. All the other items
including the quot;=quot; and the variable
name, should be the same for this
new item.
Be sure to select quot;Anyquot; in the quot;of
the following conditions must be
satisfiedquot; box. We want to be able
to select either the home or away
team.
When complete it should look like
the image to the right.
Final Filter Detail Screen
Close the Filter details screen by
clicking on the quot;Xquot;.
16. Click on the Publish operator.
Change the feed type to quot;ATOMquot;.
This will make the feed accessible
in the widgets we are going to use
for our demonstration.
Publish Operator Details
17. Select quot;SAVEquot; which is
located above the operator toolbar.
Enter a name for the feed name
and description. The
recommended name is: Naming the Feed
MLB FeedMashup (<YOUR
INITIALS>
9 of 16 6/1/2009 12:40 PM

IBM Mashup Center MLB Demonstration file:///C:/Documents%20and%20Settings/Administrator/Desktop/MLBD...
18. You will now see the feed
details page for the feed we just
created.
Click on quot;View Feedquot;.
Viewing the Feed
19. You will be prompted to enter
the variable for the feed which we
created. The variable parameter is
quot;MLBTeamquot;. Let's enter a MLB
team for this feed.
Enter quot;New York Yankeesquot;
Entering Parameters or Variable Value
10 of 16 6/1/2009 12:40 PM

IBM Mashup Center MLB Demonstration file:///C:/Documents%20and%20Settings/Administrator/Desktop/MLBD...
20. You will now see the feed's
XML displayed as shown on the
right. Copy the URL of the feed in
the URL bar of the browser you
are using.
The URL should look something
like this:
https://greenhouse.lotus.com/mashuphub/
client/plugin/generate/entryid/443/
pluginid/10?MLBTeam=New%20York%20Yankees
You can use <CTRL><C> to copy
from the browser's URL bar.
Feed XML
21. Now, go back to Lotus
Mashups and the mashup we
were building. We need to use a
special widget tool to get the feed
we just created integrated with our
second data viewer widget. That
way when we click on a team, the
second widget will show us the
games that selected quot;Home Teamquot; Regular Expression Widget Selection
is playing.
To do this we need to drag a new
widget onto the page from our
toolbar. The widget is in the
quot;Toolsquot; drawer and is called
quot;Regular Expressionquot;.
Drag and drop this widget onto
your page. Regular Expression Widget Display
11 of 16 6/1/2009 12:40 PM

IBM Mashup Center MLB Demonstration file:///C:/Documents%20and%20Settings/Administrator/Desktop/MLBD...
22. We need to do some wiring of
our widgets on the mashup page.
You should already be familiar
with how to wire widgets. The first
widget we want to wire in the data
viewer widget that has the quot;Home
Teamsquot; displayed. Click on the
wiring icon for that widget and
bring up the wiring interface.
Select quot;Select Cell As Textquot; in the
send tab.
Select the quot;Regular Expressionquot;
widget as the widget to receive the
wiring event.
Wiring of Widgets
The quot;Regular Expressionquot; widget
only has one action, quot;Accept
Dataquot;. Place a check in the box
and click done.
12 of 16 6/1/2009 12:40 PM

IBM Mashup Center MLB Demonstration file:///C:/Documents%20and%20Settings/Administrator/Desktop/MLBD...
23. We need to wire the quot;Regular
Expressionquot; widget to the other
data viewer widget on our mashup
page. To do this go to the
quot;Regular Expressionquot; widget and
select the wiring icon.
We want to send this content to
the quot;Data Viewerquot; widget that is
currently empty. Make sure you
select the correct quot;Data Viewerquot;
widget. They will turn a light red
when you hover over them with
your mouse. This is the easiest
way of identifying them.
The action we want is quot;Accept
Feed URLquot;. When you have
placed a check in the box for this
action, select Done.
Wiring of Widgets
24. We need to configure our
quot;Regular Expressionquot; widget. To
do this click on the settings icon of
the widget.
When the properities screen
appears you will need to enter into
the first field, quot;use event data to
replace variablesquot;. You need to
paste in this field the URL of the
feed we created before. This
should still be in your clipboard
from step 20.
The easiest way to do this is to use
the paste shortcut of <CTRL><V>.
After the feed URL is in the string Configuration of the Regular Expression Widget
field you need to make one more
change to this string. Go to the
end of the pasted URL of the feed.
13 of 16 6/1/2009 12:40 PM

IBM Mashup Center MLB Demonstration file:///C:/Documents%20and%20Settings/Administrator/Desktop/MLBD...
Delete everything after the quot;=quot; (i.e.
New York Yankees) and replace it
with ${0}.
The end of the feed URL will now
look something like this:
MLBTeam=${0}
This special set of characters will
allow the regular expression
widget to replace the team name
with the team you select in the
data viewer widget that has the
team list.
When you are done, click quot;Savequot;.
25. Your mashup should now
work. When you click on a quot;Home
Teamquot; in the first data viewer
widget you will see a
corresponding change in the other
data viewer widget showing the
game schedule for that team.
Resulting Display in the Second Data Viewer Widget
26. Let's add some additional
information about these games; a
map and weather information.
Drag the quot;OpenStreet Mapquot; and
quot;Accuweatherquot; widgets onto the
mashup screen from the demo
drawer in your toolbox.
Note: these widgets are on Lotus
Greenhouse and may not be on
your local deployment. Thay can
be downloaded from Greenhouse
and imported into your
environment.
Adding Accuweather and OpenStreet Map
14 of 16 6/1/2009 12:40 PM

IBM Mashup Center MLB Demonstration file:///C:/Documents%20and%20Settings/Administrator/Desktop/MLBD...
27. We need to wire these widgets
to the second quot;Game Schedulequot;
data viewer widget. Go to the quot;data
viewerquot; widget that has the game
schedule displayed in it and enter
the wiring interface.
Go to the send tab.
Wire the content quot;string from Sitequot;
to the OpenStreet Map. Select the
action quot;locationquot;.
Click Done.
Reopen the wiring interface and
select the content quot;string from
Zipquot;. Then choose the widget
quot;Accuweatherquot; and the associated
action quot;Zipcodequot;.
Click Done.
You have now wired the map to
display the location of the baseball
park where the game is to be
played. Additionally the zipcode of
the ballpart will be sent to the
accuweather widget to display the
weather at the site location.
Click on some of the games to
display the map and weather.
Clicking on:
in both data viewer widgets gives
you a good idea of how all of the
widgets now work together.
15 of 16 6/1/2009 12:40 PM

IBM Mashup Center MLB Demonstration file:///C:/Documents%20and%20Settings/Administrator/Desktop/MLBD...
28. Let's do some housekeeping.
In the configuration for the
OpenStreet Map select quot;Clear
markers . . . quot;. This will keep the
map from displaying multiple
locations. This way it will only
display the location we specify in
selecting the game schedule.
OpenStreet Map Cleanup
Hide the quot;Regular Expressionquot;
widget. This will make the mashup
page cleaner.
Change the way the Accuweather
widget looks. This can be done in
the Accuweather widget's
configuration.
Select quot;3 days forecast(435x90)quot; to Hiding Widget
give it a smaller and more easily
readable look.
Finally resize and move the
widgets around the page to give
them a more functional look.
The beautiful thing about mashup
technology is that your design and Accuweather Configuration
placement of widgets will always
be specific to you. The image
below is mine:
Final Mashup Page
16 of 16 6/1/2009 12:40 PM