Sumário
Para um melhor entendimento deste Artigo veja o Índice (Rich Internet Applications com Ext.Net)
Listeners – Eventos lado cliente
Para facilitar o entendimento do artigo, vamos primeiro definir o que são listeners e eventos.
Listeners
Listeners são objetos ouvintes que notificam outros objetos quando acontece alguma mudança no comportamento do objeto. Os listeners utilizam o Design Pattern Observer.
Eventos
Os eventos são os tipos mais comuns que utilizam um listener, pois são neles que definimos quais métodos serão chamados (Alguém disse delegates?) quando uma ação ocorrer.
Eventos são lançados sempre que uma ação acontece no nosso objeto, seja motivada pelo usuário, pelo próprio sistema ou por mensagens do sistema operacional.
Eventos no Ext.NET
O Ext.NET suporta eventos do lado cliente, AJAX e as formas tradicionais de tratamento de eventos.
Cada componente tem seus eventos, lado cliente, definidos dentro da tag “listeners“.
Como exemplo, vamos pegar um simples clique de botão e exibir uma mensagem.
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<form id="form1" runat="server">
<ext:Button ID="Button1" runat="server" Icon="Accept" Text="Clica em mim.">
<Listeners>
<Click Handler="Ext.Msg.show({
title: 'Oi!',
msg: 'Oba! Fui clicado.',
buttons: Ext.Msg.OK,
icon: Ext.Msg.WARNING
});">
</Click>
</Listeners>
</ext:Button>
</form>
</body>
Neste pequeno trecho de código podemos dizer que tratamos o evento clique de um botão qualquer.
Uma outra forma de tratarmos o evento, seria criando uma função em javascript.
 |
