Gepi

On se propose d'expliquer les principales fonctions javascript déjà développées dans Gepi.[[BR]]

[[BR]]

----

== Utiliser Prototype ==

[[BR]]

Prototype est une librairie qui simplifie beaucoup le codage javascript. Elle est utilisée, entre autre, pour les requête ajax dans certains cas.[[BR]]

[[BR]]

* '''Ajax.request(url, options)'''[[BR]][[BR]]

Cet objet gère toute la requête Ajax en s'occupant de la compatibilité avec le navigateur de l'utilisateur et de l'envoie de la requête (pas besoin de send() dans le code par exemple).[[BR]] L'objet Ajax.Request a besoin de deux arguments : l'url et un tableau associatif d'options.[[BR]]

Ces options sont multiples et ont un comportement par défaut. La première 'asynchronous' (=true par défaut) est le mode de synchronisation de la requête, donc pas la peine de la préciser puisque la plupart des requêtes ajax sont asynchrones. La seconde, 'method' (=post) peut valoir 'get' alors que les troisième et quatrième options sont 'parameters' pour les requêtes en get et 'postbody' pour les requêtes en post.[[BR]]

[[BR]]

* Exemple :[[BR]]

[[BR]]

{{{

        // On indique l'url qui va recevoir et gérer la réponse de la requête

        // on peut passer le gepiPath en appel de la fonction si on veut

    var url = path+'./lib/change_mode_header.php';

        // On précise que les options sont un tableau associatif

    options = new Object();

        // On indique le nom de l'argument à envoyer en post (ici cacher_header)  

        // ainsi que sa valeur (ici mode qui est précisé dans l'appel de la fonction)

    options = {postBody: 'cacher_header='+mode};

        // et on construit l'objet ajax.Request qui s'occupe de tout 

    var requeteAjax = new Ajax.Request(url,options);

}}}

Cette portion de code suffit à définir une requête de type ajax avec des arguments envoyés en 'post'.[[BR]]

[[BR]]

  A noter qu'il existe des méthodes utilisables directement dont la plus utile est certainement responseIsFailure qu'on peut coupler sur l'option onComplete qui permet de définir l'appel d'une fonction quand la requête est en "réception terminée" (équivalent au test de readyState) pour envoyer une réponse adaptée s'il y a une erreur (cas par exemple d'un serveur qui ne répond pas parce qu'en panne ou sans électricité).[[BR]]

[[BR]]

[[BR]]

* '''Ajax.Updater'''[[BR]]

[[BR]]

  Ajax.Updater permet de modifier des portions de page html en utilisant Ajax. Dans l'exemple suivant, on voit comment est construit cet objet avec un troisième argument qui désigne l'élément qui sera modifié (elementHTML dans cet exemple). A noter qu'avec prototype, cet argument peut être le nom de l'identifiant (id) ou l'élément lui-même. Il existe aussi une option qui peut être pratique, c'est insertion (=undefined) qui permet de préciser à quel endroit javascript doit faire l'ajout renvoyé par le php :[[BR]]

  ||''default''||l'insertion a lieu dans l'élément, à la place du contenu précédent.||

  ||Insertion.Bottom||l'insertion a lieu dans l'élément, juste après le contenu déjà présent.||

  ||Insertion.Top||l'insertion a lieu dans l'élément, juste avant le contenu déjà présent.||

  ||Insertion.After||l'insertion a lieu après l'élément.||

  ||Insertion.Before||l'insertion a lieu avant l'élément.||

[[BR]]

Exemple :[[BR]]

[[BR]]

{{{

function couleursEdtAjax(id, reglage){

		elementHTML = document.getElementById(id);

	var url = "ajax_edtcouleurs.php";

	o_options = new Object();

	o_options = {method: 'get', parameters: 'var1='+id+'&var2='+reglage};

	var laRequete = new Ajax.Updater(elementHTML,url,o_options);

}

}}}

[[BR]]

  A noter aussi que l'on peut préciser deux sorties à cet objet (succès et échec) en précisant les propriétés success et failure de l'objet.[[BR]]

