Desenvolvedores.Net - TechBlog

Tag Archives: ext.net

Criando componentes no lado Servidor

1
1 Estrela2 Estrelas3 Estrelas4 Estrelas5 Estrelas (Sem votação.)
Loading...
20 de junho de 2014

CriandoComponentes

Para um melhor entendimento deste Artigo veja o Índice (Rich Internet Applications com Ext.Net)

Criando componentes no lado Servidor

Ao desenvolvermos um componente utilizando como base um componente já criado no Ext.NET, ganhamos de brinde toda a reutilização deste, por exemplo: – Nosso componente já pode ser utilizado em WebForm,  em ASP MVC, com a engine Razor, no código markup, etc.

Outra vantagem desta abordagem é que quando estudamos o código do Ext.NET, você poderá entender como eles criam seus componentes com base nos componentes Ext JS,e não necessariamente você precisa ser um conhecedor profundo do Ext JS.

Como vantagem também, podemos citar que você pode desenvolver seu componente em qualquer linguagem .NET que você tenha familiaridade e não precisa aprender a ser um ninja em javascript, pois todo o javascript será gerado para o lado cliente.

Neste tópico, iremos focar na criação do componente do lado servidor, na utilização do lado cliente, e como criar seus próprios métodos que podem ser acessados do lado cliente e lado servidor.

Antes de começarmos…

Vamos definir nossas abstrações e nossos objetos de validação do componente. Como neste artigo eu irei criar dois componentes para inserção de texto. Iremos criar uma abstração para tipos texto e uma classe de resultado da validação.

Classe ValidateResult

/// <summary>
/// Classe que determina o resultado da validação feita e retorna.
/// </summary>
public sealed class ValidateResult
{
	#region locais
	bool valid = true;
	string invalidMessage = "";
	#endregion

	#region propriedades
	/// <summary>
	/// Se true, o valor inserido no componente é valido.
	/// </summary>
	public bool Valid
	{
		get { return valid; }
		private set { valid = value; }
	}

	/// <summary>
	/// Se não for válido é necessário informar uma mensagem de erro
	/// </summary>
	public string InvalidMessage
	{
		get { return invalidMessage; }
		private set { invalidMessage = value; }
	}
	#endregion

	#region Construtores
	/// <summary>
	/// Inicia o resultado da validação
	/// </summary>
	/// <param name="valid">true/false para válido ou não.</param>
	/// <param name="invalidMessage">Se "valid" for verdadeiro, é obrigatório informar a mensagem.</param>
	/// <exception cref="ArgumentException">Se "valid" for verdadeiro, e o parâmetro "invalidMessage"
	/// não for informado. Esta exceção será lançada.</exception>
	public ValidateResult(bool valid, string invalidMessage = "")
	{
		this.valid = valid;

		if(!valid && String.IsNullOrEmpty(invalidMessage))
			throw new ArgumentException("Se \"valid\" for definido como false. É obrigatório informar uma mensagem de erro em \"invalidMessage\".", "invalidMessage");

		this.invalidMessage = invalidMessage;
	}
	#endregion
}

Abstração para campos do tipo texto (TextFieldBase)

public abstract class TextFieldBase: Ext.Net.TextField, IValidator
{
	public TextFieldBase()
		: base()
	{

	}

	#region IValidator Members
	public string ErrorMessage { get; set; }
	public bool IsValid { get; set; }

	public override void Validate()
	{
		ValidateResult result = Validate(Text);
		IsValid = result.Valid;
		ErrorMessage = result.InvalidMessage;

		if(IsValid)
			MarkAsValid();
		else
			MarkInvalid(ErrorMessage);
	}

	/// <summary>
	/// Faz a validação do componente e retorna true se o texto do componente for válido, caso contrário false
	/// </summary>
	/// <param name="value">valor que deverá ser validado</param>
	/// <returns></returns>
	protected abstract ValidateResult Validate(string value);
	#endregion
}
note-taking No código em destaque, vejam que eu fiz uma herança da classe “Ext.Net.TextField” e da interface “IValidator”.
Desta forma eu já herdo todas as funcionalidades de um componente do tipo “TextField” e apenas ajusto para a minha necessidade. a herança da interface “IValidator” é apenas para a implementação dos métodos de validação.

Ok! Definimos a nossa abstração. Vamos agora criar o nosso componente.

Meu primeiro componente

Vamos criar um componente bem simples. Um campo de CEP, que irá fazer uma validação e será utilizado em uma página.

CEPField

public class CEPField: TextFieldBase
{
	#region Contrutores
	public CEPField()
		: base()
	{
		DirectEvents.Blur.Event += new ComponentDirectEvent.DirectEventHandler(Blur_Event);
		AllowBlank = false;
		this.IsRemoteValidation = true;
		this.RemoteValidation.Validation += new RemoteValidationDirectEvent.RemoteValidationEventHandler(RemoteValidation_Validation);
		FieldLabel = "CEP";
	}
	#endregion

