mlb demo1

In this demonstration you will learnhow to build a sample AmericanBaseball demonstration. Thisdemonstration will use:

Five WidgetsTwo FeedsA Mashup Feed

It will also teach the concept ofcreating a dynamic "listbox"selection design element (widget)using the data viewer widget.

This demonstration ismoderately advanced. It ishighly advised that you look at theWiki's "How To" section and makeyourself familiar with IBM MashupCenter prior to attempting thisdemonstration.

Some widgets used in thisdemonstration are on LotusGreenhouse and may not be onyour local deployment. They maybe downloaded and installed intoyour local environment fromGreenhouse.

Baseball Mashup

1. Create a new page called"Baseball Demonstration (YourInitials)". If you are unfamiliar withcreating a new mashup pageplease see the Wiki for a "How To"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

Baseball Mashup Demonstration

IBM Mashup Center MLB Demonstration file:///C:/Documents%20and%20Settings/Administrator/Desktop/MLBD...

1 of 16 6/1/2009 12:40 PM

2. The First Task is to select themashup page configuration icon.By selecting this icon you will beable to change the physicalcharacteristics of the page.

Mashup Page Configuration Icon

3. You should see the Propertiesfor Freeform Layout screen. In theURL field for the backgroundimage, delete the current contentand enter this:

http://www-10.lotus.com/ldd/mashupswiki.nsf/dx/bball.jpg/$file/bball.jpg

(it would be easier tocut-and-paste this into the URLfield)

After this your screen should looklike this:

Properties for Freeform Layout

4. Let's place a few widgets on ourscreen. Place two data viewerwidgets on the screen. The dataviewer widget can be found in theFavorites Drawer in your mashuptoolbox. Drag two of these ontoyour screen (or better still, ontothe "baseball field").

Screen with Two Data Viewer Widgets


2 of 16 6/1/2009 12:40 PM

When you are done you shouldsee something like the image tothe right.

5. The catalog needs to beopened so we can get the feedURLs we need for our two dataviewer widgets. Use the "OpenCatalog" option to go to thecatalog. Once there select "ListFeeds".

In the catalog there are two feedsavailable for this demonstration(on Lotus Greenhouse only)already prepared for you. They arecalled:

MLB ScheduleMLB Teams

If you select the second feed, MLBTeams, by clicking on it you willget the feed details.

You can also search for thesefeeds using the search bar at thetop.

If you do not have these feeds inyour environment you candownload them and install them inyour catalog. They can be foundhere:

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

Open Catalog

Feeds List

6. In the feed details of the MLBTeams feed copy the feed URL asshown in the red circle on theright.

Feed URL


3 of 16 6/1/2009 12:40 PM

7. Go back to your mashup page.Select the data viewer widgetfurthest to your left and enter thewidget configuration by selectingEdit Properities.

Past the copied feed URL into theURL field (as show in the red circleto the right). Then, push the"Load" button. Data Viewer URL for Configuration

8. We are only interested in theteam column so deselect the"Site" column in the ConfigureData Viewer interface.

And, change the number of rowsper view to '10'.

Select "SAVE" when you arefinished.

Data Viewer Widget Configuration

9. You should now have a list ofteams in your first data viewerwidget. You have taken the firstbig step in creating thisdemonstration.

Now we are going to work onbuilding a mashup feed.

Widget Displaying Baseball Teams


4 of 16 6/1/2009 12:40 PM

10. You need to return to thecatalog for this step. You can doso by selecting Open Catalog fromthis menu:

Once there you need to select"New Feed Mashup".

You will see the data mashupeditor and now we need to build amashup feed for our Baseballdemonstration.

Creating a Feed Mashup

Feed Operators

11. Let's start creating our FeedMashup. To do this firstdrag-and-drop a Source operatorfrom the operator toolbar. Onto themain work screen.

This will bring up the Details forthe Source operator screen. In theSource select "From Catalog". Andselect "browse".

You will now see a "Choose FromCatalog" interface. Press the arrowat the bottom until you see thefeed titled "MLB Schedule".

You can also search for this feedby typing it in the top input boxand clicking on the "Search"

Source Operation Details


