Utiliser les Control Toolkit avec PHP
Paru le 16 avril 2007

Par Pierre Lagarde

Sur cette page

Introduction Introduction
Pré-requis Pré-requis
Utiliser le Slider Utiliser le Slider
L’AutoComplete extendeur L’AutoComplete extendeur
Conclusion Conclusion

Introduction

Le Framework Ajax de Microsoft est composé de deux éléments essentiels : le Framework Javascript (Microsoft Ajax Library) et les ASP.NET Ajax Control Toolkit. Ces derniers sont à la base des contrôles serveur ASP.NET qui permettent d’étendre le comportement côté client de certains contrôles ASP.NET. Ils sont compatibles avec IE / FireFox / Opera / Safari.

Hors quand on regarde attentivement ces « extendeurs », on s’aperçoit que quasiment toutes les fonctionnalités sont en réalité codées en JavaScript et que le code .NET est simplement là pour que le développeur puisse le manipuler dans VisualStudio et le rattacher à son contrôle ASP.NET.

On va donc voir dans cet article comment on peut activer ces extendeurs dans une page PHP qui viendront en définitive « étendre » les éléments de la page HTML. Il y aura donc un certain nombre de choses à faire manuellement par rapport à un simple glisser/déplacer dans VisualStudio pour utiliser ces Control Toolkit, mais pour un résultat complètement équivalent car au final c’est bien du code JavaScript qui est exécuté et qui rend la page dynamique.

- Notre premier exemple sera d’utiliser l’extendeur Slide sur un <input id="Text1" type="text" /> pour le transformer en

- Notre deuxième exemple sera d’utiliser l’extendeur AutoComplete sur un <input id="Text1" type="text" /> pour le transformer en

Il sera possible après avoir lu ces deux exemples d’extrapoler pour utiliser les autres extendeurs de la même manière. Attention quand même car dans les Control Toolkit, il n’y a pas que des extendeurs, il y a aussi des « Contrôles » : des composants qui ont un comportement serveur. Ces derniers ne seront donc pas utilisable dans un environement PHP. Je pense ici au contrôle de Rating par exemple.

Pré-requis


Téléchargement

Pour commencer, il faut dans un premier temps télécharger les Control ToolKit dans la version avec les sources, dézipper l’archive et on obtient ceci :

Les répertoires qui vont nous intéresser sont :
- AjaxControlToolkit : les sources des extendeurs
- ToolkitTests : une page de test et d’exemples de manipulation des extendeurs en JavaScript

Pour simplifier la suite, gardez une connexion internet sur le lien de la version « Live » du SampleWebSite qui nous permettra de faire des copier/coller qui nous simplifiera la tâche.


Le Framework des extendeurs

Pour pouvoir utiliser les extendeurs, il faut d’une part importer la Microsoft Ajax Library mais aussi le Framework des extendeurs réparti dans plusieurs fichiers JavaScript.

Il faut donc ajouter à la page PHP les fichiers suivants :

Utiliser le Slider


Le JavaScript

Maintenant qu’on a importé l’ensemble du JavaScript commun aux extendeurs on va pouvoir regarder dans le détail les fichiers JavaScript dépendant de l’extendeur.

Pour ce faire, on va ouvrir le fichier dans « AjaxControlToolKit/Slider/SliderExtender.cs »

Ce qui va nous intéresser ici c’est l’attribut [ClientScriptRessource…] qui spécifie le JavaScript utilisé pour cet extendeur. Mais on remarque aussi que ce JavaScript n’est pas suffisant car cet extendeur utilise d’autres extendeurs et donc d’autres fichiers JavaScript. Ils sont mentionnés ici par l’attribut [RequiredScript…]

Dans notre cas il faut rajouter le JavaScript lié au type AnimationScripts : Animation.js dans AjaxControlToolkit/Animation

Il faudra dont importer dans la page PHP l’ensemble de ces fichiers JavaScript :

Pour les insérer tous d’un coup on va faire un fichier AjaxScriptManager.php 

<?php
        if (strpos($_SERVER['REQUEST_URI'], __FILE__) !== FALSE)  exit;

        function atlas_include()
        {
        insert_javascript('MicrosoftAjax.js');
        insert_javascript('Timer.js');
        insert_javascript('BaseScripts.js');
        insert_javascript('Common.js');
        insert_javascript('DragDropScripts.js');
        insert_javascript('Animations.js');
        insert_javascript('SliderBehavior.js');
        }

        function insert_javascript($javaScriptFile)
        {
        echo '<script type="text/javascript" src="ScriptLibrary/', 
        $javaScriptFile, "\"></script>\r\n";	
}

?>

Et donc dans la page index.php, on ajoute :

En haut de la page : 

        <?php require_once 'AjaxPhp/AjaxScriptManager.php' ?>

Dans le body : 

        <?php atlas_include() ?>


Création de l’instance du slider

Maintenant qu’on a tout le JavaScript nécessaire il suffit d’appeler la création du slider pour venir étendre le tag

