Englische Version: http://dflying.dflying.net/1/archive/120_build_your_own_behaviors_in_aspnet_atlas.html
Das Verhalten in Atlas definiert das Verhalten, wenn ein Ereignis des Steuerelements ausgelöst wird. Verhalten kann als gekapseltes DHTML-Ereignis angesehen werden, beispielsweise Klicken und Bewegen des Mauszeigers. Verhalten kann auch eine Komponente sein, die an ein Atlas-Client-Steuerelement angehängt werden kann, um erweiterte und umfangreichere Funktionen des Atlas-Client-Steuerelements bereitzustellen, z. B. einige komplexe Drag & Drop-, automatische Vervollständigungs-, Floating- und andere Funktionen. Das Verhalten wird in der Verhaltenssammlung eines Atlas-Steuerelements definiert.
Aus der Atlas-Dokumentation und den Quelldateien können wir erkennen, dass Atlas über die folgenden integrierten Verhaltensweisen verfügt:
Klickverhalten: Bietet die Verarbeitung von Mausklicks.
Schwebendes Verhalten: Bietet Drag & Drop-Effekte.
Hover-Verhalten: Bietet die Verarbeitung von DHTML-Ereignissen bei Mouseover, Onmouseout, Onfocus und Onblur.
Popup-Komponente: Bietet eine Popup-Funktion und kann zum Implementieren erweiterter Tooltips verwendet werden.
Verhalten bei der automatischen Vervollständigung: Bietet eine Funktion zur automatischen Vervollständigung. Dies ist auch eine der häufig verwendeten Funktionen in Atlas-Demos. Dieses Verhalten erfordert auch einen serverseitigen Handler.
Click Behavior wird verwendet, um das Onclick-Ereignis von DHTML zu verarbeiten. Es ist sehr nützlich, aber die Funktionen, die es bietet, sind eher einfach. In einigen komplexeren Programmen müssen wir möglicherweise die Funktionen der linken und rechten Taste trennen. Beispielsweise wird die linke Taste zum Auswählen und die rechte Taste zum Öffnen eines Kontextmenüs verwendet. Obwohl wir dieses if-else in den Click Behavior-Handler einfügen können, ist dies keine gute Atlas-Methode. Deshalb werden wir heute ein leistungsfähigeres Klickverhalten namens ExtendedClickBehavior schreiben, das die linke und rechte Taste innerhalb des Verhaltens trennen und zwei verschiedene Ereignisse auslösen kann. Durch das Schreiben dieses ExtendedClickBehavior können Sie auch den allgemeinen Prozess zum Erstellen eines benutzerdefinierten Verhaltens in Atlas verstehen.
Im Allgemeinen gibt es fünf Schritte zum Erstellen eines benutzerdefinierten Verhaltens:
Von der Basisklasse Sys.UI.Behavior erben.
Definieren Sie Ihre eigenen Ereignisse, um Ereignisse in DHTML zu kapseln. Diese Ereignisse werden verwendet, um andere Atlas-Steuerelemente anstelle der ursprünglichen, unveränderten DHTML-Ereignisse verfügbar zu machen.
Geben Sie im Konstruktor des Verhaltens einen Handler für Ihr Ereignis an und trennen Sie den Handler des Ereignisses im Destruktor.
Geben Sie das entsprechende Ereignis in der Handlerfunktion aus. Im Beispiel von ExtendedClickBehavior geben wir unterschiedliche Ereignisse basierend auf unterschiedlichen Maustasten aus.
Fügen Sie eine Beschreibung des Ereignisses hinzu, das Sie in der Methode getDescriptor() definiert haben.
Unten finden Sie den JavaScript-Code für ExtendedClickBehavior. Die oben genannten fünf Schritte sind im Code als Kommentare gekennzeichnet. Speichern Sie den folgenden Code als ExtendedClickBehavior.js.
Sys.UI.ExtendedClickBehavior = function() {
Sys.UI.ExtendedClickBehavior.initializeBase(this);
var _clickHandler;
// Schritt 2
this.click = this.createEvent();
this.leftClick = this.createEvent();
this.rightClick = this.createEvent();
this.dispose = function() {
// Schritt 3
this.control.element.detachEvent('onmousedown', _clickHandler);
Sys.UI.ExtendedClickBehavior.callBaseMethod(this, 'dispose');
}
this.initialize = function() {
Sys.UI.ExtendedClickBehavior.callBaseMethod(this, 'initialize');
// Schritt 3
_clickHandler = Function.createDelegate(this, clickHandler);
this.control.element.attachEvent('onmousedown', _clickHandler);
}
this.getDescriptor = function() {
var td = Sys.UI.ExtendedClickBehavior.callBaseMethod(this, 'getDescriptor');
// Schritt 5
td.addEvent('click', true);
td.addEvent('leftClick', true);
td.addEvent('rightClick', true);
return td;
}
// Schritt 4
Funktion clickHandler() {
this.click.invoke(this, Sys.EventArgs.Empty);
if (window.event.button == 1)
{
this.leftClick.invoke(this, Sys.EventArgs.Empty);
}
sonst wenn (window.event.button == 2)
{
this.rightClick.invoke(this, Sys.EventArgs.Empty);
}
}
}
// Schritt 1
Sys.UI.ExtendedClickBehavior.registerSealedClass('Sys.UI.ExtendedClickBehavior', Sys.UI.Behavior);
Sys.TypeDescriptor.addType('script', 'extendedClickBehavior', Sys.UI.ExtendedClickBehavior);
Testen wir dieses ExtendedClickBehavior auf der Seite. Fügen Sie der Seite ein <div> für Klicks und eine Beschriftung hinzu, um Klickinformationen anzuzeigen. Unten finden Sie die HTML-Definition aus der ASPX-Datei. Vergessen Sie nicht, im ScriptManager einen Verweis auf die Datei ExtendedClickBehavior.js hinzuzufügen.
<atlas:ScriptManager EnablePartialRendering="true" ID="ScriptManager1" runat="server">
<Skripte>
<atlas:ScriptReference Path="ExtendedClickBehavior.js" />
</Skripte>
</atlas:ScriptManager>
<div>
<div id="myButton" style="border: 1px solid black; width: 20em; white-space:normal">Klicken Sie auf mich (links und rechts)!</div> <br />
<span id="myLabel">nicht angeklickt</span>
</div>
Unten finden Sie die Atlas-Skriptdefinition. Beachten Sie, dass wir die setProperty-Aktion von Atlas verwenden (Informationen zur Atlas-Aktion finden Sie im folgenden Artikel), um den Text der Beschriftung nach jedem Klick festzulegen.
<page xmlns:script=" http://schemas.microsoft.com/xml-script/2005 ">
<Komponenten>
<label id="myButton">
<Verhalten>
<extendedClickBehavior>
<klick>
<setProperty target="myLabel" property="text" value="clicked" />
</click>
<Linksklick>
<setProperty target="myLabel" property="text" value="left clicked" />
</leftClick>
<Rechtsklick>
<setProperty target="myLabel" property="text" value="right clicked" />
</rightClick>
</extendedClickBehavior>
</behaviors>
</label>
<label id="myLabel" />
</components>
</page>