Vous êtes sur la page 1sur 26

Apostila de ExtJS com PHP e PostgreSQL

Criando interfaces web 2.0

Rodrigo K. Nascimento rodrigoknascimento@gmail.com http://www.rkn.com.br FACCAT Atualizado em 14 de Maio de 2010

Esta apostila tem por objetivo demonstrar os principais componentes e funes da biblioteca JavaScript ExtJS. Como auxlio para a demonstrao de uma aplicao simples porm funcional, ser usada a linguagem de programao PHP para a comunicao da interface (ExtJS) com o servidor e o banco de dados PostgreSQL. Para melhor compreenso esta apostila est dividida da seguinte forma:

Sumrio
JavaScript ........................................................................................................................................3 Introduo ao JavaScript.............................................................................................................3 Conhecendo e instalando o Firebug............................................................................................4 Formato de dados, funes e estrutura........................................................................................4 ExtJS................................................................................................................................................7 Conhecendo o ExtJS...................................................................................................................7 Instalando o ExtJS e testando......................................................................................................9 Traduzindo o ExtJS...................................................................................................................12 XType........................................................................................................................................12 Parte Prtica 1: Montando uma interface simples.....................................................................14 AJAX.............................................................................................................................................16 O que , para que serve e quando usar......................................................................................16 Como o ExtJS se comunica com o servidor..............................................................................17 Instalando o servidor Apache....................................................................................................17 Testando o AJAX do ExtJS.......................................................................................................18 Parte Prtica 2: Interagindo nossa interface com o servidor.....................................................19 PHP................................................................................................................................................19 Conhecendo o PHP...................................................................................................................19 Instalando o PHP.......................................................................................................................20 Parte Prtica 3: Interagindo nossa interface com o servidor.....................................................20 PostgreSQL....................................................................................................................................21 Conhecendo o PostgreSQL.......................................................................................................21 Instalando o PostgreSQL e o PgAdmin.....................................................................................21 Criando nosso Banco de Dados................................................................................................22 Parte Prtica 4: Tornando nossa aplicao funcional................................................................22 Extend e Override..........................................................................................................................25 Adaptando o ExtJS as nossas necessidades..............................................................................25 Praticando um pouco mais.............................................................................................................26 Criando mais cadastros em nossa aplicao..............................................................................26 Fim.................................................................................................................................................27 Agradecimentos........................................................................................................................27

JavaScript Introduo ao JavaScript


JavaScript uma linguagem de programao que permite a manipulao de objetos de uma pgina web diretamente no browser, bem como o acesso a algumas informaes importantes como qual o sistema operacional, qual o browser que est abrindo a pgina, qual a engine de renderizao do navegador, etc. Permite tambm o acesso e manipulao de datas, pegar a data e hora do sistema operacional, formatar ou criar novos objetos de data e hora. Por ser uma linguagem de programao interpretada pelo browser em tempo de execuo o JavaScript est sujeito a particularidades de cada navegador, um bom exemplo a diferena que existe entre a forma de se criar uma requisio AJAX no Internet Explorer e no Firefox. Internet Explorer var req = new ActiveXObject(Microsoft.XMLHTTP); Firefox var req = new XMLHttpRequest();

Conhecendo e instalando o Firebug

Firebug um complemento para o navegador Firefox, ele permite que o desenvolvedor possa analisar o JavaScript, CSS, HTML e carregamentos da pgina, tambm permite a manipulao do JavaScript, HTML e CSS em tempo de execuo permitindo testes mais rpidos e diretamente na pgina. Analisando por outro lado, essa facilidade que o Firebug disponibiliza um ponto fraco para a segurana dos sites. Instalando: Com o Firefox instalado v em Ferramentas>Complementos>Adicionar e pesquise por Firebug, localize o Firebug, instale-o e reinicie o Firefox.

Formato de dados, funes e estrutura


Por ter tido uma colaborao considervel da SUN em sua criao o JavaScript tem a sintaxe muito semelhante a do Java porm muito diferente em seu conceito e seu uso. De acordo com seu sistema de tipos JavaScript : Fraca - sua tipagem mutvel; Dinmica - uma varivel pode assumir vrios tipos diferentes durante a execuo; Implcita - as variveis so declaradas sem tipo. Existem trs formas de declarao de variveis: Escopo Global: variavel1 = 'a'; ou window.variavel1 = 'a'; Escopo Local: var variavel1 = 'a'; Escopo do Objeto: this.variavel1 = 'a'; Existem duas formas de declarao de funes: Escopo Global: function funcao1(){}; Escopo do Objeto e annima: var funcao1 = function(){}; Atribuio e tipos de objetos: String: var variavel1 = 'string'; Integer: var variavel1 = 123; Float: var variavel1 = 123.5; Object: var variavel1 = {}; Array: var variavel1 = []; Boolean: var variavel1 = true; Date: var variavel1 = new Date(); Function: var variavel1 = function(){}; Operadores aritmticos: + x+y xy * x*y % x%y / x/y ++ x++ -x-Soma ou concatena y a x; Subtrai y de x; Multiplica x por y; Retorna o resto da diviso de x por y; Divide x por y; Adiciona 1 a x; Subtrai 1 de y;

Operadores lgicos e relacionais ! !bool Inverte o resultado booleano da varivel ou expresso; && x && y True se x e y forem verdadeiros; || x || y True se x ou y ou ambos forem verdadeiros; == x == y True se x for igual a y, no considera o tipo dos dados; != x != y True se x for diferente de y, no considera o tipo dos dados; === x === y True se x for igual a y e do mesmo tipo de dados; !== x !== y True se x for diferente de y considerando o tipo dos dados; < x<y True se x for menor que y; <= x <= y True se x for menor ou igual a y; > x>y True se x for maior que y; >= x >= y True se x for maior ou igual a y;

