Pela wikipedia “namespace” é: “In general, a namespace is an abstract container providing context for the items (names, or technical terms, or words) it holds and allowing disambiguation of homonym items having the same name (residing in different namespaces).”
Traduzingo ( mal e porcamente, se puder me ajude! heheh ): “Em geral, um namespace é um recipiente genérico que contextualiza os itens (nomes ou termos técnicos, ou palavras) que contém, permitindo desambiguação de itens homônimos que tem o mesmo nome (que residem em espaços diferentes).”

No ExtJS não é diferente. Como com o Ext acabamos por gerar muitos e muitos componentes, telas, painéis e páginas completas em vários arquivos javascript, nada mais justo que organizar tudo isto separando-os em namespaces. Vejamos alguns exemplos: Digamos nosso usuario_novo.js

Ext.ns("App.NovoUsuario"); //Ext.ns é uma contração para a função Ext.namespace

App.NovoUsuario.janela = new Ext.Window({
 //...
});

E depois nosso usuario_edicao.js

Ext.ns("App.EditarUsuario");

App.EditarUsuario.janela = new Ext.Window({
 //...
});

Aqui criamos duas Windows ( não coloquei todas as propriedades pois não é o foco ) dentro de dois namespaces diferentes. Conseguimos facilmente contextualizar o que cada objeto criado faz. Isto organiza nosso código e ainda dá um limite de escopo para as variáveis e objetos ali criados.

Outra forma de utilizar o namespace é assim:

var NS = Ext.namespace("App.Modulo");
  NS.PainelDeTeste = function(cfg){
    NS.PainelDeTeste.superclass.constructor.call ... etc
  };

E

Ext.ns("App","App.Edicao","App.Criacao");
App.storegenerico = new Ext.data.Store({
 //...
});
App.Edicao.janela = new Ext.Window({
 //...
});
App.Criacao.janela = new Ext.Window({
 //...
});

Ao dar uma olhada na documentação do proprio Ext, temos uma árvore a esquerda e os dados informativos a direita.Esta árvore representa toda a estrutura montada através dos namespaces do core. E também, quando encontrarmos alguns plugins e widgtes criados por usuários, que não estão na distro padrão do Ext, geralmente estes pertencem ao ns Ext.ux, ficando assim padronizados e organizados.

Resumindo, os namespaces dão organização e legibilidade ao nosso código além de definir escopos.

até+

Links:

• http://www.jasonclawson.com/2008/05/28/extjs-using-namespaces-improved/
• http://www.extjs.com/blog/2008/05/28/use-namespaces/

Related posts:

1. ExtJS – Framework Javascript
2. Adobe Air

O que é o ExtJS ?

O ExtJS é um framework de javascript, feito para criar aplicações na web. Com ele conseguimos criar interfaces que se parecem muito com aplicações desktop. Ele nos disponibiliza muitos componentes e funções que facilitam e muito a nossa vida.
Para se ter uma idéia de como trabalhar ( veja bem, uma idéia ! ) podemos comparar a criação de uma tela em ext com a criação de uma tela em GTK, onde vamos criando, adicionando e alinhando os itens da tela, tudo dentro de containers e layouts, mas com a facilidade de que podemos facilmente alterar seus CSS para mudar algo. Com o Ext podemos por exemplo criar uma aplicação voltada ao Adobe AIR, que roda localmente, uma aplicação completamente em Ext ou com inserido em nossa página, interagindo com nosso HTML.
Hoje, na versão 3.1, jah possui o Ext Designer bem desenvolvido, porém é pago, mas é muito bom. Ah, e falando em pago, a licença do Ext é Open-Source somente para projetos open-source, de resto se tem um preço para utilizá-lo, mas nada impede você de baixar, ler os manuais, a documentação e botar a mão na massa, sem nenhuma burocracia.

Bom, feita a primeira apresantação, vamos partir para o que interessa.

Primeiro, vamos falar um pouco de como integrar o ExtJS com sua aplicação.
O Ext trabalha muito com Ajax, de várias formas ele pode solicitar e enviar informações para um servidor web através de ajax, vejamos um exemplo:

// Um request básico
Ext.Ajax.request({
   url: 'foo.php',
   success: function(){
	  //acao a tomar...
   },
   failure: function(){
	  //acao a tomar...
   },
   headers: {
       'my-header': 'foo'
   },
   params: { foo: 'bar' }
});

// Simples envio de um formulário
Ext.Ajax.request({
    form: 'some-form',
    params: 'foo=bar'
});

No primeiro exemplo, montamos uma chamada ajax, enviando alguns parâmetros ( na propriedade: params ) e aguardamos um retorno, passando uma function na propriedade “success” que faz o que queremos, e se caso ocorrer alguma coisa errada, tratamos com a function na propriedade “failure”. Além de configurar-mos alguns cabeçalhos que serão enviados também, e obviamente para onde estamos enviando nossa requisição, na propriedade “url”.

Eu gosto muito de trabalhar assim com o Ajax, desta forma exemplificada acima, pois fico livre para enviar e aguardar dados da forma que eu quiser, apesar de ter alguns frameworks que integram as chamadas ajax com a linguagem escolhida, mas assim, dando uma engessada no negócio.

Outro detalhe importante: JSON !
Todo o ExtJS trabalha com Json ( mas não só JSON ), tanto para montar os objetos e componentes da tela, como para enviar dados para o servidor, e trabalhar com Json em tudo, primeiro padroniza todo o ambiente, e segundo, facilita muito a nossa vida, pois o Json é simples e muito completo. Com ele conseguimos criar muitos objetos e enviar vários tipos de dados. Então caso não conheça bem o json, dê uma olhada aqui: http://www.json.org/