	#region Tratadores de eventos
	void RemoteValidation_Validation(object sender, RemoteValidationEventArgs e)
	{
		Validate();
		e.Success = IsValid;
		e.ErrorMessage = ErrorMessage;
	}

	void Blur_Event(object sender, DirectEventArgs e)
	{
		this.SetValue(Format.CEP(Text));
	}
	#endregion

	#region overrides

	public override void SetValue(object value)
	{
		Validate();

		base.SetValue(value);
		if(!string.IsNullOrEmpty(ClientID))
			Ext.Net.X.AddScript(ClientID +
				".isValid = function(){return " + IsValid.ToString().ToLower() + ";};");
	}

	public override int MaxLength
	{
		get { return 9; }
		set { base.MaxLength = 9; }
	}
	#endregion

	#region IValidator Members
	protected override ValidateResult Validate(string value)
	{
		if(AllowBlank && String.IsNullOrEmpty(value))
			return new ValidateResult(true);

		value = Utilities.OnlyNumbers(value);

		if(String.IsNullOrEmpty(value))
			return new ValidateResult(false, "O CEP não pode ser vazio ou não foi digitado corretamente.");

		//permite somente números
		if(value.Count(w => !Char.IsNumber(w)) > 0)
			return new ValidateResult(false, "O CEP não é válido.");

		//para ser válido tem que ter 8 caracteres
		if(value.Length != 8)
			return new ValidateResult(false, "O CEP não é válido.");

		return new ValidateResult(true);
	}
	#endregion
}
question Hm! OK! Eu criei meu componente. Mas como eu faço para chamá-lo em uma página asp? É possível utilizar a mesma marcação que temos para o Ext.NET, utilizando a tag “<ext>“?

R: Sim, é possível, com um pequeno ajuste no nosso arquivo “web.config”.
Dentro da tag “” devemos inserir a linha em destaque, logo abaixo

<pages>
  <controls>
	<!--Indica que toda página criada irá ter a diretiva "ext" como padrão para ser usada como marcação na criação.-->
	<add assembly="Ext.Net" namespace="Ext.Net" tagPrefix="ext"/>
	<add assembly="Ext.Net.Tutorial" namespace="Ext.Net.Tutorial.ComponentModel" tagPrefix="tut"/>
  </controls>
</pages>
  • Esta linha indica que um assembly deverá ser adicionado; “add assembly“; para todas as páginas criadas;
  • Os controles que estão no “namespace” …
  • Deverão ser associados com o prefixo;”tagPrefix“; “tut“;

Pronto. Agora podemos utilizar o nosso componente apenas escrevendo a tag

<tut:CEPField ID="CEPField1" runat="server" FieldLabel="Informe seu CEP">
 </tut:CEPField>

O próximo componente que será criado é um “CurrencyField“, um campo para inserir valores monetários. Vamos ver o código do mesmo, e explicar logo em seguida.

public class CurrencyField: TextFieldBase
{
	#region Construtores
	public CurrencyField()
		: base()
	{
		//-------------------------------------------------------------------------
		// Define que só podemos digitar números de 0-9 e a vírgula.
		//-------------------------------------------------------------------------
		MaskRe = "/[0-9\\,]/";

		//-------------------------------------------------------------------------
		// Define o método javascript que irá ser chamado ao receber o foco
		//-------------------------------------------------------------------------
		Listeners.Focus.Handler = "this.setRawValue(this.getNumber());this.selectText();";

		//-------------------------------------------------------------------------
		// Define o método que será chamado ao perder o foco
		//-------------------------------------------------------------------------
		Listeners.Blur.Handler = "this.setValue(this._getValue(this.getValue()));";

		//-------------------------------------------------------------------------
		// Define que o valor deverá ser alinhado a direta do componente
		//-------------------------------------------------------------------------
		FieldStyle = "text-align:right;";
	}

	#endregion

	#region Overrides
	public override ConfigItemCollection CustomConfig
	{
		get
		{
			ConfigItemCollection result = base.CustomConfig;
			string curSbl = "R$";

			#region _getValue
			//-------------------------------------------------------------------------
			// Criando o método _getValue para o lado cliente.
			//-------------------------------------------------------------------------
			ConfigItem it = new ConfigItem("_getValue", @"function(v){
				return MyApp.Util.Format.currency(this.cleanValue(v), 2,'" + curSbl + @"');
				}
			");

			result.Add(it);
			#endregion

			#region getNumber
			//-------------------------------------------------------------------------
			// Criando o método getNumber para o lado cliente.
			//-------------------------------------------------------------------------
			it = new ConfigItem("getNumber", @"function(){
				if(this.number === undefined || this.number == 0)
					this.number = MyApp.Convert.toNumber(this.getValue());

				return this.number;
				}
			");

			result.Add(it);
			#endregion

			#region setValue
			//-------------------------------------------------------------------------
			// Substituindo o método setValue, com a nossa definição
			//-------------------------------------------------------------------------
			it = new ConfigItem("setValue", @"function(v){
				v = this._getValue(v);
				this.setRawValue(v);
				this.number = MyApp.Convert.toNumber(this.getValue());
				this.text = v;
				}
			");

			result.Add(it);
			#endregion

			#region cleanValue
			//-------------------------------------------------------------------------
			// Criando o método cleanValue para o lado cliente.
			//-------------------------------------------------------------------------
			it = new ConfigItem("cleanValue", @"function(v){
					if(v){
						return MyApp.Util.Format.number(v, 2);
					}else
						return 0;
				}
			");

			result.Add(it);
			#endregion

			return result;
		}
	}

