Desenvolvedores.Net - TechBlog

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

Compartilhe!

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

Deixe uma resposta

O seu endereço de e-mail não será publicado.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>