LOGIN:

iMasters | Por uma internet mais criativa e dinâmica

Feeds

Quarta-feira, 20/08/2008 - 10:20 - Por Daniel Schmitz
Seções relacionadas:

Utilizando ViewPorts

Um componente muito interessante do EXT é o ViewPort. Ele mostra todo o poder do EXT no desenvolvimento de sistemas e representa toda a área útil de sua aplicação (browser).

OBS: Todo Viewport é renderizado na tag BODY do documento HTML e não há como renderizá-lo em outro lugar. Pode-se ter somente um Viewport por página.

Suponhamos que iremos criar uma aplicação com as seguintes áreas:

  • Lado esquerdo: Menu
  • Área central: Aplicação
  • Rodapé: Mensagens e outras funcionalidades

Com ViewPort é possível criar esta configuração rapidamente, sem esforço. Inicialmente criamos o HTML, veja:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Exemplo com viewport</title>

	<!-- EXT  Início -->
	<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
	<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="../ext-all.js"></script>
	<!-- EXT Fim -->
	
	<script language="javascript">
		Ext.onReady(function() {
			
		});
	</script>	
<body>

	<div id="menu">Este é o menu</div>
	<div id="content">Este é o conteúdo</div>
	<div id="footer">Este é o rodapé</div>	
</body>
<html>

Criamos três DIVs para o nosso exemplo e usamos o Viewport para inserir cada div em seu devido lugar. Veja:

Ext.onReady(function() {
	new Ext.Viewport({
	id: ´viewport´
	, layout: ´border´	
	, items: [
			{ 
				id: ´westRegion´
				, title: ´Menu´
				, region:´west´
				, contentEl:´menuDiv´
				, width: 200
				, collapsible: true
				, split:true
				
			}, 
			{ 
				id: ´centerRegion´
				, region:´center´
				, contentEl:´contentDiv´
				, autoHeight: true
				, split:true
			},
			{ 
				id: ´footerRegion´
				, region:´south´
				, contentEl:´footerDiv´
				, collapsible: true
				, title: "Footer"
				, split:true
			}
		]
});
});
Resultado:

No código acima, criamos um Viewport com o Layout "border". A utilização do Layout "border" permite que criemos regiões definidas na aplicação, que são configuradas como: east (leste, parte esquerda da aplicação), West (oeste, parte direta da aplicação), North (Norte, cabeçalho da aplicação), South (Sul, rodapé da aplicação) e Center (Centro, parte central da aplicação)

A propriedade "items" determina os itens do Viewport. Cada item é considerado um Panel e para cada item configuramos a sua região. Também configuramos outras propriedades tais como "collapsible" e "title".

Agora vamos criar outro viewport, sem a utilização de tags div. Veja:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Exemplo com viewport</title>

	<!-- EXT  Início -->
	<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
	<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="../ext-all.js"></script>
	<!-- EXT Fim -->
	
<script language="javascript">
Ext.onReady(function() {
	var pnl1 = new Ext.Panel({
		id: ´pnl1´
		, title: ´Menu´
		, region:´west´
		, width: 200
		, collapsible: true
		, split:true
	});	
	var pnl2 = new Ext.TabPanel({
		id: ´pnl2´
		, title: ´Conteúdo´
		, region:´center´
		,  activeTab:0
		, items:	[{title:"Aba 1",html:"<h1>Aba 1</h1>"},{title:"Aba 2"}]	
	});
	
new Ext.Viewport({
	id: ´viewport´
	, layout: ´border´
	, items: [pnl1,pnl2]
});
});
</script>	
<body></body>
</html>
Resultado:

No exemplo acima, criamos dois Panels e utilizamos o Viewport para configurar estes panels em seus devidos lugares. Veja que criamos um componente chamado TabPanel, no qual possui dois items. No resultado, o Ext renderiza o TabPanel em abas, onde o conteúdo de cada aba pode ser definido através de diversos métodos. Neste exemplo, usamos a prorpiedade "html" para inserir um conteúdo HTML qualquer.

Todos os artigos de Daniel Schmitz

3 comentários publicados

  • 1. Interessante

    Quarta-feira, 20/08/2008, por Ian Liu Rodrigues

    É interessante como as coisas "giram". No GTK, por exemplo, é recomendado que se use um arquivo XML para montar o layout, evitando utilizar códigos. O HTML é exatamente isso, uma interface para não se utilizar códigos para montar um layout. Agora bibliotecas em JS foram criadas para montar os layouts via código. Será que surgirá um novo padrão XML para representar layouts em EXT?!

    • Daniel Lima dos Anjos Pinheiro - Quarta-feira, 20/08/2008

      Bom... não é bem um padrãooooooooo em XML, mas é uma tag library que fizeram para Java. É o Exttld: Uma library escrita em java para criar layouts em EXT Js.
      Bom.. eu nunca usei... ehehehe mas se eu soubesse Java, com certeza estaria fazendo horrores com isso.. euheueuhe.
      Segue o link: http://www.exttld.com/

    Responder comentário

  • 2. Interessante sim, padrão não

    Quarta-feira, 20/08/2008, por Raphael Augusto Ferroni Cardoso

    Também acho muito interessante, porem penso que não chegaria a ser um padrão XML porque esse é JavaScript. Apesar da praticidade, prefiro a portabilidade de se utiliza HTML e CSS.

    Responder comentário

Poste um comentário


Os textos publicados neste espaço são de responsabilidade única de seus autores (colunistas e leitores) e podem não expressar necessariamente a opinião do iMasters.

Sobre o autor

Daniel Schmitz é Desenvolvedor Web desde 1998. Sempre atento a novas tecnologias, já criou artigos sobre Zope, Flex e PHP. Atualmente é Analista de Sistemas da Prolink Tecnologia LTDA."


Indique para um amigo

captcha

TI SHOP Produtos iMasters

  • Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
  • Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
  • DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
  • DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.