	public override void SetValue(object value)
	{
		this.SetValue(value.ToString());
		base.SetValue(Number);
	}
	protected void SetValue(string text)
	{
		Text = text;
		Number = Convert.ToDouble(text);
	}
	#endregion

	#region Propriedades
	public virtual double Number
	{
		get { return Utilities.Convert.ToDouble(base.Text); }
		set { base.Text = value.ToString(); }
	}
	#endregion

	#region IValidator members
	protected override ValidateResult Validate(string value)
	{
		double d = Utilities.Convert.ToDouble(value);

		if(!AllowBlank && d == 0)
			return new ValidateResult(false, "É obrigatório informar o valor monetário.");

		return new ValidateResult(true);
	}
	#endregion
}

Neste código foi apresentado um meio de você criar seus próprios métodos javascript e associá-los ao seus componentes.

Para isto, utilizamos o que chamamos de “CustomConfig“, veja nas linhas em destaque.

note-taking O objeto “Ext.Net.ConfigItem“, permite que você defina métodos e propriedades para seus controles. Feito isso, você pode acessar em um código javascript.

var v = App.MyComponent._getValue();

Entendendo o objeto Ext.Net.ConfigItem

Este objeto tem a finalidade de vincular seus métodos javascript aos componentes Ext.NET, isso se torna útil quando estamos criando nossos próprios componentes.

Possui 3 propriedades importantes:

  • Name: Define o nome do método ou propriedade que será exposto;
  • Value:  Define o valor que será representado pelo sue método ou propriedade;
  • Mode: O mode pode ser:
    • Auto: O Ext.NET tentará detectar o tipo e se não for capaz, A propriedade “Value” será encapsulada como uma string, ou como um número, de acordo com seu tipo;
    • Raw: A propriedade “Value” será exposta como está;
    • Value: Valor da propriedade ou código do método;
note-taking Por convenção, nomeie seus métodos utilizando “camelCase“. Se você escrever o nome do método em “UpperCase” o Ext.NET irá converter para “camelCase“, mantendo a convenção de nomes definida pelo javascript.

 


É isso ai pessoal 🙂
Até o próximo
♦ Marcelo

About Marcelo

Nascido em Juruaia/MG em uma fazenda de criação de búfalos, e residindo na região Sul do Brasil. Trabalha com desenvolvimento de aplicações desde os 17 anos. Atualmente é Arquiteto Organizacional na Unimake Software. Para saber mais ... http://desenvolvedores.net/marcelo []'s

Criando métodos no lado Cliente/Servidor (DirectMethod)

0
1 Estrela2 Estrelas3 Estrelas4 Estrelas5 Estrelas (Sem votação.)
Loading...
18 de junho de 2014

DirectMethod

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“.

note-taking 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.

note-taking 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>
note-taking 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;
	}
}
note-taking 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);
        }
    });
};
note-taking 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.

request_failure

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
	});
}
note-taking 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();
};
question 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.
Você não precisa a todo momento ficar escrevendo o namespace padrão.
Dentro do web.config, nas configurações do ext.net você pode adicionar a seguinte propriedade

<extnet directMethodNamespace="CompanyX"/>

e voilà todos os seus “DirectMethods” estarão utilizando o namespace padrão “CompanyX“.

 

note-taking 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

About Marcelo

Nascido em Juruaia/MG em uma fazenda de criação de búfalos, e residindo na região Sul do Brasil. Trabalha com desenvolvimento de aplicações desde os 17 anos. Atualmente é Arquiteto Organizacional na Unimake Software. Para saber mais ... http://desenvolvedores.net/marcelo []'s

Listeners_Eventos

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.

note-taking 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:

  1. Mode:
    1. Pode ser “Raw“: Define que o conteúdo da propriedade  “Value” deverá ser executado antes de ser enviado ao servidor;
    2. Poder ser “Value“: Define que o conteúdo da propriedade “Value” deverá ser retornado como especificado;
  2. 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;
  3. 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

About Marcelo

Nascido em Juruaia/MG em uma fazenda de criação de búfalos, e residindo na região Sul do Brasil. Trabalha com desenvolvimento de aplicações desde os 17 anos. Atualmente é Arquiteto Organizacional na Unimake Software. Para saber mais ... http://desenvolvedores.net/marcelo []'s

