Ext JS - Learning Center

Community Learning Center

Personal tools

Views

Tutorial:Application Layout for Beginners (Portuguese)

From Learn About the Ext JavaScript Library

Jump to: navigation, search

Summary: Este tutorial ajuda você a criar sua aplicação da maneira correta.

Author: <translator>Leonardo Larsen Rocha

Published: August 31, 2007

Ext Version: 1.1+ / 2.0+

Languages:

English

Chinese

Portuguese Korean

1 Antes de começar
2 O que nós precisamos?
3 applayout.html
4 applayout.js
5 Público, Privado, Privilegiado?
6 Sobreescrevendo variáveis públicas
7 Sobrecarregando funções públicas
8 Continuação...
9 Veja também

Antes de começar

Este tutorial supõe que você já tenha instalado o ExtJS (Biblioteca do Javascript) e que esteja instalado no diretório extjs um diretório acima do nosso diretório de aplicação. Se você instalar Ext JS em outra parte, você necessitará mudar o caminho de atributos do src dos scripts nos arquivos do exemplo.

O que nós precisamos?

Além do ExtJS (Biblioteca do Javascript) nós necessitamos de dois arquivos:

applayout.html
applayout.js

Vamos começar com arquivos com o minímo de conteúdo. Aqui estão eles com detalhes:

applayout.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../extjs/ext-all-debug.js"></script>
    <script type="text/javascript" src="applayout.js"></script>
    <!-- A Localization Script File comes here -->
    <script type="text/javascript">
        Ext.onReady(myNameSpace.app.init, myNameSpace.app);
    </script>
    <title>Application Layout Tutorial</title>
</head>
<body>
</body>
</html>