Muitos objetos do Ext trabalham com dados remotos, ou seja, aguardam que o servidor envie os itens a serem mostrados na tela, como por exemplo: combos, grids, trees, e por ai vai… este exemplo acima é um exemplo de chamada ajax solta, no meio da página, que pode ser chamada de qualquer ponto, e para qualquer intuito, porém, nos componentes a chama do ajax é feita automaticamente pelos “Store” ! hehehe

Bom, outro ponto que acho muito importante também no Ext é o chamado “Store”. O Store é um objeto que age de forma a nos possibilitar ver e alterar muitos registros de dados que por nós foram definidos. É como se fosse um Recordset por exemplo, só que mais maleável. O Store pode estar ligado a um grid, combo, e outros componentes, e até solto, sem estar ligado a componente algum, e pode ter vários modos de leitura, como por exemplo: xml, json e um simples array de dados.

Para você ter uma idéia de como pode ficar bonita uma aplicação feita com o Ext, veja este link: http://www.extjs.com/deploy/dev/examples/forum/forum.html

Agora, alguns links para você poder saber mais:

Site oficial: http://www.extjs.com
Site de Exemplos: http://www.extjs.com/deploy/dev/examples/
Documentação:  http://www.extjs.com/deploy/dev/docs/

Feitas estar primeiras introduções sobre o Ext, fiquem no aguardo do proximo post sobre o Ext.
Até lá.

Related posts:

1. Spring Framework – A real framework !
2. Centralizar div em javascript
3. Debug em JavaScript

O Adobe Air (Adobe Integrated Runtime) é um SDK para desenvolvimento de aplicativos de internet, que utilizem Ajax, Flash, Flex ou HTML/Javascript, mas que rodem como um simples aplicativo desktop.

Isto mesmo !

O Air tem um SDK que podemos utilizar para desenvolver os aplicativos direcionados para esta ferramenta, e com ela podemos criar inúmeros tipos de aplicativos.

O interessante é que, o aplicativo fica como se fosse um simples executável no seu PC, independentemente do sistema operacional !

Eu, sinceramente, ainda nao criei nada para Air, mas sei que tem várias aplicações disponíveis no próprio site da adobe, para baixar-mos e utilizarmos de graça.

Por exemplo:

• Lita – SQLite Administration Tool
• jsBeautifier – simples javascript formater
• Run! – Query Runner Tool
• MiniTask – Free and simple task management

Todas estas aplicações, e muitas outras mais, rodam sob o Adobe Air, e estão disponíveis free no site.

Eu tenho trabalhado com a biblioteca java script ExtJS e ela tem suas classes e ferramentas para utilizarmos na integração com o Adobe AIR, assim podemos criar uma bela interface em javascript para desktop, facilmente !

Bom, fica ai a dica, se por ventura eu conseguir montar algo em ExtJS para o AIR, eu posto aqui !

Related posts:

1. Spring Framework – A real framework !
2. Carregar Arquivo JavsScript
3. Apache ANT

E se você nao quer ficar recarregando a pagina todas as vezes que precisa buscar um novo JS ou algum dado novo, pode se utilizar de uma tatica, um tanto interessante: carregar os arquivos JavaScript “on-demand”, ou seja, somente quando necessário.

Assim você pode muito bem repartir e organizar mais ainda suas funcoes JS e, deixar a pagina principal beeeemmm mais rapida para carregar, do que se estivesse com muitas tags scripts no inicio…

Segue, abaixo, uma funçãozinha JavaScript que montei juntando dados de scripts da internet.
A moral é que ela recebe o caminho de um arquivo JS para carregar na pagina, mas porém, retira a tag onde o mesmo JS já foi carregado anteriormente, assim não deixando ficar tags apontadoras para o mesmo arquivo repetidas, e não deixa ficar um monte de lixo desnecessário na pagina, o que pode ocasionar uma lentidão demasiada do browser…

function dhtmlLoadScript(url){
    var e = document.createElement("script"); //Cria o objeto para inserir na pagina..
    e.language = 'JavsScript';
    e.src = url;
    e.type="text/javascript";
    var hdEl = document.getElementsByTagName("head")[0];
    if (hdEl.childNodes.length > 1) { //Se tem filhos..
        for ( var i = 0; i -1 ){
                    hdEl.removeChild(ch);
                }
            }
        }
    }
    hdEl.appendChild(e);
}

Um exemplo completo segue no meu wiki…

Related posts:

1. Centralizar div em javascript
2. Debug em JavaScript

Eu sinceramente estou começando agora a aprender a trabalhar com Spring, mas já estou fascinado com tamanha produtividade oferecida por este fw.
E ainda mais quando entro no seu site, na seção de documentação e me deparo com uma documentação vasta, detalhada e muito bem organizada de
todas as suas funcionalidades e características ( http://static.springframework.org/spring/docs/2.5.x/reference/index.html ).

Na real, eu chequei até aqui através do aprendizado do JPA (Java Persistence API), e fiquei bem contente.

Agora, para complpetar o desenvolvimento de uma bela aplicação, basta aprender a programar o ext (http://www.extjs.com), uma biblioteca
java script que é muito completa, para objetos visuais, efeitos de páginas, ajax, e outras cositas mas !

Related posts:

1. Manipulação de Datas em Java

Para funcionar ela deve estas visible.

function centralizaDivNaTela(objdiv){
objdiv.style.top = parseInt((document.body.clientHeight / 2)) - parseInt(objdiv.offsetHeight / 2) + document.body.scrollTop;
objdiv.style.left = parseInt(document.body.clientWidth / 2) - parseInt(objdiv.offsetWidth / 2);
}

Related posts:

1. Debug em JavaScript