Visão geral dos componentes Ext.Net

2
1 Estrela2 Estrelas3 Estrelas4 Estrelas5 Estrelas (Sem votação.)
Loading...
16 de maio de 2014

Visao_Geral

Para um melhor entendimento deste Artigo veja o Índice (Rich Internet Applications com Ext.Net)

o Ext.Net provê uma vasta quantidade de controles para utilizarmos no desenvolvimento das aplicações Web, como podemos ver na tabela abaixo, apenas um resumo das possibilidades.

Visualização de dados. DataView, GridPanel,PropertyGrid, TreePanel, Chart and Calendar
Manipulação dos dadaos Store, Proxy, Model, Reader/Writer
Contêineres Container, Panel, Window, ButtonGroup, Toolbar, ViewPort, TabPanel, Menu
Contêineres especiais Desktop e Portal
Controles Neste ponto temos vários, iremos ver sobres eles, tais como, Buttons, SplitButton,
LinkButton, Pickers (ColorPicker, DatePicker), Slider, ProgressBar … Etc.
Leiautes Accordion, Anchor, Border, HBox, VBox … Etc.
Formulários e Campos FormPanel, FieldContainer, TextField, NumberField, ComboBox, CheckBox, DataField,
DropDown, FileUpload … Etc.
Utilidades e Helpers DragDrop, KeyMap, KeyNav, XTemplate, TaskManager, Selection Model e XSxript

A lista não está completa, mas já temos uma visão da força que o Ext nós dá para desenvolvermos nossas aplicações Web, mais próximas da realidade em que o usuário Desktop está habituado.

Todos os controles são demonstrados no site de exemplos do Ext.Net, o site, para mim, é uma fonte de pesquisa que estou sempre utilizando.

A classe de base para os componentes é a “Component”, mas eu tenho por hábito, sempre criar meus componentes com base em um componente já pronto, por exemplo, se vou criar um campo de texto com alguma formatação específica, já faça a herança diretamente do componente “TextField”.

O Ext.Net provê várias formas de desenvolvimento de componentes do lado servidor, sem ter que nos preocuparmos com o lado cliente, pois todo o Javascript será gerado de forma automatizada. Mas, é interessante conhecer sobre o ExtJS, a comunidade está em constante crescimento e os exemplos são claros e objetivos.

Não é o intuito deste artigo explicar sobre ExtJS, para aprender um pouco mais sobre ExtJS a Loiane Groner escreveu um curso muito bom, segue o link:

No próximo artigo iremos ver sobre alguns componentes básicos e colocarmos a mão na massa. Até lá … 🙂


É isso ai pessoal 🙂
Até o próximo
♦ Marcelo

About Marcelo

Nascido em Juruaia/MG em uma fazenda de criação de búfalos, e residindo na região Sul do Brasil. Trabalha com desenvolvimento de aplicações desde os 17 anos. Atualmente é Arquiteto Organizacional na Unimake Software. Para saber mais ... http://desenvolvedores.net/marcelo []'s

Instalando o Ext.Net

4
1 Estrela2 Estrelas3 Estrelas4 Estrelas5 Estrelas (Sem votação.)
Loading...
6 de maio de 2014

Instalando_Ext.Net

Para um melhor entendimento deste Artigo veja o Índice (Rich Internet Applications com Ext.Net)

Instalando o Ext.Net manualmente.

Neste tópico eu vou falar da instalação do Ext.Net, mas da forma trabalhosa, manualmente.

Ao final do artigo, tem o link para o vídeo do Geoffrey McGill, que demonstra como instalar utilizando o NuGet Package. (Mas ai não tem graça)

Então, mãos à obra.

Primeiramente, baixe a versão 2.5 WebForms do Ext.Net em Ext.NET.WebForms.Pro.2.5.1.zip.

Ao final do download descompacte o arquivo baixado, será criado alguns diretórios e arquivos, mas iremos nos ater apenas ao diretório “lib“.

Neste diretório existem 4 diretórios, onde cada diretório representa a versão do Framework que será utilizado para o desenvolvimento da sua aplicação, no nosso caso será o 4.0.

Dentro do diretório “~\lib\net40\” existe o arquivo “Ext.Net.dll“, é este que iremos referenciar mais logo a seguir.

Baixar as versões públicas do “Ext.Net.Utilities” e do “Transformer.NET” em https://github.com/extnet/

Compilar as versões baixadas.

Agora vamos ao Visual Studio, crie uma nova aplicação web vazia, pois iremos começar do zero.

Faça referência aos arquivos:

  1. ~\lib\net40\Ext.Net.dll“, ou a versão do Framework que você estiver utilizando;
  2. Ext.Net.Utilities.dll (dentro da pasta bin release/debug que foi compilado o projeto);
  3. Transformer.NET.dll (dentro da pasta bin release/debug que foi compilado o projeto);