[[BR]]

Exemple :[[BR]]

[[BR]]

{{{

    // on indique à l'objet ce qu'il doit faire : si la requête est un succès, 

    // on met à jour elementHTML sinon on met à jour encasderreur (qui peut être identique  au précédent)

    // On peut alors définir un lieu dans la page avec un élément xhtml qui a un id="encasderreur" qui recevrait tous les messages d'erreur

    var laRequete = new Ajax.Updater({success: elementHTML, failure: 'encasderreur'},url,o_options);

}}}

* '''Ajax.!PeriodicalUpdater'''[[BR]]

[[BR]]

  C'est le même objet que le précédent sauf qu'il se débrouille tout seul avec deux options supplémentaires : 'frequency' (=2) qui détermine le nombre de secondes qui séparent deux appels et 'decay' (=1) qui permet d'allonger la 'frequency' si deux réponses qui se suivent sont identiques (la 'frequency' suivante étant alors égale à frequency x decay). Cette option permet de ne pas alourdir le serveur de requêtes inutiles si les réponses sont identiques (cas d'un tchat sans échange). A noter que 'decay' repasse à 1 quand une réponse différente arrive... et ainsi de suite.[[BR]]

[[BR]]

* '''les fonctions de base'''[[BR]]

[[BR]]

  * $ permet de récupérer un élément de la page par son id. Donc $('id') récupère la même chose que document.getElementById('id').[[BR]]

  * $F fait la même chose pour un formulaire :[[BR]]

{{{

function ajaxAppreciations(eleveperiode, enseignement, textId){

	// On récupère le contenu du textarea dont l'id est textId

	var contenu = $F(textId);

[...]

}}}

[[BR]]

* '''Créer un gestionnaire d'évènement avec Prototype'''[[BR]]

[[BR]]

  * Mettre en place un gestionnaire de ce type permet de dissocier le code javascript du code (x)html de la page. Une fonction écoute les évènements de la page pour les envoyer à une fonction qui traite ces évènements.

  * On peut ainsi écouter le click de la souris, le fait d'appuyer sur une touche,...

  * La fonction observeur() doit être chargée dans le onload.

  * Voici un exemple de code qui permet de récupérer ce dont on a besoin pour traiter les évènements de la page. On écoute le clic et le onblur sur des champs de formulaire.

  * Le principe d'un écouteur est Event.observe(quoi, type, fonction_appelee). Quoi étant le lieu de la page que l'on veut écouter, type étant le type d'évènement.

  * On peut récupérer (Event.element(event)) le tagname, le name, l'id, la valeur, ...de l'objet html.

  * L'analyse de l'information peut se faire côté server ou côté client (voire les deux).

{{{

# javascript

function observeur(){

  Event.observe(document, 'click', voirElementHTML);

  Event.observe(document, 'onblur', voirElementHTML);

}

function voirElementHTML(event)	{

  var elementCliquer = Event.element(event);

  var premierSelectCliquer = Event.findElement(event,"select") ? Event.findElement(event,"select") : null;

  var affPremierSelectCliquer = premierSelectCliquer ? premierSelectCliquer.name : 'aucun';

  var aff = ('<br />'+elementCliquer.tagName+' et la valeur --> '+elementCliquer.value+' et le name --> '+elementCliquer.name+' et le select --> '+affPremierSelectCliquer+' et id='+elementCliquer.id);

  var insertion = new Insertion.After("aff_result",aff);

  if (elementCliquer.id == 'p'){

    Effect.BlindDown('d1');

  }else if(elementCliquer.id == 'span'){

    Effect.BlindUp('d1');

  }else if(elementCliquer.tagName == 'TH'){

    if (elementCliquer.id == 'c1'){

      utiliseAjaxAbs('aff_result', 'des fraises', 'ajax.php');

    }

  }else if(elementCliquer.id.substr(0, 6) == 'fermer'){

    var idUt = elementCliquer.id.substr(6, 20);

    cacherDiv(idUt);

    utiliseAjaxAbs('tbody1', 'des nefles', 'ajax2.php')

  }

}

}}}

----