Tutorial:HTML Page Setup (Portuguese) (Legacy)
This version of our Learning Center is unmaintained.
This article may be out-of-date or contain incorrect information.
Please visit the new Sencha Learning Center for up-to-date material.
From Sencha - Learn
| Summary: Configuração da Página HTML |
| Author: Mjlecomte |
| Published: May 18, 2009 |
| Ext Version: 2.0+ |
Languages:  English  Portuguese
|
Contents |
HTML Vazio
Vamos apenas criar uma página HTML base completa. Iremos construí-la em etapas e discuti-la conforme prosseguimos.
<!-- NÃO coloque nenhum DOCTYPE aqui, a não ser que queira problemas com o IE. --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title id='title'>HTML Page setup Tutorial</title> </head> <body> </body> </html>
Fácil o suficiente. Repare que não temos especificação do DOCTYPE e não há nada entre as tags body.
Para suporte a caracteres de várias línguas, especifique utf-8 como conjunto de caracteres (mais informações aqui).
Seção Head
Ok, vamos configurar um esboço de template para os recursos CSS e JavaScript que serão utilizados.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title id='title'>HTML Page setup Tutorial</title> <!-- ** CSS ** --> <!-- biblioteca base --> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <!-- sobrescrições à biblioteca base --> <!-- ** Javascript ** --> <!-- biblioteca ExtJS: base/adaptador --> <!-- biblioteca ExtJS: todos os componentes --> <!-- sobrescrições à biblioteca base --> <!-- extensões --> <!-- especificação da página --> <script type="text/javascript"> </script> </head> <body> </body> </html>
Nós basicamente configuramos apenas marcadores de posição para nossos muitos recursos. A primeira coisa que incluímos, como recomendado pelo Yslow, é nosso CSS. O arquivo CSS padrão da ExtJS (ext-all.css) zera a página e providencia uma base para se construir, então ele é incluído por primeiro. Se precisarmos sobrescrever algum CSS, incluiremos posteriormente.
Em seguida incluiremos nosso JavaScript. A ordem de inclusão dos arquivos é importante.
Template Final
Como já mencionado, a ordem de inclusão dos arquivos é importante.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title id='title'>HTML Page setup Tutorial</title> <!-- ** CSS ** --> <!-- biblioteca base --> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <!-- sobrescrições à biblioteca base --> <!-- ** Javascript ** --> <!-- biblioteca ExtJS: base/adaptador --> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <!-- biblioteca ExtJS: todos os componentes --> <script type="text/javascript" src="../../ext-all-debug.js"></script> <!-- sobrescrições à biblioteca base --> <!-- extensões --> <!-- especificação da página --> <script type="text/javascript"> // Caminho da imagem em branco, deve apontar para localização válida em seu servidor Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif'; Ext.onReady(function(){ console.info('woohoo!!!'); }); //fim de onReady </script> </head> <body> </body> </html>
O que fizemos agora foi:
- inclusão de ext-base.js. O arquivo base da ExtJS;
- inclusão de ext-all-debug.js. O "estado da arte" de todo o esplendor da ExtJS;
- especificação de um link para o arquivo local s.gif para que a biblioteca Ext não fique procurando em www.extjs.com;
- inclusão de uma instrução no console em um bloco onReady. Isso é apenas um teste para ver se temos nossa página configurada corretamente. Se tudo estiver correto no mundo, será possível abrir o firebug e ver essa instrução na aba do console.
Referências incorretas à localização de arquivos
Então navegaremos por nossa página através de http://alguma_coisa (não file://) e veremos isso no rodapé da página:
Clique no círculo vermelho com X para abrir o firebug e verificar qual é o problema:
Ext está indefinida? Vamos checar a aba NET e verificar o que ela mostra:
Qualquer coisa que estiver em vermelho não foi encontrada. Se você passar o mouse sobre as linhas em vermelho, poderá ver de onde o navegador tentou obter o recurso. Parece que cometi um engano em minha referência relativa. Então corrigi e atualizei a página:
Success
Woohoo! Nenhum erro no firebug e a instrução do console foi executada no bloco Ext.onReady(). Isso significa que a ExtJS está carregada e estamos prontos para detonar!!