Desenvolvedores.Net - TechBlog

Category Archives: Desenvolvimento

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

Definindo leiautes com Ext.Net

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

Leiaute_ComExtNet

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

Definindo leiautes com Ext.NET

As aplicações web precisam de leiautes ricos e sofisticados, para isto, o Ext.NET provê um conjunto de componentes para se trabalhar com leiautes.

Neste tópico, iremos falar sobre:

  • Viewport: Onde você pode dizer à página  web para trabalhar como uma aplicação;
  • Os mais comuns, como Border, Accordion, Anchor  entre outros;
  • Maneiras diferentes de se trabalhar com leiaute , no markup, no código, nas propriedades, etc.;

Viewport

O viewport não é um leiaute , ele está mais para um contâiner especial que exibe toda a área disponível do navegador e fica sempre no primeiro nível da página, sobre todos os outros componentes, ele se redimensiona quando a janela do navegador é redimensionada. Mas, só podemos ter um viewport por página.

O viewport pode redimensionar todos os seus componentes, que pode ser qualquer um, normalmente são painéis ou suas subclasses, desta forma o viewport se torna o mais fácil para se trabalhar com leiautes responsivos.

No viewport você pode definir qual o tipo de leiaute que deseja trabalhar.

 Border

O tipo permite que tenhamos uma divisão da página em 5 regiões:

  • Norte (North): Temos que definir obrigatoriamente a altura;
  • Sul (South): Temos que definir obrigatoriamente a altura;
  • Leste (East): Temos que definir obrigatoriamente a largura;
  • Oeste (Wets): Temos que definir obrigatoriamente a largura;
  • Centro (center): A região central é a única que é obrigatória existir. Ela não precisa ter tamanho definido, irá preencher todo o espaço disponível na tela

Em cada região, podemos ter qualquer componente, mas o mais comum é usar um painel, ou suas subclasses.

Não podemos usar um componente Window, se a nossa intenção for que esta janela seja flutuante.

Abaixo um exemplo do Viewport usando o leiaute do tipo Border.

<body>
 <ext:ResourceManager runat="server">
 </ext:ResourceManager>
 <form id="form1" runat="server">
 <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
 <Items>
 <ext:Panel ID="Panel1" runat="server" Title="Norte" Region="North" Split="true" Height="150"
 BodyPadding="6" Html="Norte" Collapsible="true" />
 <ext:Panel ID="Panel2" runat="server" Title="Oeste" Region="West" Layout="AccordionLayout"
 Width="225" MinWidth="225" MaxWidth="400" Split="true" Collapsible="true">
 <Items>
 <ext:Panel ID="Panel3" runat="server" Title="Navegação" Border="false" BodyPadding="6"
 Icon="FolderGo" Html="Oeste" />
 <ext:Panel ID="Panel4" runat="server" Title="Configuração" Border="false" BodyPadding="6"
 Icon="FolderWrench" Html="As configurações vão aqui ... " />
 </Items>
 </ext:Panel>
 <ext:TabPanel ID="TabPanel1" runat="server" Region="Center">
 <Items>
 <ext:Panel ID="Panel5" runat="server" Title="Centro" Border="false" BodyPadding="6"
 Html="<h1>Exemplo com BorderLayout</h1>" />
 <ext:Panel ID="Panel6" runat="server" Title="Fechar" Closable="true" Border="false"
 BodyPadding="6" Html="Eu posso ser fechada" />
 </Items>
 </ext:TabPanel>
 <ext:Panel ID="Panel7" runat="server" Title="Leste" Region="East" Collapsible="true"
 Split="true" MinWidth="225" Width="225" Layout="Fit">
 <Items>
 <ext:TabPanel ID="TabPanel2" runat="server" ActiveTabIndex="1" TabPosition="Bottom"
 Border="false">
 <Items>
 <ext:Panel ID="Panel8" runat="server" Title="Tab 1" Border="false" BodyPadding="6"
 Html="Primeira Aba" />
 <ext:Panel ID="Panel9" runat="server" Title="Tab 2" Closable="true" Border="false"
 BodyPadding="6" Html="Segunda Aba" />
 </Items>
 </ext:TabPanel>
 </Items>
 </ext:Panel>
 <ext:Panel ID="Panel10" runat="server" Title="Sul" Region="South" Split="true"
 Collapsible="true" Height="150" BodyPadding="6" Html="Sul" />
 </Items>
 </ext:Viewport>
 </form>
</body>

Como podemos ver, as regiões podem ser configuradas para serem redimensionadas, divididas ao gosto do freguês e não se restringem a apenas painéis, como podemos ver no exemplo abaixo usando abas.

