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!