Le fichier config.xml

La structure d'un plugin :

Un plug-in est composé de 4 fichiers :

• Le fichier icon.jpg

Le fichier icon.jpg est l’image affichée dans Ludiscape il faut de préférence une image de taille 50px par 50px.

• Le fichier config.xml

Ce fichier contient les informations de paramétrage du plugin et la définition des fichiers qui vont être intégrés.

Descriptif des balises :

<?xml version="1.0" encoding="UTF-8"?>
<properties>
<data>
<type>Type objet</type>
<title>Titre du plugin</title>
<screenImage>Image affiché sur l’écran d’édition</screenImage>
<files>Fichiers supplémentaires lié au plugin</files>
<embeddedFiles>Fichiers Bibliothèque javascript supplémentaires automatiquement intégrés</embeddedFiles>
<defautText>Texte par défaut</defautText>
<width>Largeur par défaut en pixels</width>
<height>Hauteur par défaut en pixels</height>

<options>
<resize>Objet redimensionnable à l’écran</resize>
<changeImage>Possibilité de changer l’image</changeImage>
<changeText>Possibilité de changer le texte</changeText>
<conditionalObject>Objet conditionnel</conditionalObject>
</options>

<fields>
  <label1>Libellé champs N°1</label1>

  <field1>Type de données ou texte par défaut</field1>
</fields>

</data>

</properties>

• Le fichier run.css

CSS supplémentaire

• Le fichier run.js

Le fichier run.js est le moteur principal du plug-in il possède trois fonctions qui permettent d'interagir avec le moteurJavaScript.

Les méthodes onPaint () et onZoom () sont appelés respectivement à l’exécution du plugin

onPaint permet de créer le DOM.

onZoom permet de redimensionner les éléments en fonction de la variable zoom écran.

La méthode isOK

Dans le cas où il s’agit d’un objet conditionnel, cette fonction renvoi true ou false pour le rendre valide ou non. (voir « page suivante si OK »).

function onPaint(obj){

var html = '';
html = '<div id="bloc' + obj.id + '" ';
html = html + ' style="border: solid 1px red;position:absolute;" ';
html = html + ' class="bloc' + obj.id + '" >';
html = html + '</div>';
return html ;

}

Note :  La classe bloc + obj.id est une classe reconnue automatiquement qui redimensionne l’objet proportionnellement au zoom de l’écran.

function onZoom(obj){

var largw = parseInt(parseInt(obj.w) * zoom);
var largh = parseInt(parseInt(obj.h) * zoom);
$(".votreid" + obj.id) .css("height",largh + "px");
$(".votreid" + obj.id) .css("width",largw + "px");

}

function isOK(obj)(


)

Copyright © 2014, Ludiscape