<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<ext:Window ID="Window1" runat="server" Title="Com bordas" Layout="BorderLayout"
Height="480" Width="640">
<Items>
<ext:Panel ID="Panel1" runat="server" Title="Oeste" Region="West" Width="100">
</ext:Panel>
<ext:TabPanel ID="TabPanel1" runat="server" Region="Center">
<Items>
<ext:Panel ID="Panel2" runat="server" Title="Primeira Aba">
</ext:Panel>
<ext:Panel ID="Panel3" runat="server" Title="Segunda Aba">
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Window>
</form>
</body>

Absolute

O leiaute do tipo “Absolute” define um leiaute onde podemos informar as coordenadas X,Y de um componente.

<body>
 <ext:ResourceManager runat="server">
 </ext:ResourceManager>
 <form id="form1" runat="server">
 <ext:Window ID="Window1" runat="server" Height="480" Width="640" Layout="Absolute"
 Title="Cadastro" Icon="ApplicationForm">
 <Items>
 <ext:TextField ID="TextField1" runat="server" FieldLabel="Nome" X="130" Y="0">
 </ext:TextField>
 <ext:TextField ID="TextField2" runat="server" FieldLabel="Telefone" X="130" Y="25">
 </ext:TextField>
 <ext:TextField ID="TextField3" runat="server" FieldLabel="Email" X="130" Y="50">
 </ext:TextField>
 <ext:Image ID="Image1" runat="server" Height="128" Width="128" ShrinkWrap="Both"
 X="0" Y="0" ImageUrl="Resources/eu.jpg">
 </ext:Image>
 </Items>
 </ext:Window>
 </form>
</body>

Anchor

O leiaute do tipo âncora define em porcentagem o quanto componente pode usar do espaço disponível e automaticamente redimensiona o mesmo se o navegador redimensionar a tela.

<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>
    <form id="form1" runat="server">
    <ext:Window ID="Window1" runat="server" Height="480" Width="640" Layout="Absolute"
        Title="Cadastro" Icon="ApplicationForm">
        <Items>
            <ext:Container runat="server" Layout="Absolute" X="0" Y="0">
                <Items>
                    <ext:Image ID="Image1" runat="server" Height="128" Width="128" X="0" Y="0" ImageUrl="Resources/eu.jpg">
                    </ext:Image>
                </Items>
            </ext:Container>
            <ext:Container runat="server" Layout="Absolute" X="130" Y="0" Frame="true" Border="false">
                <Items>
                    <ext:TextField ID="TextField1" runat="server" FieldLabel="Nome" X="0" Y="0" Anchor="100%">
                    </ext:TextField>
                    <ext:TextField ID="TextField2" runat="server" FieldLabel="Telefone" X="0" Y="25"
                        AnchorHorizontal="100%">
                    </ext:TextField>
                    <ext:TextField ID="TextField3" runat="server" FieldLabel="Email" X="0" Y="50" AnchorHorizontal="100%">
                    </ext:TextField>
                </Items>
            </ext:Container>
        </Items>
    </ext:Window>
    </form>
</body>

Outros layouts

O Ext.NET oferece muitos outros leiautes e seria além do escopo deste artigo descrever todos.
Os leiautes acima, foram apenas exemplos que são amplamente utilizados e cobrem a maior parte da técnica para os demais.

Mas aqui está uma breve lista de outros layouts:

  • Card: Empilha componentes em cima uns dos outros. É o desenvolvedor que tem a Responsabilidade para ocultar ou mostrar o componente certo em tempo de programação.
    O “TabPanel” é uma extensão desta ideia, escondendo guias específicas, conforme necessário.
  • Column: Suporta várias colunas dento de uma página ou componente de leiaute;
  • Form: É uma simples forma de exibir cada componente, um em cima do outro, mas de uma forma que vai esticar a largura do componente quando redimensionado;
  • Table: Um leiaute de tabela, como o nome já diz, trabalha exatamente como uma tabela, suporta “spanning” de linhas e colunas;
note-taking Eu tenho por hábito, utilizar o “Card” leiaute para criar assistentes (“Wizards”).

Para conhecer mais sobre leaiutes, veja nos exemplos:

http://examples.ext.net/#/Layout/AbsoluteLayout/Basic/


É 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

Utilizando o componente Window

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

Windows

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

Windows

Uma janela , é um classe filha da classe  “Panel“.

Podemos utilizar em um sistema desktop para exibir as janelas, elas podem ser redimensionadas, ancoradas, modais, maximizadas, minimizadas, resumindo, podemos fazer com que elas tenham o mesmo comportamento em uma aplicação Desktop tradicional.

Primeira janela

Para criar uma janela, utilizamos a seguinte sintaxe:

<ext:Window ID="Window1" runat="server" Title="Ext.NET by Desenvolvedores.net" Width="390"
 Height="290" Layout="FitLayout">
 <Items>
 <ext:Panel ID="Panel1" runat="server" Border="false" />
 </Items>
 </ext:Window>

