A biblioteca EXT visa simular uma interface gráfica (GUI) amigável com um design bom e o uso de AJAX. É muito fácil de ser usada e a documentação está totalmente clara para o aprendizado. Muitos sites Web 2.0 já a utilizam e possuem grande destaque.
Irei dar um exemplo da comunidade brasileira do EXT JS, lembrando que você terá que baixar a biblioteca.
Um dos recursos mais interessantes da biblioteca EXTJS são as janelas, que abrem com um belo efeito. Possuem diversas características como drag and drop, constraint to viewport e minimize e por isso é um recurso muito utilizado. É possível disparar a janela através do clique em um botão ou a partir de qualquer elemento HTML, contanto que este tenha um ID e que esteja presenta na página quando de seu carregamento.
Neste exemplo, o conteúdo interno da janela é apresentado em duas abas, que são geradas automaticamente através de uma marcação HTML pré-existente:
<p class="x-dlg-tab" title="Aba 1"> </p> <p class="inner-tab">XTibia, a maior comunidade de OpenTibia brasileira</p>
Vamos partir do início: os includes.
Infelizmente todos estes belos efeitos e a bonita interface não são conseguidos com poucos includes: neste exemplo são utilizados 4 arquivos javascript e 2 folhas de estilo. Assim, é preciso fazer uma análise fria sobre o impacto que o tempo de carregamento terá na experiência do usuário. Não adianta, apenas para mostrar algo mais interessante, fazer com que sejam carregados mais de 600kb de códigos em uma única página. Lembre-se que nem todos têm banda larga. No meu caso, eu ainda não me sinto à vontade para desenvolver uma interface de site utilizando AJAX, pois não tenho controle sobre o ambiente que será encontrado do lado do usuário. Meu desenvolvimento se restringe a sistemas, para os quais eu tenho um certo controle sobre o Browser e a experiência do usuário que o utilizará, pois geralmente eu mesmo treino meus clientes.
Dado o recado, vamos à prática.
<link href="ext-all.css" rel="stylesheet" type="text/css" /> <link href="examples.css" rel="stylesheet" type="text/css" /> <script src="yui-utilities.js" type="text/javascript"></script> <script src="ext-yui-adapter.js" type="text/javascript"></script> <script src="ext-all.js" type="text/javascript"></script> <script src="hello.js" type="text/javascript"></script>
Todos estes includes são necessários para obter o resultado do exemplo mostrado no início do post. Deles, você deve se preocupar em editar apenas o último (hello.js) que possui as configurações para ação clique no botão e o aparecimento da janela, bem como suas dimensões. Todos os outros possuem os códigos que são o coração da biblioteca. Caso queira, edite os CSSs para alterar a aparência.
Agora o código HTML:
<input id="show-dialog-btn" value="Mostrar Janela" type="button" /> <p id="hello-dlg" style="visibility: hidden; position: absolute; top: 0px"> </p> <p class="x-dlg-hd">Minha janela <!--Título da janela--> <p class="x-dlg-bd"> </p> <p class="x-dlg-tab" title="Aba 1"> <!--Aba número 1 --></p> <p class="inner-tab">XTibia, a maior comunidade de OpenTibia brasileira <!--Fim aba número 1 --> <p class="x-dlg-tab" title="Aba 2"><!--Aba número 2 --></p> <p class="inner-tab">XTibia, a maior comunidade de OpenTibia brasileira <!--Fim aba número 2-->
Apenas com isso, já é possível ver a coisa funcionando, da forma como eu configurei. Porém, vamos um pouco mais adiante, alterando os valores encontrados em hello.js, inserindo um segundo botão para a abertura de uma segunda janela.
O conteúdo de hello.js
var HelloWorld = function(){ var dialog, showBtn; return { init : function(){ showBtn = Ext.get('show-dialog-btn'); showBtn.on('click', this.showDialog, this); }, showDialog : function(){ if(!dialog){ dialog = new Ext.BasicDialog("hello-dlg", { autoTabs:true, width:500, height:300, shadow:true, minWidth:300, minHeight:250, proxyDrag: true }); dialog.addKeyListener(27, dialog.hide, dialog); dialog.addButton('Submit', dialog.hide, dialog).disable(); dialog.addButton('Close', dialog.hide, dialog); } dialog.show(showBtn.dom); } }; }(); Ext.onReady(HelloWorld.init, HelloWorld, true);
Explicando:
Linha 1: instancia-se uma variável com qualquer nome (neste caso utilizei HelloWorld) e atribui-se a ela uma função.
Linha 2: instancia-se duas novas variáveis para atribuir às mesmas valores posteriormente
Linha 3: O que a função vai retornar. A partir daqui, todos os códigos estão formatados com JSON, que é uma forma de marcação de texto muito mais rápida que o XML. Não se preocupe se ainda não sabe o que é JSON, pois dentro da EXTJS tudo é padronizado e com o tempo você se acostuma a identificar onde estão os elementos.
Linha 5: atribui-se à variável showBtn instanciada na linha 2 a função ext.get(), que é como o nosso conhecido getElementById(), pegando nosso botão de onde será disparada a janela.
Linha 6: Adiciona-se um eventListener para o botão capturado na linha 5, informando que deverá ser mostrada a janela no evento onclick
Linha 24: Nesta linha é informado a partir de qual elemento a janela será disparada. Isso lhe dá a liberdade para fazer com que a janela surja a partir de outro elemento que não botão que vc tá clicando. O pré-requisito é que seja capturado o elemento antes através da função ext.get();
Linhas 9 à 26: aqui entra a formatação da janela. Os nomes são auto-explicativos e não vou gastar meus dedos para explicar todos. Vejamos alguns:
* autoTabs: informa à biblioteca que é para transformar a sua marcação HTML em tabs. Para isso, é preciso que os divs que compõem a marcação tenham uma formatação pré-definida, como mostrado mais acima.
* minWidth e minHeight: largura e alturas mínimas. Estes valores se aplicam pois a janela é redimensionável e aqui vc informa quais são estes valores, não deixando que a janela seja reduzida para valores menores do que os declarados
* proxyDrag: este recurso tem impacto direto na performance e significa que uma representação da janela será mostrada ao se arrastá-la. Repare que a janela some ao ser arrastada, dando lugar a um quadro do mesmo tamanho, porém de cor azul, com transparência. Caso este valor esteja marcado como false, a própria janela aparecerá durante o drag.
Linha 28: Esta última instrução inicializa as funções declaradas acima logo após todos os elementos terem sido carregados. Ela é diferente da função javascript onload() pois esta iniciaria apenas após o carregamento completo da página, com imagens inclusive. No caso da EXTJS, tudo é inicializado quando os elementos do HTML são carregados, mesmo que as imagens ainda não tenham sido. Muito mais inteligente.
Agora você já está craque, né? ;o)
Vamos então inserir mais um botão em nosso HTML e criar uma nova janela, com apenas uma única aba.
HTML (botão):
<input id="show-dialog-btn" value="Mostrar Janela" type="button" /> <!--Este já existe--> <input id="show-dialog-btn2" value="Mostrar Nova Janela" type="button" /> <!--Este é o novo-->
HTML (nova aba):
<!--Insira este código logo após os códigos das primeiras duas abas--> <p id="hello-dlg2" style="visibility: hidden; position: absolute; top: 0px"> </p> <p class="x-dlg-hd">Minha janela número 2</p> <p class="x-dlg-bd"> </p> <p class="x-dlg-tab" title="Minha nova aba"> </p> <p class="inner-tab">Oba criei uma janela sozinho!!</p>
E agora o novo conteúdo do hello.js
var HelloWorld = function(){ var dialog, showBtn, dialog2, showBtn2; return { init : function(){ showBtn = Ext.get('show-dialog-btn'); showBtn.on('click', this.showDialog, this); showBtn2 = Ext.get('show-dialog-btn2'); showBtn2.on('click', this.showDialog2, this); }, showDialog : function(){ if(!dialog){ dialog = new Ext.BasicDialog("hello-dlg", { autoTabs:true, width:500, height:300, shadow:true, minWidth:300, minHeight:250, proxyDrag: true }); dialog.addKeyListener(27, dialog.hide, dialog); dialog.addButton('Submit', dialog.hide, dialog).disable(); dialog.addButton('Close', dialog.hide, dialog); } dialog.show(showBtn.dom); }, showDialog2 : function(){ if(!dialog2){ dialog2 = new Ext.BasicDialog("hello-dlg2", { autoTabs:true, width:700, height:450, shadow:true, minWidth:300, minHeight:250, proxyDrag: false }); dialog2.addKeyListener(27, dialog2.hide, dialog2); dialog2.addButton('Submit', dialog2.hide, dialog2).disable(); dialog2.addButton('Close', dialog2.hide, dialog2); } dialog2.show(showBtn2.dom); } }; }(); Ext.onReady(HelloWorld.init, HelloWorld, true);
Vamos esmiuçar agora as alterações feitas:
Linha 2: foram instanciadas mais duas variáveis, cópias das duas já existentes, acrecentando um número 2 ao seu final. Pode-se fazer isso com qualquer outro nome de variável, mas eu gosto de seguir um padrão
Linhas 7 e 8: a mesma coisa: fiz uma cópia fiel das linhas 5 e 6 e inseri o número dois no final
Linhas 27 a 45: fiz uma cópia de todo o bloco de configuração da janela, acrescentei uma vírgula logo após a chave que fecha o bloco e colei o código copiado, inserindo o número 2 nos nomes das variáveis.
Pronto… basta salvar tudo e testar. Novo botão e nova janela sendo mostrada. Para se criar mais basta ir replicando os valores, tanto dento do HTML quanto dentro do hello.js.
Uma última dica: é possível chamar uma janela a partir de um elemento que não está instanciado dentro da função HelloWorld, como mostrado nas linhas 5 a 8. Isso é útil quando o elemento que chamará a janela ainda não está presente no momento do carregamento. Isso geraria um erro, pois vc estaria tentando associar um evento onclick num id não existente. Assim, não associe o eventListener e a quando o seu elemento finalmente form mostrado, coloque dentro do HTML uma chamada onclick da seguinte forma:
<input id="seu-id" value="Chamando a janela de fora" onclick="HelloWorld.showDialog();" type="button" />
