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 that every gadget includes a version of jQuery is 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. To make it work, the applied gadget must use the CSS classes defined in gadget-common.css (at least for the gadget title) like the sample gadget below:
<Module>
<ModulePrefs title="Sample gadget"/>
<Content type="html">
<head>
<link href="/exo-gadget-resources/skin/exo-gadget/gadget-common.css" rel="stylesheet" type="text/css"/>
<script language="javascript" src="/exo-gadget-resources/script/jquery/1.6.2/jquery.min.js" type="text/javascript"/>
<script language="javascript" type="text/javascript">
$(function(){
alert("Hello from jQuery"); (3)
});
</script>
</head>
<body>
<div class="UIGadgetThemes">
<div class="TitGad ClearFix">
<div class="ContTit">Gadget title</div> (1)
</div>
<div class="GadCont"> (2)
Gadget content
</div>
</div>
</body>
</Content>
</Module>
The sample gadget:
The sample user settings of a gadget
The following gadget gives the demo of a user settings screen which uses eXo Platform standard icons (setting button, list item bullet, and more) that are defined in the gadget-common.css.
<Module>
<ModulePrefs title="Setting demo">
<Require feature="dynamic-height"/>
<Require feature="setprefs"/>
</ModulePrefs>
<Content type="html">
<head>
<link href="/exo-gadget-resources/skin/exo-gadget/gadget-common.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
.SettingButton:hover {cursor:pointer;}
</style>
<script language="javascript" src="/exo-gadget-resources/script/jquery/1.6.2/jquery.min.js" type="text/javascript"/>
<script language="javascript" type="text/javascript">
$(function(){
var prefs = new gadgets.Prefs();
var defaultNumItems = 3;
function displayItems(){
var numItems = prefs.getInt("numItems") || defaultNumItems;
$("#content").html("");
for(i=0; i<=numItems; i++) {
$("#content").append("<div class='IconLink'>Item " + (i+1) + "</div>"); (3)
}
gadgets.window.adjustHeight($(".GadCont").get(0).offsetHeight);
}
$(".SettingButton").live("click", function(){
$("#txtNumItems").val(prefs.getInt("numItems") || defaultNumItems);
$("#setting").toggle();
gadgets.window.adjustHeight($(".GadCont").get(0).offsetHeight);
});
$("#btnOk").live("click", function(){
var sNumItems = $("#txtNumItems").val();
prefs.set("numItems", parseInt(sNumItems) || defaultNumItems);
$("#setting").hide();
displayItems();
});
$("#btnCancel").live("click", function(){
$("#setting").hide();
gadgets.window.adjustHeight($(".GadCont").get(0).offsetHeight);
});
displayItems();
});
</script>
</head>
<body>
<div class="UIGadgetThemes">
<div class="TitGad ClearFix">
<div class="ContTit">
Setting demo
<div class="SettingButton" style="display:block; width:20px; height:20px"/> (1)
</div>
</div>
<div class="GadCont">
<div id="setting" style="display:none;"> (2)
<label for="txtNumItems">Num of items</label>
<input id="txtNumItems" type="text"/>
<input id="btnOk" type="button" value="OK"/>
<input id="btnCancel" type="button" value="Cancel"/>
<hr/>
</div>
<div id="content"/>
</div>
</div>
</body>
</Content>
</Module>
