Child pages
  • Sakai - External gadget - Best practices & Install

Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

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.


  • 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)
    Code Block
     <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="")
  • Code Block
     <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.
  • Code Block
    <input type="checkbox" name="filemanager_option_public" id="filemanager_option_public" />
    <label for="filemanager_option_public">Public</label>