Liferay 6.0, OpenSocial and Gadgets

This is the first in a series of working with Gadgets on Liferay 6.0 (Part 1)#

(The second can be found here)

This wiki entry is based in the Liferay-Tomcat bundle installation. The items in your installation may differ, but all the concepts are the same.

Once you have installed Liferay and logged in, you'll be able to add your gadget to your site.

But where here do I put my gadget?

But before we start, you'll need to know where to put your gadget. A gadget can reside anywhere on the web, as long as it's available via a URL. In our case we're going to host it locally, so we'll need to do a few steps to create a place for it. If you look into the Liferay installation you'll see a structure as below.

We're going to create a new folder in the webapps directory for our gadgets. There is no special naming requirements, but we'll call it gadgets to keep track of the contents.

Now we'll copy our gadget xml to the new gadgets folder.

Your gadget could reside anywhere, we could have sub folders inside gadget or we could have separate directories for each gadget, or the gadgets could be anywhere on the internet. Just as long as they can be retrieved via a URL.

Now, let's add our gadget to a page.

Go to the Manage item in the menu, and select Control Panel.

Look for OpenSocial and select it.

You'll now be presented with a list of installed gadgets (if any) and the ability to add yours. Click the Add Gadget button.

You'll enter the gadget name, this will be the name you will search for in order to put the gadget on a page.

You'll also need to enter the full URL path for the gadget xml. It can be hosted anywhere, but we've hosted it on our local server (see But where do I put my gadget? above). Enter the URL and then click Save.

You should now see your gadget in the list of gadgets.

Now let's go back to your web site pages and put the gadget on a page. In our example we are just using the 7Cogs web site that ships with the Liferay-Tomcat bundle.

Use the Add menu and select the More item. This will give you a list of all available portlets, and since gadgets are first class citizens in Liferay (work exactly like portlets for permissions, configuration, etc) they will be available in the list as well.

Since we named our gadget Sample Gadget, I'll just search for sample. You'll see the gadgets listed under OpenSocial and can Add or drag it to your page just like any portlet.

The gadget will now appear on the page and ready to use. If the gadget has any configuration items, you'll be able to configure them (again, just like a portlet).

Look to the right of the gadget block and click on the wrench icon. This will bring up the options menu. Select the Configuration item.

Our portlet has only one configuration option for the Default Zip Code. It's not required, but if you fill it in, when you come to the page the gadget will automatically retrieve weather data for that zip code. The configuration for the gadget comes from the UserPrefs item in the gadget definition, but we'll cover that in another wiki post.

We now have a gadget on our page! And the weather forecast at Liferay Headquarters.

In the next installment we'll talk about creating your own gadget!

16 Attachments
Average (3 Votes)
The average rating is 5.0 stars out of 5.
Threaded Replies Author Date
Nice article! Keep on like that! :) Juan Fernández August 9, 2010 11:51 PM
Thanks for sharing the article. Can you plz... Sandeep Nair August 15, 2010 9:56 PM
I'll be adding a couple gadgets in follow-up... Barrie Selack August 17, 2010 9:35 AM
Hi Barrie, Nice article. Hope you are doing... Paul Martin August 17, 2010 12:19 PM
Do you have examples showing Inter gadget... Sangam S November 9, 2010 9:28 AM
Hi Sangam, We're working on implementing... Dennis Ju January 28, 2011 6:43 PM
Sorry, I am not able to find any info about... Darko Zlatic January 29, 2011 9:57 AM
Does anybody know something about gadgets and... Ralf Borchers March 9, 2011 7:41 AM
Ralf, OAuth support is implemented in the trunk... Dennis Ju May 10, 2011 12:34 AM
Most of the image links on this page are broken. Kirk Stork June 27, 2012 8:43 AM

Nice article! Keep on like that! emoticon
Posted on 8/9/10 11:51 PM.
Thanks for sharing the article. Can you plz tell me where is the sample gadget.xml that you have used for building this particular gadget. I want to see its internals.
Posted on 8/15/10 9:56 PM.
I'll be adding a couple gadgets in follow-up posts. Starting with a simple and building up to a more complicated gadget.
Posted on 8/17/10 9:35 AM in reply to Sandeep Nair.
Hi Barrie,
Nice article. Hope you are doing well!!!
When a gadget is displayed on a page, is it always displayed as and iFrame ? If so is there a way to style the gadget to have the same look and feel as the page it resides on?
Posted on 8/17/10 12:19 PM.
Do you have examples showing Inter gadget communication? Also since gadgets are also implemented via portlets, is it possible to have inter portlet-gadget communication via events in Liferay?
Posted on 11/9/10 9:28 AM in reply to Paul Martin.
Hi Sangam,

We're working on implementing inter-gadget communication at the moment. It should be available by 6.1. See LPS-15003.

Portlet-gadget communication is in the pipeline as well, but won't be available by 6.1. See LPS-15004.
Posted on 1/28/11 6:43 PM in reply to Sangam S.
Sorry, I am not able to find any info about expected date for 6.1 - any guidance is appreciated!
Posted on 1/29/11 9:57 AM in reply to Dennis Ju.
Does anybody know something about gadgets and oAuth ? I tried to integrate some of the JIRA gadgets into a Liferay 6.0.5, but without luck. I did not find a possibility to configure the oAuth properties for the gadgets.

Ever tried this?
Posted on 3/9/11 7:41 AM.
Ralf, OAuth support is implemented in the trunk build and will be available in 6.1. You can checkout the code from our SVN repository if you need it earlier. Please see this blog post for more info:
Posted on 5/10/11 12:34 AM in reply to Ralf Borchers.
Most of the image links on this page are broken.
Posted on 6/27/12 8:43 AM.