Configurando o Web.Config

Abra o Web.Config no editor e vamos colocar a mão na massa:

Apague todo o conteúdo criado no web.config e vamos fazer uma sessão de cada vez:

  • Neste ponto definimos que a sessão de configuração do Ext.NET não necessita de nenhuma configuração especial no quesito segurança, para que possa sera acessada pela aplicação:
<configSections>
 <!--
 Para um melhor entendimento do atributo requirePermission:
 http://msdn.microsoft.com/en-us/library/system.configuration.sectioninformation.requirepermission.aspx
 -->
 <section name="extnet" type="Ext.Net.GlobalConfig" requirePermission="false" />
 </configSections>
  • Definir o padrão de tema. O tema padrão pode ser um dos valores:
    • Default;
    • Gray;
    • Neptune;
    • Acess
<!--Define o tema padrão do ext.net-->
 <extnet theme="Gray" />
  • Definir os handlers, manipuladores, do Ext.Net
note-taking

O que são handlers (manipuladores)?

Os handlers, ou manipuladores, normalmente processam as requisições e não têm interatividade com o usuário, como páginas ou controles, e normalmente são responsáveis por camadas lógicas dentro da aplicação.

Podemos utilizar um handler quando precisamos executar algo no servidor sem a necessidade de intervenção do usuário final.

Os handlers implementam a interface IHttpHandler, o HttpHandler é responsável por atender as requisições do browser e a interface IHttpHandler possui as assinaturas necessárias para que estas requisições sejam atendidas.

<!--Define os handlers (manipuladores) do ext.net-->
 <httpHandlers>
 <add path="*/ext.axd" verb="*" type="Ext.Net.ResourceHandler" validate="false" />
 </httpHandlers>
  •  Define os módulos do Ext.NET
note-taking

O que são modules (módulos)?

Os módulos HTTP são executados antes e depois do handler (manipulador) e nos fornece métodos para interagir com a requisição (HttpRequest). Os módulos devem implementar a interface System.Web.IHttpModule.

São normalmente sincronizados com os eventos da classe System.Web.IHttpModule (implementado dentro do Global.asax.cs ou. vb).

A seguir uma lista de eventos que devem ser considerados na implementação do módulo:

  • BeginRequest
  • AuthenticateRequest
  • AuthorizeRequest
  • ResolveRequestCache
  • AcquireRequestState
  • PreRequestHandlerExecute
  • PostRequestHandlerExecute
  • ReleaseRequestState
  • UpdateRequestCache
  • EndRequest
  • * PreSendRequestHeaders
  • * PreSendRequestContent
  • * error

Os eventos identificados por um asterisco (*) pode ocorrer a qualquer momento dentro da requisição, todos os outros estão listados em sua ordem de chamada.

<!--Define os módulos do ext.net-->
 <httpModules>
 <add name="DirectRequestModule" type="Ext.Net.DirectRequestModule, Ext.Net" />
 </httpModules>
  • Definir a marcação “ext” para toda página ou componente que for criado para o “ext”;
<pages>
 <controls>
 <!--Indica que toda página criada irá ter a diretiva "ext" como padrão para ser usada como marcação na criação.-->
 <add assembly="Ext.Net" namespace="Ext.Net" tagPrefix="ext" />
 </controls>
 </pages>
  • Se estiver executando o IIS 7 como servidor, devemos utilizar a seguinte configuração no Web.Config;
<!-- Configurações para o IIS7 -->
 <system.webServer>
 <validation validateIntegratedModeConfiguration="false" />
<modules>
 <add name="DirectRequestModule" preCondition="managedHandler" type="Ext.Net.DirectRequestModule, Ext.Net" />
 </modules>
<handlers>
 <add name="DirectRequestHandler" verb="*" path="*/ext.axd" preCondition="integratedMode" type="Ext.Net.ResourceHandler" />
 </handlers>
 </system.webServer>
  • E por fim, informe os runtimes adicionais que serão utilizados no projeto;
 <runtime>
 <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
 <dependentAssembly>
 <assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed" />
 <bindingRedirect oldVersion="1.0.0.0-5.0.8" newVersion="6.0.0" />
 </dependentAssembly>
 <dependentAssembly>
 <assemblyIdentity name="Ext.Net.Utilities" publicKeyToken="2c34ac34702a3c23" />
 <bindingRedirect oldVersion="0.0.0.0-2.3.0" newVersion="2.4.0" />
 </dependentAssembly>
 <dependentAssembly>
 <assemblyIdentity name="Transformer.NET" publicKeyToken="e274d618e7c603a7" />
 <bindingRedirect oldVersion="0.0.0.0-2.1.0" newVersion="2.1.1" />
 </dependentAssembly>
 </assemblyBinding>
 </runtime>

Ao final seu arquivo Web.Config deverá estar como abaixo, ou semelhante.

