• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mlb Demo1
 

Mlb Demo1

on

  • 663 views

This presentation is a demonstration of how you can use IBM Mashup Center to build a sample American Baseball mashup. This demonstration will use five widgets, two feeds, and a mashup feed.

This presentation is a demonstration of how you can use IBM Mashup Center to build a sample American Baseball mashup. This demonstration will use five widgets, two feeds, and a mashup feed.

Statistics

Views

Total Views
663
Views on SlideShare
663
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mlb Demo1 Mlb Demo1 Document Transcript

    • 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