5 of 16 6/1/2009 12:40 PM

button.

Select this feed by clicking on it. Itwill turn a darker color. Thenselect "OK".

Select the "X" to close the detailsview of the Source operator.

Selection Interface from Catalog

12. Drag-and-drop a Filteroperator from the operator toolbarnear the Source operator. Connectthem from the Source operator tothe Filter operator by dragging theplug icon:

Drag the Filter plug into thePublish operator using the samemethod.

When done your Mashup Feed willlook something like the image onthe right.

Filter Operator and Connecting


6 of 16 6/1/2009 12:40 PM

13. Click on the Filter operator inyour Feed Mashup screen.

A Details screen will appear.Select the down arrow in the Inputelement field. A list of componentsof the feed will appear.

Expand the content element.Expand the row element.

Now select (without expanding)the Home_Team element.

This element is the feedcomponent that has theHome_Team information we needto build our listbox.

After you have completed this stepthe screen will look like the imageto the right.

Input Elements for Filter

Filter Filter Element Display

14. Change the Comparison fieldto "=".

Then select the down arrow in theValue field and select "Use avariable to return the value".

You will now see a screen thatlooks like the one to the rightappear. This screen is for

Filter Comparison Details


7 of 16 6/1/2009 12:40 PM

providing details on the Variablesyou are going to be working with.

Filter Variables

15. In the Variables detail screenenter "MLBTeam" in the variableName field.

Then click "OK".

We also want to add another filterfor this feed so that "MLBTeam"can also be equal to the visitingteam. You can do this by addingan additional item in the filteroperator. Click on the "plus" iconon the filter operator detail page:

This will bring up a new filter itemwith its associated properties.Return to step 13 and repeat allthe steps leading up clicking onthe "plus" icon. The only changeto make is that in the Input

"Home Team" Variable

Using "Away_Team" for Content


8 of 16 6/1/2009 12:40 PM

Element, choose the Away_Teamelement. All the other itemsincluding the "=" and the variablename, should be the same for thisnew item.

Be sure to select "Any" in the "ofthe following conditions must besatisfied" box. We want to be ableto select either the home or awayteam.

When complete it should look likethe image to the right.

Close the Filter details screen byclicking on the "X".

Final Filter Detail Screen

16. Click on the Publish operator.Change the feed type to "ATOM".This will make the feed accessiblein the widgets we are going to usefor our demonstration.

Publish Operator Details

17. Select "SAVE" which islocated above the operator toolbar.

Enter a name for the feed nameand description. Therecommended name is:

MLB FeedMashup (<YOURINITIALS>

Naming the Feed


9 of 16 6/1/2009 12:40 PM

18. You will now see the feeddetails page for the feed we justcreated.

Click on "View Feed".

Viewing the Feed

19. You will be prompted to enterthe variable for the feed which wecreated. The variable parameter is"MLBTeam". Let's enter a MLBteam for this feed.

Enter "New York Yankees"

Entering Parameters or Variable Value


10 of 16 6/1/2009 12:40 PM

20. You will now see the feed'sXML displayed as shown on theright. Copy the URL of the feed inthe URL bar of the browser youare using.

The URL should look somethinglike this:

https://greenhouse.lotus.com/mashuphub/client/plugin/generate/entryid/443/pluginid/10?MLBTeam=New%20York%20Yankees

You can use <CTRL><C> to copyfrom the browser's URL bar.

Feed XML

21. Now, go back to LotusMashups and the mashup wewere building. We need to use aspecial widget tool to get the feedwe just created integrated with oursecond data viewer widget. Thatway when we click on a team, thesecond widget will show us thegames that selected "Home Team"is playing.

To do this we need to drag a newwidget onto the page from ourtoolbar. The widget is in the"Tools" drawer and is called"Regular Expression".

Drag and drop this widget ontoyour page.

Regular Expression Widget Selection

Regular Expression Widget Display


11 of 16 6/1/2009 12:40 PM

22. We need to do some wiring ofour widgets on the mashup page.You should already be familiarwith how to wire widgets. The firstwidget we want to wire in the dataviewer widget that has the "HomeTeams" displayed. Click on thewiring icon for that widget andbring up the wiring interface.

Select "Select Cell As Text" in thesend tab.

Select the "Regular Expression"widget as the widget to receive thewiring event.

The "Regular Expression" widgetonly has one action, "AcceptData". Place a check in the boxand click done.

Wiring of Widgets


12 of 16 6/1/2009 12:40 PM

23. We need to wire the "RegularExpression" widget to the otherdata viewer widget on our mashuppage. To do this go to the"Regular Expression" widget andselect the wiring icon.

We want to send this content tothe "Data Viewer" widget that iscurrently empty. Make sure youselect the correct "Data Viewer"widget. They will turn a light redwhen you hover over them withyour mouse. This is the easiestway of identifying them.

The action we want is "AcceptFeed URL". When you haveplaced a check in the box for thisaction, select Done.

Wiring of Widgets

24. We need to configure our"Regular Expression" widget. Todo this click on the settings icon ofthe widget.

When the properities screenappears you will need to enter intothe first field, "use event data toreplace variables". You need topaste in this field the URL of thefeed we created before. Thisshould still be in your clipboardfrom step 20.

The easiest way to do this is to usethe paste shortcut of <CTRL><V>.

After the feed URL is in the stringfield you need to make one morechange to this string. Go to theend of the pasted URL of the feed.

Configuration of the Regular Expression Widget


13 of 16 6/1/2009 12:40 PM

Delete everything after the "=" (i.e.New York Yankees) and replace itwith ${0}.

The end of the feed URL will nowlook something like this:

MLBTeam=${0}

This special set of characters willallow the regular expressionwidget to replace the team namewith the team you select in thedata viewer widget that has theteam list.

When you are done, click "Save".

25. Your mashup should nowwork. When you click on a "HomeTeam" in the first data viewerwidget you will see acorresponding change in the otherdata viewer widget showing thegame schedule for that team.

Resulting Display in the Second Data Viewer Widget

26. Let's add some additionalinformation about these games; amap and weather information.

Drag the "OpenStreet Map" and"Accuweather" widgets onto themashup screen from the demodrawer in your toolbox.

Note: these widgets are on LotusGreenhouse and may not be onyour local deployment. Thay canbe downloaded from Greenhouseand imported into yourenvironment.

Adding Accuweather and OpenStreet Map


14 of 16 6/1/2009 12:40 PM

27. We need to wire these widgetsto the second "Game Schedule"data viewer widget. Go to the "dataviewer" widget that has the gameschedule displayed in it and enterthe wiring interface.

Go to the send tab.

Wire the content "string from Site"to the OpenStreet Map. Select theaction "location".

Click Done.

Reopen the wiring interface andselect the content "string fromZip". Then choose the widget"Accuweather" and the associatedaction "Zipcode".

Click Done.

You have now wired the map todisplay the location of the baseballpark where the game is to beplayed. Additionally the zipcode ofthe ballpart will be sent to theaccuweather widget to display theweather at the site location.

Click on some of the games todisplay the map and weather.

Clicking on:

in both data viewer widgets givesyou a good idea of how all of thewidgets now work together.


15 of 16 6/1/2009 12:40 PM

28. Let's do some housekeeping.

In the configuration for theOpenStreet Map select "Clearmarkers . . . ". This will keep themap from displaying multiplelocations. This way it will onlydisplay the location we specify inselecting the game schedule.

Hide the "Regular Expression"widget. This will make the mashuppage cleaner.

Change the way the Accuweatherwidget looks. This can be done inthe Accuweather widget'sconfiguration.

Select "3 days forecast(435x90)" togive it a smaller and more easilyreadable look.

Finally resize and move thewidgets around the page to givethem a more functional look.

The beautiful thing about mashuptechnology is that your design andplacement of widgets will alwaysbe specific to you. The imagebelow is mine:

OpenStreet Map Cleanup

Hiding Widget

Accuweather Configuration

Final Mashup Page


16 of 16 6/1/2009 12:40 PM

mlb demo1

Technology

mashup feed

baseball mashup demonstration

mashup toolbox

data mashup editor

new mashup page

mashup page creation

mlb teams feed

feed details