Este código irá gerar uma janela simples, de tamanho 390×290, como não passamos a posição inicial será exibida no meio da página.

Chamando por botões

No código abaixo iremos chamar a janela por um botão, será criada em tempo de execução.

<ext:Button ID="Button1" runat="server" Text="Exibir Janela">
 <Listeners>
 <Click Handler="#{Window2}.show();" />
 </Listeners>
 </ext:Button>
 <ext:Window ID="Window2" runat="server" AnimateTarget="Button1" CloseAction="Hide"
 Height="200" Hidden="true" Icon="ApplicationCascade" Maximizable="true" Minimizable="true"
 Modal="true" Title="Minha janela modal" Width="300">
 <Listeners>
 <Minimize Handler="this.hide();" />
 </Listeners>
 </ext:Window>

Explicando algumas propriedades

No exemplo acima utilizamos algumas propriedades que valem a pena uma explicação:

  • AnimateTarget: É o nome (ID) do controle que vai receber a animação da janela, no caso ela vai sumindo sentido ao controle. É apenas para deixar o visual mais bonito, desta forma a janela não simplesmente “aparece” na tela;
  • CloseAction: É a ação que será executada quando a janela for fechada. Os valores possíveis são:
    • Destroy: A janela é destruída e não pode mais se utilizada. Pode ser usado em casos onde a janela deve ser exibida apenas uma vez;
    • Hide: Apenas esconde a janela no navegador. Esta opção permite que a janela possa ser exibida e escondida quantas vezes forem necessárias;
  • Minimizable e Maximizable: Cria os dois ícones de maximizar e minimizar a janela, no canto superior direito;
  • Modal: Exibe uma janela no topo das outras. A página ficará com um cor esmaecida, e só ficará visível a janela modal. Útil para janelas do tipo diálogo, caixas de mensagens, etc.

Chamando em Postback

Se houver a necessidade de um “postback” para depois abrir a janela, também é possível. Para isso temos  que:

  1. Setar a propriedade “AutoPostBack” do botão para “true“;
  2. Criar um método no lado servidor, (Code Behind), que irá chamar a sua janela.

Exemplos:

Code design:

<ext:Window ID="Window3" runat="server" CloseAction="Hide" Height="200" Hidden="true"
 Icon="House" Maximizable="true" Minimizable="true" Title="Minha janela postback"
 Width="300">
 </ext:Window>
<ext:Button ID="Button2" runat="server" Text="Exibir Janela com Postback" OnClick="Button2_Click" AutoPostBack="true"></ext:Button>

Code behind

protected void Button2_Click(object sender, EventArgs e)
 {
        this.Window3.Show();
 }

Caso o seu exemplo de PostBack não funcione, verifique se colocou os componentes dentro da tag:

<form runat="server"></form>

Caso contrário não irá funcionar.

Carregar página.

Podemos usar também o componente de janelas para exibir uma página ao ser exibida. Veja exemplo:

<ext:Window ID="Window4" runat="server" CloseAction="Hide" Height="480" Hidden="true"
 Icon="House" Maximizable="true" Minimizable="true" Title="Site: Desenvolvedores.NET"
 Width="640">
 <Loader runat="server" Url="http://desenvolvedores.net" Mode="Frame">
 <LoadMask Msg="Carregando desenvolvedores.net" ShowMask="true">
 </LoadMask>
 </Loader>
 </ext:Window>
 <ext:Button ID="Button3" runat="server" Text="Carregar site">
 <Listeners>
 <Click Handler="#{Window4}.show();" />
 </Listeners>
 </ext:Button>

Explicando algumas propriedades

  • Loader: Define o que deverá ser carregado no componente.
    • URL: Define a URL que deverá ser carregada no componente.
    • Mode: Define que será carregado como um frame dentro do componente.
  • LoadMask: Define a mensagem que será carregada no componente.
    • ShowMask: Se true a mensagem é exibida, se não, oculta.

É 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

Utilizando os componentes básicos

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

Componentes_Basicos

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

Ao longo deste tópico conheceremos os componentes, com exemplos de uso simples. Sem nos preocuparmos diretamente com os eventos, que serão explicados no artigo “Utilizando Listeners (Eventos no lado cliente) e DirectEvents (Lado Servidor)“.

Vou assumir que você vem acompanhando o artigo, e já tem a base para seus fontes criada. Desta forma irei postar apenas os exemplos.

Botões

Se você está acostumado com o uso do HTML, você usa a tag <input type=”button”> para criar um simples botão. Isto é útil, quando estamos falando de html.

Mas aplicações em Desktop têm muitas variações para os botões, como SplitButtons, MenuButtons entre outros .

