[ExtJS][#001 ] Conhecendo o ExtJS
Olá pessoal, tudo bem?
Estou começando agora uma série de tutoriais escritos (em breve em vídeo) sobre um dos mais poderosos frameworks desenvolvidos sob a linguagem Javascript: o ExtJS.
[ExtJS][#001] Conhecendo o ExtJS - Como configurar a página HTML e trabalhar com o básico do framework
****
Para começar a trabalhar com o framework ExtJS, você deve fazer o download de sua biblioteca, é claro. Acesse o link http://www.extjs.com...js/download.php e baixe o arquivo como mostrado na figura abaixo:
Imagem 001.01
/applications/core/interface/imageproxy/imageproxy.php?img=http://img696.imageshack.us/img696/8646/00101.png&key=3ae03717b0a7d65a267e0786e9e541b8d14d472e51c6dddca6c3a17385083312" alt="Imagem Postada" />
Após fazer o download, você deve organizar seu projeto para conter o ExtJS.
Pense na sua estrutura de pastas, como costuma organizar seus arquivos. Extraia o ExtJS e renomeie a pasta Ext JS 3.2.1 para ExtJS.
Sua estrutura deve ficar mais ou menos assim:****
Imagem 001.02****
/applications/core/interface/imageproxy/imageproxy.php?img=http://img85.imageshack.us/img85/4069/00102.png&key=be79efe7e539c9742b5936c7a99df0085da374d910b08753fbecf11d722448de" alt="Imagem Postada" />
Pronto! Agora que você já tem um projeto criado e contendo a biblioteca do ExtJS, você está pronto para começar!****
O próximo passo é configurar nosso index.html para carregar estas bibliotecas corretamente.
O seu arquivo deve manter essa estrutura básica:
****
Imagem 001.03
/applications/core/interface/imageproxy/imageproxy.php?img=http://img707.imageshack.us/img707/2035/00103.png&key=e9a0abe6495299795d7750b7ad2841e8bd61e9232c26815fc1f20cdaaedda89c" alt="Imagem Postada" />
Pegue o código abaixo:****
<!-- Não declare DOCTYPE aqui, a não ser que você queira problemas com o IE. -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!-- Biblioteca ExtJS: base/adapter -->
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>
<!-- Biblioteca ExtJS: todos os widgets -->
<script type="text/javascript" src="ExtJS/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'ExtJS/resources/images/default/s.gif';
Ext.onReady(function(){
console.info('cadela baia!!');
});
</script>
</head>
<body>
</body>
</html>********
****E agora, para testar o que foi feito, você precisará de uma ferramenta muito interessante já conhecida por muitos programadores: o FireBUG.
O FireBUG é um complemento (add-on) para o Mozilla Firefox que debuga CSS, HTML e, mais importante para nós, Javascript.
Para fazer o download, clique neste link: https://addons.mozil...efox/addon/1843
Após ter instalado o FireBUG em sua máquina. Abra seu site e clique no ícone do firebug, no canto inferior direito do navegador, como demonstrado na figura 04 abaixo.
Imagem 001.04
/applications/core/interface/imageproxy/imageproxy.php?img=http://img694.imageshack.us/img694/5960/00104.png&key=6fdc7077f9749c1f4be56d34f5575a7a3f7cc2dbb2f0ac9405e97ae932e60199" alt="Imagem Postada" />
Ao clicar neste ícone, você perceberá que o FireBUG expandirá um pedaço da janela e mostrará seus menus de opções. Clique no menu console e veja o que aconteceu.
Imagem 001.05
/applications/core/interface/imageproxy/imageproxy.php?img=http://img94.imageshack.us/img94/3227/00105.png&key=7fdac77a9823a4e5808a0c23a845f55b8383b423c18a2c9c8056d5970dda4624" alt="Imagem Postada" />
Exatamente! Enviamos uma mensagem via javascript para o console do FireBUG! Incrível, não?
O que vimos:
- Incluímos os arquivos ext-base.js e ext-all-debug.js, os principais arquivos para carregar a biblioteca do ExtJS em nosso site.
- Especificamos um link para a imagem s.gif, uma imagem em branco necessária para a renderização da tela pelo ExtJS.
- Jogamos uma mensagem no console dentro no bloco onReady.
Na próxima aula, veremos um pouco sobre alertas de tela e alguns outros recursos básicos do ExtJS. Até lá!****
Daniel Ribeiro Gomes.
****
Discussão (2)
Carregando comentários...