Créer un comportement personnalisé dans ASP.NET Atlas

Auteur：Eve Cole Date de mise à jour：2009-06-30 16:12:07

Version anglaise : http://dflying.dflying.net/1/archive/120_build_your_own_behaviors_in_aspnet_atlas.html
Le comportement dans Atlas définit le comportement lorsqu'un événement du contrôle est déclenché. Le comportement peut être vu comme un événement DHTML encapsulé, tel qu'un clic et un survol. Le comportement peut également être un composant qui peut être attaché à un contrôle client Atlas pour fournir des fonctions plus avancées et plus riches du contrôle client Atlas, telles que certains glisser-déposer complexes, la complétion automatique et les fonctions flottantes et autres. Le comportement sera défini dans la collection de comportements d'un contrôle Atlas.

À partir de la documentation d'Atlas et des fichiers sources, nous pouvons savoir qu'Atlas possède les comportements intégrés suivants :

Comportement de clic : fournit le traitement des clics de souris.
Comportement flottant : fournit des effets de glisser-déposer.
Comportement de survol : assure le traitement des événements DHTML au survol, à la sortie de la souris, au focus et au flou.
Composant contextuel : fournit une fonction contextuelle et peut être utilisé pour implémenter des info-bulles avancées.
Comportement de saisie semi-automatique : fournit une fonctionnalité de saisie semi-automatique. C'est également l'une des fonctionnalités couramment utilisées dans les démos Atlas. Ce comportement nécessite également un gestionnaire côté serveur.
Click Behaviour est utilisé pour gérer l'événement onclick de DHTML. Il est très utile mais les fonctions qu'il fournit sont quelque peu simples. Dans certains programmes plus complexes, nous devrons peut-être séparer les fonctions des touches gauche et droite. Par exemple, la touche gauche est utilisée pour sélectionner et la touche droite est utilisée pour afficher un menu contextuel. Bien que nous puissions mettre ceci if-else dans le gestionnaire Click Behavior, ce n'est pas une bonne méthode Atlas. Par conséquent, aujourd'hui, nous allons écrire un comportement de clic plus puissant appelé ExtendedClickBehavior, qui peut séparer les touches gauche et droite à l'intérieur du comportement et déclencher deux événements différents. En écrivant ce ExtendedClickBehavior, vous pouvez également comprendre le processus général de création d'un comportement personnalisé dans Atlas.

Généralement, il existe cinq étapes pour créer un comportement personnalisé :

Hériter de la classe de base Sys.UI.Behavior.
Définissez vos propres événements pour encapsuler les événements dans DHTML. Ces événements seront utilisés pour exposer d'autres contrôles Atlas à la place des événements DHTML d'origine non modifiés.
Spécifiez un gestionnaire pour votre événement dans le constructeur du comportement et détachez le gestionnaire de l'événement dans le destructeur.
Émettez l’événement correspondant dans la fonction de gestionnaire. Dans l'exemple de ExtendedClickBehavior, nous émettons différents événements en fonction de différents boutons de souris.
Ajoutez une description de l'événement que vous avez défini dans la méthode getDescriptor().
Vous trouverez ci-dessous le code JavaScript pour ExtendedClickBehavior. Les cinq étapes ci-dessus sont marquées comme commentaires dans le code. Enregistrez le code ci-dessous sous ExtendedClickBehavior.js.

Sys.UI.ExtendedClickBehavior = fonction() {
Sys.UI.ExtendedClickBehavior.initializeBase(this);

var _clickHandler;

// étape 2
this.click = this.createEvent();
this.leftClick = this.createEvent();
this.rightClick = this.createEvent();

this.dispose = fonction() {
// étape 3
this.control.element.detachEvent('onmousedown', _clickHandler);
Sys.UI.ExtendedClickBehavior.callBaseMethod(this, 'dispose');
}

this.initialize = fonction() {
Sys.UI.ExtendedClickBehavior.callBaseMethod(this, 'initialize');

// étape 3 )

;

_clickHandler = Function.createDelegate(this, clickHandler);
this.control.element.attachEvent('onmousedown', _clickHandler);
}

this.getDescriptor = fonction() {
var td = Sys.UI.ExtendedClickBehavior.callBaseMethod(this, 'getDescriptor');

// étape 5
td.addEvent('clic', true);
td.addEvent('leftClick', true);
td.addEvent('rightClick', true);
retourner td ;
}

// étape 4
fonction clickHandler() {
this.click.invoke(this, Sys.EventArgs.Empty);
si (window.event.button == 1)
{
this.leftClick.invoke(this, Sys.EventArgs.Empty);
}
sinon si (window.event.button == 2)
{
this.rightClick.invoke(this, Sys.EventArgs.Empty);
}
}
}
// étape 1
Sys.UI.ExtendedClickBehavior.registerSealedClass('Sys.UI.ExtendedClickBehavior', Sys.UI.Behavior);
Sys.TypeDescriptor.addType('script', 'extendedClickBehavior', Sys.UI.ExtendedClickBehavior);
Testons ce ExtendedClickBehavior sur la page. Ajoutez un <div> à la page pour les clics et une étiquette pour afficher les informations sur les clics. Vous trouverez ci-dessous la définition HTML du fichier ASPX. N'oubliez pas d'ajouter une référence au fichier ExtendedClickBehavior.js dans le ScriptManager.

<atlas:ScriptManager EnablePartialRendering="true" ID="ScriptManager1" runat="server">
<Scripts>
<atlas:ScriptReference Path="ExtendedClickBehavior.js" />
</Scripts>
</atlas:ScriptManager>
<div>
<div id="myButton" style="border: 1px solid black; width: 20em; white-space:normal">Cliquez sur moi (gauche et droite) !</div> <br />
<span id="myLabel">pas cliqué</span>
</div>
Vous trouverez ci-dessous la définition du script Atlas. Notez que nous utilisons l'action setProperty d'Atlas (pour l'action Atlas, voir l'article suivant) pour définir le texte de l'étiquette après chaque clic.