Um objeto vazio representado por {} e um array vazio representado por [], sendo que esses podem ser atribudos com inicializao de um objeto do respectivo tipo. Um array ou um objeto podem conter dados de um ou mais tipos. Exemplo de array com dados: var variavel1 = ['valor1', 'valor2', 'valor3']; var variavel1 = [0, 1, 2]; var variavel1 = ['valor1', 0, true]; Exemplo de acesso a um array: var variavel1 = ['JavaScript', 'PHP']; var variavel2 = variavel1[1]; //variavel2 >> 'PHP' Exemplo de objeto com dados: var variavel1 = {nome: 'Joo', idade: 13}; Exemplo de acesso a um objeto: var variavel1 = {nome: 'Joo', idade: 13}; var variavel2 = variavel1.nome; //variavel2 >> 'Joo' //todo objeto pode ser acessado como um array associativo var variavel2 = variavel1['nome']; //variavel2 >> 'Joo' Um objeto pode conter um array ou outros tipos assim como um array pode conter objetos ou outros tipos, exemplo: var variavel1 = [{nome: 'Joo'}, {nome: 'Jorge'}]; //variavel1[0].nome >> 'Joo' //variavel1[0]['nome'] >> 'Joo' var variavel1 = {nome: ['Joo', 'Jorge']}; //variavel1.nome[0] >> 'Joo' //variavel1['nome'][0] >> 'Joo' Exemplo de objeto complexo: var variavel1 = { pessoas: ['Joo', 'Jorge'], addPessoa: function(pessoa){ this.pessoas.push(pessoa); //push adiciona um item a um array }, removeUltima: function(){ this.pessoas.pop(); //pop remove o ltimo elemento de um array } } variavel1.addPessoa('Rodrigo'); //variavel1.pessoas >> ['Joo', 'Jorge', 'Rodrigo'] variavel1.removeUltima(); //variavel1.pessoas >> ['Joo', 'Jorge']

Uma classe em JavaScript uma funo que contm variveis e funes referenciadas a si, ou seja, declaradas com this, exemplo: var classe1 = function(){ this.pessoas = []; this.addPessoa = function(pessoa){ this.pessoas.push(pessoa); } } var obj1 = new classe1; var obj2 = new classe1; obj1.addPessoa('Joo'); obj2.addPessoa('Jorge'); Javascript possui um recurso chamado prototype, que permite modificar uma classe depois que ela foi criada. Permite inclusive alterar classes internas da linguagem. Aps as alteraes no prototype da classe todos os objetos criados a partir desta sero afetados alm dos objetos criados posteriormente. Tomando como base a classe j criada no exemplo acima, podemos exemplificar adicionando uma funo de contagem de pessoas: var classe1 = function(){ this.pessoas = []; this.addPessoa = function(pessoa){ this.pessoas.push(pessoa); } } var obj1 = new classe1; obj1.addPessoa('Joo'); //Neste ponto o mtodo quantidadePessoas no existe //Aqui implementamos este novo mtodo em uma classe j existente classe1.prototype.quantidadePessoas = function(){ return this.pessoas.length; } //A partir daqui podemos utiliz-lo obj1.quantidadePessoas(); //Deve retornar 1; var obj3 = new classe1; obj3.quantidadePessoas(); //Deve retornar 0, pois no foram adicionado dados; Mas qual a real utilidade do prototype? Se voc deseja alterar uma classe que voc mesmo criou porque no alterar diretamente no cdigo da classe, certo? Bom, existem casos onde temos a necessidade de alterar classes que no criamos, classe de bibliotecas ou at mesmo classes do prprio JavaScript, um exemplo seria criar a funcionalidade de adicionar uma sequencia de caracteres a uma string para preench-la at determinado tamanho, comumente chamado de Pad, no exemplo abaixo iremos implementar um LeftPad a classe String do Javascript: String.prototype.LeftPad = function(L, C) { return new Array(L - this.length + 1).join(C || '0') + this; } var teste = '12345'.LeftPad(10); teste; //Deve nos retornar '0000012345;

ExtJS Conhecendo o ExtJS


Citao de [HTML STAFF] ExtJS: Um excelente framework de Javascript O ExtJS um framework Javascript criado originalmente como uma extenso do YUI (Yahoo! User Interface). Na poca de sua criao, chamava-se yui-ext, funcionando junto ao YUI, que era a base. Por ser uma extenso do YUI, o yui-ext no funcionava sem ele. O ExtJS um software de cdigo livre criado por Jack Slocum, disponibilizado sob a licena LGPL, porm pode ser comprado para vir com uma outra licena no-livre, caso seja preciso, e tambm h como adquirir apenas o suporte pago do ExtJS o que d direito, alm do suporte via frum, e-mail, telefone e onsite (dependendo do nvel de associao), o acesso ao SVN do ExtJS onde esto as verses de desenvolvimento do ExtJS e as correes ainda no liberadas publicamente. Com o desenvolvimento do yui-ext, foram sendo incorporados diversos adapters (adaptadores), que funcionavam de ponte entre o yui-ext e outros Frameworks de Javascript: o Prototype e jQuery. Com o crescente e rpido reconhecimento entre os desenvolvedores como uma extenso rica em funcionalidades e componentes de interface acrescentando valor aos mais conhecidos Frameworks de Javascript (YUI, Prototype e jQuery), o seu desenvolvimento foi ganhando em colaboradores e velocidade. Assim, sucederam-se vrias verses 0.x do yui-ext, antes de ser lanada a verso 1.0 final onde seu nome foi alterado para EXT JS, demonstrando que ele j no era apenas uma extenso para o YUI. A prxima release lanada foi o ExtJS 1.1, sendo que, a partir dessa verso houve um salto tornando-o um verdadeiro Framework de Javascript ou AJAX Framework e no mais limitado a ser apenas uma extenso para outros Frameworks, apesar de ainda poder ser usado assim. A partir da verso 1.1.1 o ExtJS passou a ser oficialmente suportado pelos navegadores Microsoft Internet Explorer 6+, Mozilla Firefox 1.5+, Apple Safari 2+ e Opera 9+ e extraoficialmente com o Konqueror, Galeon, Ice Weasel, Mozilla, Netscape e provavelmente outros. Aps a srie 1.1, comeou a ser desenvolvido o ExtJS 2.0, trazendo vrias funes e componentes bsicos completamente remodelados para trabalhar com mais eficincia e cdigos menores. Caractersticas O ExtJS, por ser uma biblioteca Javascript cross-browser, prov o desenvolvedor de ferramentas para criar interfaces para pginas e sistemas web-based com alta performance, customizao e uma aparncia elegante. Atualmente o ExtJS suportado oficialmente pelos navegadores Internet Explorer 6+, FireFox 1.5+ (PC, Mac), Safari 3+ e Opera 9+ (PC, Mac). Pode ser utilizado sob a GPL ou pode-se adquirir uma licena comercial, alm de ser possvel a compra de suporte tcnico.