<?xml version="1.0"?>
<configuration>
 <configSections>
 <!--
 Para um melhor entendimento do atributo requirePermission:
 http://msdn.microsoft.com/en-us/library/system.configuration.sectioninformation.requirepermission.aspx
 -->
 <section name="extnet" type="Ext.Net.GlobalConfig" requirePermission="false"/>
 </configSections>
 <!--Define o tema padrão do ext.net-->
 <extnet theme="Gray"/>
 <system.web>
 <!--Define os handlers (manipuladores) do ext.net-->
 <httpHandlers>
 <add path="*/ext.axd" verb="*" type="Ext.Net.ResourceHandler" validate="false"/>
 </httpHandlers>
 <!--Define os módulos do ext.net-->
 <httpModules>
 <add name="DirectRequestModule" type="Ext.Net.DirectRequestModule, Ext.Net"/>
 </httpModules>
 <pages>
 <controls>
 <!--Indica que toda página criada irá ter a diretiva "ext" como padrão para ser usada como marcação na criação.-->
 <add assembly="Ext.Net" namespace="Ext.Net" tagPrefix="ext"/>
 </controls>
 </pages>
 <compilation debug="true"/>
 </system.web>
 <!-- Configurações para o IIS7 -->
 <system.webServer>
 <validation validateIntegratedModeConfiguration="false"/>
 <modules>
 <add name="DirectRequestModule" preCondition="managedHandler" type="Ext.Net.DirectRequestModule, Ext.Net"/>
 </modules>
 <handlers>
 <add name="DirectRequestHandler" verb="*" path="*/ext.axd" preCondition="integratedMode" type="Ext.Net.ResourceHandler"/>
 </handlers>
 </system.webServer>
 <runtime>
 <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
 <dependentAssembly>
 <assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed"/>
 <bindingRedirect oldVersion="1.0.0.0-5.0.8" newVersion="6.0.0"/>
 </dependentAssembly>
 <dependentAssembly>
 <assemblyIdentity name="Ext.Net.Utilities" publicKeyToken="2c34ac34702a3c23"/>
 <bindingRedirect oldVersion="0.0.0.0-2.3.0" newVersion="2.4.0"/>
 </dependentAssembly>
 <dependentAssembly>
 <assemblyIdentity name="Transformer.NET" publicKeyToken="e274d618e7c603a7"/>
 <bindingRedirect oldVersion="0.0.0.0-2.1.0" newVersion="2.1.1"/>
 </dependentAssembly>
 </assemblyBinding>
 </runtime>
</configuration>

Testando a instalação

Adicione um novo webform ao projeto chamado “Default.aspx”.

Neste form, como de praxe :), Iremos criar um “Olá Ext.Net”.

Não se preocupe com o código em questão, pois será discutido nos próximos artigos.

Em Code Design adicione o seguinte código:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Ext.Net.Tutorial.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <ext:ResourceManager runat="server">
    </ext:ResourceManager>
    <form id="form1" runat="server">
    <ext:Button runat="server" ID="btnOla" Text="Olá Ext.Net">
        <DirectEvents>
            <Click OnEvent="btnOla_Click">
            </Click>
        </DirectEvents>
    </ext:Button>
    </form>
</body>
</html>

Em Code Behind adicione o seguinte código:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Ext.Net.Tutorial
{
    public partial class Default: System.Web.UI.Page
    {
        protected void btnOla_Click(object sender, DirectEventArgs e)
        {
            X.Msg.Show(new MessageBoxConfig
            {
                Title = "Ext.NET",
                Buttons = MessageBox.Button.OK,
                Icon = MessageBox.Icon.INFO,
                Message = "Olá Ext.NET"
            });
        }
    }
}

Execute a aplicação e clique no botão. A mensagem “Olá Ext.NET” deverá ser exibida em uma caixa de mensagem do navegador.

Se isto acontecer, o Ext.NET foi configurado corretamente e podemos continuar com nosso aprendizado.

Se foi lançado algum erro, verifique se é um dos listados abaixo, caso não for, verifique a solução no fórum:

Fórum Oficial: http://forums.ext.net/

Nosso Fórum: forum/ext-net/

Resolvendo erros

The ResourceManager Control is missing from this Page.

Adicione a marcação

<ext:ResourceManager runat="server">
</ext:ResourceManager>

logo após a tag <body>.

Marca de servidor desconhecida: ‘ext:<name>’.

Verifique se no Web.Config se a diretiva <add assembly> foi informada.

 <pages>
<controls>
<!--Indica que toda página criada irá ter a diretiva "ext" como padrão para ser usada como marcação na criação.-->
<add assembly="Ext.Net" namespace="Ext.Net" tagPrefix="ext"/>
</controls>
</pages>

CS1061: ‘ASP.default_aspx’ não contém uma definição para ‘btnOla_Click’ e nenhum método de extensão ‘btnOla_Click’ aceita que um primeiro argumento de tipo ‘ASP.default_aspx’ seja encontrado (você não está usando uma diretriz ou referência de assembly?)