Astuce : Pour reprendre la création JavaScript d’un extendeur de type Slider on va simplement aller sur la version Live des Control ToolKit, faire bouton droit « Voir les Sources » et copier la ligne $create(AjaxControlToolkit.SliderBehavior … dans le presse papier.

Dans la page PHP on va ajouter un bloc JavaScript qui contiendra l’appel à la méthode Sys.Application.add_init qui prendra en paramètre la création de l’extender.

Pour créer l’extendeur on va utiliser la méthode globale $create qui prend en paramètre le type de l’extendeur, l’initialisation des différents paramètres et la référence à l’objet du DOM à étendre. 

        Default.php
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional
        //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

        <?php require_once 'AjaxPhp/AjaxScriptManager.php' ?>

        <html  >
          <head>
            <title>Ajax with PHP</title>
            <link href="site.css" type="text/css" rel="stylesheet" />
          </head>
          <body>
            <form name="form1" action="index.php" method="post">
              <?php atlas_include() ?>
              <div>
                <input type="text" id="TextBox2" />
                <input type="text" id="TextBox3" />
              </div>
            </form>
            <script type="text/javascript">
              Sys.Application.add_init(
              function(){
              $create(AjaxControlToolkit.SliderBehavior,
              {"BoundControlID":"TextBox3","Orientation":0,"EnableHandleAnimation":true,
              "id":"Slider1"}, null, null, $get("TextBox2"));
              }
              );
            </script>
          </body>
        </html>


Visuel

Il ne faut pas oublier, pour que le slider soit visible, d’écrire les styles dans la CSS et d’importer les images du projet des Control Toolkit pour la version horizontale.

Ou on peut aussi importer les lignes de la CSS slider directement dans la CSS du site :

.ajax__slider_h_rail {position:relative;background:url("images/slider_h_rail.gif") repeat-x;height:22px;}
.ajax__slider_h_handle {position:absolute;background:url("images/slider_h_handle.gif") no-repeat;height:22px;width:10px;}

Ce qui donne comme résultat à l’exécution:

L’AutoComplete extendeur

Comme pour le slider, il va falloir aller chercher tous les fichiers JavaScript nécessaire. En parcourant les Attributs de l’extendeur AutoComplete, on doit obtenir cette liste :

La différence importante avec l’AutoComplete extendeur par rapport au slider, c’est que l’AutoComplete extendeur a besoin de faire des échanges avec le serveur pour récupérer la liste des chaînes de caractère pour remplir l’AutoComplete. L’AutoComplete a été développé pour allez chercher cette information sur une URL de WebService en appelant une méthode. La méthode doit ramener un tableau de chaine de caractère sérialisé en JSON.

Il faut donc simuler ce comportement sur une URL PHP. Pour ce faire il y a un projet « Share Source » qui permet d’exposer une page PHP en tant que WebService JSON pour Microsoft Ajax Library. Ce projet utilise la sérialisation JSON inclus maintenant nativement dans les dernières versions de PHP.


Projet PhpMsAjax

Le projet est hébergé sur Codeplex ici : http://www.codeplex.com/phpmsajax et il fournit deux fichiers:

Les 2 syntaxes possibles d’appel sont donc :

WebService.php/js : Renvoie la classe JavaScript Proxy
WebService.php/MethodName : appelle la méthode « MethodeName » de la classe de la page, dé-sérialise le JSON des paramètres d’appel si il y en a, et sérialise en JSON la réponse.

Pour l’AutoComplete il faut donc écrire une page PHP qui renverra une liste de chaîne de caractères pour remplir l’autocomplete. 

AutoCompleteService.php
<?php 
require_once 'AjaxPhp/MSAjaxService.php';
// Cette classe doit donc hériter de MSAjaxService et exposer une méthode GetWords 
// Cette méthode renverra un tableau de chaîne de caractères.
// Cette méthode doit avoir comme signature ($prefixText, $count)
//	$prefixText : ce que l’utilisateur a déjà tapé
//	$count : nombre maxi de résultats à renvoyer
class AutoComplete extends MSAjaxService
{
    function GetWords($prefixText, $count) 
    {
        $count = ($count > 0) ? min($count, 5) : 5;

	    $results = array();
		for ($i = 0; $i < $count; $i++)
        {
            $char1 = chr(rand(97, 122)); $char2 = chr(rand(97, 122)); $char3 = chr(rand(97, 122));
            $results[] = $prefixText . $char1 . $char2 . $char3;
        }
        return $results;
    }
}
$ac = new AutoComplete();
$ac->ProcessRequest();
?>

La dé-serialisation des paramètres et la sérialisation de la réponse est faîte dans la classe de base. (Voir le fichier MSAjaxService.php)

Il ne reste plus qu’à ajouter dans la page PHP un bloc JavaScript de création de l’extendeur. On peut reprendre la même astuce que le slider c'est-à-dire aller sur la page d’exemple de l’AutoComplete faire bouton droit « voir les sources » et copier la ligne $create(AjaxControlToolkit.AutoCompleteBehavior,…

Il suffira d’inclure l’appel à $create en paramètre à la méthode add_init comme ceci :
Sys.Application.add_init(function(){$create(…)}). 

        Default.php
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

        <?php require_once 'AjaxPhp/AjaxScriptManager.php' ?>

        <html  >

          <head>
            <title>Ajax with PHP</title>
            <link href="site.css" type="text/css" rel="stylesheet" />
          </head>

          <body>
            <form name="form1" action="index.php" method="post">
              <?php atlas_include() ?>
              <div>
                <input type="text" id="TextBox1" />
              </div>
            </form>

            <script type="text/javascript">
              Sys.Application.add_init(
              function(){
              $create(AjaxControlToolkit.AutoCompleteBehavior,
              {"completionSetCount":5,"id":"AutoComplete1","minimumPrefixLength":2,
              "serviceMethod":"GetWords","servicePath":"AutoCompleteService.php"},
              null, null, $get("TextBox1"));
              }
              );
            </script>
          </body>
        </html>

Ce qui doit donner à l’exécution:

Conclusion

On a vu dans cet article comment extraire les JavaScript nécessaires des extendeurs, pour leur utilisation dans un contexte autre qu’ASP.NET v2. Puis manipuler ces objets JavaScript pour au final les activer. Ceci facilement grâce entre autre au projet phpmsajax.

Ceci est évidement adaptable pour toutes autres technologies : ASP, ASP.NET v1.x, Java,… car au final c’est beaucoup de code JavaScript.

Page view tracker