O ExtJS suporta os frameworks Yahoo! User Interface, Prototype e jQuery, atravs de adapters (adaptadores). Alm disso, trabalha integrado com o Adobe AIR e com Google Web Toolkit (GWT). A sua utilizao bastante simples, uma vez que os arquivos necessrios sua utilizao so includos na pgina HTML (ou PHP etc) atravs das tags <SCRIPT>, tal como a incluso que qualquer arquivo *.js. A documentao tambm farta, existindo uma ativa comunidade de utilizadores no Brasil, alm da comunidade Norte-Americana. A prpria documentao do ExtJS (ingls) fcil de entender e bastante dinmica, bem como apresenta diversos exemplos de suas funcionalidades. Veja uma imagem da API de documentao: Existem ainda algumas ferramentas para criao visual de componentes, tais como formulrios, todas disponveis gratuitamente, alm de plugins para algumas IDEs (Aptana, por exemplo). Concluso Como se pode ver nas sees anteriores, o ExtJS facilita e muito o desenvolvimento web, seja porque prov ao desenvolvedor de ferramentas poderosas para criao de interfaces elegantes, funcionais e eficientes; seja porque retira do desenvolvedor a preocupao com a elaborao visual, que s vezes no to importante quanto a camada de tratamento dos dados. Resumindo em uma frase popular, o ExtJS "bom, bonito e barato". Para aqueles que desejam saber mais sobre esta biblioteca, aconselho a visita aos seguintes endereos eletrnicos: Site oficial do ExtJS; Site da comunidade de utilizadores brasileiros do ExtJS; Exemplos do site official Documentao Blog RKN No momento em que escrevo esta apostila a verso atual da biblioteca do ExtJS 3.2.0.

Instalando o ExtJS e testando


Instalando: 1. Entre na rea de download do site do ExtJS e faa a download da verso 3.2.0 da biblioteca, ela vir compactada; 2. Dentro do pacote ZIP existe uma pasta chamada ext-3.2.0, extraia-a para uma pasta em seu computador, se voc tiver um servidor web instalado aproveite para coloc-la dentro da pasta do seu servidor; Testando: 1. Crie um arquivo chamado index.html na mesma pasta que contm a pasta ext-3.2.0; 2. Crie um arquivo chamado index.js, sua estrutura deve estar parecida com essa: | suaPasta | ext-3.2.0 | index.html | index.js 3. Abra o arquivo index.html e escreva o seguinte cdigo: <html> <head> <title>Testando o ExtJS</title> <link rel="stylesheet" href="ext-3.2.0/resources/css/ext-all.css" type="text/css" /> <script src="ext-3.2.0/adapter/ext/ext-base.js"></script> <script src="ext-3.2.0/ext-all.js"></script> <script src="index.js"></script> </head> <body> </body> <button id="btClose">Fechar Janela</button> </html> 4. Abra o arquivo index.js e escreva o seguinte cdigo: Ext.onReady(function(){ var win = new Ext.Window({ height: 200, width: 300, title: 'Teste', html: '<b>Minha primeira janela em ExtJS</b>' }) win.show(); Ext.get('btClose').on('click', function(){ win.close(); }) }) 5. Abra o arquivo index.html em algum navegador, devemos ver uma janela azul em ExtJS com ttulo Teste e contedo Minha primeira janela em ExtJS, caso isso no ocorra revise seus cdigos.

Explicaes: 1. Carregamos 3 arquivos do ExtJS: a) ext-all.css contm os estilos que fazem a ligao do HTML gerado pelo ExtJS com a Skin, a qual contm inmeras linhas de estilos e ligaes com imagens; b) ext-all.js contm o cdigo de todos os componentes visuais e no visuais da biblioteca; c) ext-base.js o ExtJS pode funcionar ligado a essa biblioteca ou a outras como JQuery atravs de adaptadores que so outros arquivos .js.

2. Carregamos o arquivo index,js onde colocaremos nosso cdigo JavaScript, essa diviso de arquivos torna o cdigo mais organizado. 3. Dentro do index.js: a) Ext.onReady recebe uma funo por parmetro, quando passamos uma funo por parmetro chamamos de callback porque ela ser executada por outro pedao de cdigo que no possui conhecimento desta funo, essa funo ser executada logo aps o carregamento de todos os elementos de nossa pgina, evitando problemas. Sendo assim, dentro desta funo anonima comeamos a escrever o cdigo que queremos que seja executado ao abrir a pgina; b) Criamos para uma varivel chamada win um componente chamado Ext.Window (janela) com largura de 300px, altura de 200px, titulo e um pequeno texto; c) A partir do objeto criado para a varivel win chamamos o mtodo show o qual faz a nossa janela ser renderizada na tela para o usurio, como no passamos posio ela ser renderizada exatamente no centro da tela; d) Ext.get(). Lembra do document.getElementById()? Pois , podemos compar-lo a ele, com uma pequena diferena, Ext.get nos traz um elemento pelo id que ele contm na sua tag HTML mas como um objeto do ExtJS, voc pode notar que com o Ext.get o objeto retornado contm todas as propriedades e mtodos do objeto Ext.Element, olhe na documentao, e a propriedade Ext.get('idElemento').dom nos retorna o que o document.getElementById() nos retornaria. Sendo assim com o Ext.get podemos usar de eventos facilmente, como neste caso associando um evento ao boto de id btClose. Em um Ext.Element, que o que o Ext.get nos retorna, podemos usar do mtodo on que recebe trs parmetros, o nome do evento a se associar, a funo de callback que queremos executar quando esse evento ocorrer e o escopo, o escopo um parmetro opcional e trataremos dele mais tarde. Em resumo, associamos uma funo ao evento click do boto que pega a varivel onde temos a janela e executa o mtodo de fechar (close).

