Iniciando com Extjs: Ambiente e o objeto Element 1 Comment
Atualmente existem dezenas de bibliotecas Javascript de uso geral, tais como jQuery, Prototype, Mootools, Dojo entre outras. Quando precisamos de algo rápido como uma função para percorrer os nós html e inserir conteúdo, executar uma chamada Ajax seguido de um efeito simples, usamos estas vedetes do Javascript para tal, porque são ótimas e rápidas.
Entretanto, em alguns casos / projetos o uso de uma biblioteca por si só parece não preencher alguns requisitos específicos, tais como Interfaces Gráficas complexas (Painéis, Janelas, Grade de Visualização de dados com barra de ferramentas CRUD) e total controle sobre Eventos e organização de um projeto. Nesse ponto, começamos a falar de Frameworks. Há alguns de alta qualidade, como YUI, jQuery-UI, Dijit e Extjs.
Extjs possui um leque de opções impressionante e tem uma documentação bem organizada e complexa. Quem trabalha com Java logo observa a grande semelhança e apego aos Design Patterns que este framework possui. Usei YUI, jQuery-UI no início da minha carreira para alguns projetos intranet e hoje Extjs é uma opção respeitável e deve estar entre os frameworks JS a ser analisado antes de iniciar um projeto. Opa, ia me esquecendo de mencionar a comunidade ativa e crescente que Extjs possui inclusive no Brasil!
Vamos lá. Hoje começaremos a dominar o poderio bélico de Extjs.
Para começar crie um arquivo html e nomeie-o index.html e insira entre <head> e </head> o seguinte código:
<link rel="stylesheet" href="caminho/ext-all.css" />
<script src="caminho/ext-base-debug.js" type="text/javascript"></script>
<script src="caminho/ext-all.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '/caminho.para.extjs/resources/images/default/s.gif'; // garantirá a correção de alguns problemas
</script>
<script src="caminho/index.js" type="text/javascript"></script> <!-- arquivo de testes -->
Onde “caminho” é o lugar onde estão os arquivos no seu sistema. Opa de novo, ainda não baixou? Baixe por aqui. Isto é o básico para um ambiente de testes, pois incluímos em index.html o arquivo vazio index.js, ext-base-debug e ext-all, este último contém todos os pacotes de extjs.
Começando bem
Nos primórdios do desenvolvimento com javascript, muitos profissionais gostavam de usar onLoad para iniciar a execução de JS nas páginas html. Muitos não sabiam da maior. No faroeste que é o mundo dos browsers, cada navegador tem uma maneira para disparar o evento onLoad (que avisa quando o browser já carregou todo o conteúdo da página). Alguns navegadores consideram uma página pronta quando todas as tags são renderizadas, sem considerar o carregamento total das imagens. outros não. Firefox e Opera lançam o evento DOMContentLoaded. O estranho IE precisa de uma tag script com um atributo defer, ao qual dispara quando o DOM está pronto. Safari não possui um evento, mas configura a propriedade document.readyState para “complete” e um código deve ser implementado para verificar esta propriedade antes de executar seu javascript, o mesmo vale para o Google Chrome / Chromium.
Toda esta parafernália verificadora é resolvida ao envolver todo o nosso programa com este trecho de código, insira-o em index.js:
Ext.onReady( function(){
// ...nosso codigo vai aqui
});
Fechado? Então vamos inserir um código Extjs básico:
Ext.onReady( function(){
Ext.MessageBox.alert( 'E aeh?', 'Só vim dizer que o Navegador está pronto' ); });
Bem perceptível o caráter Enterprise-like ( voltado para aplicações complexas ) de Extjs, não é mesmo? Dá pano pra manga falar deste framework. Mas nada de perder tempo, crie uma div com id=”box” no seu index.html e a seguir teste isto aqui:
Ext.onReady( function(){
// recuperar o elemento com get
var div1 = Ext.get( 'box' ); // retorna um objeto do tipo Element
// configura o tamanho com setSize, aplicando o efeito "easeBothStrong".
div1.setSize(350, 350, { duration:3, easing:'easeBothStrong'} ); // -1-
// insere um nó do tipo texto comum
div1.createChild( 'textos inseridos com o metodo createChild' );
div1.createChild({
tag: 'div', // criaremos uma tag do tipo "div"
id: 'div2',
style:'border:1px solid #000;padding:5px;', // colocando o estilo inline
children:{ // mais uma div dentro da div com id div2
tag:'div',
id:'div3',
html: 'uma div dentro da div...',
style: 'color:#e00;border:1px dotted #f00;'
}
});
// insere uma div na primeira posição da fila interna, ou seja, na posicao 0
div1.insertFirst({
tag:'p',
id:'paragrafo',
html:'Inserido antes de todos no nó 0'
});
// inserindo um nó na posicao 2 da fila
div1.createChild( { tag:'div', id:'me_remova', html: 'Nó inserido depois do nó 2' }, div1.dom.childNodes[3] );
});
imagem demonstrativa extjs Element
Esta imagem demonstra o resultado obtido caso tudo ocorra bem. Caso algo tenha saído errado, revise comparando com o código posto aqui ou envie-me um email.
O objeto Ext.Element é o mais básico de todos e também o mais importante, pois está presente em todos os widgets da UI do framework. A partir de Element podemos executar tarefas que numa primeira olhada pode parecer difícil, mas se tornam relativamente fáceis com ele. Element nos fornece uma suíte de gerenciamento das dimensões, alinhamento e coordenadas de uma tag. Também podemos atualizar o conteúdo com AJAX, manipular nós filhos, executar efeitos de animação e total controle sobre eventos, além de outras coisas. Element possui muitos outros métodos confira na documentação oficial.
Bom, continuarei nossa longa caminhada no próximo post, onde aprenderemos sobre Observadores (Observers), Eventos (Event) e Manipuladores (Handlers) em Extjs. Continuem comigo!
Adriano, eu adorei o site e o artigo. Sua forma de explicar é bem diferente. Simples, objeitvo e esclare muita coisa.
Abraços,
carada!