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.
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>
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; } }
javascript
MyApp.catchException = function() { App.direct.CatchException({ failure : function(result) { Ext.Msg.alert('Erro!', result); } }); };
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(); };
![]() |
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