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 the resources of exo-gadget-resources
are updated to the new eXo Platform skin.
A simple example of applying resources into a gadget is to use a JavaScript. In particular, you will add a button to the Hello World gadget and to use jQuery to register an event for the button. When you click the "here" button, the color of wellcome message will be changed.
Add the following content to HelloGadget.xml
:
<?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, add <link rel="stylesheet" type="text/css" href="/eXoResources/skin/bootstrap/css/bootstrap.css" /> to the HelloGadget.xml
file that is similar to adding JavaScript to a portlet.
The look and feel of Hello World gadget is now changed: