Mark A. Basler's Weblog

All | Java
20070124 Wednesday January 24, 2007

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.  

Blueprints Solutions Catalog Viewer


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:

Digg mashup result page



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:

Post a Comment:

Comments are closed for this entry.