Para isso o Ext.Net tem o próprio componente de botão. Vamos à alguns exemplos:

Com Listener (Iremos ver o que são listeners)

 <ext:Button ID="Button1" runat="server" Text="Clica eu">
 <Listeners>
 <Click Handler="alert('Opa! Fui clicado... ');" />
 </Listeners>
 </ext:Button>

Com DirectEvent (Iremos ver o que é também)

 <ext:Button ID="Button2" runat="server" Text="Clica eu">
 <DirectEvents>
 <Click OnEvent="Button_Click">
 <EventMask ShowMask="true" />
 <ExtraParams>
 <ext:Parameter Name="Item" Value="Fui clicado e respondi pelo server..." />
 </ExtraParams>
 </Click>
 </DirectEvents>
 </ext:Button>

Com ícones

<ext:Button ID="Button3" runat="server" Text="Texto do seu botão" Icon="Add" />

Com Tooltip

<ext:Button ID="Button5" runat="server" Text="Texto do seu botão">
<ToolTips>
<ext:ToolTip ID="ToolTip1" runat="server" Title="Oi! Eu sou um título" Html="Só para não perder o hábito. Olá mundo..." />
</ToolTips>
</ext:Button>

Trocas

<ext:Button ID="Button6" runat="server" Text="Button1" EnableToggle="true" ToggleGroup="Group1"

 Pressed="true" />
 <ext:Button ID="Button7" runat="server" Text="Button2" EnableToggle="true" ToggleGroup="Group1" />
 <ext:Button ID="Button8" runat="server" Text="Button3" EnableToggle="true" ToggleGroup="Group1" />

 Menus

<ext:Button ID="Button9" runat="server" Text="Texto do seu botão">
<Menu>
<ext:Menu ID="Menu1" runat="server">
<Items>
<ext:MenuItem ID="MenuItem1" runat="server" Text="Item 1" Icon="GroupAdd" />
<ext:MenuItem ID="MenuItem2" runat="server" Text="Item 2" Icon="GroupDelete" />
<ext:MenuItem ID="MenuItem3" runat="server" Text="Item 3" Icon="GroupEdit" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>

Divisor com menus

<ext:SplitButton ID="SplitButton1" runat="server" Text="Texto do seu botão">
<Menu>
<ext:Menu ID="Menu2" runat="server">
<Items>
<ext:MenuItem ID="MenuItem4" runat="server" Text="Item 1" Icon="GroupAdd" />
<ext:MenuItem ID="MenuItem5" runat="server" Text="Item 2" Icon="GroupDelete" />
<ext:MenuItem ID="MenuItem6" runat="server" Text="Item 3" Icon="GroupEdit" />
</Items>
</ext:Menu>
</Menu>
</ext:SplitButton>

Botão chato

<ext:Button ID="Button11" runat="server" Text="Eu sou chato" Icon="Accept" Flat="true" />

Para mais exemplos de botões e menus:

Labels

Simples

<ext:Label ID="Label1" runat="server" Text="Olá Mundo ... de novo" />

Com Html

<ext:Label ID="Label2" runat="server" Html="<i>Eu sou um HTML</i>" />

Com ícones

<ext:Label ID="Label3" runat="server" Text="Olá Mundo!" Icon="Accept" />

Ícone a direita

<ext:Label ID="Label4" runat="server" Text="Chega de Olá Mundo." Icon="Accept" IconAlign="Right" />

Campos de texto

Os campos de texto, “TextField”, são muito flexíveis quanto à sua utilização, com eles podemos mascarar valores, temos campos de senha, etc. Iremos ver abaixo várias utilidades para os campos de texto, inputs.

Campos simples

<ext:TextField ID="TextField1" runat="server" FieldLabel="Digite algo:">
    </ext:TextField>

Senhas

<ext:TextField ID="TextField2" runat="server" FieldLabel="Informe a senha">
        <Plugins>
            <ext:PasswordMask ID="PasswordMask1" runat="server">
            </ext:PasswordMask>
        </Plugins>
    </ext:TextField>

Para mais exemplos de senha:

Máscaras

As máscaras servem para formatar os campos do tipo texto. Estas máscaras podem ser usadas para a validação do formulário, bem como para a exibição.

