Versión en inglés: http://dflying.dflying.net/1/archive/120_build_your_own_behaviors_in_aspnet_atlas.html
El comportamiento en Atlas define el comportamiento cuando se activa un evento del control. El comportamiento puede verse como un evento DHTML encapsulado, como hacer clic y pasar el cursor. El comportamiento también puede ser un componente que se puede adjuntar a un control de cliente Atlas para proporcionar funciones más avanzadas y ricas del control de cliente Atlas, como algunas funciones complejas de arrastrar y soltar, finalización automática y funciones flotantes y otras. El comportamiento se definirá en la colección de comportamientos de un control Atlas.
A partir de la documentación y los archivos fuente de Atlas, podemos saber que Atlas tiene los siguientes comportamientos integrados:
Comportamiento de clic: proporciona procesamiento de clics del mouse.
Comportamiento flotante: proporciona efectos de arrastrar y soltar.
Comportamiento de desplazamiento: proporciona procesamiento de eventos DHTML onmouseover, onmouseout, onfocus y onblur.
Componente emergente: proporciona una función emergente y se puede utilizar para implementar información sobre herramientas avanzada.
Comportamiento de autocompletar: proporciona funcionalidad de finalización automática. Esta es también una de las funciones más utilizadas en las demostraciones de Atlas. Este comportamiento también requiere un controlador del lado del servidor.
Click Behavior se utiliza para manejar el evento onclick de DHTML. Es muy útil pero las funciones que proporciona son algo simples. En algunos programas más complejos, es posible que necesitemos separar las funciones de las teclas izquierda y derecha. Por ejemplo, la tecla izquierda se usa para seleccionar y la tecla derecha para abrir un menú contextual. Aunque podemos poner este if-else en el controlador Click Behavior, este no es un buen método Atlas. Por lo tanto, hoy vamos a escribir un comportamiento de clic más poderoso llamado ExtendedClickBehavior, que puede separar las teclas izquierda y derecha dentro del comportamiento y desencadenar dos eventos diferentes. Al escribir este ExtendedClickBehavior, también podrá comprender el proceso general de creación de un comportamiento personalizado en Atlas.
Generalmente, hay cinco pasos para crear un comportamiento personalizado:
Heredar de la clase base Sys.UI.Behavior.
Defina sus propios eventos para encapsular eventos en DHTML. Estos eventos se utilizarán para exponer otros controles de Atlas en lugar de los eventos DHTML originales sin modificar.
Especifique un controlador para su evento en el constructor de Behavior y separe el controlador del evento en el destructor.
Emite el evento correspondiente en la función del controlador. En el ejemplo de ExtendedClickBehavior, emitimos diferentes eventos basados en diferentes botones del mouse.
Agregue una descripción del evento que definió en el método getDescriptor().
A continuación se muestra el código JavaScript para ExtendedClickBehavior. Los cinco pasos anteriores están marcados como comentarios dentro del código. Guarde el código siguiente como ExtendedClickBehavior.js.
Sys.UI.ExtendedClickBehavior = función() {
Sys.UI.ExtendedClickBehavior.initializeBase(esto);
var _clickHandler;
// paso 2
this.click = this.createEvent();
this.leftClick = this.createEvent();
this.rightClick = this.createEvent();
this.dispose = función() {
// paso 3
this.control.element.detachEvent('onmousedown', _clickHandler);
Sys.UI.ExtendedClickBehavior.callBaseMethod(esto, 'eliminar');
}
this.initialize = función() {
Sys.UI.ExtendedClickBehavior.callBaseMethod(this, 'inicializar');
// paso 3
_clickHandler = Function.createDelegate(esto, clickHandler);
this.control.element.attachEvent('onmousedown', _clickHandler);
}
this.getDescriptor = función() {
var td = Sys.UI.ExtendedClickBehavior.callBaseMethod(this, 'getDescriptor');
// paso 5
td.addEvent('clic', verdadero);
td.addEvent('leftClick', verdadero);
td.addEvent('rightClick', verdadero);
volver td;
}
// paso 4
función clickHandler() {
this.click.invoke(esto, Sys.EventArgs.Empty);
si (ventana.evento.botón == 1)
{
this.leftClick.invoke(esto, Sys.EventArgs.Empty);
}
de lo contrario si (ventana.evento.botón == 2)
{
this.rightClick.invoke(esto, Sys.EventArgs.Empty);
}
}
}
// paso 1
Sys.UI.ExtendedClickBehavior.registerSealedClass('Sys.UI.ExtendedClickBehavior', Sys.UI.Behavior);
Sys.TypeDescriptor.addType('script', 'extendedClickBehavior', Sys.UI.ExtendedClickBehavior);
Probemos este ExtendedClickBehavior en la página. Agregue un <div> a la página para los clics y una etiqueta para mostrar la información de los clics. A continuación se muestra la definición HTML del archivo ASPX. No olvide agregar una referencia al archivo ExtendedClickBehavior.js en ScriptManager.
<atlas:ScriptManager EnablePartialRendering="true" ID="ScriptManager1" runat="servidor">
<Guiones>
<atlas:ScriptReference Path="ExtendedClickBehavior.js" />
</scripts>
</atlas:ScriptManager>
<div>
<div id="myButton" style="border: 1px solid black; width: 20em; white-space:normal">¡Haz clic en mí (izquierda y derecha)!</div> <br />
<span id="myLabel">no se hizo clic</span>
</div>
A continuación se muestra la definición del script Atlas. Observe que utilizamos la acción setProperty de Atlas (para la acción Atlas, consulte el artículo siguiente) para configurar el texto de la etiqueta después de cada clic.
<página xmlns:script=" http://schemas.microsoft.com/xml-script/2005 ">
<componentes>
<label id="miBotón">
<comportamientos>
<comportamiento de clic extendido>
<hacer clic>
<setProperty target="miEtiqueta" propiedad="texto" valor="se hizo clic" />
</clic>
<clic izquierdo>
<setProperty target="myLabel" property="text" value="clic izquierdo" />
</clic izquierdo>
<clic derecho>
<setProperty target="myLabel" property="text" value="clic derecho" />
</clicderecho>
</extendedClickBehavior>
</comportamientos>
</etiqueta>
<etiqueta id="miEtiqueta" />
</componentes>
</página>