Wednesday January 24, 2007
Mark A. Basler's Weblog
Adding Mashups like Digg to your page
Recently I added a mashup to Digg in the soon to be released Java
Blueprint Solutions Catalog viewer. It was as easy as
formulating a URL
with the appropriate query string that is dynamically populated as the
user clicks on the different articles/examples that the viewer
combines.

When the Digg image is clicked then the required information is sent to
digg.com in the query string of the
request. The Digg site then parses the request and continues
prompting the user. If the article exists, Digg will display it
and
prompt the user for comments (below), if it doesn't exist then the user
can
submit the article for others to Digg. For example this Article
URL will show something like the page below from Digg:

When creating mashups, there are different types of techniques to consider like, client-side mashups, server-side mashups and delegated mashups. Each have specific applications that they are suited for and are briefly described below:
Client-Side Mashup
A client-side mashup is where the integration/interaction with the mashup occurs in the client, like a browser. Google Maps is a great example of a client-side mashup. To utilize Google Maps you include Google's Javascript file in your web page and use the document API to create a wide variety of user interactive maps. Google also provides numerous examples to get your page prototyped quickly. The Blueprints Solutions Catalog wrapped the Google Maps functionality in an easy to use JSF 1.2 component that you can utilized by simply packaging the component jar with your application. This component jar is also used in the Petstore 2.0 reference application, so you can take a look at the component in action.
Server-Side Mashup
A server-side mashup has a server component that acts as a proxy to an exposed service. The server-side component(s) could add custom functionality to an exposed service, consolidate multiple exposed services or just pass through the result directly to the client for use. This type of mashup is used in the Petstore 2.0 reference application to retrieve the GeoCoding of an address for presentation on the Google Map and for retrieving an RSS feed for the news bar that is in the header of each page. The Blueprints Solutions Catalog wrapped the RSS bar into an easy to use JSF 1.2 component that you can utilized by simply packaging the component jar with your application.
Delegated Mashup
A delegated mashup is when information is forwarded to a site that then presents the result for the request. Like Digg, there are many other sites that use this form of interaction. PayPal is another example of a delegated mashup where a request is submitted to the PayPal site and then they continue prompting the user. Some sites like PayPal even provide a parameter for a call-back URL in the query string of the request. Once PayPal finishes the transaction, a request is sent to the call-back URL with optional custom fields populated. The Blueprints Solutions Catalog wrapped the PayPal functionality in an easy to use JSF 1.2 component that you can utilized by simply packaging the component jar with your application. This component jar is also used in the Petstore 2.0 reference application, so you can take a look at the component in action.
This is just an quick introduction to mashup techniques that were used in the Blueprints Solutions Catalog and the Petstore 2.0 reference applications. We will be writing a full blown article on this topic that will cover these subjects and more in greater depth and will also include coding samples.
To get notified of the release for any of Java Blueprints projects, you can check the RSS feed located on blueprints.dev.java.net.
Hope this helps ...
Thanks - Mark
Posted by basler Jan 24 2007, 02:35:44 PM PST Permalink
Comments are closed for this entry.

