Sumário
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;
![]() |
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