As primeiras duas linhas especificam o tipo do documento. A aplicação funcionaria sem o doctype, entretanto, neste caso o browser entraria provavelmente em [Quirks mode http://en.wikipedia.org/wiki/Quirks_mode] o qual não adicionaria compatibilidade do cross-browser em sua aplicação.

Nós usaremos o HTML 4.01 Transitional neste tutorial porque este doctype é suportado muito bem por todos os principais browsers. Naturalmente, você pode usar algum outro doctype se você quiser ou necessitar, mas sempre tenha em mente que você deve sempre especificar um doctype.

Depois de começar o HTML e o header vem a especificação Content-Type. Outra vez, sua aplicação pode viver sem ela mas deve estar lá.

Então nós incluimos os arquivos Ext de estilos(css), adapter e o próprio ExtJS. Existem duas versões do ExtJS:

ext-all.js - ilegível para humanos, carrega rápido, para produção
ext-all-debug.js - legível para humanos, para depuração no desenvolvimento

Nós estamos desenvolvendo, então incluimos a versão debug.

Então vem nossa aplicação applayout.js e, depois disto, qualquer script de internacionalização, que pode sobrepor o inglês em applayout.js e o ExtJS com versões traduzidas antes da aplicação ser inicializada.

Agora nós estamos prontos para instalar um event handler que inicializa nossa aplicação após o documento ser totalmente carregado.

Linha

Ext.onReady(myNameSpace.app.init, myNameSpace.app);

diz: Quando o documento estiver totalmente carregado, execute o método init do myNameSpace.app no escopo do myNameSpace.app.

Vêm então o título, o HEADER, o corpo (vazio por enquanto) e as tags de fechamento.

Isto é tudo para o arquivo mínimo HTML.

applayout.js

/**
  * Application Layout
  * by Jozef Sakalos, aka Saki
  * Translation by Leonardo Larsen Rocha
  * http://extjs.com/learn/Tutorial:Application_Layout_for_Beginners
  */
 
// referência local à imagem em branco
Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
 
// cria o namespace
Ext.namespace('myNameSpace');
 
// cria a aplicação
myNameSpace.app = function() {
    // Não acesse o DOM daqui; elementos não existem ainda
 
    // variáveis privadas
 
    // funções privadas 
 
    // espaço público
    return {
        // propriedades públicas , ex. strings para tradução
 
        // métodos públicos 
        init: function() {
            alert('Aplicação inicializada com sucesso!');
        }
    };
}(); // Fim da aplicação
 
// Fim do arquivo

As primeiras linhas deste arquivo são comentários que explicam o conteúdo do arquivo, autor e outras informações relevantes. Certamente, sua aplicação executa sem qualquer comentário, mas lembre-se: Sempre escreva seu código como se escrevesse para outro ler. Quando você voltar ao seu código depois de alguns meses para fazer manutenção ou alteração e não lembrar o que ele faz, lembre-se de mudar suas práticas de programação.

A seguir vem uma referência ao Ext.BLANK_IMAGE_URL apontando para o seu próprio servidor, isso é feito porque por padrão essa variável está com o seguinte valor , isso faz com que sua aplicação sempre busque do site 'ExtJS'. Você não precisa acessar o site extjs.com a cada vez que a aplicação é carregada, ou precisa?

Agora nós criamos o nosso namespace. A razão disto é para encapsular todas as variáveis e métodos em um único objeto global, para evitar qualquer conflito de nomes de variáveis e mudanças imprevisíveis de seus valores por várias funções se forem globais. O nome é você que escolhe.

O núcleo disto, por último ... Nós criamos a propriedade app do myNameSpace como valor de retorno da função que é executada imediatamente.

Se nós executarmos o seguinte código

var o = function() {
    return {p1:11, p2:22};
}();

De fato nós estamos criando uma função anônima (função sem nome) que é executada imediatamente após ser lida pelo interpretador (lembre-se () depois da definição da função). A função retorna um objeto que é passado para a variável o. Nossa aplicação usa a mesma lógica.

Você pode pôr uma inicialização e umas definições de variáveies privadas e/ou funções privadas entre o começo da função e a indicação do retorno, mas tenha em mente: Este código funciona como uma peça do HEADER quando nenhum elemento do HTML existe ainda, assim qualquer tentativa de o alcançar resultará em erro.

Por outro lado, a função init, que é apenas um dos métodos, retornou por essa função anônima, funciona depois que o arquivo inteiro está carregado quando DOM a estrutura inteira está já disponível.

Muito bem. Se você não cometer nenhum erro assim que você começar uma janela de alerta, dizendo que houve sucesso assim que você navegar em http://seuservidor.com.br/applayout/applayout.html, em outras palavras, quando a sua aplicação funcionar.

Agora vamos para a parte mais difícil: escrever algo útil dentro do template vazio.

Público, Privado, Privilegiado?

Vamos adicionar um pouco de vida a sua aplicação. Adicione a seguinte linha ao applayout.html dentro da tag body:

<div id="btn1-ct"></div>

Esta div vazia serve como um container para o nosso botão. Então altere o applayout.js para:

/**
  * Application Layout
  * by Jozef Sakalos, aka Saki
  * Translation by Leonardo Larsen Rocha
  * http://extjs.com/learn/Tutorial:Application_Layout_for_Beginners
  */
 
// referência local à imagem em branco
Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
 
// criar namespace
Ext.namespace('myNameSpace');
 
// criar aplicação
myNameSpace.app = function() {
    // Não acesse o DOM daqui; elementos não existem ainda
 
    // Isto permite que este codigo funcione na versao 1.1 e 2.
    Ext.Ext2 = (Ext.version && (Ext.version.indexOf("2") == 0));
 
    // variáveis privadas
    var btn1;
    var privVar1 = 11;
 
    // funções privadas 
    var btn1Handler = function(button, event) {
        alert('privVar1=' + privVar1);
        alert('this.btn1Text=' + this.btn1Text);
    };
 
    // espaço público
    return {
        // propriedades públicas , ex. strings para tradução
        btn1Text: 'Button 1',
 
        // métodos públicos 
        init: function() {
            if (Ext.version.indexOf("2.0") == 0) {
                btn1 = new Ext.Button({
                    renderTo: 'btn1-ct',
                    text: this.btn1Text,
                    handler: btn1Handler
                });
            } else {
                btn1 = new Ext.Button('btn1-ct', {
                    text: this.btn1Text,
                    handler: btn1Handler
                });
            }
        }
    };
}(); // Fim da aplicação
 
// Fim do arquivo

As variáveis btn1 e privVar1 são privadas. Isso significa que elas não podem ser acessadas, fora da aplicaçãao. O mesmo vale para a função privada btn1Handler.

Por outro lado, btn1Text é uma variável pública e pode ser acessada e alterada fora do app.(Nós demonstraremos isso mais tarde).

A função init é privilegiada isso porque pode alcançar variáveis ou funções privadas e públicas. Em nosso exemplo, ela acessa a variável pública this.btn1Text e também a função privada btn1Handler. A função init é pública porque pode ser chamada externamente ao objeto.

Ok, vamos executar isto. Você viu a tecla no canto esquerdo superior? Bom, clique nele. Você vê um alerta com privVar1=11? A função privada pode alcançar variáveis privadas.

Mas alguma coisa está errada, pois o segundo alerta diz this.btn1Text=undefined, isso não era esperado. A razão disto é que a variável this dentro do handler aponta para o objeto button e não para nossa aplicação. Adicione scope:this na configuração do botão como abaixo:

btn1 = new Ext.Button('btn1-ct', {
    text: this.btn1Text,
    handler: btn1Handler,
    scope:this
});

e recarregue a página. Agora sim, certo?

Sobreescrevendo variáveis públicas

Adicione o seguinte código perto do final de applayout.js como abaixo:

Ext.apply(myNameSpace.app, {
    btn1Text:'Taste 1'
});
 
// end of file

O que todo o código faz agora? Primeiro ele cria nosso objeto aplicação e então altera(sobrecarrega) o valor da variável pública btn1Text. Execute e veja que o texto mostrado no botão mudou.

É uma boa prática de programação (ExtJS) colocar todos os textos usados na aplicação em variáveis públicas, assim elas podem ser facilmente traduzidas para outros idiomas sem tocar no código original da aplicação.

É claro que você pode colocar outras variáveis como dimensões padrão, estilos, etc., em outras palavras, todas as opções configuraveís em variáveis públicas. Então nós não precisaremos procurar em milhares de linhas de código em nossa aplicação procurando onde alterar a cor de alguma coisa.

Sobrecarregando funções públicas

Vamos mudar nosso código como abaixo:

Ext.apply(myNameSpace.app, {
    btn1Text:'Taste 1',
    init: function() {
        try {
            btn1 = new Ext.Button('btn1-ct', {
                text: this.btn1Text,
                handler: btn1Handler,
                scope: this
            });
        }
        catch(e) {
            alert('Error: "' + e.message + '" at line: ' + e.lineNumber);
        }
    }
});
 
// end of file

O que nós estamos fazendo aqui? Apenas sobrecarregando a função init com exatamente o mesmo código que ele tinha antes somente colocando dentro de um try/catch para que nós possamos manipular erros, se houver. Nós esperamos que ele rode como antes, ou não? Execute e veja.

Sim, lá aparece um erro dizendo que o btn1Handler não está definido. Isso é porque a nova função está tentando acessar uma variável privada, mas ela não pode. Como você vê, o init original é privilegiado, então ele pode acessar variáveis privadas, mas o novo init não pode. Há também um aspecto de segurança aqui: Nenhum código de externo, mesmo se tentar sobrecarregar métodos privilegiados terão acesso ao espaço privado.

Continuação...

Eu estou liberando esta primeira parte do tutorial enquanto eu penso que pode ser mais útil do que seja, não obstante, eu planejo continuar com uns outros exemplos.