Login:

iMasters | Por uma internet mais criativa e dinâmica

Feeds

Javascript

Feed da seção Javascript

Newsletter de Javascript


Segunda-feira, 21/07/2008 - 09:30 - Por Daniel Schmitz
Seções relacionadas:

Instalação do EXT

A instalação do EXT é muito simples.

Acesse: http://www.extjs.com/products/extjs/download.php e clique em Download no item "Ext JS 2.1 SDK". Talvez a versão atual do EXT seja diferente da 2.1, mas o processo de instalação será bastante semelhante. Após clicar no link Download, surgirá um arquivo no formato ZIP para download.

Após realizar o download, descompacte o arquivo em um diretório qualquer e verifique o seu conteúdo. Iremos encontrar as seguintes pastas:

  • Adapter: Contém arquivos em JavaScript para que o Ext possa se adaptar a outros scripts tais como jQuery ou Prototype.
  • Examples: contém exemplos de todos os componentes do Ext.
  • Source: Contém o código fonte de todos os componentes do Ext.
  • Air: Contém scripts para que o Ext possa interagir com o Adobe Air
  • Docs: Contém a documentação do EXT

Além destas pastas, também encontramos os seguintes arquivos:

  • ext-all-debug.js: Contém todos os componentes do EXT. Este arquivo possui a mesma funcionalidade do arquivo ext-all.js, exceto por ser legível para nós humanos. Este arquivo será usado durante a fase de desenvolvimento de nossas aplicações, pois poderemos debugar os scripts com muita facilidade. Quando nossa aplicação for distribuída (fase de produção), iremos utilizar o arquivo ext-all.js, que possui as mesmas funcionalidades mas tem quase a metade do tamanho do arquivo de debug. Veja:

- ext-all-debug.js: 921 KB

- ext-all.js: 511 KB
  • ext-core-debug.js: É o núcleo do Ext e possui as mesmas características do item anterior.

Para verificarmos o sucesso da nossa instalação, acesse a pasta:

examples/samples.html

E verifique se o navegador exibe uma tela conforme abaixo:

Nesta página você poderá verificar diversos exemplos do EXT. Exemplos que necessitam de um servidor (Grids com Ajax, por exemplo) serão vistos nos próximos artigos.

Criando um exemplo

Agora vamos criar o nosso primeiro exemplo! Para que você possa utilizar o Ext, basta saber que você precisa de um arquivo HTML e de que precisa fazer uma referência a 3 arquivos, que são eles:

  • ext-all.css Contém as definições de estilo para os controles do EXT
  • ext-base.js É uma espécie de base para o EXT. Também podem ser incluídos outros tipos de base com suporte a jQuery e Prototype.
  • ext-all-debug.js Contém todos os componentes EXT.

Crie um arquivo na pasta "Examples" com a extensão meuPrimeiroExemplo.html:

Inicialmente inclua o seguinte texto:

Agora iremos incluir os arquivos que o Ext precisa. Veja:

Repare que estamos incluindo um ../ nos arquivos para que podemos subir um nível na estrutura de diretórios do EXT e incluir o arquivo corretamente.

E finalmente incluímos um pequeno código EXT:

O código JavaScript acima possui um método do Ext chamado onReady. Este método somente é executado quando todas as bibliotecas do EXT estão carregadas na página.

Vamos agora mostrar algumas funcionalidades básicas do EXT.Para inserir uma caixa de mensagem mais robusta que o "alert" do JavaScript, podemos utilizar o seguinte código:

Ou seja, estamos usando um componente do Ext chamado MessageBox para que possamos exibir uma mensagem. O resultado do código acima é:

Aumentando um pouco mais nosso código, vamos relacionar uma caixa de mensagem a um clique de um botão. Veja:

No código acima, incluímos um simples botão na tag <body> do nosso documento HTML (1). Em 2, usamos o comando get do Ext para obter a instância do botão na página. Este procedimento é muito utilizado e substitui a necessidade de navegar hierarquicamente entre os controles HTML até encontrar o controle desejado.

Mesmo que o botão estivesse em uma DIV, ou em uma Tabela, o comando em 2 iria obter a instância do botão sem problema algum.

Em 3, utilizando o comando on do EXT para que possamos associar um evento do botão a uma função qualquer. No nosso caso, associamos a função exibirAlerta.

Finalmente, a função exibirAlerta exibe uma simples mensagem no navegador.

O resultado seria:

Resumindo, o EXT até agora foi capaz de:

  • Incluir mensagens melhores do que o simples alert do javascript
  • Encontrar objetos no documento HTML de forma rápida e fácil
  • Associar um evento de um objeto a uma função

Nos próximos artigos veremos muito mais! Aguardem.

Dica: Você pode vasculhar a pasta Examples para verificar como os componentes são manipulados!

Todos os artigos de Daniel Schmitz

1 comentários publicados

  • 1. Bom trabalho

    Sexta-feira, 01/08/2008, por Renato Medina

    ja trabalho com jquery e tenho várias funcoes de manipulacao DOM .. estarei acompanhando seus posts desta excelente ferramenta... abracos

    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 trabalha com desenvolvimento 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.