<ext:TextField ID="TextField1" runat="server" FieldLabel="Telefone">
        <Plugins>
            <ext:InputMask ID="InputMask1" runat="server" Mask="(999) 999-9999" />
        </Plugins>
    </ext:TextField>
    <ext:TextField ID="TextField2" runat="server" FieldLabel="CPF">
        <Plugins>
            <ext:InputMask ID="InputMask2" runat="server" Mask="999.999.999-99">
            </ext:InputMask>
        </Plugins>
    </ext:TextField>
    <ext:TextField ID="TextField3" runat="server" FieldLabel="CNPJ">
        <Plugins>
            <ext:InputMask ID="InputMask3" runat="server" Mask="99.999.999/9999-99">
            </ext:InputMask>
        </Plugins>
    </ext:TextField>
    <ext:TextField ID="TextField4" runat="server" FieldLabel="CEP">
        <Plugins>
            <ext:InputMask ID="InputMask4" runat="server" Mask="99999-999">
            </ext:InputMask>
        </Plugins>
    </ext:TextField>

Campos Numéricos

Os campos numéricos herdam da classe “TextField“, eles exibem um ícone de rolagem para facilitar  aos usuários informarem o valor.

Estes campos só permitem que sejam digitados números.

<ext:NumberField ID="NumberField1" runat="server" FieldLabel="Digite um número" MinValue="0"
 MaxValue="100" AllowDecimals="true" DecimalPrecision="1" Step="0.5" Number="3" />

No nosso exemplo temos o valor inicial setado como 3, devido a propriedade “Number“. Podemos também definir um limite para os números que são digitados usando as propriedades “MinValue” e “MaxValue“.

Em nosso exemplo, é exibido um botão de incremento, que pode ser escondido utilizando a propriedade “HideTrigger“, para “true” ou “false“, de acordo com a necessidade. Este incremento foi colocado na propriedade “Step“, que pode ser definida, caso contrário será 1 (um).

Data

Os campos de data possuem um pequeno calendário para auxiliar o usuário a informar a data corretamente. E também fazem a validação destes valores, evitando assim o usuário informar uma data errada.

Simples

<ext:DateField ID="DateField1" runat="server" FieldLabel="DateField">
</ext:DateField>

Calendário

<ext:DatePicker ID="DatePicker1" runat="server">
</ext:DatePicker>

CheckBox

Os campos do tipo checkbox permitem que você tenha cada um com sua label ou apenas uma label escondendo as outras.

Cada um com sua label

<ext:Checkbox runat="server" BoxLabel="Impala 68">
 </ext:Checkbox>
 <ext:Checkbox runat="server" BoxLabel="Mustang GTO">
 </ext:Checkbox>
 <ext:Checkbox ID="Checkbox1" runat="server" BoxLabel="Ford Tudor">
 </ext:Checkbox>

Label em comum

<ext:Checkbox ID="Checkbox2" runat="server" BoxLabel="Impala 68" FieldLabel="Carros Preferidos">
 </ext:Checkbox>
 <ext:Checkbox ID="Checkbox3" runat="server" BoxLabel="Mustang GTO" HideEmptyLabel="false">
 </ext:Checkbox>
 <ext:Checkbox ID="Checkbox4" runat="server" BoxLabel="Ford Tudor" HideEmptyLabel="false">
 </ext:Checkbox>

Radio Buttons

A declaração dos Radiobuttons é parecida com a declaração dos Checkboxes, só que ao invés de usar a classe “Checkbox”, usamos a classe “Radio”.

note-taking Para o html entender em qual grupo deverá validar os Radiobuttons, estes deverão ter o mesmo nome (name) definido, no caso eu chamei os meus de “radinho”.

Cada um com sua label

<ext:Radio ID="Radio1" Name="radinho" runat="server" BoxLabel="Impala 68">
</ext:Radio>
<ext:Radio ID="Radio2" Name="radinho" runat="server" BoxLabel="Mustang GTO">
</ext:Radio>
<ext:Radio ID="Radio3" Name="radinho" runat="server" BoxLabel="Ford Tudor">
</ext:Radio>

Label em comum

<ext:Radio ID="Radio4" runat="server" BoxLabel="Impala 68" FieldLabel="Carro Preferido">
</ext:Radio>
<ext:Radio ID="Radio5" runat="server" BoxLabel="Mustang GTO" HideEmptyLabel="false">
</ext:Radio>
<ext:Radio ID="Radio6" runat="server" BoxLabel="Ford Tudor" HideEmptyLabel="false">
</ext:Radio>
note-taking Este foi deixado sem nome propositalmente para vermos a diferença de “com nome” e “sem nome

Vimos aqui alguns componentes básicos. Nos próximos capítulos, iremos ver componentes mais complexos, como ComboBox, GridPanels, Windows , etc.


É 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

O que é RIA (Rich Internet Application)?

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

evolution-of-user-interface-from-mainframe-to-ria

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

O que é RIA?

Aplicação de Internet Rica; RIA (Rich Internet Application); São aplicações que possuem como característica as facilidades das aplicações desenvolvidas em Desktop.

Têm um visual onde não existe a necessidade de se atualizar toda a página, conceito “Ajax“, ou até mesmo sem atualização, conceito chamado de “no-refresh“, o que vai de encontro com o conceito de “HduX (High Definition User eXperience)

