Début février, Microsoft publie un ensemble d’éléments sous le nom ASP.Net Ajax Extensions 1.0.
Connu pendant la phase de béta sous le nom de code ATLAS Framework, ce Framework lance Microsoft pleinement dans le phénomène Web 2.0
Fer de lance de ce Framework, les deux composants ScriptManager et UpdatePanel permettent de faire des applications web à la mode AJAX, facilement, simplement, sans connaissance particulière du JavaScript ou des requêtes asynchrones et, surtout, multiplateformes.
Mais contrairement aux idées reçues, ASP.Net Ajax Extensions ne se limite pas uniquement aux possibilités offertes (certes nombreuses) de l’UpdatePanel, mais donne pleinement accès à un ensemble d’API accessibles par le code, aussi bien côté Serveur, que coté Client (amis du JavaScript Bonjour !)
Il existe déjà une communauté qui a pris une longueur d’avance dans ce domaine, en exploitant les possibilités de ce Framework. Il s’agit d’un regroupement de développeurs qui a contribué à l’élaboration d’un projet, encore en béta, sous le nom de code ATLAS ToolKit.
L’ATLAS Toolkit se focalise notamment sur une des possibilités offertes par ASP.Net Ajax Extensions : Le développement « d’extenders ».
De plus l’ATLAS Toolkit étend encore le modèle de développement ASP.Net Ajax pour toute personne désireuse de construire un Extender supporté par le Framework ASP.Net Ajax
Un Extender, par définition, va étendre le comportement d’un Web Contrôle, rendant l’expérience utilisateur plus riche.
L’optique de cet article est de prendre connaissance de ce Framework élaboré, ainsi que celui fourni par l’ATLAS Toolkit afin de voir les possibilités de customisation de contrôles qui vous sont alors offertes.
Sur le modèle de l’ATLAS Toolkit, nous allons développer notre propre Extender, afin d’étendre le comportement client d’une TextBox.
Nous allons voir et aborder au fil de cet article, plusieurs concepts dépendant de divers éléments fournis par le Framework ASP.Net Ajax Extensions.
Il est important de bien faire la part des choses.
Pour bien clarifier la situation, voici un bref aperçu des forces en présence :
ASP.Net Ajax Extensions 1.0 : C’est le cœur du système : Il est fourni par Microsoft et constitue le Framework sur lequel tout va reposer. Il permet entre autre de :
- Créer des interfaces évoluées via AJAX
- Garantir l’unicité de votre code et le support de celui-ci sur toutes les plateformes actuelles (IE, FireFox, Opera ..)
- Enrichir des contrôles web comme vos habituels TextBox ou autre Label.
- Créer de toutes pièces des contrôles riches, rendant l’expérience utilisateur encore plus aboutie.
Bien entendu, ce Framework bénéficie d’un support et d’un suivi garanti par Microsoft.
Comment se présente ces Extensions ? Sous forme de deux Assemblies :
System.Web.Extensions.dll et System.Web.Extensions.Design.dll
Celles-ci sont installées dans votre Global Assembly Cache lors de l’installation du SDK.
ATLAS Toolkit : La Communauté ATLAS Toolkit, certes sponsorisée par Microsoft, ne bénéficie d’aucun support Microsoft contrairement aux ASP.Net Ajax Extensions.
L’ensemble des éléments fournis le sont gratuitement et sans aucune garantie.
Les composants développées et présents dans la toolkit reposent entièrement sur ASP.Net Ajax Extensions.
Aujourd’hui l’ATLAS Toolkit n’est pas encore sortie en version finale et se présente toujours sous forme de Béta.
Comment se présente l’ATLAS Toolkit : sous forme d’une assemblie, à embarquer dans vos projets (à moins de l’installer dans le GAC) : AtlasToolkit.dll
Note : L’ATLAS Toolkit est en démonstration à l’adresse http://ajax.asp.net/ajaxtoolkit/
Ce que propose l’ATLAS Toolkit pour le développement de vos contrôles que ne propose pas le Framework ASP.Net AJAX Extensions :
Il faut bien comprendre que le Framework ASP.Net AJAX Extensions constitue une base solide pour vos développements futurs. Il vous est enfin possible de vous abstraire de la plateforme visée (IE, Firefox .. ) ainsi que la possibilité de développer en Javascript sous un modèle Objet.
Par contre, vous ne trouverez pas de fonctions sur le Framework ASP.Net AJAX Extensions 1.0 de haut niveau, comme les interactions avec un élément DOM par exemple.
C’est là qu’intervient l’ATLAS Toolkit qui apporte toutes ces fonctionnalités qui vont vous faciliter grandement la vie.
On peut citer par exemple, la possibilité de récupérer facilement un pointeur sur un élément DOM, ou encore récupérer en une fonction, son emplacement et ses dimensions, ou encore la facilité d’implémenter une Popup.
C’est une partie de l’ensemble de ces possibilités que nous allons exploiter dans la suite de cet article
Avant de lancer l’installation des extensions, il existe un pré-requis fort pour le bon déroulement des opérations :
Il vous faut (impérativement) installer le Service Pack 1 de Visual Studio.Net 2005 :
http://msdn2.microsoft.com/en-us/vstudio/bb265237.aspx
Pour une raison quelconque, si vous ne pouvez pas, veillez à installer au moins le WAP, Web Application Project :
http://msdn2.microsoft.com/en-us/asp.net/aa336618.aspx
Une fois ce pré-requis déployés, l’installation s’effectue en deux étapes :
- L’installation du Framework AJAX.Net Extensions 1.0
- L’installation de l’ATLAS ToolKit
Une seule Url : http://ajax.asp.net/downloads/default.aspx?tabid=47
Vous y trouverez les deux kits d’installations à effectuer.
Note : N’hésitez pas à installer aussi la documentation. Elle ne s’intègre pas dans l’aide en ligne VS.Net, car c’est en réalité un site Web qui est installé sur votre poste, à l’identique de l’aide en ligne (http://ajax.asp.net/docs/)
Un conseil, lors de l’installation, essayez de regrouper vos installs. Pour ma part tout a été installé sur « C:\Program Files\Microsoft ASP.NET »
Du coté ASP.Net Ajax Extensions, vous disposez de deux choses intéressantes dans le répertoire d’intallation :
- Les 2 dlls en stand alone. Situées dans le répertoire \ASP.NET 2.0 AJAX Extensions\v1.0.61025\. Cela peut s’avérer pratique si vous avez à embarquer celles-ci dans votre site web (si le serveur de production ne les a pas installées dans le GAC par exemple)
- Le Framework Client : Situé plus loin dans l’arborescence (v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0), il comporte les fichiers Javascript du Framework ASP.Net Ajax Extensions. Vous les trouverez sous 2 formes : En debug (donc très verbeux) et en release (offusqué et optimisé pour une exécution plus rapide)
Note : Ne soyez pas surpris lors de vos premières applications si vous n’avez pas besoin de référencer ces fichiers .js ; en effet les assemblies System.Web.Extensions les ont embarquées en tant que ressources !
Pour l’ATLAS Toolkit, l’exploration du répertoire nous donne accès à un fichier solution Visual Studio.Net 2005. Cette solution comporte non seulement les sources de la Toolkit mais en plus l’ensemble des exemples et leurs sources, disponibles à l’identique du site de démonstration de la Toolkit.
L’ATLAS Toolkit fournit aussi un modèle de templates, qui vous permet de démarrer le développement avec une base déjà bien avancée et configurée.
Je ne saurais que trop vous encourager à installer ces templates. Nous partirons d’ailleurs d’un de ces templates pour notre projet :
Note : Vous n’êtes pas obligés de tout installer. C’est cependant fortement conseillé.
L’idée est simple : Développer un Extender qui va permettre de modifier le comportement de notre TextBox à l’affichage :
Lors du chargement de la page, notre TextBox ne sera pas visible, mais sera remplacée par un simple DIV (si si !), donnant ainsi l’impression que la zone n’est pas saisissable.
Lors du clic sur la zone (une main nous y invite) le DIV laissera la place à notre TextBox permettant ainsi la saisie d’un nouveau texte.
Enfin la sortie de la zone fera réapparaitre notre DIV avec la modification du texte prise en compte :
Il nous faudra aussi rajouter une propriété pour désactiver le comportement du TextBox, et ce depuis le code serveur aussi bien que du coté client.
Nous apprendrons comment faire transiter ces informations lors de la génération du rendu contrôle (transition des valeurs du Contrôle Serveur vers le Contrôle client) aussi bien que la transition de ces mêmes informations depuis le Contrôle client vers votre Contrôle Serveur (lors d’un PostBack)
La création de la solution est grandement simplifiée de par le fait que vous avez installé les templates de l’ATLAS Toolkit.
Il suffit de créer un projet sur le modèle de template ASP.Net Ajax Control Project
Note : Ne nommez pas votre projet avec une terminaison en « ..Extender ».
Pour notre TextBox, nous pourrions créer un projet appelé ReadWriterTextBoxExtender
Le template rajoute le mot « extender » pour vous J Vous risqueriez de vous retrouver avec un projet nommé ReadWriteTextBoxExtenderExtender
Le tempate va donc créer l’exosquelette de votre projet. A savoir :
Tout d’abord les références :
- Une référence sur les assemblies du Framework Ajax Extensions 1.0.
- Une référence sur l’assemblie AJAX Toolkit.
Les fichiers ensuite :
- Un fichier ReadWriteTextBoxExtender.cs : C’est le code métier et managé de votre Extender
- Un fichier ReadWriteTextBoxDesigner.cs : C’est le code gérant l’apparence de votre Extender dans Visual Studio.Net
- Un fichier ReadWriteTextBoxExtender.js : C’est le code métier client de votre Extender.
Attaquons par le plus simple : le code C# de la class ReadWriteTextBoxExtender
Si on regarde de prés cette class, on peut noter plusieurs choses intéressantes :
Tout d’abord, référencement du fichier JavaScript embarquée dans l’assemblie.
[assembly: System.Web.UI.WebResource("ReadWriteTextBox.ReadWriteTextBoxBehavior.js", "text/javascript")]
Cette instruction va permettre à notre assemblie de générer et référencer le fichier JavaScript dans votre page de rendu aspx. Inutile donc de vous soucier si elle sera bien présente, elle le sera.
De même, l’attribut ClientScriptResource indique que votre Extender s’appuiera sur ce code JavaScript pour étendre le comportement du contrôle auquel il est attaché.
[ClientScriptResource("ReadWriteTextBox.ReadWriteTextBoxBehavior", "ReadWriteTextBox.ReadWriteTextBoxBehavior.js")]
²
Le principe même d’un Extender est d’étendre le comportement d’un contrôle. Dans notre cas, il est nécessaire de lui spécifier que nous ne voulons étendre que le comportement d’un TextBox. On peut donc changer l’attribut
[TargetControlType(typeof(Control))]
En
[TargetControlType(typeof(TextBox))]
Notre Extender ne pourra donc être associé qu’à un TextBox.
Le template du contrôle a crée pour nous une première propriété appelée MyProperty (l’imagination est débordante !)
Ce qui est important là, c’est un attribut en particulier affectée à la propriété : ExtenderProperty
[ExtenderControlProperty]
[DefaultValue("")]
public string MyProperty
A quoi sert cet attribut ? Et bien, et c’est là qu’on commence à sentir la puissance du modèle, cet attribut affecté à une propriété va permettre, lors du rendu du contrôle de transférer la valeur de cette propriété à votre Script Client (ReadWriteTextBoxExtender.js) et l’affecter à une propriété JavaScript (Nous verrons plus tard où et comment).
Ce qui veut dire que vous allez pouvoir coté serveur, travailler vos propriétés en code managé et les récupérer coté JavaScript pour continuer à les faire évoluer coté client !
Par contre cette possibilité n’est pas permise dans l’autre sens. Nous n’allons pas pouvoir pour le moment récupérer la valeur modifiée depuis le JavaScript lors d’un PostBack. Il faudra pour cela utiliser une propriété de votre Extender, appellé le ClientState, nous y reviendrons plus tard.
L’intérêt ici c’est bien de pouvoir faire évoluer cette propriété quelque soit le mode où nous nous trouvons : Coté serveur ou Coté client. Et bien sûr pouvoir récupérer la valeur de cette propriété, modifiée dans les deux sens.
Pour notre exemple, nous allons créer une simple propriété de type Booléen. Là où nous devons être vigilant c’est de bien veiller à créer une propriété qui puisse évoluer quelque soit le mode où nous nous trouvons.
Pour l’exemple, nous allons développer une propriété qui va remplir les règles suivantes :
- Lors du double clic dans la zone Texte, le comportement du contrôle (c'est-à-dire disparaître et laisser place à un DIV) devra être annulé.
- Lors d’un PostBack, être capable de récupérer cette valeur et la modifier si nécessaire.
Implémentons donc la propriété DisableOnDblClick
[ExtenderControlProperty]
[DefaultValue(true)]
public Boolean DisableOnDblClick
{
get
{
return GetPropertyValue("DisableOnDblClick ", true);
}
set
{
SetPropertyValue("DisableOnDblClick ", value);
}
}
Vous avez sans doute remarqué l’appel à deux fonctions pour l’affectation et la récupération de notre Accesseur : GetPropertyValue et SetPropertyValue.
Ces deux fonctions sont propres à l’ATLAS Toolkit et ne font que placer et récupérer votre valeur depuis le ViewState.
D’où ai-je pioché cette information ? Eh bien des sources de l’ATLAS Toolkit que vous avez à votre disposition depuis son installation sur votre machine. N’hésitez pas à explorer les sources de la Toolkit et récupérer des exemples de codes. C’est une ressource inépuisable et surtout indispensable.
Nous avons terminé coté Serveur, il nous reste à nous attaquer à la partie la plus plaisante de toutes, le code JavaScript !
Le fichier ReadWriteTextBoxBehavior.js est déjà bien rempli de base. Grace à l’apport du Framework ASP.Net Ajax 1.0 et une mise en avant des concepts objet, on arrive à avoir un squelette de ce qui pourrait représenter une classe.
Le modèle adopté ici est la présentation de la classe sous forme de déclaration d’un prototype.
Si vous avez déjà fait du JavaScript mais jamais avec le Framework ASP.Net Ajax 1.0, ne soyez pas étonné de ne pas reconnaitre certaines fonctions.
Tout d’abord, le Framework ASP.Net Ajax 1.0, dans le souci de cohérence et de rapprochement avec ce que l’on connait en .Net, fournit un moyen de créer des Namespaces en JavaScript.
Certes l’écriture du code diffère mais le résultat se rapproche de ce à quoi peut servir un namespace :
Type.registerNamespace('ReadWriteTextBox');
Sans rentrer dans les détails, toute class JavaScript est définie comme une fonction et est déclarée comme tel. Si en l’on rajoute le concept de Namespace la ligne suivante ne devrait pas vous surprendre :
ReadWriteTextBox.ReadWriteTextBoxBehavior = function(element) {
ReadWriteTextBox.ReadWriteTextBoxBehavior.initializeBase(this, [element]);
// TODO : (Step 1) Add your property variables here
//
this._myPropertyValue = null;
}
Nous avons là un premier élément de notre class. C’est ici que nous allons déclarer nos propriétés. Enfin, du moins les propriétés privées.
En JavaScript, il n’existe pas de typage fort des données. On déclare directement la propriété et on y affecte une valeur par défaut.
Vous reconnaissez sans doute dans _myPropertyValue, quelque chose qui ressemble fort à ce que nous avions au départ dans notre class ReadWriteTextBoxExtender.cs (la propriété MyPropertyValue)
Nous allons la remplacer par notre booléen.
Note : Le nom de cette propriété n’est pas très importante, mais par convention, nous allons utiliser un « _ » pour signifier que nous avons à faire à une propriété privée, et du camelCasing pour le reste (JavaScript est basé entièrement sur du camelCasing, n’en déplaiseJ)
Nous allons donc avoir :
this._disableOnDblClick = null;
Note : la nomenclature de cette propriété privée n’est pas très importante. Il en sera autrement de l’accesseur (ou du moins son homologue JavaScript)
Dans notre Extender, nous allons créer à la volée une DIV qui recouvrira notre TextBox, nous avons donc besoin de déclarer cette DIV pour pouvoir travailler dessus.
// DOM Element de type DIV
this._divReadOnly = null;
De plus, nous allons interagir sur des évènements particuliers :
- Le Clic sur le Div qui masquera celui-ci pour faire apparaitre le TexBox
- Le LostFocus du Texbox qui produira l’effet inverse
- Le Double clic sur la Texbox qui désactivera le comportement global
Les développeurs JavaScript qui ont une certaine expérience sur le sujet savent que la gestion des évènements est très complexe, surtout si on veut que cela fonctionne sur tous les navigateurs.
C’est là, encore une fois, que le Framework ASP.Net Ajax 1.0 intervient en encapsulant cette complexité et en nous offrant un modèle homogène et très proche d’un modèle classique objet.
Un évènement c’est quoi ? C’est tout simplement un Handler et un Délégué.
Et bien soit, nous pouvons faire maintenant la même chose en JavaScript. Déclarons donc les Handlers :
// Handlers
this._textBoxBlurHandler = null;
this._textBoxDblClickHandler = null;
this._divClickHandler = null;
Nous avons terminé la déclaration de nos propriétés et nous pouvons nous attaquer au prototype : C’est ici que nous allons coder les fonctions de notre class JavaScript :
Il n’existe pas d’accesseurs au sens .Net comme on l’entend. Pour palier à ce problème, nous allons créer deux fonctions qui rempliront le rôle de Get et de Set d’un accesseur classique.
Ces deux fonctions doivent être nommées EXACTEMENT de la façon suivante, sinon la propriété DisableOnDblClick de votre Extender ne sera pas passée lors du rendu du contrôle :
1) Pour le GET : « get_ » + « nomdelapropriete »
2) Pour le SET : « set_ » + « nomdelapropriete »
Dans notre exemple, nous aurions donc :
get_ DisableOnDblClick : function() {
return this._disableOnDblClick;
},
set_ DisableOnDblClick : function(value) {
this._disableOnDblClick = value;
},
Si vous en restez là, tout fonctionnera, mais, nous avons dit que la casse utilisée en JavaScript est basée sur le camelCasing.
Nous voudrions donc quelque chose comme ceci :
get_disableOnDblClick: function() {
return this._disableOnDblClick;
},
set_disableOnDblClick: function(value) {
this._disableOnDblClick = value;
},
Le problème c’est que nous ne respectons pas la nomenclature correcte pour le passage de la propriété de notre Extender.
Heureusement, il existe un attribut à déclarer sur la propriété de notre Extender C# pour palier à ce problème et respecter de chaque coté les conventions de nommage :
L’attribut ClientPropertyName :
[ExtenderControlProperty]
[DefaultValue(true)]
[ClientPropertyName("disableOnDblClick")]
public Boolean DisableOnDblClick
{
get
{
return GetPropertyValue("DisableOnDblClick", true);
}
set
{
SetPropertyValue("DisableOnDblClick", value);
}
}
Nous devons créer notre DIV et la placer correctement :
La DIV est construite dans la fonction _initiateDiv().
Je vous laisse regarder le code superflu (notamment la récupération des styles par exemple) dans le projet source, pour m’attarder sur certains points :
_initializeDiv : function(){
var element = this.get_element();
this._divReadOnly = document.createElement('div');
this._divReadOnly.id = element.id + "_div";
this._divReadOnly.innerHTML = element.value;
this._divReadOnly.style.cursor = "pointer";
// Récupération de la position et de la taille du TextBox
var elementBounds = CommonToolkitScripts.getBounds(element);
Sys.Debug.trace("Bounds : X = " + elementBounds.x + " Y = " + elementBounds.y + " Width = " + elementBounds.width + " Height = " + elementBounds.height);
// Affectation des éléments taille et position au div
CommonToolkitScripts.setBounds(this._divReadOnly, elementBounds);
document.body.appendChild(this._divReadOnly);
1) Pour placer notre DIV, aussi faut il savoir où est placée notre TextBox. D’ailleurs comment faire pour récupérer un pointeur sur cette TextBox ???
Tout simplement, grâce encore une fois au Framework ASP.Net Ajax 1.0 et l’adjonction de fonctionnalités de la Toolkit, vous avez une fonction toute simple qui récupère le contrôle étendu par votre Extender en JavaScript : this.get_element() ;
Le retour de cette fonction est un objet DOM classique.
2) Plus compliqué : Récupérer la taille de notre TextBox et sa position ? Là on peut vite s’arracher les cheveux si on veut en plus être sûr que cela fonctionne sur tous les navigateurs. Mais encore une fois la ToolKit vous simplifie la vie : l’appel de la fonction CommonToolkitScripts.getBounds(element) vous récupère non seulement la dimension mais aussi la taille de votre élément DOM.
3) Évidemment si on est capable de récupérer la taille et la position d’un objet DOM, on est forcément également capable de lui affecter une taille et une position : C’est ce que fait la fonction CommonToolkitScripts.setBounds(element, elementBounds);
Bien, quelques remarques en vrac :
Où trouver de la documentation sur les diverses fonctions et possibilités de l’ATLAS Toolkit en terme de script JavaScript ? Pour le moment nulle-part.
Le mieux reste encore l’exploration de la Toolkit elle-même. Je vous conseille une exploration approfondie du répertoire Common du projet AjaxControlToolkit.csproj pour vous donner une idée des possibilités offerte par le Framework de la Toolkit. Vous allez vite vous rendre compte que cela devient indispensable !
Vous aurez surement remarqué une ligne dans le code qui ressemble à du débuggage :
Sys.Debug.trace("Bounds : X = " + elementBounds.x + " Y = " + elementBounds.y + " Width = " + elementBounds.width + " Height = " + elementBounds.height);
Je vous conseille la lecture des tutoriaux d’ ASP.Net Ajax 1.0 pour l’utilisation du mode débug pour le développement de vos contrôles :
http://ajax.asp.net/docs/overview/ASPNETAJAXDebuggingAndTracingOverview.aspx
Pour chaque Handler déclaré, nous allons créer un délégué qui va pointer sur la bonne fonction.
Un exemple de création de délégué grâce au Framework Ajax.Net Extensions :
this._divClickHandler = Function.createDelegate(this, this._onDivClick);
$addHandler(this._divReadOnly, "click", this._divClickHandler);
Function.createDelegate : Crée le délégué qui pointe sur la fonction _onDivClick et l’affecte au Handler déclaré
$addHandler : Ajoute le Handler sur l’évènement clic de la DIV
Note : $addHandler est un raccourci vers Sys.UI.DomEvent.addHandler. D’une manière générale, une fonction notée avec un $ est la plupart du temps un raccourci
Il ne reste plus qu’à créer la fonction _onDivClick qui représente le cœur du métier
_onDivClick : function(e) {
/// <summary>
/// Clic sur le Div
/// </summary>
/// <param name="e" type="Sys.UI.DomEvent">
/// </param>
Sys.Debug.trace("Click sur la Div");
if (this._disableOnDblClick){
return;
}
Sys.UI.DomElement.setVisible(this._divReadOnly, false);
Sys.UI.DomElement.setVisible(this.get_element(), true);
// Focus sur la zone de texte
this.get_element().focus();
},
Nous avons vu jusqu’à présent qu’il est facile de faire transiter la valeur d’une propriété depuis votre Contrôle Serveur vers le Contrôle généré et sa class JavaScript.
Par contre nous ne savons pas comment faire pour refaire transiter cette valeur dans l’autre sens, lors d’un PostBack.
Encore une fois, et grâce à l’héritage de la classe Extender, vous avez accés à une propriété qui est persitante et qui permet de stocker des valeurs à récupérer dans un sens comme dans l’autre.
Il s’agit du ClientState.
Vous y accédez via le code Javascript de la manière suivante :
this._setClientState(value) ;
var __value = this._getClientState() ;
Dans notre exemple nous avons besoin de stocker la valeur de la propriété _disableOnDblClick
Il suffit pour cela de modifier par exemple l’accesseur de la propriété. Notre code devient donc :
set_disableOnDblClick : function(value) {
this._disableOnDblClick = value;
// Affectation de la valeur dans le ClientState, pour récupération lors du PostBack
this.set_ClientState(value);
},
Il suffit maintenant de récupérer la valeur coté serveur. Il existe un évènement levé sur l’Extender lors du chargement du ClientState. Il suffit de s’y abonner et récupérer la donnée chargée. Attention toutefois, l’évènement n’est levé que si vous avez explicitement autorisé la gestion du ClientState dans votre contrôle.
Notre code évolue et devient donc :
public ReadWriteTextBoxExtender()
{
this.ClientStateValuesLoaded += ReadWriteTextBoxExtender_ClientStateValuesLoaded ;
this.EnableClientState = true;
}
void ReadWriteTextBoxExtender_ClientStateValuesLoaded(object sender, EventArgs e)
{
string clientState = base.ClientState;
if (clientState != null)
{
bool value = bool.Parse(clientState);
this.DisableOnDblClick = value ;
}
}
Voilà nous avons pu récupérer la valeur de la propriété qui a évolué depuis le rendu du contrôle client !
Votre class JavaScript contient une fonction appelée dispose(). C’est ici que vous allez pouvoir libérer vos ressources afin d’optimiser le fonctionnement de votre contrôle :
Important ici, veillez à supprimer les Handlers que vous avez créés lors de l’initialisation :
var element = this.get_element();
if(element) {
$removeHandler(element, "blur", this._textBoxBlurHandler);
$removeHandler(element, "dblclick", this._textBoxDblClickHandler);
}
if (this._divReadOnly)
{
$removeHandler(this._divReadOnly, "click", this._divClickHandler);
}
// Handlers
this._textBoxBlurHandler = null;
this._textBoxDblClickHandler = null;
this._divClickHandler = null;
Dans votre designer Visual Studio.Net 2005, vous tout d’abord rajouter un objet ScriptManager. C’est obligatoire ! Rappelez-vous que c’est lui qui va générer le Framwork JavaScript ASP.Net Ajax Extentions 1.0 et référencer les fichiers JavaScript (entre autre)
Puis il ne reste plus qu’à ajouter une TextBox classique, ainsi que votre Extender.
Vous devez lier l’Extender à votre TextBox. Ceci se fait grâce à la propriété TargetControlID.
Rappelez-vous l’attribut que nous avons placé dans notre Extender :
[TargetControlType(typeof(TextBox))]
C’est cet attribut qui définit la liste possible d’identifiants qui apparaitront dans la Liste déroulante de choix pour la propriété TargetControlID
Note : si vous observez bien les propriétés de notre Extender, vous allez vous apercevoir que notre propriété DisableOnDblClick n’est pas présente.
Où la trouver ? Et bien, rappelez vous que depuis le début, nous cherchons à étendre le comportement d’un contrôle : Si on regarde le contrôle TextBox, on s’aperçoit que la propriété a été rajoutée à sa propre collection !
Il ne reste plus qu’à exécuter et vérifier le comportement de notre TextBox étendu
Les deux points à tester, et qui rendent votre contrôle interactif sont :
- L’expérience utilisateur enrichi : Celui-ci peut interagir avec votre contrôle et utiliser le comportement défini par le code JavaScript
- Capacité d’affecter et récupérer facilement la valeur d’une propriété qui a évolué depuis l’interface cliente depuis votre code Serveur
Vous trouverez dans l’exemple un bouton qui effectue un PostBack et récupère la propriété DisableOnDblClick et affiche sa valeur dans un Label.
Nous avons vu dans cet article comment utiliser le Framework ASP.Net Ajax Extensions 1.0 ainsi que le Framework basé dessus de l’ATLAS Toolkit, pour créer un simple Extender.
Si on désire aller un peu plus loin, on va peut être vouloir gérer dans notre Extender des évènements qui seraient capable de faire des appels asynchrone en AJAX par exemple.
Mais malheureusement aujourd’hui, les Extenders ne permettent pas cette possibilité, ce qui est bien dommage.
Dans un prochain article, nous verrons comment il est possible de passer outre cette limitation en créer notre propre contrôle dérivé de ScriptControl.
Enjoy !