La magie de Scriptaculous - Javascript dynamique

Si l'un de vos clients vous demande d'ajouter des fonctionnalit�s bas�es sur du Javascript, des fonctionnalit�s qui affecteront en bout de ligne l'exp�rience de l'utilisateur (donc l'ergonomie du site de votre client), pensez � Scriptaculous. Il permet de faire ais�ment ce qu'un programmeur press� par le temps n'ose imaginer...

Drag & Drop

Supposons que notre client d�sire effectuer un sondage aupr�s de ses utilisateurs. Le sondage consiste � savoir quels sont les musiciens que les utilisateurs aiment et ceux qu'ils n'aiment pas, et par la m�me occasion il faut inviter les utilisateurs � placer en ordre de pr�f�rence ceux qu'ils aiment. Il s'attend � obtenir le r�sultat de votre travail rapidement... Comment feriez-vous cela?

Je crois que sans Scriptaculous, il est peu probable que vous auriez os� d�velopper l'exemple ci-dessous:

� la base, pour arriver � mettre en place cette fonctionnalit�, nous devons d'abord ins�rer les librairies Prototype et Scriptaculous (en fait, Scriptaculous est un add-on de Prototype):

Ensuite ajoutons un peu de style, pour que nous puissions bien distinguer les bo�tes et les items qui peuvent �tre d�plac�s...

Cr�ons nos bo�tes, dont celle qui contiendra la liste des items de d�part:



  Liste 1:

  Item 1
  Item 2
  Item 3



  Liste 2:

Enfin, ajoutons la touche Scriptaculous - pour chaque bo�te, nous devons ajouter Sortable.create qui d�signera la bo�te affect�e et les attributs qui la concernent:



// 
  // Cr�ation de la premi�re bo�te triable
  Sortable.create(
    // nom du id de la liste 1
    "liste_1",
    {
      // type de balise affect� - pourrait �tre aussi par ex. "ul"
      tag:"div",

      // permet de glisser un item d'une bo�te � l'autre
      dropOnEmpty: true,

      // bo�tes dans lesquelles les items peuvent �tre gliss�s
      containment: ["liste_1","liste_2"],

      // Les items transf�rables ont comme nom de classe "lineitem"
      only:"lineitem"
    }
  );

  // Cr�ation de la seconde "bo�te"
  Sortable.create(
    "liste_2",
    {
      tag:"div",
      dropOnEmpty: true,
      containment: ["liste_1","liste_2"], 
      only:"lineitem"
     }
   );

// ]]>

Le r�sultat du script ci-dessus:

Si la fonctionnalit� drag & drop vous int�resse, jetez un coup d'oeil � cet exemple.

Effets visuels

Scriptaculous permet d'effectuer des effets visuels tr�s simplement. Ci-dessous, quelques exemples (pour voir tous les exemples, visitez la page de d�monstration des effets visuels de Scriptaculous) :

Pour y arriver:


Highlight
BlindDown
   window.setTimeout('Effect.Appear(\'tag\', 
   {duration:.3})',2500);">SwitchOff
Pulsate
Shake

ceci est un test...

Avec un peu d'imagination, Scriptaculous fera de vous un magicien du Javascript. Osez!

Repr�sentation statistique - JpGraph et PHP

Si vous ne connaissez pas JpGraph, il n'est pas trop tard pour vous y mettre! C'est une excellente librairie PHP qui nous permet d'afficher ais�ment plusieurs types de graphes.

Supposons que vous avez un centre d'appels et que vous d�sirez conna�tre le nombre d'appels effectu�s par heure, il est fort probable que vous allez pr�f�rer une repr�sentation graphique plut�t qu'une lecture de donn�es brutes. Mais comment faire?

Copiez d'abord les scripts de JpGraph sur votre serveur. Ensuite, cr�ez votre page .php qui sera en final votre image (donc � partir d'une page HTML, vous pourrez l'afficher comme ceci: - et s'il s'agit d'un graphe dynamique, vous pourrez ajouter des variables par exemple avec la m�thode GET: ).

En toute simplicit�...:

mon_graphe.php


 
  include "src/jpgraph.php";
  include "src/jpgraph_line.php";
 
  // Donn�es X: heures
  // Donn�es Y: nombre d'appels
  // 
  // Note: Les donn�es X (heures) et Y (nombre d'appels) 
  //       correspondent entre elles par leur position 
  //       dans les tableaux (array)
  $xdata = array(12,13,14,15,16,17,18,19,20);
  $ydata = array(115,111,119,116,114,113,128,122,116);
 
  // Cr�ation du graphique de base
  $g = new Graph(320,180); // (largeur, hauteur)
 
  // Sp�cification du type de graphe
  // 'linlin' est utilis� parce que nous fournissons
  // des coordonn�es X et Y 
  $g->SetScale('linlin');
 
  // Titre
  $g->title->Set("Centre de contact X");
 
  // Sous-titre
  $g->subtitle->Set("Nombre d'appels par heure");
 
  // Cr�ation de la ligne
  $lplot = new LinePlot($ydata,$xdata);
 
  // Ajout de notre ligne au graphique de base
  $g->Add($lplot);
 
  // Affichage du r�sultat
  $g->Stroke();
?>

R�sultat #1

Ajoutons de la valeur maintenant � notre graphique en am�liorant sa qualit� visuelle:

mon_graphe.php


 
  include "src/jpgraph.php";
  include "src/jpgraph_line.php";
  include "src/jpgraph_scatter.php";
  include "src/jpgraph_regstat.php";
 
  $xdata = array(12,13,14,15,16,17,18,19,20);
  $ydata = array(115,111,119,116,114,113,128,122,116);
 
  // Interpolation des donn�es pour l'affichage
  // d'une ligne courb�e
  $spline = new Spline($xdata,$ydata);
  list($newx,$newy) = $spline->Get(50);
 
  $g = new Graph(320,180);
  $g->SetMargin(30,20,40,30);
  $g->title->Set("Centre de contact X");
  $g->title->SetFont(FF_ARIAL,FS_NORMAL,12);
  $g->subtitle->Set("Nombre d'appels par heure");
  $g->subtitle->SetColor('darkred');
  $g->SetMarginColor('#F7F7F7');
 
  $g->SetScale('linlin');
 
  // On enl�ve le d�cimal pour l'affichage
  // des heures (%1.0f) et on ajoute
  // la lettre "h", donc au lieu de
  // 12.0, nous aurons 12h
  $g->xaxis->SetLabelFormat('%1.0fh');
 
  // Pour afficher les points de contr�le,
  // nous utilisons les "ScatterPlot"
  $splot = new ScatterPlot($ydata,$xdata);
  $splot->mark->SetFillColor('#5977B3');
  $splot->mark->SetColor('#5977B3');
 
  $lplot = new LinePlot($newy,$newx);
  $lplot->SetColor('#829FD9');
 
  $g->Add($lplot);
  $g->Add($splot);
  $g->Stroke();
 
?>

R�sultat #2

Pour faire des graphes d'autres types et/ou plus avanc�s, vous trouverez dans la librarie un r�pertoire avec plusieurs centaines d'exemples facilent � comprendre. Parmi ceux-ci, vous avez les graphes suivant (cliquez sur le graphe pour voir le code):

Un dernier exemple, si �a peut vous inspirer, voici l'un des premiers graphes (dynamiques) que j'ai fait avec JpGraph:

Amusez-vous!

Blog-notes d'un programmeur autonome

La magie de Scriptaculous - Javascript dynamique

Liste 1:

Liste 2:

Repr�sentation statistique - JpGraph et PHP