Como surgiu o RIA

A internet surgiu com páginas em um modelo estático, onde toda atualização era necessário enviar os dados ao servidor, este por sua vez processava a nova página e devolvia ao navegador, que por sua vez interpretava as páginas e exibia-as ao usuário.

http_diagram
Dentro desta necessidade, de as páginas não serem tão estáticas, a  “Netscape“, por volta de 1995 resolve lançar o Javascript.

question A intenção do javascript era deixar algo dinâmico …Que nasceu com o propósito de ser estático…Não seria isso uma gambiarra da web?

Mas com o crescimento das aplicações de negócios, B2B, diferente das aplicações simples, estas exigiam várias páginas de formulários para completar uma simples transação, e como foi dito acima, para cada “post” ia toda a página ao servidor e este retornava a nova página, isso diminuía a performance das páginas e servidores web.

Tendo em vista esta necessidade, em 1996 a Microsoft lançou a tag <iframe> que permitia que o conteúdo fosse carregado de forma assíncrona.

Em 1999 a Microsoft criou o primeiro componente de requisição, o “XMLHTTP ActiveX” para o Internet Explorer, o que mais tarde seria adotado pela Mozilla, Safari, Ópera sob o nome de XMLHttpRequest e posteriormente a Microsoft também adotou este nome em seu navegador.

note-taking O termo “Ajax” foi afirmado publicamente em Fevereiro de 2005 por
Jesse James Garrett, em um artigo intitulado “Ajax: Uma Nova Abordagem para Aplicações Web“.

ajax-lifecycle

Benefícios

Devido ao RIA ter sua “Client Engine”, isso nos leva à alguns pontos benéficos:

  • Riqueza: É possível oferecer ao usuário uma interface rica, que não pode ser feita apenas com o uso de HTML simples. A possibilidade de arrastar e soltar, incluir campos dinamicamente, cálculos realizados diretamente do lado cliente, fazem a diferença;
  • Resposta: A resposta rápida que acontece do lado cliente, ou mesmo quando há a interação do lado servidor, não há a necessidade de se enviar toda a página ao servidor, a atualização acontece apenas no ponto da página que foi modificada;
  • Processamento Cliente/ Servidor: A carga de processamento entre o cliente e o servidor é dividida, pois o servidor web não precisa realizar todo o processamento da página para devolver ao usuário;
  • Comunicação Assíncrona: Quando o usuário realiza uma ação, não é necessário esperar a resposta do servidor. As páginas podem prever uma ação futura e já deixar carregados no lado cliente, antes da solicitação do usuário, como é  o caso do Google Maps;
  • Sandbox: Ao serem executadas em uma Sandbox, não existe o acesso ao sistema do usuário, o que garante um certo nível de segurança.

Falhas

  • Scripts Desabilitados:  Se por alguma razão o usuário desabilitar o javascript, as páginas em RIA não irão funcionar
    • Atualmente não vejo o por quê disso.

 


É 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

Rich Internet Applications com Ext.Net

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

rich-internet-applications-ext

Salve galera.

Depois de muito tempo sem postar devido há uma boa guinada em minha vida pessoal e profissional; mudança de cidade, de emprego… Logo… acabei deixando o site de lado… Mas nunca esquecido.

E para retornar  com chave de ouro, irei falar sobre como construir uma aplicação Web rica utilizando o componente  Ext.Net.

Abaixo o índice do que será discutido neste artigo, e  o mesmo será apresentado, por mim, no evento Devcon Gescla, http://www.devcongescla.com.br.

Sumário

  1. O que é RIA;
  2. Apresentando o Ext.Net;
  3. Instalando o Ext.Net;
  4. Utilizando os componentes básicos;
  5. Utilizando o componente Window;
  6. Definindo leiautes;
  7. Utilizando Listeners (Eventos no lado cliente) e DirectEvents (Lado Servidor);
  8. Criando métodos no lado Cliente/Servidor (DirectMethod);
  9. Trabalhando com dados, Combobox e GridPanel;
  10. Criando componentes no lado Servidor;

Links Úteis


É 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

Orações para o dia-a-dia do programador

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

Em momentos de grande desespero nada como uma boa oração para melhorar o nosso dia e fazer com que nossos programas funcionem.

Duas orações para que sejam feitas, caso as coisas comecem a dar errado.

Pai Nosso
Sistema Operacional que estais na memória,
Compilado seja o vosso programa,
Venha à tela os vossos comandos,
Seja executada a nossa rotina,
Assim na memória como na impressora.
Acerto nosso de cada dia, rodai hoje.
Informai os nossos erros,
Assim como nós informamos o que está corrigido,
Não nos deixei entrar em looping,
Mas livrai-nos do Dump,
Amém.

