Agora poderemos começar a desenvolver nossa aplicação com o GeoExt. Caso algo tenha dado errado, verifique as mensagens de log que surgirão no seu navegador.
Desenvolvimento Com o editor de sua preferência, crie um arquivo xhtml, ele deverá ser idêntico ao código abaixo, salve-o na pasta app1 com o nome index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>GeoExt - FOSSGIS Brasil</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- arquivo CSS necessário do Ext --> <link rel="stylesheet" type="text/css" href="ext-3.2.0/resources/css/ext-all.css" /> <!-- Abaixo, colocaremos os caminhos das bibliotecas que vamos utilizar --> <script type="text/javascript" src="ext-3.2.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.2.0/ext-all.js"></script> <script type="text/javascript" src="OpenLayers-2.10/lib/OpenLayers.js"></script> <script type="text/javascript" src="GeoExt/lib/GeoExt.js"></script> <!-- Logo abaixo, vamos escrever o código Javascript da aplicação, a seguir na explicação --> </head> <body> </body> </html>
O arquivo criado possui a estrutura básica para o funcionamento do GeoExt, agora vamos escrever abaixo do último comentário o código a seguir, que irá fazer com o que o GeoExt funcione: <script type="text/javascript" language="javascript"> // inicializa a variável mapPanel que conterá a janela flutuante var mapPanel; // Função que será executada assim que a página for carregada Ext.onReady(function() { //Configuração da janela flutuante new Ext.Window({ title: "GeoExt - FOSSGIS Brasil", height: 400, width: 600, layout: "fit", items: [{ xtype: "gx_mappanel", id: "mappanel", //Configuração do mapa a ser exibido map: { //determina a extensão máxima do mapa maxExtent: new OpenLayers.Bounds(-53.1096, -25.3119, -44.1606, -19.7793), units: "degrees", // controles de navegação do mapa controls: [ new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.ScaleLine(), new OpenLayers.Control.MousePosition({numDigits:2}) Continua na página seguinte... Revista FOSSGIS Brasil | Junho 2011 | www.fossgisbrasil.com.br
51