Gadgets in Sakai2

It may not be immediately apparent but one way of developing applications to run in Sakai2 is to use a Google Gadgets based approach. Sakai 2 uses iframes as its mechanism for placing tools, and this is the same mechanism as used by Google Gadgets. With some care in the way the Gadget is coded, the CSS used and the JavaScript its possible to create a Gadget for Sakai 2 that exposes functionality hosted from a departmental server. This page explains how to create a Google Gadget for Sakai 2.

If you are thinking of Sakai 3, then this supports Google Gadgets and Sakai Widgets, so work using this approach will be appropriate inside Sakai 3. If you are really thinking about functionality in Sakai 3, then the Sakai Widget approach will give you a much better user experience since it does not use any iframes.

Best Practices

When you develop a widget that you want to use inside Sakai, there are some general best practices on how to write it.

External CSS

• It's always a good idea to keep your CSS external. This makes it faster when you load your widget several times, it is more manageable and it is easier to convert you widget from Sakai 2 to 3.
• (put the following code in your head tag)

   <link type="text/css" href="/devwidgets/filemanager/css/filemanager.css"  />
  

External JavaScript

• The same rule counts for JavaScript files. You should always separate your JavaScript from the (x)HTML code and put it in another file. (so avoid using onlick="")

•  <script type="text/javascript" language="JavaScript" src="/devwidgets/filemanager/lib/jquery.accordion.js" ></script>
  

Use labels

• For accessibility purposes always use labels in combination with a input type "text", "checkbox", ... and with textareas.

• <input type="checkbox" name="filemanager_option_public" id="filemanager_option_public" />
  <label for="filemanager_option_public">Public</label>
  

Install

Sakai 2

When you have created a new site, you are able to add an external widget by following these steps:

1. Go to "Site Info" and click on "Edit Tools" in the top navigation bar.
2. Check the box next to "Web Content" ("For accessing an external website within the site.")
3. Fill in the appropriate title and source (which is the page where your gadget is located).
4. Click "Continue" and click "Finish".

Camtools 2008

In camtools 2008 the way you add gadgets is slightly different.

To add a gadget, you'll need to modify the widgets.js file (which is located under /tomcat/webapps/ROOT). In that file you can find a list of all the widgets/gadgets that are currently used by Camtools. Some of them are locally installed and others are remote.

Your own entry could look like this:

 library :
                {
                        description:"Cambridge Libraries Widget\r\n",
                        iframe:1,
                        url:"http://www.lib.cam.ac.uk/widget.cgi?origin=https://camtools.cam.ac.uk",
                        name:"Cambridge Libraries",
                        id:"library",
                        height:350,
                        portal:1,
                        scroll: true
                }

Explanation of the properties & values

description: It's a common best practice to always add a good description. This description will show up if you'll add the file
iframe: 1 or 0: if this is 1, an iframe will be used to insert the gadget. If you have an external widget this should be 1.
url: The url of the widget
id: The id of the gadget should be the same as the parent object name and should be unique.
height: Height of the iframe gadget (you don't need this property with a embedded widget.
portal: 1 or 0: Should be 1 if you want it to appear on the portal page.
scroll: true/false: If this is true, the iframe will have scrollbars when the content inside is bigger than the height property you've set.

Add it to the portal

To add the gadget to your own portal, you click on "customize" next to the  "My Startpage".
There you should see your entry from the widget.js file and check the box next to it.
Just hit "update" and see if it correctly shows up on your start page.