Ave Maria
Ave Memória cheia de maps,
o editor é convosco,
estendida sois vós entre as placas,
e o curto de vosso entry: PC-Plus.
Santa memória, mãe do DOS,
roteai por nós, programadores,
agora e na hora da compilação, append!


É 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

Inno Setup – Identificando framework

6
1 Estrela2 Estrelas3 Estrelas4 Estrelas5 Estrelas (3 votos, média: 5,00 de 5)
Loading...
3 de outubro de 2012

Um amigo me perguntou como fazer para que o Inno Setup identificasse qual framework está instalado na máquina e se não tiver, como fazer o download e instalar o mesmo.

Abaixo eu montei um script que faz este processo de instalação do framework, no caso eu usei o Framework 3.5 SP 1 para identificar se o mesmo está instalado ou não.

Uma lista de como identificar quais fw´s estão instalados pode ser obtida em http://msdn.microsoft.com/en-us/kb/kbarticle.aspx?id=318785 e basta trocar a chave de registro na linha 40 do script pela versão do fw que você necessita.

RegQueryDWordValue(HKLM, 'SOFTWARE\Microsoft\NET Framework Setup\NDP\v3.5', 'SP', regresult);

No script iremos fazer o download do pacote standalone do fw3.5sp1, que pode ser obtido em http://download.microsoft.com/download/2/0/e/20e90413-712f-438c-988e-fdaa79a8ac3d/dotnetfx35.exe ou no link http://www.microsoft.com/en-us/download/details.aspx?id=22 , para o pacote do installer.

O Inno setup não tem suporte nativo para download de arquivos, mas isso não quer dizer que não possa ser feito.

Para atribuir esta funcionalidade ao Inno iremos usar um pacote chamado “InnoTools Downloader” que pode ser baixado em http://www.sherlocksoftware.org/file.php?id=40
No tutorial eu utilizei a versão 0.3.5.

Documentação online do InnoTools Downloader http://www.sherlocksoftware.org/innotools/itdhelp/index.html.

Bom, agora vamos ao que interessa.

Crie um novo script no Inno.
Uma linha muito importante que deve ser adicionada ao script é a linha

#include ReadReg(HKEY_LOCAL_MACHINE,'Software\Sherlock Software\InnoTools\Downloader','ScriptPath','')

No meu caso é a primeira linha do script, esta linha adiciona a DLL (itdownload.dll) ao nosso script, é ela que iremos usar para baixar o fw.

Aqui iremos usar um pouco de programação pascal, pois é preciso para fazer as chamadas e a montagem das telas do download.

Atenção aos comentários no script, tem bastante informação útil.

//incialização do setup. É sempre chamada pelo Inno ao iniciar o setup
procedure InitializeWizard();
var
    filename  : string;
    regresult : cardinal;
begin
    // verifica se o framework 3.5 sp1 está instalado.
    // mais detalhes para outros frameworks: http://msdn.microsoft.com/en-us/kb/kbarticle.aspx?id=318785
    RegQueryDWordValue(HKLM, 'SOFTWARE\Microsoft\NET Framework Setup\NDP\v3.5', 'SP', regresult);

    //se o resultado for um. Então o SP1 está instalado
    //Este resultado é o valor da chave
    if regresult <> 1 then begin
      // definir o caminho do arquivo
      filename := expandconstant('{tmp}\fx3.5sp1.exe');

      // não está instalado. Exibir a mensagem para o usuário se deseja instalar o fw
      if MsgBox('Para continuar a instalação é necessário fazer o download do Framework 3.5 SP1. Deseja continuar?', mbInformation, mb_YesNo) = idYes then begin
          //iniciar o itd
          itd_init;

          //adiciona um arquivo na fila de downloads. (pode se adicionar quantos forem necessários)
          itd_addfile('http://download.microsoft.com/download/2/0/e/20e90413-712f-438c-988e-fdaa79a8ac3d/dotnetfx35.exe', filename);

          //aqui dizemos ao itd que é para fazer o download após o inno exibir a tela de preparação do setup
          itd_downloadafter(wpReady);
        end else begin
          // o usuário optou por não fazer o download do fw, então avisamos de onde ele pode baixar
          MsgBox('O link para download manual do framework é http://download.microsoft.com/download/2/0/e/20e90413-712f-438c-988e-fdaa79a8ac3d/dotnetfx35.exe', mbInformation, mb_Ok);
      end
    end
end;

//Este método é chamado pelo Inno ao clicar em próximo. Neste momento a interface já está criada
procedure CurStepChanged(CurStep: TSetupStep);
var
    filename  : string;
    ErrorCode: Integer;
begin

