Warning
You are looking at documentation for an older release. Not what you want? See the current release documentation.
A gadget should use static resources available in exo-gadget-resources instead of including them in their own package.
This helps reduce packaging size, avoid duplication (considering every gadget uses the same jQuery version, instead of adding each jQuery
in its own package) and take advantages of automatic skin changing/updating when exo-gadget-resources is updated.
A simple example of applying resources into a gadget is to use a JavaScript. In this example, you will add a button to the Hello World gadget and use jQuery to register an event for the button. When you click the "here" button, the color of welcome message will be changed. The source code of this example is here.
Edit
HelloGadget.xmlfile:<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs author="eXoPlatform"
title="Hello World"
directory_title="Hello World"
description="The simplest gadget">
</ModulePrefs>
<Content type="html">
<![CDATA[
<script src="/exo-gadget-resources/script/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$("body").live("click", ".hello .btn", function() {
$(".hello h6").css("color", "green");
});
</script>
<div class='hello'>
<h2>Hello</h2>
<h6>Welcome to Hello World gadget!</h6>
<p>Click <a class='btn'>here</a> to change the default color of the welcome message.
<p><i>Powered by eXo Platform.</i></p>
</div>
]]>
</Content>
</Module>
The Hello World gadget is now displayed:
Add the CSS resources of eXo Platform to make consistent between Hello World gadget and look and feel of eXo Platform which is based on Twitter Bootstrap. To do that, edit
HelloGadget.xmlto add this:<link rel="stylesheet" type="text/css" href="/eXoResources/skin/bootstrap/css/bootstrap.css" />
The look and feel of Hello World gadget is now changed:
