This chapter is from the book
This chapter is from the book
This chapter is from the book
Implementing a Simple Mashup
This section demonstrates the application of concepts discussed in this chapter to create a simple presentation-oriented mashup. Apart from a local service platform, the sources used for the mashup are publicly available and provide either a service API, an RSS data feed, or a dynamic script feed. This section does not discuss issues such as application keys, security, and governance for this mashup; these topics are discussed in depth in later chapters.
For the sake of complete coverage of the mashup domains discussed, the mashup will make service calls and retrieve data from external sites as well as a local service platform that operates around the model illustrated in Figure 1.11.
)
Figure 1.11 Services platform architecture
Figure 1.11 illustrates a service platform that uses only a small number of primary components to process service and resource requests. The platform uses the Representational State Transfer (REST) approach (to be discussed later) for service and resource request/responses. The service platform provides access to services and uses a simple resource framework to create, retrieve, update, and delete resources.
The application (shown in Listing 1.8 and in Figure 1.12) allows users to view disparate data that might be available in a typical enterprise. The data is presented in a portal-like manner to simplify the layout and UI-management code. The application integrates a list of corporate documents, a map feed, an RSS feed, a calendar gadget, a Twitter counter chicklet, and a Twitter archive list delivered as RSS.
)
Figure 1.12 Presentation-oriented mashup example
Listing 1.8. Presentation-Oriented Mashup Using Aggregated UI Artifacts
<html> <head> <!-- Include Google Maps Javascript Library --> <script type="text/javascript" src="https://maps.google.com/maps?file=api&v=1& key= ABQIAAAA01HpWF7mf2aW91RNaGDc7xTfGML3OZxtDDthfq-aZ1uFtrk9MRS_VWEizymnfki_h89lqU7A0ts2PA"> </script> <script type="text/javascript">
Figure 1.12 illustrates the final result of the presentation-oriented mashup example discussed in this section.
The load function in Listing 1.9 retrieves a hard-coded Google map and applies it to the map div element in the HTML DOM.
Listing 1.9. Applying a Google Map to a Web Page
function load()
{
if (GBrowserIsCompatible())
{
// create map component in div with the id = "map"
var map = new GMap2(document.getElementById("map"));
// create map components components
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
// create center point when map is displayed
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.openInfoWindow(map.getCenter(),
"<b>Your Company Here</b>");
// re-open the info balloon if they close it
var point = new GLatLng(37.395746, -121.952234);
map.addOverlay(createMarker(point, 1));
}
}
function createMarker(point, number)
{
var marker = new GMarker(point);
// create clickable point with title for address
GEvent.addListener(marker, "click", function()
{
marker.openInfoWindowHtml("<b>Your Company Here</b>");
});
return marker;
}
function retrieveExternalData()
{
var script = document.createElement("script");
script.src =
'http://www.example.com/mashups/someservice';
script.type = 'text/javascript';
document.body.appendChild(script);
}
</script>
</head>
<body onload="load()">
In the example shown in Listing 1.10 a div element is added to contain a list of corporate documents retrieved from a Google Docs account using dynamic script.
Listing 1.10. Dynamic Script to Show a List of Documents
<!-- div to hold documents -->
<div id="docs"
style="border-style:ridge; position: absolute;
left: 10px; top: 10px; width:200px; height:930px">
<script src="https://gmodules.com/ig/ifr?
url=http://www.google.com/ig/modules/docs.xml
&up_numDocuments=9&up_showLastEdit=1
&synd=open&w=180&h=860
&title=Company+Documents
&lang=en&country=ALL
&border=%23ffffff%7C3px%2C1px+solid+%23999999
&output=js"></script>
</div>
Listing 1.11 illustrates a div element that will hold the results from the Google map retrieval.
Listing 1.11. Element to Contain a Google Map
<div id="map"
style="border-style:ridge; position: absolute;
left: 220px; top: 10px; width:400px; height:300px">
</div>
In Listing 1.12 a div element is added to contain an RSS feed using dynamic script.
Listing 1.12. Element to Contain an RSS Feed
<!-- div to hold RSS feed -->
<div id="feed"
style="border-style:ridge; position: absolute;
left: 630px; top: 10px; width:400px; height:300px">
<script src="https://gmodules.com/ig/ifr?
url=http://customrss.googlepages.com/customrss.xml
&up_rssurl=http%3A%2F%2Fwww.javaworld.com%2Findex.xml
&up_title=CustomRSS
&up_titleurl=http%3A%2F%2Fcustomrss.googlepages.com
&up_num_entries=10&up_linkaction=showdescription
&up_background=E1E9C3&up_border=CFC58E
&up_round=1&up_fontfamily=Arial
&up_fontsize=8pt&up_openfontsize=9pt
&up_itempadding=3px&up_bullet=icon
&up_custicon=Overrides%20favicon.ico
&up_boxicon=1&up_opacity=20
&up_itemlinkcolor=596F3E&up_itemlinkweight=Normal
&up_itemlinkdecoration=None&up_vlinkcolor=C7CFA8
&up_vlinkweight=Normal&up_vlinkdecoration=None
&up_showdate=1&up_datecolor=9F9F9F
&up_tcolor=1C57A9&up_thighlight=FFF19D
&up_desclinkcolor=1B5790&up_color=000000
&up_dback=FFFFFF&up_dborder=DFCE6F
&up_desclinkweight=Bold&up_desclinkdecoration=None
&synd=open&w=380&h=240&title=JavaWorld
&border=%23ffffff%7C3px%2C1px+solid+%23999999
&output=js"></script>
</div>
Listing 1.13 shows a div element to contain a Google calendar retrieved using a JavaScript badge.
Listing 1.13. Google Calendar Element
<!-- div to hold calendar -->
<div id="calendar"
style="border-style:ridge; position: absolute;
left: 220px; top: 320px; width:810px; height:620px">
<iframe src="https://www.google.com/calendar/embed?
src=o78s3eqe3ov403cpuav2bje5ja9j1tp2%40
import.calendar.google.com&ctz=America/Denver"
style="border: 0"
width="800" height="600" frameborder="0" scrolling="no">
</iframe>
</div>
Shown in Listing 1.14 is a div element to contain the Twitter counter chicklet.
Listing 1.14. A div Element to Contain a Twitter Chicklet
<!-- div to hold the Twitter counter chicklet -->
<div id="chicklet"
style="border-style:ridge; position: absolute;
left: 1040px; top: 10px; width:200px; height:40px">
<a href="http://twittercounter.com/?username=jhanson583"
title="TwitterCounter for @jhanson583"><img src="https://twittercounter.com/
counter/?username=jhanson583"
width="88"
height="26"
style="border:none;"
alt="TwitterCounter
for @jhanson583" /></a>
</div>
Listing 1.15 illustrates the div element to contain the Twitter RSS feed using dynamic script.
Listing 1.15. Twitter RSS Feed div Element
<!-- div to hold twitter feed -->
<div id="ufbadge"
style="border-style:ridge; position: absolute;
left: 1040px; top: 60px; width:200px; height:880px">
<script src="https://pipes.yahoo.com/js/listbadge.js">
{"pipe_id":"dq0Qhuqp3BG1psChjtzu1g",
"_btype":"list",
"pipe_params":{
"urlRSS":"http:\/\/twitter.com
\/statuses\/user_timeline\/10852552.rss"},
"width":"190",
"height":"870"}
</script>
</div>
In Listing 1.16 I add the div element to contain the local RSS feed using dynamic script.
Listing 1.16. RSS Feed Element
<!-- div to hold local RSS feed -->
<div id="localfeed"
style="border-style:ridge; position: absolute;
left: 10px; top: 950px; width:1210px; height:200px">
<script src="https://localhost:8080/mashups/js/rssbadge.js">
{"urlRSS":"http:\/\/localhost:8080
\/mashups\/services\/feeds\/zurn.rss"}
</script>
</div>
</body>
</html>
The mashup in the preceding example illustrates many different techniques and technologies as applied to a simple presentation-oriented mashup. In the next chapter I discuss the preparations that need to be made before building an enterprise mashup.