Obs: muito importante manter um cdigo bem identado, isso facilita a vida de quem fez o cdigo, de quem vai ler e do professor deste curso :) se possvel use um editor de texto que lhe ajude a programar, principalmente um que contenha syntax highlight. Se no tiver um favorito tente o Notepad++. timo, agora que sabemos como iniciar a utilizao do ExtJS vamos comear com os exerccios: 1. Vamos praticar um pouco mais de Ext.get, temos em nosso cdigo acima um exemplo de como fechar a janela no click de um boto. Crie mais um boto, no esquea de colocar um id nico para ele, e faa com que nossa janela abra somente quando este boto for clicado. Obs: coloque todo o cdigo de criao da janela dentro do evento do boto e declare a varivel fora dos eventos. 2. Vamos praticar um pouco de lgica. Os mais curiosos provavelmente perceberam que a cada vez que se clica no boto de criar a janela criada uma nova janela, isso acontece porque a cada clique executamos nosso cdigo de criao sem antes verificar se a janela j existe, sendo assim criamos uma nova janela para a mesma varivel e a antiga continua l, assim perdemos a referencia das janelas anteriores pela varivel win, note que ao clicar no boto de fechar a janela somente a ltima janela se fecha. Faa uma estrutura bsica de condio, um IF antes da criao da janela e verifique se a mesma ainda no foi criada para poder dar continuidade ao cdigo. Exemplo de IF onde o alert ser mostrado somente se a varivel for um vazia, null: //Ser disparado o alert var objeto = null; if(objeto === null){ alert('Objeto no criado'); } //No ser disparado o alert var objeto = new Date(); if(objeto === null){ alert('Objeto no criado'); } 3. Voc deve ter notado que ao fechar a janela no conseguimos mais abri-la, isso se deve ao fato de fecharmos a janela e no liberarmos a varivel, adicione aps o close() da janela o cdigo win = null; para que ela passe em nosso teste de criao; 4. Altere as configuraes da janela para que ela no possua o boto de fechar, que ela no possa ser redimensionada e que ela contenha um barra de status na parte inferior com um boto alinhado a direita escrito Fechar e que ao ser clicado feche a janela.

Traduzindo o ExtJS
extremamente fcil traduzir o ExtJS para sua lngua, ele suporta at o momento cerca de 45 lnguas alm da padro que o ingls e para isso basta adicionar mais um arquivo JavaScript (ext-3.2.0/src/locale/ext-lang-pt_BR.js) na pgina principal da aplicao e pronto. Esse procedimento ir traduzir o calendrio, o formato das datas e alguns outros textos padres como os botes SIM e NO do Ext.Msg.cofirm que um dialogo de confirmao. Este arquivo deve ser includo aps a incluso das libs do ExtJS e antes da incluso no nosso arquivo index.js. <script src="ext-3.2.0/ext-all.js"></script> <script src="ext-3.2.0/src/locale/ext-lang-pt_BR.js"></script> <script src="index.js"></script>

XType
O XType uma forma abreviada de se criar um componente dentro de outro no ExtJS, os dois exemplos abaixo tem o mesmo efeito:
var win = new Ext.Window({ height: 200, width: 300, items:[new Ext.Panel({ title: 'Titulo', html: 'texto' })] }) win.show(); var win = new Ext.Window({ height: 200, width: 300, items:[{ xtype: 'panel', title: 'Titulo', html: 'texto' }] }) win.show();

Exemplo de janela com formulrio e 3 campos, onde o campo nome no pode ser nulo:
var win = new Ext.Window({ height: 200, width: 300, layout: 'fit', items:[{ xtype: 'form', items: [{ xtype: 'textfield', fieldLabel: 'Nome', allowBlank: false },{ xtype: 'textfield', fieldLabel: 'Sobrenome', width: 160 },{ xtype: 'datefield', fieldLabel: 'Data Nascimento' }] }] }) win.show();

Exerccios 5. Pegando o exemplo de formulrio acima, faa com que o campo Sobrenome no permita ficar vazio e adicione os seguintes campos: 1. Endereo (campo texto); 2. Data Cadastro (campo data, no pode ser vazio); 3. Profisso (Campo texto).

Exemplo de grid com dados: var win = new Ext.Window({ height: 200, width: 300, layout: 'fit', items:[{ xtype:'grid', store: new Ext.data.ArrayStore({ fields:[ {name:'nome'}, {name:'profissao'}, {name:'idade', type:'int'} ], data: [ ['Rodrigo','Programador','21'], ['Hullen','Programador','23'], ['Gabriel','Programador','26'] ] }), columns:[ { id: 'nome', header: 'Nome', width: 100, sortable: true, dataIndex: 'nome' },{ id: 'profissao', header: 'Profisso', width: 100, sortable: true, dataIndex: 'profissao' },{ id: 'idade', header: 'Idade', width: 50, sortable: true, dataIndex: 'idade' } ] }] }) win.show(); Exerccios 6. Pegando o exemplo de grid acima, adicione o campo Sobrenome no store, coloque dados para esse campo, faa com que ele aparea no grid e faa com que este campo no possa ser ordenado.

Parte Prtica 1: Montando uma interface simples


Criar uma interface simples: 1. Criar um Viewport de layout border, contendo as regies north, east, center e south; 2. Criar uma toolbar na regio norte contendo os botes: 1. Cadastro (com submenu) Pessoas (Deve abrir a Aba de Cadastro Pessoas) Cidades (Sem funcionalidade por enquanto)

