Sumário
Para um melhor entendimento deste Artigo veja o Índice (Rich Internet Applications com Ext.Net)
Criando métodos no lado Cliente/Servidor (DirectMethod)
Como vimos, os DirectEvents são extremamente poderosos, são inseridos no controle, lançados no lado cliente e executados no lado servidor.
Com todo este poder de trabalhar do lado cliente integrando ao lado servidor, temos os “DirectMethods“.
 |
Logo, podemos definir que “DirectMethods” são métodos em .NET definidos no servidor que podemos chama-los no lado cliente pelo javascript. |
Vejamos dois exemplos:
Chamando pelo Handler
ASPX Code
<ext:Button ID="Button1" runat="server" Text="Que horas são?" Icon="Clock"> <Listeners> <Click Handler="App.direct.ShowServerTime();"> </Click> </Listeners> </ext:Button>
Code Behind
[DirectMethod]
public void ShowServerTime()
{
X.MessageBox.Show(new MessageBoxConfig
{
Buttons = MessageBox.Button.OK,
Title = "Server Time",
Message = "No servidor são exatamente " + DateTime.Now.ToLongTimeString(),
Icon = MessageBox.Icon.INFO
});
}
Chamando pelo ponteiro (Fn)
ASPX Code
<script type="text/javascript" src="../Scripts/DirectMethods.js"></script> <ext:Button ID="Button2" runat="server" Text="Que horas são?" Icon="Clock"> <Listeners> <Click Fn="MyApp.showTime"> </Click> </Listeners> </ext:Button>
Crie um arquivo javascript e cole seguinte código no seu arquivo:
/**
<pre> Arquivo de definição dos objetos em javascript
*/
// definir o namespace de base para a aplicação
var MyApp = {};
MyApp.showTime = function() {
App.direct.ShowServerTime();
};
Vamos analisar agora os pontos importantes do código que foi montado.
Primeiro vamos pegar a definição do método “public void ShowServerTime()” nele temos a definição do atributo “[DirectMethod]“.
O atributo “DirectMethod” diz ao Ext.NET para criar um proxy entre o cliente e o servidor, automaticamente será criado um código javascript e o nosso método será exposto como um método javascript.
|
Os métodos do tipo “DirectMethod“, diferentes dos tipos ASPX, não precisam ser estáticos, podem ser definidos como não-estáticos e no escopo do objeto. Se definidos de forma estática, a vantagem é que o ciclo de vida da página ASP não ocorre, mas, em contrapartida, você não pode acessar os controles. |
O namespace padrão criado para separar os “DirectMethods” no Ext.NET é o “App.direct“, neste namespace estão todos os “DirectMethods” criados para a requisição. Como pode ser visto na linha em destaque no código javascript.
Perceba que nos dois exemplos, temos a chamada pelo manipulador, “handler” e pela função “Fn“. Ambos já foram explicados no tópico “Utilizando Listeners (Eventos no lado cliente) e DirectEvents (Lado Servidor)“.
Retornando valores
Muitas vezes precisamos ir ao servidor e retornar algum resultado para o lado cliente, isso é possível, pois podemos ter retornos em nossos “DirectMethods“. Vamos aos exemplos:
Com um resultado simples
ASPX Code
<script type="text/javascript" src="../Scripts/DirectMethods.js"></script> <ext:Button ID="Button3" runat="server" Text="Que horas são?" Icon="Clock"> <Listeners> <Click Fn="MyApp.showTimeResult"> </Click> </Listeners> </ext:Button>
Code Behind
[DirectMethod]
public string ShowTimeResult()
{
return "No servidor são exatamente " + DateTime.Now.ToLongTimeString();
}
javascript
MyApp.showTimeResult = function() {
App.direct.ShowTimeResult({
success : function(result) {
Ext.Msg.show({
title : 'Server Time',
msg : result,
buttons : Ext.Msg.OK,
icon : Ext.Msg.WARNING
});
}
});
};
O retorno não se restringe à apenas os tipos primários, podemos ter o nosso próprio tipo para retornar. Veja o exemplo:
Com um tipo definido
Definindo o nosso tipo
public struct MyInfo
{
public string Nome { get; set; }
public string Email { get; set; }
}
ASPX Code
<script type="text/javascript" src="../Scripts/DirectMethods.js"></script> <ext:Button ID="Button4" runat="server" Text="Quem é você?" Icon="Information"> <Listeners> <Click Fn="MyApp.getInfo"> </Click> </Listeners> </ext:Button>
Code Behind
[DirectMethod]
public MyInfo GetInfo()
{
return new MyInfo {
Nome = "http://desenvolvedores.net",
Email="aha@evitandospam.com :)"
};
}
javascript
MyApp.getInfo = function() {
App.direct.GetInfo({
success : function(result) {
var msg = 'Eu sou o site ' + result.Nome + ' e meu e-mail é ' + result.Email;
Ext.Msg.show({
title : 'Info',
msg : msg,
buttons : Ext.Msg.OK,
icon : Ext.Msg.INFO
});
}
});
};
DirectMethods com parâmetros
Tipos primitivos
Podemos passar parâmetros para os nossos “DirectMethods“. No exemplo abaixo, eu vou utilizar um parâmetro do tipo data, calcular a idade e retornar a idade que deverá ser exibida ao utilizador da aplicação.
ASPX Code
<ext:DateField ID="DateField1" runat="server" FieldLabel="Data de Nascimento">
</ext:DateField>
<script type="text/javascript" src="../Scripts/DirectMethods.js"></script>
<ext:Button ID="Button5" runat="server" Text="Qual a sua idade?" Icon="Information">
<Listeners>
<Click Handler="MyApp.getAge(#{DateField1}.value);">
</Click>
</Listeners>
</ext:Button>
|
Atenção à linha em destaque, como utilizamos a passagem de parâmetro direto pelo evento, temos que definir a chamada como um “handler” , pois caso contrário o nosso método será chamado durante o carregamento da página. E não queremos isso. 🙂 |
Code Behind
[DirectMethod]
public int GetAge(DateTime dob)
{
int age = DateTime.Now.Year - dob.Year;
if(DateTime.Now.Month < dob.Month ||
(DateTime.Now.Month == dob.Month &&
DateTime.Now.Day < dob.Day))
age--;
return age;
}
javascript
MyApp.getAge = function(dob) {
App.direct.GetAge(dob, {
success : function(result) {
var msg = 'Olá! Você tem ' + result + ' anos.';
Ext.Msg.show({
title : 'Age',
msg : msg,
buttons : Ext.Msg.OK,
icon : Ext.Msg.INFO
});
}
});
};
Parâmetros com tipos definidos
Se existir a necessidade de se passar um tipo definido como parâmetro, isso também é possível. Veja o exemplo:
ASPX Code
<ext:TextField ID="TextField1" runat="server" FieldLabel="Informe seu nome">
</ext:TextField>
<ext:TextField ID="TextField2" runat="server" FieldLabel="Informe seu email">
</ext:TextField>
<ext:Button ID="Button6" runat="server" Icon="Accept" Text="Enviar">
<Listeners>
<Click Handler="MyApp.showInfo(#{TextField1}.value, #{TextField2}.value);">
</Click>
</Listeners>
</ext:Button>
Code Behind
[DirectMethod]
public string ShowInfo(MyInfo info)
{
return String.Format("Olá {0}! Seu e-mail é {1}.", info.Nome, info.Email);
}
javascript
MyApp.showInfo = function(nome, email) {
/*
* Devemos criar aqui o nosso objeto que será passado como parâmetro.
* Temos que respoeitar exatamente a definição de nome que demos à nossas
* propriedades.
* Os nomes das propriedades do objeto criado não são sensíveis ao caso.
*/
var myinfo = {
nome : nome,
email : email
};
App.direct.ShowInfo(myinfo, {
success : function(result) {
Ext.Msg.show({
title : 'Info',
msg : result,
buttons : Ext.Msg.OK,
icon : Ext.Msg.INFO
});
}
});
};
Tratando exceções
Como nossos sitema não é a prova de falhas, temos que tratar as exceções que podem ocorrer no processamento de uma requisição ao servidor.
Nos exemplos abaixo, iremos ver as exceções tratadas e as não tratadas.
Uma exceção tratada
ASPX Code
<ext:Button ID="Button7" runat="server" Icon="Error" Text="Erro :(">
<Listeners>
<Click Fn="MyApp.catchException">
</Click>
</Listeners>
</ext:Button>
Code Behind
[DirectMethod]
public void CatchException()
{
try
{
throw new Exception("Ops! Um erro foi lançado.");
}
catch(Exception ex)
{
Ext.Net.ResourceManager.AjaxSuccess = false;
Ext.Net.ResourceManager.AjaxErrorMessage = ex.Message;
}
}
|
As duas linhas em destaque indicam que o retorno deverá acontecer como uma falha, logo devemos dizer ao Ext.NET que houve um erro na requisição. Para isso passamos a propriedade “Ext.Net.ResourceManager.AjaxSuccess” para false e a propriedade “Ext.Net.ResourceManager.AjaxErrorMessage” irá receber a mensagem de erro que será exibida ao utilizador da aplicação. |
javascript
MyApp.catchException = function() {
App.direct.CatchException({
failure : function(result) {
Ext.Msg.alert('Erro!', result);
}
});
};
|
Neste ponto, temos que tratar um método diferente,no caso o método “failure‘ que será chamado sempre que ocorrer um erro no lado servidor, ou sempre que a propriedade “Ext.Net.ResourceManager.AjaxSuccess” retornar “false“. |
Uma exceção não tratada
ASPX Code
<ext:Button ID="Button8" runat="server" Icon="Error" Text="Erro não tratado :(">
<Listeners>
<Click Fn="MyApp.unhandledException">
</Click>
</Listeners>
</ext:Button>
Code Behind
[DirectMethod]
public void UnhandledException()
{
throw new Exception("Ops! Um erro não tratado foi lançado.");
}
javascript
MyApp.unhandledException = function() {
App.direct.UnhandledException({
failure : function(result) {
Ext.Msg.alert('Erro!', result);
}
});
};
Uma exceção não tratada e sem “failure”
<ext:Button ID="Button9" runat="server" Icon="Error" Text="Erro não tratado e sem failure :(">
<Listeners>
<Click Handler="App.direct.UnhandledException();">
</Click>
</Listeners>
</ext:Button>
Como podemos perceber, é sempre bom termos o hábito de tratar a falha em uma requisição “DirectMethod“, nunca sabemos se ela irá acontecer ou não devido aos diversos fatores quando desenvolvemos para web.
Se o método “failure” não for especificado, uma caixa de mensagem semelhante à esta será exibida.
Mais sobre “DirectMethods”
Como vimos, o namespace padrão definido pelo Ext.NET é o “App.direct”, mas, podemos decidir que queremos utilizar o nosso próprio namespace, para isso temos que modificar a definição do nosso atributo “[DirectMethod]“, vejamos algumas propriedades do mesmo.
Definindo um namespace (CompanyX)
ASPX Code
<ext:Button ID="Button10" runat="server" Icon="ApplicationGo" Text="Namespace Defin"> <Listeners> <Click Fn="MyApp.definedNamespace"> </Click> </Listeners> </ext:Button>
Code Behind
[DirectMethod(Namespace = "CompanyX")]
public void DefinedNamespace()
{
X.MessageBox.Show(new MessageBoxConfig
{
Buttons = MessageBox.Button.OK,
Title = "Olá!",
Message = "Eu fui chamado de um namespace definido por você. :)",
Icon = MessageBox.Icon.INFO
});
}
|
Perceba que na linha em destaque, nós adicionamos o namespace que queremos para a nossa aplicação, neste caso “CompanyX“ |
javascript
MyApp.definedNamespace = function() {
CompanyX.DefinedNamespace();
};
 |
Isto é útil quando temos uma aplicação muito grande, e queremos definir o nosso próprio namespace. Mas, eu tenho que ficar a todo momento definindo o namespace para um “DirectMethod“? R: Não. <extnet directMethodNamespace="CompanyX"/> e voilà todos os seus “DirectMethods” estarão utilizando o namespace padrão “CompanyX“. |
|
Mas tome o cuidado de corrigir todos os pontos que você usou o namespace antigo “App.direct“, pois eles deixarão de funcionar. |
Para saber mais sobre “DirectMethods” veja os exemplo em http://examples.ext.net/#/Events/DirectMethods/Overview/
É isso ai pessoal 🙂
Até o próximo
♦ Marcelo