Académique Documents
Professionnel Documents
Culture Documents
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
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.
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;
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.
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.
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.
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.
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();
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.
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.
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(); } }) }
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()); } }
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.