2. Teste (um boto toggle sem funcionalidade) 3. Um texto de boas vindas ao usurio 4. Sair (um boto sem funcionalidade alinhado a direita) 3. A regio east deve ter o ttulo Propagandas, largura de 100px e poder ser minimizada (collapse); 4. A regio south de ter altura de 100px, o ttulo Noticias, poder ser minimizada, vir minimizada por padro, ser redimensionvel e ter o modo de collapsed como mini; 5. A regio center deve ser um tabPanel; 6. Criar uma tab na regio central com ttulo Ol Mundo e que fique ativa por padro 7. Ao clicar no boto Cadastro > Pessoas criar uma nova tab na regio central contendo um grid conforme a figura abaixo. 8. O grid deve conter as colunas Nome, Idade e Profisso; 9. Para maiores detalhes comparem a figura abaixo com a sua tela.

AJAX O que , para que serve e quando usar.


Citao de Wikipdia: AJAX (programao): AJAX (acrnimo em lngua inglesa de Asynchronous Javascript And XML) o uso metodolgico de tecnologias como Javascript e XML, providas por navegadores, para tornar pginas Web mais interativas com o usurio, utilizando-se de solicitaes assncronas de informaes. AJAX no somente um novo modelo, tambm uma iniciativa na construo de aplicaes Web mais dinmicas e criativas. AJAX no uma tecnologia so realmente vrias tecnologias conhecidas trabalhando juntas, cada uma fazendo sua parte, oferecendo novas funcionalidades. AJAX resumidamente uma forma de se comunicar com o lado servidor sem a necessidade de recarregar a pgina WEB, tornando assim possvel a separao perfeita de uma aplicao em camadas (MVC). Ele permite que sejam enviados dados do lado cliente para o lado servidor por POST ou GET e receber dados do servidor como um texto. A utilizao do AJAX recomendada nos casos onde h a necessidade de enviar dados para o servidor e/ou trazer dados para a tela de forma minimalista evitando o recarregamento de todos os elementos de uma pgina, evitando assim tambm o tempo de espera no carregamento de uma pgina. A sua utilizao no recomendada para trfego de informaes importantes, como dados de login. Importante, AJAX uma requisio assncrona, ou seja, o cdigo continua a ser executado enquanto a requisio est em andamento, o cdigo no espera pela resposta do servidor, por isso trabalhamos com funes de callback, uma funo anonima passada para a requisio, esta funo ser chamada ao termino da requisio e receber por parmetro os dados da requisio e o retorno da mesma, sendo assim temos que trabalhar com os dados dentro deste callback.

Como o ExtJS se comunica com o servidor


O ExtJS prove um componente no visual chamado Ext.Ajax a qual nos permite criar requisies AJAX de forma fcil e clara, vrios componentes do ExtJS se utilizam deste componente para realizar transaes AJAX de maneira mais abstrata ao programador como os Stores, a propriedade autoLoad e o mtodo load do componente Ext.Panel e seus derivados. A comunicao em AJAX ocorre basicamente da seguinte forma: 1. enviada uma requisio ao servidor, igualmente ao ato de abrir uma pgina, onde podem ser passados dados por POST ou GET, igual ao envio de um formulrio da maneira tradicional; 2. Ocorre o processamento dos dados do lado servidor caso seja chamada uma pgina que contenha programao do lado servidor; 3. retornado todo o cdigo que seria impresso na tela para o usurio caso abrssemos a pgina diretamente pelo navegador. Ou seja, se requisitarmos um arquivo texto, teremos o retorno exato do contedo deste arquivo, se requisitarmos um arquivo PHP teremos o retorno deste arquivo processado como se abrssemos este arquivo pelo navegador. Sendo assim, nosso retorno um texto puro, podendo ele conter HTML ou no.

No ExtJS podemos dizer que a forma de trabalharmos com AJAX um pouco diferente, podemos criar uma requisio AJAX na mo e trabalharmos com o retorno dela de forma normal, porm quando usamos de componentes que fazem este acesso por ns ficamos sujeitos a algumas convenes. Em geral ao criarmos uma requisio Ext.Ajax.request temos em mente trabalhar diretamente com os dados retornados, quando usamos um Store por exemplo o componente se encarrega de trabalhar com os dados, para isso precisamos retorn-los em formato JSON, XML ou ARRAY.

Instalando o servidor Apache


A instalao do servidor Apache simples e se resume no seguinte: 1. Baixar a ultima verso do arquivo binrio Win32 sem OpenSSL (MSI Installer) no site do Apache; 2. Executar o instalador; 3. Na primeira tela basta clicar no boto Next; 4. Nesta tela temos que aceitar os termos da licena, para isso certifique de que est marcado o campo I accept the terms in the license agreement e clique em Next; 5. Nesta tela clique em Next; 6. Nesta tela temos de colocar algumas configuraes do nosso servidor, para questo de teste coloque dados fictcios como os exemplos acima de cada campo, deixe marcado o campo For All Users, on Port 80... e clique em Next; 7. Nesta tela selecione a opo Typical para fazer a instalao padro e clique em Next; 8. Nesta tela selecione a pasta de instalao, recomendo deixar a pasta padro e clique em Next; 9. Nesta tela clique em Install e aguarde a instalao. 10. Ir abrir uma tela de instalao completa, Installation Wizard Completed, clique em Finish. 11. Pronto, Apache instalado. 12. Abra seu navegador e digite http://localhost/, se aparecer bem grande escrito It Works!, parabns voc o mais novo proprietrio do seu prprio servidor WEB. A pasta padro do servidor Apache onde devem ficar os arquivos do seu site uma pasta chamada htdocs, esta pasta fica dentro da pasta de instalao do servidor apache. Caso voc queira trocar esta pasta para um caminho mais amigvel ou para outra unidade de disco basta editar o arquivo httpd.conf que se encontra dentro da pasta conf que est dentro da pasta de instalao do apache e trocar as duas ocorrncias do caminho padro pelo caminho desejado e reiniciar o apache. Dica, use o comando de procurar e procure por htdocs.

Testando o AJAX do ExtJS