Quando definimos um “DirectMethod” pelo Code Design é necessário que o método que irá tratar o evento seja definido como “protected” ou “public” no Code Behind.

The web.config file for this project is missing the required DirectRequestModule.

Inserir a diretiva

<httpModules>
<add name="DirectRequestModule" type="Ext.Net.DirectRequestModule, Ext.Net"/>
</httpModules>

pois o Ext.NET depende do módulo “DirectRequest” para construir o lado cliente.

Instalando usando o NuGet Package

E como prometido, segue o vídeo da instalação pelo NuGet.

YouTube responded to TubePress with an HTTP 410 - No longer available

Conhecendo os arquivos.

  • Ext.Net.dll: Assembly principal do Ext.NET;
  • Ext.Net.xml: Arquivo de IntelliSense para ajudá-lo enquanto você codifica;
  • Ext.Net.Utilities.dll: Utilitários do Ext.NET framework (Muito úteis);
  • Ext.Net.Utilities.xml: IntelliSense para o utilitário;
  • NewtonSoft.Json.dll:  Json.NET framework utilizado pelo Ext.NET;
  • NewtonSoft.Json.xml: O  IntelliSense do Json.NET;
  • Transformer.NET.dll: Um biblioteca  .NET para análise e transformação de dados;
  • Transformer.NET.xml:  IntelliSense do Transformer.NET;

É isso ai pessoal 🙂
Até o próximo
♦ Marcelo

About Marcelo

Nascido em Juruaia/MG em uma fazenda de criação de búfalos, e residindo na região Sul do Brasil. Trabalha com desenvolvimento de aplicações desde os 17 anos. Atualmente é Arquiteto Organizacional na Unimake Software. Para saber mais ... http://desenvolvedores.net/marcelo []'s

Apresentando o Ext.Net

0
1 Estrela2 Estrelas3 Estrelas4 Estrelas5 Estrelas (1 votos, média: 5,00 de 5)
Loading...
5 de maio de 2014

Apresentando_Ext.Net

Para um melhor entendimento deste Artigo veja o Índice (Rich Internet Applications com Ext.Net)

O que é Ext.NET?

Ext.NET é um framework de código fonte aberto, de componentes  ASP.NET  (WebForm + MVC) integrado ao framework Ext JS.

O site oficial Ext.NET é:

Site oficial do Sencha:

Ext.NET  (pronuncia-se -eee-ecks-T dot NET), eu pronuncio “EXT.NET” mesmo 🙂 .

Em outras palavras, é um conjunto de controles e classes, que geram JavaScript , HTML e CSS sempre que necessário, e, que este JavaScript tem como base a estrutura do Ext JS.

O Ext.NET também inclui componentes que não são encontrados em Ext JS, estende várias classes, sempre que necessário, proporcionando assim sua própria camada JavaScript.

O Ext.NET é uma abstração do Ext JS. Esta abstração não é uma camada fraca ou
restritiva, se assim desejar, você pode escrever diretamente na camada Ext JS baseada em JavaScript.

note-taking Eu particularmente escrevo todos os componentes do lado servidor quando preciso de um novo.
Tenho esta visão devido à facilidade que é oferecida pelo Ext.Net no lado servidor.

Uma outra forma de ver, é pensar no Ext.NET como uma ponte entre Ext JS no
lado cliente e ASP.NET no lado servidor.

A relação com ASP.NET

note-taking A escolha da linha de desenvolvimento, WebForms ou MVC não é importante para este artigo como um todo. Mas toda a apresentação será feita em WebForms.

Se você está acostumado com a criação de aplicações ASP.NET usando controles que seguem o padrão ASP.NET, que mantêm seu estado no ViewState, o Ext.NET pode parecer familiar, mas com muitas melhorias:

  • O “ViewState” não é requerido pelo Ext.NET, podemos desligar e economizaremos uma quantidade de bytes para a aplicação cliente.
    • A não ser que você esteja usando “FormAuthentication”;
  • Uma aplicação ASP.NET Web Forms requer um único “<runat = “server” >” e já adicionará todos os eventos, métodos e propriedades e assim por diante ao componente. Com Ext.NET isto é opcional como será demonstrado;
  • Ao desenvolver aplicações ASP.NET, os controles são adicionados na coleção “Controls” do componente recipiente. Com Ext.NET, você normalmente adiciona componente filhos ao componente pai, usando a coleção “Items”. Tenha isso em mente, irá nos ajudar nos próximos capítulos;

Vamos nos concentrar um pouco no ViewState.

Em um desenvolvimento ASP tradicional, WebForms, o ViewState e o modelo PostBack são pontos chaves para recriar os controles complexos no estado em que o desenvolvedor e usuário espera que eles existam.

São feitos vários posts e esperado vários retornos; “response”; para as páginas que trafegam este “ViewState”.

Com Ext.NET, criamos uma interface rica, onde o estado dos controles não precisam ser mantidos no lado servidor.

