Création d'un widget (exemple du MOC visualizer)

sous Eclipse possibilité d'installer le plugin OSDE (OpenSocial Development Environment)

Squelette de base d'un widget :

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs
title="MOC visualizer"
author="anne camille simon"
description="this is a gadget that allows you to visualize a MOC">
<Require feature="pubsub" />
<Require feature="dynamic-height" />
<Require feature="settitle" />
<Require feature="rpc" />
</ModulePrefs>
<Content type="html">
<![CDATA[ ]]>
</Content>
</Module>


explications :

• La balise "ModulePrefs" peut prendre les attributs : title, author, description, title URL, author email, screenshot and thumbnail. (ils peuvent être modifiés dans l'onglet "basic" avec OSDE).
• La balise "Require" avec la feature :
  • "pubsub" permet la communication entre les widgets
  • "dynamic-height" permet de redimensionner le widget en fonction de son contenu
  • "settitle" permet de donner un titre au widget lorsqu'il est affiché par un container shindig
  • "rpc" permet d'établir des communications entre le gadget et le container.
• La balise "CDATA" contiendra le code du widget.

contenu d'une balise CDATA (du MOC visualizer):

<script type='text/javascript' src='js/jquery-ui/js/jquery-1.8.2.min.js'></script>
<script type='text/javascript' src='js/jquery-ui/js/jquery-ui-1.8.24.custom.min.js'></script>
<link rel='stylesheet' type='text/css' href='js/jquery-ui/css/greyblue/jquery-ui-1.10.4.custom.min.css'>

<script type="text/javascript" src="js/openapp.js"></script>
<script type="text/javascript" src="js/utilities.js"></script>
<script type="text/javascript" src="js/intergadget_communication.js"></script>

<script src="js/healpix.min.js"></script>
<script src="js/fits.min.js"></script>
<script src="js/astroMath.js"></script>
<script src="js/projection.js"></script>
<script src="js/mocviz.js" charset="utf-8"></script>

<link rel='stylesheet' type='text/css' href='css/style_1.css' />

<style>
.boxed {border: 1px solid black;}
#moc_url{width: 90%;height:auto;}
#moc_container{width: 95%; height:auto;}
</style>

<div id='moc_main' class='moc_main main'>
<div id='moc_export'></div>
<form id="moc_form" class="settings_hide">
<input type='text' id='moc_url' class='export_input' placeholder='URL of MOC to display' value='http://alasky.u-strasbg.fr/footprints/tables/vizier/V_139_sdss9/MOC' />
</form>
<div class='boxed' id="moc_container"></div>
<div>
Projection:
<input type="radio" name="moc_proj" id="projAitoff" class="export_radio" value="aitoff" checked="checked" /><label for="projAitoff">AITOFF</label>
<input type="radio" name="moc_proj" id="projCartesian" value="cartesian"><label for="projCartesian">Cartesian</label>
</div>
<div>
<input type="checkbox" name="grid" id="moc_grid" checked="checked" class="export_chbx"/><label for="moc_grid">Display grid</label>
</div>
</div>

<script>
var gadget_title = null;
var input = $('#moc_url');
var mocViz = new MOCViz('moc_container');
var url;
var showGrid = true;
var projection = 'aitoff';
var form = $('#moc_form');
var radios = document.getElementsByName('proj');

////// send the form and update the logs //////
$("#moc_form").submit(function(e){
e.preventDefault();
submit_log();
url = $('#moc_url').val();
moc_display();
return false;
});

function moc_display(){
mocViz.setProjection(projection);
if (showGrid) {
mocViz.showGrid();
}else {
mocViz.hideGrid();
}
updateURL(url);
}

////// update the URL of the MOC to display //////
function updateURL(url) {
mocViz.setURL(url);
}

////// set the projection of the map //////
$('input[type=radio][name=moc_proj]').change(function() {
projection = this.value;
mocViz.setProjection(projection);
});

////// show or hide the grid on the map //////
$( document ).on( "click", "#moc_grid", function() {
showGrid = $("#moc_grid").prop('checked');
if (showGrid) {
mocViz.showGrid();
}else {
mocViz.hideGrid();
}
});

////// when there are url parameters //////
share_gadget.moc_display_input_data = function(){
var array_url_param = share_gadget.extractUrlParams();
var inputs = 0;
var count = 0;
for (var i in array_url_param) {
if($.inArray(i, share_gadget.needed_params) >-1){
count++;
}
}

if(count ! share_gadget.needed_params.length){
$('#gadget_settings_button').html('â–¾settings');
return;
}else{
if(array_url_param["show_settings"] || array_url_param["show_settings"]! "1"){$('.settings_hide').hide();} // show settings only if the parameter "show_settings" is equal to 1
}
if(array_url_param["moc_url"]){
url = decodeURIComponent (array_url_param["moc_url"]);
$('#moc_url').val(url);
}
if(array_url_param["moc_proj"]){
projection = array_url_param["moc_proj"];
$('input[name="moc_proj"][value="'+projection+'"]').attr("checked","checked");
}
if(array_url_param["moc_grid"]){
showGrid = (array_url_param["moc_grid"] = "true");
if(array_url_param["moc_grid"] = "true"){
$('#moc_grid').attr('checked', 'checked');
}else{
$('#moc_grid').removeAttr('checked');
}
}

moc_display();
return false;
}

function displayGreeting () {
gadget_title = make_title("MOC visualizer");
gadgets.window.setTitle(gadget_title);
}
gadgets.util.registerOnLoadHandler(displayGreeting);

window.onload=function(){
share_gadget.needed_params = ["moc_url"];
startup_log();
share_gadget.export_gadget("moc_export", "moc_main", true, false, share_gadget.moc_display_input_data);
intergadget_communication.init(gadget_title, [], []);
gadgets.openapp.connect(intergadget_communication.subscriber_callback);
gadgets.window.adjustHeight($("moc_main").height());
};
</script>

explications :

Les fichiers indispensables :

• la librairie JQuery
• openapp.js qui facilite la communication entre les gadgets
• intergadget_communication.js qui apporte une méthode commune pour la communication entre ces widgets.
• utilities.js qui regroupe des fonctions utiles ou nécessaires sur tous les gadgets.
• jquery-ui-1.10.4.custom.min.css et style_1.css qui permettent d'avoir un style plutôt unifié entre les gadgets

• une div main qui englobe toutes les autres div. Elle est utile pour modifier la hauteur du widget.
• une div "export" pour la partie partage du gadget.

• var gadget_title = null; le titre du gadget
• function displayGreeting () {
gadget_title = make_title("MOC visualizer");
gadgets.window.setTitle(gadget_title);
}
gadgets.util.registerOnLoadHandler(displayGreeting);
  créer le titre du gadget (qui sert aussi d'identifiant unique au gadget) et le met comme titre du widget lorsqu'affiché dans un conteneur shindig.
• window.onload=function(){
startup_log();
share_gadget.needed_params = ["moc_url"];
share_gadget.export_gadget("moc_export", "moc_main", true, false, share_gadget.moc_display_input_data);
intergadget_communication.init(gadget_title, [], []);
gadgets.openapp.connect(intergadget_communication.subscriber_callback);
gadgets.window.adjustHeight($("moc_main").height());
};
  
  • startup_log() : envoi les logs à l'affichage du gadget
  • share_gadget.needed_params = ["moc_url"] : les paramètres indispensables pour que le gadget agisse.
  • share_gadget.export_gadget("moc_export", "moc_main", true, false, share_gadget.moc_display_input_data); la fonction pour le partage du widget
    • "moc_export" : nom du div dans lequel sera affiché les informations pour le partage
    • "moc_main" : le nom du div utilisé pour redimensionner le gadget verticalement
    • true : afficher/cacher la checkbox pour "use current parameters" (cochée par défaut)(affichée par défaut)
    • false : afficher/cacher la checkbox pour afficher le widget en thumbnail (cache tout les éléments de classe ".thumbnail_hide")(param url : thumbnail=true)(masquée par défaut)
    • share_gadget.moc_display_input_data : fonction appelée lors du chargement d'un widget partagé.
  • intergadget_communication.init(gadget_title, [], []);
    
    • gadget_title : nom du gadget créé avec la fonction make_title, id unique
    • [] : un array du type de données que le widget peut envoyer (ex : cat object, img object, sesame object,votable)
    • [] : un array du type de données que le widget peut recevoir
  • gadgets.openapp.connect(intergadget_communication.subscriber_callback); pour la communication entre les widgets
  • gadgets.window.adjustHeight($("moc_main").height()); : ajuste la hauteur du widget en se basant sur la div moc_main

communication entre les widgets :

Publications des données :

initialisation de la publication : envoi un message à tous les widgets en indiquant le type de données envoyées

function publish_init(){
intergadget_communication.receivers.length = 0;
intergadget_communication.publish(null, "sesame object", "info all", null);
setTimeout(function() {
publish_chose();
}, 300);
}


récupération de la liste des receveurs potentiels, créations d'une liste cochable pour les choisir

function publish_chose(){
var receivers = intergadget_communication.receivers;
var html = '<div class="ui-dialog-titlebar ui-widget-header ui-corner-all"> select receivers : </div><div class="dialog-content-message">';
for (var i=0; i < receivers.length; i++){
var tmp = receivers[i].split("!!");
html += '<input type="checkbox" name="receivers" value="' + tmp[0] + '" checked="checked"/>' + tmp[1] + '<br/>';
}
html += '<input type="button" value="send" onclick="publish_send()"/><br/></div>';
$("#div_popup").dialog( html);
}


envoi des données aux receveurs sélectionnés.

function publish_send(){
var to = new Array();
$("#div_popup input[type=checkbox]:checked").each(function() {
to.push($(this).val());
});
$('.dialog-box').remove();
intergadget_communication.publish(to, "sesame object", "gadget_sesame", data_to_publish);
}

Réception des données :

fonction appelée quand le gadget reçoit un message du widget sésame

intergadget_communication.gadget_sesame = function(message){
$("#display_data").val(message.data);
};


explications :

• intergadget_communication.publish(receivers, data type, object, data);
  • receivers : (null/array) liste des widgets qui traiteront les données. si null tous les widgets sont concernés et répondront.
  • data type : type de données envoyées (seuls les widgets qui traitent ce type de données répondent)
  • object : objet du message --> traitement du message dépend de l’objet
  • data : contenu du message.
• intergadget_communication.receivers : array des gadgets qui peuvent recevoir le type de données qui seront envoyées.
• mettre un setTimeout entre le moment o๠l'on envoie un message pour connaà®tre les receveurs potentiels et la sélection des receveurs.
• le nom de la fonction intergadget_communication.gadget_sesame est définie dans intergadget_communication.js