Vale lembrar que AJAX uma comunicao de dados entre cliente e servidor, por isso s podemos utiliz-lo em arquivos que estejam rodando atravs de servidores como o Apache que instalamos anteriormente. Abrir um arquivo diretamente pelo navegador dando 2 cliques no mesmo carrega o arquivo de fora do servidor, para garantir que o arquivo esteja sendo carregado atravs do servidor verifique se o inicio da URL em seu navegador consiste em http://localhost/. Exemplo 1: AJAX e manipulao do retorno dos dados: 1. Crie os arquivos HTML e JS como de costume; 2. Dentro do Ext.onReady do arquivo JS coloque o seguinte cdigo:
Ext.Ajax.request({ url: 'noticia.txt', success: function(retorno){ alert(retorno.responseText) } })

3. Crie um arquivo chamado noticia.txt e coloque o seguinte contedo: Notcia carregada por AJAX. Forma interessante de se trabalhar. Exemplo 2: AJAX e carregamento de contedo de forma simplificada: 1. Crie os arquivos HTML e JS como de costume; 2. Dentro do Ext.onReady do arquivo JS coloque o seguinte cdigo:
var win = new Ext.Window({ height: 200, width: 300, title: 'Ajax em uma Window', autoLoad: 'noticia2.txt' }) win.show();

3. Crie um arquivo chamado noticia2.txt e coloque o seguinte contedo:


Notcia carregada por AJAX.<br />Forma interessante de se trabalhar.

Exerccios 7. Pegando o exerccio 6 onde temos um Grid ligado a um Store, troque o Store por um que aceite JSON, retire os dados escritos diretamente no Store e coloque-os em um arquivo, por exemplo grid.txt, defina a url de leitura dos dados e formate em JSON os dados do arquivo txt. Note que os dados no sero carregados, temos que dizer ao Store para carreg-los e para isso h duas formas, colocar autoLoad: true como configurao do Store, ou depois de cri-lo pegar sua referencia e executar o mtodo load (meuStore.load()). Como no temos referencia do Store e nem um id para o mesmo temos de usar a opo autoLoad: true que faz com que os dados sejam carregados assim que o Store for criado.

Parte Prtica 2: Interagindo nossa interface com o servidor


Altere nosso pequeno sistema para que os dados passem a ser carregados por AJAX de arquivos .txt no lado servidor. Faa com que possam ser inseridos dados nos Grids atravs de formulrios, analise, estude a escolha um dos mtodos usados no arquivo pratica1.1.js. Crie novos cadastros para praticar um pouco mais. E faa com que ao se clicar no menu para abrir um cadastro j aberto este cadastro ganhe foco, ou seja, a tab deste cadastro fique ativa.

PHP Conhecendo o PHP


Citao de Wikipdia: PHP: PHP (um acrnimo recursivo para "PHP: Hypertext Preprocessor") uma linguagem de programao de computadores interpretada, livre e muito utilizada para gerar contedo dinmico na World Wide Web, como por exemplo a Wikipdia. A linguagem PHP uma linguagem de programao de domnio especfico, ou seja, seu escopo se estende a um campo de atuao que o desenvolvimento web, embora tenha variantes como o PHP-GTK. Seu propsito principal de implementar solues web velozes, simples e eficientes. Caractersticas: Velocidade e robustez Estruturado e orientao a objeto Portabilidade - independncia de plataforma - escreva uma vez, rode em qualquer lugar; Tipagem fraca Sintaxe similar a Linguagem C/C++ e o PERL O PHP tem a sintaxe muito similar a sintaxe do JavaScript, usamos de chaves {} para definir inicio e fim de blocos de cdigo como o contedo de um IF por exemplo, temos variveis com tipagem entre outras coisas. O PHP nos permite manipular os dados no lado servidor de nossa aplicao e o mais importante lembrar que temos que imprimir esses dados na tela, para isso usamos o comando echo que veremos muito no resto da apostila. Em resumo, o que ser impresso na tela pelo PHP o que o usurio ver se acessar a pagina .php ou o que receberemos por AJAX se requisitarmos esta pgina .php.

Instalando o PHP
A instalao do PHP ainda mais fcil que a instalao do Apache: 1. Baixe o arquivo do instalador do PHP para windows aqui, selecione o arquivo VC6 x86 Thread Safe tipo Installer, esse o instalador pra quem tem Apache instalado; 2. Execute o instalador; 3. Na primeira tela, Well Come ..., do instalador clique em Next; 4. Na segunda tela, End-User License Agreement, marque o campo I accept the terms in... para aceitar os termos do contrato de licena e clique em Next; 5. Na terceira tela, Destination Folder, selecione o caminho de instalao ou deixe o padro e clique em Next; 6. Na quarta tela, Web Server Setup, selecione a opo Apache 2.2.x Module para que o PHP configure o Apache para ns e clique em Next; 7. Na quinta tela, Apache Configuration Directory, selecione a pasta de configurao do Apache que a pasta conf dentro da pasta de instalao do apache e clique em Next; 8. Na sexta tela, Choose Items to Install, h uma arvore, abra o n PHP e dentro dele

abra o n Extencions para selecionarmos as extenses que queremos instalar junto ao PHP, verifique se a extenso PostgreSQL est selecionada, se no estiver selecione-a clicando no cone ao lado do nome e clicando na primeira opo da lista. Caso deseje usar outro banco como o MySQL faa a ativao da extenso para o banco desejado e clique em Next; 9. Na stima tela, Ready to install PHP ..., clique em Install e aguarde o trmino do processo de instalao; 10. Na oitava tela, Completed the PHP Setup Wizard, clique em Finish; 11. Reinicie o Apache; 12. Crie um arquivo teste.php no pasta do servidor Apache e escreva dentro o seguinte: <?php phpinfo(); ?> 13. Abra o arquivo no navegador atravs do localhost e veja se apareceu o relatrio das configuraes do PHP.

Parte Prtica 3: Interagindo nossa interface com o servidor


