Versão em inglês: http://dflying.dflying.net/1/archive/120_build_your_own_behaviors_in_aspnet_atlas.html
O comportamento no Atlas define o comportamento quando um evento do controle é acionado. O comportamento pode ser visto como um evento DHTML encapsulado, como clicar e passar o mouse. O comportamento também pode ser um componente que pode ser anexado a um controle de cliente Atlas para fornecer funções mais avançadas e mais ricas do controle de cliente Atlas, como arrastar e soltar complexos, preenchimento automático e funções flutuantes e outras. O comportamento será definido na coleção de comportamentos de um controle Atlas.
A partir da documentação e dos arquivos de origem do Atlas, podemos saber que o Atlas possui os seguintes comportamentos integrados:
Comportamento de clique: fornece processamento de cliques do mouse.
Comportamento flutuante: fornece efeitos de arrastar e soltar.
Hover Behavior: Fornece processamento de eventos DHTML onmouseover, onmouseout, onfocus e onblur.
Componente Pop-up: Fornece função pop-up e pode ser usado para implementar dicas de ferramentas avançadas.
Comportamento de preenchimento automático: fornece funcionalidade de preenchimento automático. Este também é um dos recursos comumente usados nas demonstrações do Atlas. Este comportamento também requer um manipulador do lado do servidor.
Click Behavior é usado para lidar com o evento onclick do DHTML. É muito útil, mas as funções que ele fornece são um tanto simples. Em alguns programas mais complexos, podemos precisar separar as funções das teclas esquerda e direita. Por exemplo, a tecla esquerda é usada para selecionar e a tecla direita é usada para abrir um menu de atalho. Embora possamos colocar esse if-else no manipulador Click Behavior, esse não é um bom método Atlas. Portanto, hoje vamos escrever um Click Behavior mais poderoso chamado ExtendedClickBehavior, que pode separar as teclas esquerda e direita dentro do Behavior e acionar dois eventos diferentes. Ao escrever este ExtendedClickBehavior, você também pode entender o processo geral de criação de um comportamento personalizado no Atlas.
Geralmente, há cinco etapas para criar um comportamento personalizado:
Herdar da classe base Sys.UI.Behavior.
Defina seus próprios eventos para encapsular eventos em DHTML. Esses eventos serão usados para expor outros controles do Atlas no lugar dos eventos DHTML originais e não modificados.
Especifique um manipulador para o seu evento no construtor do Behavior e desanexe o manipulador do evento no destruidor.
Emita o evento correspondente na função manipuladora. No exemplo de ExtendedClickBehavior, emitimos diferentes eventos com base em diferentes botões do mouse.
Adicione uma descrição do evento definido no método getDescriptor().
Abaixo está o código JavaScript para ExtendedClickBehavior. As cinco etapas acima são marcadas como comentários no código. Salve o código abaixo como ExtendedClickBehavior.js.
Sys.UI.ExtendedClickBehavior = function() {
Sys.UI.ExtendedClickBehavior.initializeBase(this);
var _clickHandler;
//passo 2
this.click = this.createEvent();
this.leftClick = this.createEvent();
this.rightClick = this.createEvent();
this.dispose = function() {
//passo 3
this.control.element.detachEvent('onmousedown', _clickHandler);
Sys.UI.ExtendedClickBehavior.callBaseMethod(this, 'dispose');
}
this.initialize = function() {
Sys.UI.ExtendedClickBehavior.callBaseMethod
(this, 'initialize');
_clickHandler = Function.createDelegate(this, clickHandler);
this.control.element.attachEvent('onmousedown', _clickHandler);
}
this.getDescriptor = function() {
var td = Sys.UI.ExtendedClickBehavior.callBaseMethod(this, 'getDescriptor');
//passo 5
td.addEvent('clique', verdadeiro);
td.addEvent('clique esquerdo', verdadeiro);
td.addEvent('cliquedireito', verdadeiro);
retornar td;
}
//passo 4
função clickHandler() {
this.click.invoke(this, Sys.EventArgs.Empty);
if (janela.event.button == 1)
{
this.leftClick.invoke(this, Sys.EventArgs.Empty);
}
senão if (window.event.button == 2)
{
this.rightClick.invoke(this, Sys.EventArgs.Empty);
}
}
}
//passo 1
Sys.UI.ExtendedClickBehavior.registerSealedClass('Sys.UI.ExtendedClickBehavior', Sys.UI.Behavior);
Sys.TypeDescriptor.addType('script', 'extendedClickBehavior', Sys.UI.ExtendedClickBehavior);
Vamos testar esse ExtendedClickBehavior na página. Adicione um <div> à página para cliques e um rótulo para exibir informações de clique. Abaixo está a definição HTML do arquivo ASPX. Não se esqueça de adicionar uma referência ao arquivo ExtendedClickBehavior.js no ScriptManager.
<atlas:ScriptManager EnablePartialRendering="true" ID="ScriptManager1" runat="servidor">
<Roteiros>
<atlas:ScriptReference Path="ExtendedClickBehavior.js" />
</Scripts>
</atlas:ScriptManager>
<div>
<div id="myButton" style="border: 1px solid black; width: 20em; white-space:normal">Clique em mim (esquerda e direita)!</div> <br />
<span id="myLabel">não clicado</span>
</div>
Abaixo está a definição do script Atlas. Observe que usamos a ação setProperty do Atlas (para Ação Atlas, consulte o artigo subsequente) para definir o texto do rótulo após cada clique.
<página xmlns:script=" http://schemas.microsoft.com/xml-script/2005 ">
<componentes>
<label id="meuButton">
<comportamentos>
<extendedClickBehavior>
<clique>
<setProperty target="myLabel" property="text" value="clicked" />
</clique>
<clique esquerdo>
<setProperty target="myLabel" property="text" value="clicado com o botão esquerdo" />
</leftClick>
<clique com o botão direito>
<setProperty target="myLabel" property="text" value="clique com o botão direito" />
</rightClick>
</extendedClickBehavior>
</comportamentos>
</label>
<label id="meuLabel" />
</componentes>
</página>