Desenvolvedores.Net - TechBlog

Daily Archives: 16 de junho de 2014

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