As aplicações desenvolvidas utilizando Ext.Net utilizam-se da tecnologia AJAX, o que significa que podemos recarregar apenas o ponto em questão da página, ou fazer uma consulta sem modificar nada na página.

Exemplo:

Para validar algo no banco de dados e exibir uma mensagem ao usuário.

Para o lado cliente, o Ext.NET framework lida com toda a complexidade da manutenção dos controles, como a instanciação, destruição, layout e redesenho.

Mas, se mesmo assim você ainda precisar de mais, a API do Ext.NET é bastante flexível para que você possa colocar a mão na massa e desenvolver seu próprio componente, como será visto no artigo “Criando componentes no lado Servidor“.


É isso ai pessoal 🙂
Até o próximo
♦ Marcelo

About Marcelo

Nascido em Juruaia/MG em uma fazenda de criação de búfalos, e residindo na região Sul do Brasil. Trabalha com desenvolvimento de aplicações desde os 17 anos. Atualmente é Arquiteto Organizacional na Unimake Software. Para saber mais ... http://desenvolvedores.net/marcelo []'s

Paginação remota com ext.net, CSharp e ASPX

1
1 Estrela2 Estrelas3 Estrelas4 Estrelas5 Estrelas (1 votos, média: 5,00 de 5)
Loading...
8 de dezembro de 2010

Olá Pessoal.

Neste tutorial eu vou escrever e falar  sobre paginação remota utilizando o Ext.Net, C# e ASP.Net.

Antes de começar, uma rápida revisão sobre paginação.

O que é paginação?
Paginação (paginar) consiste em dividir em partes (páginas).
Imagine o jornal que você lê, ele é dividido em páginas para que facilite a sua leitura, você pode virar as páginas ou ir para uma página específica do seu jornal e continuar a sua leitura, o mesmo acontece com livros, revistas etc.

Agora vamos imaginar a paginação dos dados.
Quando você abre um conjunto de registros, a exibição ao usuário pode se tornar lenta, se o número de registros for grande, neste momento você precisa paginar o seu conjunto de registros, ou tupla se você preferir.

Uma tupla é cada linha de registro de uma tabela na base de dados

A idéia de paginar os seus registros é o mesmo que o jornal faz, dividir e exibir o todo em partes.

Agora vamos ao que interessa.

No ext.net existe o componente PagingToolbar

<ext:PagingToolbar></ext:PagingToolbar>

Ele é o responsável pela interface ao usuário e por gerar os eventos necessários para a paginação.

Como tudo acontece.

Quando você clica no botão de navegação o ext envia uma requisição ao servidor, passando como parâmetros no Request as seguintes variáveis start e limit

Estas duas variáveis são responsáveis por dizer onde começa e qual o tamanho da página.

Ok! Mas como o ASPXvai capturar estas informações?

Para tratarmos estes eventos dentro do ASPX temos que usar handlers.

Opa! O que são handlers?

Os handlers são responsáveis por interceptar solicitações feitas ao servidor de aplicativo.
Eles são executados como processos em resposta a um pedido feito pelo site.

Você pode criar seus próprios handlers genéricos (ashx) que processam a saída e enviam ao navegador.

Para programar um handler genérico o mesmo deverá implementar a interface System.Web.IHttpHandler.
As interfaces exigem que você implemente o método ProcessRequest e a propriedade IsReusable.

O método ProcessRequest manipula o processamento para as solicitações feitas, enquanto o booleano IsReusable é a propriedade que diz se o manipulador é reutilizável ou se um novo manipulador é necessário para cada solicitação.

Declaração básica para um handler genérico:

Diretiva de página:
<%@ WebHandler Language=”C#Class=”DeclaracaoBasica %>

Código da página

using System;
using System.Web;
public class DeclaracaoBasica : IHttpHandler {
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        context.Response.Write("Hello World");
    }
    public bool IsReusable {
        get {
            return false;
        }
    }
}

Bom, agora que temos os pré-requisitos vamos à nossa vídeo-aula clique no vídeo abaixo e assista.

O som do vídeo está baixo, recomendo o uso de um fone de ouvido.

YouTube responded to TubePress with an HTTP 410 - No longer available

Se preferir, assista direto no youtube http://www.youtube.com/watch?v=BjFpW-Mg-bg&hd=1

Download do código de exemplo:
Paginação remota com Ext.net, handlers, aspx e C# (304)

Dúvidas? Poste-as no fórum referindo-se a este tutorial.
http://desenvolvedores.net/ext.net

É isso ai pessoal 🙂
Até o próximo
♦ Marcelo

About Marcelo

Nascido em Juruaia/MG em uma fazenda de criação de búfalos, e residindo na região Sul do Brasil. Trabalha com desenvolvimento de aplicações desde os 17 anos. Atualmente é Arquiteto Organizacional na Unimake Software. Para saber mais ... http://desenvolvedores.net/marcelo []'s