filename := expandconstant('{tmp}\fx3.5sp1.exe');

if CurStep = ssInstall then begin
    // este passo só irá acontecer após o download do arquivo.
    // para evitar erros, validamos se o arquivo foi baixado. Se não foi, continua com o setup.
    if fileExists(filename) then begin
        // foi baixado. Executar o instalador do fw.
       if not ShellExec('', filename,'', '', SW_SHOW, ewWaitUntilTerminated, ErrorCode) then begin
          // Xi! Deu erro
         if ErrorCode <> 0 then begin
              MsgBox('Erro ao executar o arquivo ' + filename + chr(13) + SysErrorMessage(ErrorCode), mbError, mb_Ok);
         end;
       end
    end;
end;
end;

Abaixo o código completo do Script.

#include ReadReg(HKEY_LOCAL_MACHINE,'Software\Sherlock Software\InnoTools\Downloader','ScriptPath','')
#define MyAppName "Desenvolvedores"
#define MyAppVersion "1.5"
#define MyAppPublisher "desenvolvedores.net"
#define MyAppURL "http://desenvolvedores.net"
#define MyAppExeName "desenvolvedores.exe"

[Setup]
AppId={{006DC1BE-0C38-46DF-AF73-CC79E3A1E9F4}
AppName={#MyAppName}
AppVersion={#MyAppVersion}
AppPublisher={#MyAppPublisher}
AppPublisherURL={#MyAppURL}
AppSupportURL={#MyAppURL}
AppUpdatesURL={#MyAppURL}
DefaultDirName={pf}\{#MyAppName}
DisableDirPage=yes
DefaultGroupName={#MyAppName}
OutputBaseFilename=setup
Compression=lzma
SolidCompression=yes

[Languages]
Name: portugues; MessagesFile: C:\Program Files (x86)\Inno Setup 5\Languages\BrazilianPortuguese.isl

[Registry]

[Files]

[Run]

[Code]
//incialização do setup. É sempre chamada pelo Inno ao iniciar o setup
procedure InitializeWizard();
var
    filename  : string;
    regresult : cardinal;
begin
    // verifica se o framework 3.5 sp1 está instalado.
    // mais detalhes para outros frameworks: http://msdn.microsoft.com/en-us/kb/kbarticle.aspx?id=318785
    RegQueryDWordValue(HKLM, 'SOFTWARE\Microsoft\NET Framework Setup\NDP\v3.5', 'SP', regresult);

    //se o resultado for um. Então o SP1 está instalado
    //Este resultado é o valor da chave
    if regresult <> 1 then begin
      // definir o caminho do arquivo
      filename := expandconstant('{tmp}\fx3.5sp1.exe');

      // não está instalado. Exibir a mensagem para o usuário se deseja instalar o fw
      if MsgBox('Para continuar a instalação é necessário fazer o download do Framework 3.5 SP1. Deseja continuar?', mbInformation, mb_YesNo) = idYes then begin
          //iniciar o itd
          itd_init;

          //adiciona um arquivo na fila de downloads. (pode se adicionar quantos forem necessários)
          itd_addfile('http://download.microsoft.com/download/2/0/e/20e90413-712f-438c-988e-fdaa79a8ac3d/dotnetfx35.exe', filename);

          //aqui dizemos ao itd que é para fazer o download após o inno exibir a tela de preparação do setup
          itd_downloadafter(wpReady);
        end else begin
          // o usuário optou por não fazer o download do fw, então avisamos de onde ele pode baixar
          MsgBox('O link para download manual do framework é http://download.microsoft.com/download/2/0/e/20e90413-712f-438c-988e-fdaa79a8ac3d/dotnetfx35.exe', mbInformation, mb_Ok);
      end
    end
end;

//Este método é chamado pelo Inno ao clicar em próximo. Neste momento a interface já está criada
procedure CurStepChanged(CurStep: TSetupStep);
var
    filename  : string;
    ErrorCode: Integer;
begin

filename := expandconstant('{tmp}\fx3.5sp1.exe');

if CurStep = ssInstall then begin
    // este passo só irá acontecer após o download do arquivo.
    // para evitar erros, validamos se o arquivo foi baixado. Se não foi, continua com o setup.
    if fileExists(filename) then begin
        // foi baixado. Executar o instalador do fw.
       if not ShellExec('', filename,'', '', SW_SHOW, ewWaitUntilTerminated, ErrorCode) then begin
          // Xi! Deu erro.
         if ErrorCode <> 0 then begin
              MsgBox('Erro ao executar o arquivo ' + filename + chr(13) + SysErrorMessage(ErrorCode), mbError, mb_Ok);
         end;
       end
    end;
end;
end;

Dúvidas? Perguntem.


É 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
Page 2 of 6«12345»...Last »