Troque nossos arquivos .txt que contm nossos dados em formato JSON por arquivos .php e crie neles a estrutura de dados como exemplificado abaixo. Exemplo de impresso dos dados em JSON de 2 campos: <?php $campos = array(); //Cria um array vazio $linhas = array(); $campos['estado'] = 'Rio Grande do Sul'; $campos['uf'] = 'RS'; $linhas[] = $campos; //Adiciona os campos ao primeiro item $campos['estado'] = 'Santa Catarina'; $campos['uf'] = 'SC'; $linhas[] = $campos; echo json_encode($linhas); //Imprime os campos em JSON ?>

PostgreSQL Conhecendo o PostgreSQL


Citao de Wikipdia: PostgreSQL: Hoje, o PostgreSQL um dos SGBDs (Sistema Gerenciador de Bancos de Dados) de cdigo aberto mais avanados, contando com recursos como: consultas complexas chaves estrangeiras integridade transacional controle de concorrncia multi-verso suporte ao modelo hbrido objeto-relacional gatilhos vises Linguagem Procedural em vrias linguagens (PL/pgSQL, PL/Python, PL/Java, PL/Perl) para procedimentos armazenagem Indexao por texto Estrutura para guardar dados Georeferenciados PostGIS

Instalando o PostgreSQL e o PgAdmin


Vamos instalar o PostgreSQL: 1. Baixe a ltima verso do instalador do PostgreSQL para windows aqui, baixe o the one click installer; 2. Execute o instalador e aguarde o incio da tela de configuraes; 3. Na primeira tela, Setup PostgreSQL, clique em Next; 4. Na segunda tela, Installation Directory, selecione um diretrio de instalao ou deixe o padro e cliqe em Next; 5. Na terceira tela, Data Directory, selecione o diretrio que conter os arquivos dos bancos de dados do PostgreSQL ou deixe o padro e clique em Next; 6. Na quarta tela, Password, informe uma senha para o super-usurio (postgres) do banco, ser criado um usurio no windows chamado postgres que ter esta mesma senha. Repita a senha no segundo campo e clique em Next; 7. Na quinta tela, Port, informe a porta que deseja rodar o servio de banco de dados do PostgreSQL ou deixe a porta padro e clique em Next; 8. Na sexta tela, Advanced Options, informe a localidade desejada no primeiro campo como por exemplo Portugues, Brazil, marque o item Install pl/pgsql in template1 database e clique em Next; 9. Na stima tela, Ready to Install, clique em Next e aguarde a instalao terminar; 10. Na oitava tela, Completing the PostgreSQL Setup Wizard, desmarque a opo Launch Stack Builder at Exit e clique em Finish; 11. Procure no menu iniciar pelo diretrio do PostgreSQL e abra o PgAdmin contido nele; 12. De 2 cliques no servidor PostgreSQL localhost contido na lista a esquerda e informe a senha do usurio postgres; 13. Estamos prontos para comear a criar nosso banco de dados.

Criando nosso Banco de Dados


1. Abra o PgAdmin; 2. Crie um novo banco de dados de nome extjs, dono postgres e codificao UTF8; 3. Conecte no banco extjs recm criado; 4. Dentro do esquema public crie as seguintes tabelas: 1. Tabela de nome pessoas, dono postgres e as seguintes colunas: id, integer, PK; nome, character variyng (60); profissao, character variyng (30); idade, integer; id, integer, PK; cidade, character variyng (20); uf, character variyng (2);

2. Tabela de nome cidades, dono postgres e as seguintes colunas:

Parte Prtica 4: Tornando nossa aplicao funcional


1. SELECT: Altere nossos arquivos .php para que ele busque as informaes do banco de dados, para isso basta conectar ao banco, executar uma pesquisa e imprimir o resultado em JSON, exemplo: <?php $h = 'localhost'; //Local do banco $p = 5432; //Porta do banco $db = 'extjs'; //Banco a se conectar $u = 'postgres'; //Usurio $pw = 'postgres'; //Senha //Tenta conectar e passar a referencia para $db, se no for possvel //ele termina a execuo com erro e imprime o erro do banco if(!$db = pg_connect("host=$h port=$p dbname=$db user=$u password=$pw")) die ("Erro ao conectar ao banco<br/>".pg_last_error($db)); //Executa um SQL no banco e guarda o retorno em $result $result = pg_query($db, "SELECT id, nome, profissao, idade FROM pessoas"); //Se $result est definido a query teve sucesso if($result){ //Pega todos os dados da consulta em um array bidimensional //e os codifica para JSON echo json_encode(pg_fetch_all($result)); }else{ echo "Erro na consulta."; } ?>

2. INSERT: Agora devemos alterar os arquivos PHP e JS, no arquivo PHP precisamos de uma estrutura condicional que verifique que ao estamos requisitando, agora teremos duas aes (SELECT e INSERT) e no arquivo JS precisamos enviar as informaes do formulrio para o PHP e tambm precisamos enviar qual a ao que queremos realizar. JS: O FormPanel possui um mtodo interno pra enviar os dados por ajax para o servidor, o mtodo submit do formulrio interno que tambm possui o mtodo isValid que verifica se todos os campos esto corretos de acordo com suas validaes. Observao importante, cada campo do formulrio deve ter a propriedade name identificando um nome para cada campo, este o nome que usaremos no lado servidor para pegar os valores enviados. Exemplo: //isValid retorna true se todos os campos estiverem corretos if(Ext.getCmp('idDoFormPanel').getForm().isValid()){ Ext.getCmp('idDoFormPanel').getForm().submit({ url: 'arquivo.php', //url do arquivo a receber os dados params: { //parametros adicionais acao: 'insert' }, success: function(){ //Cdigo a ser executado ao termino do AJAX //Como recarregar um grid por exemplo; } }) }else{ alert('campos invlidos'); } PHP: Antes tnhamos apenas uma ao para o arquivo PHP em questo que era retornar os dados do banco, agora temos 2 (SELECT e INSERT) e no futuro teremos mais 2 (UPDATE e DELETE), por esse motivo precisamos saber no lado PHP que ao o lado cliente est requisitando, para isso passamos um parmetro por POST ao arquivo informando qual a ao a ser executada e dentro do cdigo PHP podemos fazer um IF e separa os blocos de ao. O cdigo abaixo no substitui o cdigo j criado no arquivo PHP, apenas um exemplo de como implementar a condio da ao a ser requisitada. Cada campo pego por $_POST['nomeDoCampo']. Exemplo: if($_POST['acao'] == 'insert'){ $id = '(SELECT COALESCE(MAX(id), 0)+1 FROM pessoas)'; $nome = $_POST['nome']; $profissao = $_POST['profissao']; $idade = $_POST['idade']; $result = pg_query($db, "INSERT INTO pessoas(id, nome, profissao, idade) VALUES($id, '$nome', '$profissao', $idade)"); }else{ //Bloco de cdigo a ser executado case no seja ao 'insert' //Como o select por exemplo; }

