Home>Web>Ajax>Definindo leiautes com Ext.Net
Updated on /

Definindo leiautes com Ext.Net

Ajax ASPX C# Ext.Net Javascript Web

Sumário

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

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

Você vai gostar de...

Trabalhando com dados, Combobox e GridPanel

Trabalhando com dados, Combobox e GridPanel

LSP Liskov Subtitution Principle (Princípio da Substituição de Liskov)

Introdução ao Microsoft Visual Studio

embedded-javascript

Embedded Javascript

Postagens populares.

[Guia] Instalando Android ADB Interface em celulares chineses (Android Debug Bridge)

[Guia] Instalando Android ADB Interface em celulares chineses (Android Debug Bridge)

Programação Orientada a Objetos (POO)

Xuxa para Programadores

Polimorfismo (POO)

1 Comment

  1. Marcos Alvarenga says:

    Marcelo estou iniciando meus estudos em EXT.NET e venho tendo algumas dúvidas sobre alguns eventos e componentes. Um dele, por exemplo é quando não consigo inserir um evento dentro de um componente.
    ex:

    aparece um erro dizendo que: Listeners is of type ‘System.web.UI.HTML.Controls.HtmlGenericControl

Deixe um comentário

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.