Eu, particularmente, prefiro esta segunda abordagem, pois assim deixo todos os meus fontes separados entre as classes (.cs), o código html (.aspx) e o código de script (.js). |
Para este exemplo, crie um arquivo com o nome de “MyApp.js” no seu projeto e cole o código abaixo:
/**
Arquivo de definição dos objetos em javascript
*/
// definir o namespace de base para a aplicação
var MyApp = {};
/**
Define o método listener para o clique do botão
*/
MyApp.Button1Click = function() {
Ext.Msg.show({
title : 'Oi!',
msg : 'Oba! Fui clicado em uma função.',
buttons : Ext.Msg.OK,
icon : Ext.Msg.WARNING
});
};
Agora para a chamada do método clique, iremos definir um ponteiro para uma função em javascript.
<ext:Button ID="Button2" runat="server" Icon="Accept" Text="Clica em mim.">
<Listeners>
<Click Fn="MyApp.Button1Click">
</Click>
</Listeners>
</ext:Button>
Neste ponto podemos perceber que temos dois meios de chamar um método para o evento “Click“, no primeiro utilizamos um manipulador (handler) diretamente na definição do evento. E no segundo método, definimos um ponteiro (pointer) para uma função definida em nosso arquivo de script.
Esta é a diferença entre usar “Handler” e “Fn“.
Se o evento só deve ser executado uma única vez, podemos definir a propriedade “Single” para “true” e o evento só será executado uma vez, até que a página seja recarregada.
Se for necessário definir o escopo em que o evento deverá ser executado, devemos utilizar a propriedade “scope” e passar o nome do objeto contêiner onde o evento será executado. Se nada for informado, será utilizado o escopo global.
Determinando os argumentos do evento
Usando a documentação do Ext JS você poderá encontrar os argumentos que são passados para cada evento. Tenha em mente que diferentes controles têm diferentes eventos e assinaturas de evento.
Para uma documentação completa do lado cliente veja o link http://docs-origin.sencha.com/extjs/4.1.3.
DirectEvents (Eventos do Lado Servidor)
Os “DirectEvents” são eventos que são lançados pelo lado cliente e que podem ser capturados pelo lado servidor.
Tenha em mente que quando um “DirectEvent” é lançado, todo o controle deverá ser reconstruído do lado servidor, como é feito em um post tradicional. Se o seu form tem o atributo “runat=’server’” todo o formulário será reenviado por padrão.
Isto pode nos causar alguns problemas e para validar se devemos recriar e evitar vários códigos de inicialização da nossa página, podemos usar a propriedade “X.IsAjaxRequest”, se true, a requisição veio de um evento AJAX. Esta propriedade funciona como a propriedade do ASP.NET “IsPostBack“.
Vamos ver 3 exemplos de chamadas “DirectEvents” que são usados com muito frequência.
Sem parâmetros
ASPX Code
<ext:Button ID="Button1" runat="server" Icon="Clock" Text="Que horas são?"><DirectEvents>
<Click OnEvent="Button1Click">
</Click>
</DirectEvents>
</ext:Button>
Code Behind
protected void Button1Click(object sender, DirectEventArgs e)
{
X.Msg.Show(new MessageBoxConfig
{
Buttons = MessageBox.Button.OK,
Title = "Olá!",
Message = String.Format("São {0}.", DateTime.Now.ToLongTimeString())
});
}
Com parâmetros
Para definir parâmetros, temos que utilizar a marcação “ExtraParams” que possuem 3 propriedades importantes:
- Mode:
- Pode ser “Raw“: Define que o conteúdo da propriedade “Value” deverá ser executado antes de ser enviado ao servidor;
- Poder ser “Value“: Define que o conteúdo da propriedade “Value” deverá ser retornado como especificado;
- Name: Nome do parâmetro que será enviado ao servidor, pode ser passado mais de um item de parâmetro, este nome será o índice que iremos recuperar o valor do parâmetro no servidor;
- Value: Valor que deverá ser passado ao servidor, atente para o item 1. Mode, que define como este valor deverá ser interpretado;
ASPX Code
<ext:TextField ID="TextField1" runat="server" FieldLabel="Informe seu nome.">
</ext:TextField>
<ext:Button ID="Button2" runat="server" Icon="Clock" Text="Que horas são?">
<DirectEvents>
<Click OnEvent="Button2Click">
<ExtraParams>
<ext:Parameter Mode="Raw" Value="#{TextField1}.value" Name="nome">
</ext:Parameter>
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
Code Behind
protected void Button2Click(object sender, DirectEventArgs e)
{
//Perceba que pegamos aqui pelo nome do extra params que informamos no ASPX Code
string nome = e.ExtraParams["nome"];
X.Msg.Show(new MessageBoxConfig
{
Buttons = MessageBox.Button.OK,
Title = String.Format("Olá {0}!", nome),
Message = String.Format("São {0}.", DateTime.Now.ToLongTimeString())
});
}
Com parâmetros de um objeto definido
Com esta opção, podemos criar um objeto do lado cliente e passar este objeto para o lado servidor.
Do lado servidor o mesmo deverá ser recriado para um objeto compreendido pelo C#.
Para este exemplo, iremos criar um arquivo de javascript com o nome de DirectEvent.js com o seguinte código:
/**
Arquivo de definição dos objetos em javascript
*/
// definir o namespace de base para a aplicação
var MyApp = {};
/**
Define o método listener para o clique do botão
*/
MyApp.Button3Click = function() {
//Aqui iremos criar um objeto do tipo 'MyInfo', esperado pelo lado servidor
var result = {
Nome : Ext.getCmp('TextField2').value,
Email : Ext.getCmp('TextField3').value
};
return result;
};
ASPX Code
<script type="text/javascript" src="../Scripts/DirectEvent.js"> </script>
<ext:TextField ID="TextField2" runat="server" FieldLabel="Informe seu nome">
</ext:TextField>
<ext:TextField ID="TextField3" runat="server" FieldLabel="Informe seu email">
</ext:TextField>
<ext:Button ID="Button3" runat="server" Icon="Clock" Text="Enviar">
<DirectEvents>
<Click OnEvent="Button3Click">
<ExtraParams>
<ext:Parameter Mode="Raw" Value="MyApp.Button3Click()" Name="dados">
</ext:Parameter>
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
Code Behind
Definição do objeto que o lado cliente deverá retornar
/// <summary>
/// Objeto retornado pelo cliente
/// </summary>
struct MeusDados
{
public string Nome { get; set; }
public string Email { get; set; }
}
Método que irá receber a informação do lado cliente e converter para o objeto esperado
protected void Button3Click(object sender, DirectEventArgs e)
{
// Aqui iremos converter o objeto que recebemos do lado cliente
// em um objeto do tipo "MyInfo"
MyInfo dados = JSON.Deserialize<MyInfo>(e.ExtraParams["dados"]);
X.Msg.Show(new MessageBoxConfig
{
Buttons = MessageBox.Button.OK,
Title = String.Format("Olá {0}!", dados.Nome),
Message = String.Format("Seu e-mail é {0}.", dados.Email)
});
}
Neste tópico não iremos abordar como criar o nosso próprio manipulador de eventos. Este será abordado no tópico “Criando componentes no lado Servidor”
É isso ai pessoal 🙂
Até o próximo
♦ Marcelo