3. DELETE: Para implementarmos a deleo precisamos alterar os dois lados da aplicao. JS: Precisamos adicionar o campo ID no nosso store para que possamos envia-lo ao PHP para identificar qual registro queremos excluir, esta alterao no exemplificarei aqui pois simples, e precisamos adicionar um boto em nossa tela, na TBAR por exemplo, e definir em seu HANDLER um requisio ajax enviando a ao quer queremos realizar e o ID do registro a ser excludo. Exemplo:
var grid = Ext.getCmp('gridPessoas'); if(grid.getSelectionModel().getSelected()){ Ext.Ajax.request({ url: 'arquivo.php', params: { acao: 'delete', id: grid.getSelectionModel().getSelected().data.id }, success: function(){ grid.getStore().reload(); } }) }

PHP: Precisamos criar mais um IF para esta ao:


if($_POST['acao'] == 'insert'){ //Cdigo da ao de insert }else if($_POST['acao'] == 'delete'){ $id = $_POST['id']; $result = pg_query($db, "DELETE FROM pessoas WHERE id = $id"); }else{ //Cdigo da ao de select }

4. UPDATE: Essa uma ao complicada, ela se resume em pegar a linha selecionada no grid, carregar estes dados para um formulrio de forma que o usurio possa editar as informaes e envi-las por submit com a ao de update. JS: Crie um boto para a alterao, copie o handler do boto de adicionar, coloque um IF em torno deste cdigo verificando se existe uma linha selecionada no grid, adicione um campo a mais no formulrio para conter o ID do registro, exemplificarei abaixo, adicione um listeners na window e dentro adicione o evento show, dentro deste evento carregue os dados para o formulrio (os campos devem ter os mesmos nomes dos campos do store) e no handler do boto de salvar altere a ao para update:
//cdigo a ser adicionado a window //listeners uma propriedade da window assim como height, width, etc listeners:{ show: function(){ var form = Ext.getCmp('formPessoas').getForm(); form.loadRecord(grid.getSelectionModel().getSelected()); } }

PHP: Temos de adicionar mas um bloco de cdigo:


if($_POST['acao'] == 'update'){ $id = $_POST['id']; $nome = $_POST['nome']; $profissao = $_POST['profissao']; $idade = $_POST['idade']; $result = pg_query($db, "UPDATE pessoas SET nome = '$nome', profissao = '$profissao', idade = $idade WHERE id = $id"); }

Extend e Override Adaptando o ExtJS as nossas necessidades


Ext.extend e Ext.override so formas de modificar e adicionar classes da biblioteca ExtJS, ambos so funes internas da biblioteca. 1. Extend: Esta funo nos permite estender uma classe j existente adicionando novas propriedades, mtodos, eventos e valores padro. Um bom e simples exemplo seria estender a classe Window para uma classe chamada MyWindow e adicionar a ela altura e largura padro: Ext.onReady(function(){ Ext.namespace('Ext.ux'); Ext.ux.MyWindow = Ext.extend(Ext.Window, { height: 200, width: 300 }) var win = new Ext.ux.MyWindow({ title: 'Teste', html: '<b>Minha primeira janela em ExtJS</b>' }) win.show(); }) 2. Override: Esta funo nos permite adicionar funcionalidades a uma classe j existente sem que seja necessria a criao de uma nova classe. Um bom exemplo seria adicionar um mtodo a classe Ext.data.Store que nos permita adicionar registros mais facilmente como demonstrado no cdigo abaixo, um exemplo mais complexo e de grande utilidade um override que nos permite adicionar colunas em um formulrio de forma fcil que pode ser encontrado aqui: Ext.override(Ext.data.Store, { insertRecord: function(record, index){ index = index || 0; record = record || {}; this.insert(index, new this.recordType(record, null, true)) } }) //Antes do override tnhamos de proceder assim: //store.insert(0, new store.recordType(form.getForm().getValues())); //Aps o override podemos proceder assim: //store.insertRecord(form.getForm().getValues());

Praticando um pouco mais Criando mais cadastros em nossa aplicao


Esta parte est destinada a ltima aula deste curso e consiste em criar novos cadastros para praticarmos um pouco mais, esta criao de novos cadastros envolve criao de tabelas no banco de dados, criao dos arquivos PHP necessrios e adio dos cdigos JavaScript necessrios. Aconselho quem estiver com alguma dificuldade criar mais cadastros de campos corridos, como um cadastro de empresas por exemplo, e quem estiver mais seguro aconselho a criao de um cadastro de estados fazendo as alteraes na tabela e tela do cadastro de cidades para efetuar a ligao entre ambos e que o usurio possa selecionar em um combobox o estado da cidade. E por fim aconselho a todos soltar a imaginao, estudar os exemplos e a documentao e claro, pedir ajuda a algum mais experiente em ExtJS, no caso deste curso presencial, o professor.

Fim Agradecimentos
Obrigado a todos que estiveram presentes neste pequeno curso, aos laboratoristas e claro aos professores da FACCAT em especial ao coordenador do curso de Sistemas de Informao Marcelo Azambuja. Abraos a todos.

Vous aimerez peut-être aussi