Apostila de ExtJS com PHP e PostgreSQLCriando interfaces web 2.0

Rodrigo K. Nascimentorodrigoknascimento@gmail.com

http://www.rkn.com.brFACCAT

Atualizado em 14 de Maio de 2010

Esta apostila tem por objetivo demonstrar os principais componentes e funções da biblioteca JavaScript ExtJS. Como auxílio para a demonstração de uma aplicação simples porém funcional, será usada a linguagem de programação PHP para a comunicação da interface (ExtJS) com o servidor e o banco de dados PostgreSQL. Para melhor compreensão esta apostila está dividida da seguinte forma:

SumárioJavaScript ........................................................................................................................................3

Introdução ao JavaScript.............................................................................................................3Conhecendo e instalando o Firebug............................................................................................4Formato de dados, funções e estrutura........................................................................................4

ExtJS................................................................................................................................................7Conhecendo o ExtJS...................................................................................................................7Instalando o ExtJS e testando......................................................................................................9Traduzindo o ExtJS...................................................................................................................12XType........................................................................................................................................12Parte Prática 1: Montando uma interface simples.....................................................................14

AJAX.............................................................................................................................................16O que é, para que serve e quando usar......................................................................................16Como o ExtJS se comunica com o servidor..............................................................................17Instalando o servidor Apache....................................................................................................17Testando o AJAX do ExtJS.......................................................................................................18Parte Prática 2: Interagindo nossa interface com o servidor.....................................................19

PHP................................................................................................................................................19Conhecendo o PHP...................................................................................................................19Instalando o PHP.......................................................................................................................20Parte Prática 3: Interagindo nossa interface com o servidor.....................................................20

PostgreSQL....................................................................................................................................21Conhecendo o PostgreSQL.......................................................................................................21Instalando o PostgreSQL e o PgAdmin.....................................................................................21Criando nosso Banco de Dados................................................................................................22Parte Prática 4: Tornando nossa aplicação funcional................................................................22

Extend e Override..........................................................................................................................25Adaptando o ExtJS as nossas necessidades..............................................................................25

Praticando um pouco mais.............................................................................................................26Criando mais cadastros em nossa aplicação..............................................................................26

Fim.................................................................................................................................................27Agradecimentos........................................................................................................................27

JavaScript

Introdução ao JavaScriptJavaScript é uma linguagem de programação que permite a manipulação de objetos de uma

página web diretamente no browser, bem como o acesso a algumas informações importantes como qual o sistema operacional, qual o browser que está abrindo a página, qual a engine de renderização do navegador, etc. Permite também o acesso e manipulação de datas, pegar a data e hora do sistema operacional, formatar ou criar novos objetos de data e hora.

Por ser uma linguagem de programação interpretada pelo browser em tempo de execução o JavaScript está sujeito a particularidades de cada navegador, um bom exemplo é a diferença que existe entre a forma de se criar uma requisição 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 página, também permite a manipulação do JavaScript, HTML e CSS em tempo de execução permitindo testes mais rápidos e diretamente na página. Analisando por outro lado, essa facilidade que o Firebug disponibiliza é um ponto fraco para a segurança 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, funções e estruturaPor ter tido uma colaboração considerável da SUN em sua criação o JavaScript tem a sintaxe

muito semelhante a do Java porém muito diferente em seu conceito e seu uso.

De acordo com seu sistema de tipos JavaScript é:• Fraca - sua tipagem é mutável; • Dinâmica - uma variável pode assumir vários tipos diferentes durante a execução; • Implícita - as variáveis são declaradas sem tipo.

Existem três formas de declaração de variáveis:• Escopo Global: variavel1 = 'a'; ou window.variavel1 = 'a';• Escopo Local: var variavel1 = 'a';• Escopo do Objeto: this.variavel1 = 'a';

Existem duas formas de declaração de funções:• Escopo Global: function funcao1(){};• Escopo do Objeto e anônima: var funcao1 = function(){};

Atribuição 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 aritméticos:• + x + y Soma ou concatena y a x;• - x – y Subtrai y de x;• * x * y Multiplica x por y;• % x % y Retorna o resto da divisão de x por y;• / x / y Divide x por y;• ++ x++ Adiciona 1 a x;• -- x-- Subtrai 1 de y;

Operadores lógicos e relacionais• ! !bool Inverte o resultado booleano da variável ou expressão;• && 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, não considera o tipo dos dados;• != x != y True se x for diferente de y, não 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 atribuídos com inicialização 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: 'João', idade: 13};

Exemplo de acesso a um objeto:var variavel1 = {nome: 'João', idade: 13};var variavel2 = variavel1.nome;//variavel2 >> 'João'//todo objeto pode ser acessado como um array associativovar variavel2 = variavel1['nome'];//variavel2 >> 'João'

Um objeto pode conter um array ou outros tipos assim como um array pode conter objetos ou outros tipos, exemplo:

var variavel1 = [{nome: 'João'}, {nome: 'Jorge'}];//variavel1[0].nome >> 'João'//variavel1[0]['nome'] >> 'João'var variavel1 = {nome: ['João', 'Jorge']};//variavel1.nome[0] >> 'João'//variavel1['nome'][0] >> 'João'

Exemplo de objeto complexo:var variavel1 = {

pessoas: ['João', '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 >> ['João', 'Jorge', 'Rodrigo']variavel1.removeUltima();//variavel1.pessoas >> ['João', 'Jorge']

Uma classe em JavaScript é uma função que contém variáveis e funções 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('João');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. Após as alterações no prototype da classe todos os objetos criados a partir desta serão afetados além dos objetos criados posteriormente. Tomando como base a classe já criada no exemplo acima, podemos exemplificar adicionando uma função de contagem de pessoas:

var classe1 = function(){this.pessoas = [];this.addPessoa = function(pessoa){

this.pessoas.push(pessoa);}

}var obj1 = new classe1;

obj1.addPessoa('João');//Neste ponto o método quantidadePessoas não existe

//Aqui implementamos este novo método em uma classe já existenteclasse1.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 não foram adicionado dados;

Mas qual a real utilidade do prototype? Se você deseja alterar uma classe que você mesmo criou porque não alterar diretamente no código da classe, certo? Bom, existem casos onde temos a necessidade de alterar classes que não criamos, classe de bibliotecas ou até mesmo classes do próprio 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 ExtJSCitação de [HTML STAFF] ExtJS: Um excelente framework de Javascript

O ExtJS é um framework Javascript criado originalmente como uma extensão do YUI (Yahoo! User Interface). Na época de sua criação, chamava-se yui-ext, funcionando junto ao YUI, que era a base. Por ser uma extensão do YUI, o yui-ext não funcionava sem ele.

O ExtJS é um software de código livre criado por Jack Slocum, disponibilizado sob a licença LGPL, porém pode ser comprado para vir com uma outra licença não-livre, caso seja preciso, e também há como adquirir apenas o suporte pago do ExtJS o que dá direito, além do suporte via fórum, e-mail, telefone e onsite (dependendo do nível de associação), o acesso ao SVN do ExtJS onde estão as versões de desenvolvimento do ExtJS e as correções ainda não 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 rápido reconhecimento entre os desenvolvedores como uma extensão 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 várias versões 0.x do yui-ext, antes de ser lançada a versão 1.0 final onde seu nome foi alterado para EXT JS, demonstrando que ele já não era apenas uma extensão para o YUI.

A próxima release lançada foi o ExtJS 1.1, sendo que, a partir dessa versão houve um salto tornando-o um verdadeiro Framework de Javascript ou AJAX Framework e não mais limitado a ser apenas uma extensão para outros Frameworks, apesar de ainda poder ser usado assim.

A partir da versão 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 extra-oficialmente com o Konqueror, Galeon, Ice Weasel, Mozilla, Netscape e provavelmente outros.

Após a série 1.1, começou a ser desenvolvido o ExtJS 2.0, trazendo várias funções e componentes básicos completamente remodelados para trabalhar com mais eficiência e códigos menores.

Características

O ExtJS, por ser uma biblioteca Javascript cross-browser, provê o desenvolvedor de ferramentas para criar interfaces para páginas e sistemas web-based com alta performance, customização e uma aparência 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 licença comercial, além de ser possível a compra de suporte técnico.

O ExtJS suporta os frameworks Yahoo! User Interface, Prototype e jQuery, através de adapters (adaptadores). Além disso, trabalha integrado com o Adobe AIR e com Google Web Toolkit (GWT).

A sua utilização é bastante simples, uma vez que os arquivos necessários à sua utilização são incluídos na página HTML (ou PHP etc) através das tags <SCRIPT>, tal como a inclusão que qualquer arquivo *.js.

A documentação também é farta, existindo uma ativa comunidade de utilizadores no Brasil, além da comunidade Norte-Americana.

A própria documentação do ExtJS (inglês) é fácil de entender e bastante dinâmica, bem como apresenta diversos exemplos de suas funcionalidades. Veja uma imagem da API de documentação:

Existem ainda algumas ferramentas para criação visual de componentes, tais como formulários, todas disponíveis gratuitamente, além de plugins para algumas IDEs (Aptana, por exemplo).

Conclusão

Como se pode ver nas seções anteriores, o ExtJS facilita e muito o desenvolvimento web, seja porque provê ao desenvolvedor de ferramentas poderosas para criação de interfaces elegantes, funcionais e eficientes; seja porque retira do desenvolvedor a preocupação com a elaboração visual, que às vezes não é tão 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 endereços eletrônicos:

• Site oficial do ExtJS ;

• Site da comunidade de utilizadores brasileiros do ExtJS;

• Exemplos do site official

• Documentação

• Blog RKN

No momento em que escrevo esta apostila a versão atual da biblioteca do ExtJS é 3.2.0.

Instalando o ExtJS e testandoInstalando:

1. Entre na área de download do site do ExtJS e faça a download da versão 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 contém 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 código:

<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 código:

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 título “Teste” e conteúdo “Minha primeira janela em ExtJS”, caso isso não ocorra revise seus códigos.

Explicações:

1. Carregamos 3 arquivos do ExtJS:

a) ext-all.css – contém os estilos que fazem a ligação do HTML gerado pelo ExtJS com a “Skin”, a qual contém inúmeras linhas de estilos e ligações com imagens;

b) ext-all.js – contém o código de todos os componentes visuais e não visuais da biblioteca;

c) ext-base.js – o ExtJS pode funcionar ligado a essa biblioteca ou a outras como JQuery através de adaptadores que são outros arquivos .js.

2. Carregamos o arquivo index,js onde colocaremos nosso código JavaScript, essa divisão de arquivos torna o código mais organizado.

3. Dentro do index.js:

a) “Ext.onReady” recebe uma função por parâmetro, quando passamos uma função por parâmetro chamamos de callback porque ela será executada por outro pedaço de código que não possui conhecimento desta função, essa função será executada logo após o carregamento de todos os elementos de nossa página, evitando problemas. Sendo assim, dentro desta função “anonima” começamos a escrever o código que queremos que seja executado ao abrir a página;

b) Criamos para uma variável 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 variável “win” chamamos o método “show” o qual faz a nossa janela ser renderizada na tela para o usuário, como não passamos posição ela será renderizada exatamente no centro da tela;

d) “Ext.get()”. Lembra do “document.getElementById()”? Pois é, podemos compará-lo a ele, com uma pequena diferença, Ext.get nos traz um elemento pelo id que ele contém na sua tag HTML mas como um objeto do ExtJS, você pode notar que com o Ext.get o objeto retornado contém todas as propriedades e métodos do objeto Ext.Element, olhe na documentação, 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 botão de id “btClose”. Em um Ext.Element, que é o que o Ext.get nos retorna, podemos usar do método “on” que recebe três parâmetros, o nome do evento a se associar, a função de callback que queremos executar quando esse evento ocorrer e o escopo, o escopo é um parâmetro opcional e trataremos dele mais tarde. Em resumo, associamos uma função ao evento click do botão que pega a variável onde temos a janela e executa o método de fechar (close).

Obs: É muito importante manter um código bem identado, isso facilita a vida de quem fez o código, de quem vai ler e do professor deste curso :) se possível use um editor de texto que lhe ajude a programar, principalmente um que contenha syntax highlight. Se não tiver um favorito tente o Notepad++.

Ótimo, agora que sabemos como iniciar a utilização do ExtJS vamos começar com os exercícios:

1. Vamos praticar um pouco mais de “Ext.get”, temos em nosso código acima um exemplo de como fechar a janela no click de um botão. Crie mais um botão, não esqueça de colocar um id único para ele, e faça com que nossa janela abra somente quando este botão for clicado. Obs: coloque todo o código de criação da janela dentro do evento do botão e declare a variável fora dos eventos.

2. Vamos praticar um pouco de lógica. Os mais curiosos provavelmente perceberam que a cada vez que se clica no botão de criar a janela é criada uma nova janela, isso acontece porque a cada clique executamos nosso código de criação sem antes verificar se a janela já existe, sendo assim criamos uma nova janela para a mesma variável e a antiga continua lá, assim perdemos a referencia das janelas anteriores pela variável “win”, note que ao clicar no botão de fechar a janela somente a última janela se fecha. Faça uma estrutura básica de condição, um IF antes da criação da janela e verifique se a mesma ainda não foi criada para poder dar continuidade ao código. Exemplo de IF onde o alert será mostrado somente se a variável for um vazia, null:

//Será disparado o alertvar objeto = null;if(objeto === null){

alert('Objeto não criado');}

//Não será disparado o alertvar objeto = new Date();if(objeto === null){

alert('Objeto não criado');}

3. Você deve ter notado que ao fechar a janela não conseguimos mais abri-la, isso se deve ao fato de fecharmos a janela e não liberarmos a variável, adicione após o close() da janela o código win = null; para que ela passe em nosso teste de criação;

4. Altere as configurações da janela para que ela não possua o botão de fechar, que ela não possa ser redimensionada e que ela contenha um barra de status na parte inferior com um botão alinhado a direita escrito “Fechar” e que ao ser clicado feche a janela.

Traduzindo o ExtJSÉ extremamente fácil traduzir o ExtJS para sua língua, ele suporta até o momento cerca de

45 línguas além da padrão que o inglês e para isso basta adicionar mais um arquivo JavaScript (ext-3.2.0/src/locale/ext-lang-pt_BR.js) na página principal da aplicação e pronto. Esse procedimento irá traduzir o calendário, o formato das datas e alguns outros textos padrões como os botões SIM e NÃO do Ext.Msg.cofirm que é um dialogo de confirmação. Este arquivo deve ser incluído após a inclusão das libs do ExtJS e antes da inclusão 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>

XTypeO 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 formulário e 3 campos, onde o campo nome não 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();

Exercícios

5. Pegando o exemplo de formulário acima, faça com que o campo Sobrenome não permita ficar vazio e adicione os seguintes campos:

1. Endereço (campo texto);

2. Data Cadastro (campo data, não pode ser vazio);

3. Profissão (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: 'Profissão',width: 100,sortable: true,dataIndex: 'profissao'

},{id: 'idade',header: 'Idade',width: 50,sortable: true,dataIndex: 'idade'

}]

}]})win.show();

Exercícios

6. Pegando o exemplo de grid acima, adicione o campo Sobrenome no store, coloque dados para esse campo, faça com que ele apareça no grid e faça com que este campo não possa ser ordenado.

Parte Prática 1: Montando uma interface simplesCriar uma interface simples:

1. Criar um Viewport de layout border, contendo as regiões north, east, center e south;

2. Criar uma toolbar na região norte contendo os botões:

1. Cadastro (com submenu)

• Pessoas (Deve abrir a Aba de Cadastro Pessoas)

• Cidades (Sem funcionalidade por enquanto)

2. Teste (um botão toggle sem funcionalidade)

3. Um texto de boas vindas ao usuário

4. Sair (um botão sem funcionalidade alinhado a direita)

3. A região east deve ter o título “Propagandas”, largura de 100px e poder ser minimizada (collapse);

4. A região south de ter altura de 100px, o título “Noticias”, poder ser minimizada, vir minimizada por padrão, ser redimensionável e ter o modo de collapsed como “mini”;

5. A região center deve ser um tabPanel;6. Criar uma tab na região central com título “Olá Mundo” e que fique ativa por padrão

7. Ao clicar no botão “Cadastro > Pessoas” criar uma nova tab na região central contendo um grid conforme a figura abaixo.

8. O grid deve conter as colunas Nome, Idade e Profissão;

9. Para maiores detalhes comparem a figura abaixo com a sua tela.

AJAX

O que é, para que serve e quando usar.Citação de Wikipédia: AJAX (programação):

AJAX (acrônimo em língua inglesa de Asynchronous Javascript And XML) é o uso metodológico de tecnologias como Javascript e XML, providas por navegadores, para tornar páginas Web mais interativas com o usuário, utilizando-se de solicitações assíncronas de informações. AJAX não é somente um novo modelo, é também uma iniciativa na construção de aplicações Web mais dinâmicas e criativas. AJAX não é uma tecnologia — são realmente várias 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 página WEB, tornando assim possível a separação perfeita de uma aplicação 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 utilização 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 página, evitando assim também o tempo de espera no carregamento de uma página. A sua utilização não é recomendada para tráfego de informações importantes, como dados de login.

Importante, AJAX é uma requisição assíncrona, ou seja, o código continua a ser executado enquanto a requisição está em andamento, o código não espera pela resposta do servidor, por isso trabalhamos com funções de callback, uma função anonima passada para a requisição, esta função será chamada ao termino da requisição e receberá por parâmetro os dados da requisição e o retorno da mesma, sendo assim temos que trabalhar com os dados dentro deste callback.

Como o ExtJS se comunica com o servidorO ExtJS prove um componente não visual chamado Ext.Ajax a qual nos permite criar

requisições AJAX de forma fácil e clara, vários componentes do ExtJS se utilizam deste componente para realizar transações AJAX de maneira mais abstrata ao programador como os Stores, a propriedade autoLoad e o método load do componente Ext.Panel e seus derivados.

A comunicação em AJAX ocorre basicamente da seguinte forma:

1. É enviada uma requisição ao servidor, igualmente ao ato de abrir uma página, onde podem ser passados dados por POST ou GET, igual ao envio de um formulário da maneira tradicional;

2. Ocorre o processamento dos dados do lado servidor caso seja chamada uma página que contenha programação do lado servidor;

3. É retornado todo o código que seria impresso na tela para o usuário caso abríssemos a página diretamente pelo navegador.

Ou seja, se requisitarmos um arquivo texto, teremos o retorno exato do conteúdo deste arquivo, se requisitarmos um arquivo PHP teremos o retorno deste arquivo processado como se abríssemos este arquivo pelo navegador. Sendo assim, nosso retorno é um texto puro, podendo ele conter HTML ou não.

No ExtJS podemos dizer que a forma de trabalharmos com AJAX é um pouco diferente, podemos criar uma requisição AJAX na mão e trabalharmos com o retorno dela de forma normal, porém quando usamos de componentes que fazem este acesso por nós ficamos sujeitos a algumas convenções. Em geral ao criarmos uma requisição 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 ApacheA instalação do servidor Apache é simples e se resume no seguinte:

1. Baixar a ultima versão do arquivo binário Win32 sem OpenSSL (MSI Installer) no site do Apache;

2. Executar o instalador;

3. Na primeira tela basta clicar no botão Next;4. Nesta tela temos que aceitar os termos da licença, 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 configurações do nosso servidor, para questão

de teste coloque dados fictícios 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 opção Typical para fazer a instalação padrão e clique em Next;8. Nesta tela selecione a pasta de instalação, recomendo deixar a pasta padrão e clique

em Next;9. Nesta tela clique em Install e aguarde a instalação.

10. Irá abrir uma tela de instalação 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!, parabéns você é o mais novo proprietário do seu próprio servidor WEB.

A pasta padrão do servidor Apache onde devem ficar os arquivos do seu site é uma pasta chamada htdocs, esta pasta fica dentro da pasta de instalação do servidor apache. Caso você queira trocar esta pasta para um caminho mais amigável 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 instalação do apache e trocar as duas ocorrências do caminho padrão pelo caminho desejado e reiniciar o apache. Dica, use o comando de procurar e procure por htdocs.

Testando o AJAX do ExtJSVale lembrar que AJAX é uma comunicação de dados entre cliente e servidor, por isso só

podemos utilizá-lo em arquivos que estejam rodando através 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 através do servidor verifique se o inicio da URL em seu navegador consiste em http://localhost/.

Exemplo 1: AJAX e manipulação 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 código:Ext.Ajax.request({

url: 'noticia.txt',success: function(retorno){

alert(retorno.responseText)}

})

3. Crie um arquivo chamado noticia.txt e coloque o seguinte conteúdo:

Notícia carregada por AJAX. Forma interessante de se trabalhar.

Exemplo 2: AJAX e carregamento de conteúdo de forma simplificada:

1. Crie os arquivos HTML e JS como de costume;

2. Dentro do Ext.onReady do arquivo JS coloque o seguinte código: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 conteúdo:Notícia carregada por AJAX.<br />Forma interessante de se trabalhar.

Exercícios

7. Pegando o exercício 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 não serão carregados, temos que dizer ao Store para carregá-los e para isso há duas formas, colocar autoLoad: true como configuração do Store, ou depois de criá-lo pegar sua referencia e executar o método load (meuStore.load()). Como não temos referencia do Store e nem um id para o mesmo temos de usar a opção autoLoad: true que faz com que os dados sejam carregados assim que o Store for criado.

Parte Prática 2: Interagindo nossa interface com o servidorAltere nosso pequeno sistema para que os dados passem a ser carregados por AJAX de

arquivos .txt no lado servidor. Faça com que possam ser inseridos dados nos Grids através de formulários, analise, estude a escolha um dos métodos usados no arquivo pratica1.1.js. Crie novos cadastros para praticar um pouco mais. E faça 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 PHPCitação de Wikipédia: PHP:

PHP (um acrónimo recursivo para "PHP: Hypertext Preprocessor") é uma linguagem de programação de computadores interpretada, livre e muito utilizada para gerar conteúdo dinâmico na World Wide Web, como por exemplo a Wikipédia.

A linguagem PHP é uma linguagem de programação de domínio específico, ou seja, seu escopo se estende a um campo de atuação que é o desenvolvimento web, embora tenha variantes como o PHP-GTK. Seu propósito principal é de implementar soluções web velozes, simples e eficientes.Características:

• Velocidade e robustez

• Estruturado e orientação a objeto

• Portabilidade - independência 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 código como o conteúdo de um IF por exemplo, temos variáveis com tipagem entre outras coisas. O PHP nos permite manipular os dados no lado servidor de nossa aplicação 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 usuário verá se acessar a pagina .php ou o que receberemos por AJAX se requisitarmos esta página .php.

Instalando o PHPA instalação do PHP é ainda mais fácil que a instalação 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 licença e clique em Next;5. Na terceira tela, “Destination Folder”, selecione o caminho de instalação ou deixe o

padrão e clique em Next;6. Na quarta tela, “Web Server Setup”, selecione a opção “Apache 2.2.x Module” para

que o PHP configure o Apache para nós e clique em Next;7. Na quinta tela, “Apache Configuration Directory”, selecione a pasta de configuração

do Apache que é a pasta conf dentro da pasta de instalação 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 extensões que queremos instalar junto ao PHP, verifique se a extensão PostgreSQL está selecionada, se não estiver selecione-a clicando no ícone ao lado do nome e clicando na primeira opção da lista. Caso deseje usar outro banco como o MySQL faça a ativação da extensão para o banco desejado e clique em Next;

9. Na sétima tela, “Ready to install PHP ...”, clique em Install e aguarde o término do processo de instalação;

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:

<?phpphpinfo();

?>13. Abra o arquivo no navegador através do localhost e veja se apareceu o relatório das

configurações do PHP.

Parte Prática 3: Interagindo nossa interface com o servidorTroque nossos arquivos .txt que contém nossos dados em formato JSON por arquivos .php

e crie neles a estrutura de dados como exemplificado abaixo.

Exemplo de impressão 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 PostgreSQLCitação de Wikipédia: PostgreSQL :

Hoje, o PostgreSQL é um dos SGBDs (Sistema Gerenciador de Bancos de Dados) de código aberto mais avançados, contando com recursos como:

• consultas complexas • chaves estrangeiras • integridade transacional • controle de concorrência multi-versão • suporte ao modelo híbrido objeto-relacional • gatilhos • visões • Linguagem Procedural em várias linguagens (PL/pgSQL, PL/Python, PL/Java,

PL/Perl) para procedimentos armazenagem • Indexação por texto • Estrutura para guardar dados Georeferenciados PostGIS

Instalando o PostgreSQL e o PgAdminVamos instalar o PostgreSQL:

1. Baixe a última versão do instalador do PostgreSQL para windows aqui, baixe o “the one click installer”;

2. Execute o instalador e aguarde o início da tela de configurações;

3. Na primeira tela, “Setup – PostgreSQL”, clique em Next;4. Na segunda tela, “Installation Directory”, selecione um diretório de instalação ou

deixe o padrão e cliqe em Next;5. Na terceira tela, “Data Directory”, selecione o diretório que conterá os arquivos dos

bancos de dados do PostgreSQL ou deixe o padrão e clique em Next;6. Na quarta tela, “Password”, informe uma senha para o super-usuário (postgres) do

banco, será criado um usuário 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 serviço de banco de dados do PostgreSQL ou deixe a porta padrão 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 sétima tela, “Ready to Install”, clique em Next e aguarde a instalação terminar;

10. Na oitava tela, “Completing the PostgreSQL Setup Wizard”, desmarque a opção “Launch Stack Builder at Exit” e clique em Finish;

11. Procure no menu iniciar pelo diretório 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 usuário postgres;

13. Estamos prontos para começar a criar nosso banco de dados.

Criando nosso Banco de Dados1. Abra o PgAdmin;

2. Crie um novo banco de dados de nome “extjs”, dono “postgres” e codificação “UTF8”;

3. Conecte no banco “extjs” recém 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;

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

• id, integer, PK;

• cidade, character variyng (20);

• uf, character variyng (2);

Parte Prática 4: Tornando nossa aplicação funcional1. SELECT: Altere nossos arquivos .php para que ele busque as informações 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'; //Usuário$pw = 'postgres'; //Senha

//Tenta conectar e passar a referencia para $db, se não for possível//ele termina a execução com erro e imprime o erro do bancoif(!$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 sucessoif($result){

//Pega todos os dados da consulta em um array bidimensional//e os codifica para JSONecho 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 ação estamos requisitando, agora teremos duas ações (SELECT e INSERT) e no arquivo JS precisamos enviar as informações do formulário para o PHP e também precisamos enviar qual a ação que queremos realizar.

• JS: O FormPanel possui um método interno pra enviar os dados por ajax para o servidor, é o método submit do formulário interno que também possui o método isValid que verifica se todos os campos estão corretos de acordo com suas validações. Observação importante, cada campo do formulário 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 corretosif(Ext.getCmp('idDoFormPanel').getForm().isValid()){Ext.getCmp('idDoFormPanel').getForm().submit({

url: 'arquivo.php', //url do arquivo a receber os dadosparams: { //parametros adicionais

acao: 'insert'},success: function(){

//Código a ser executado ao termino do AJAX//Como recarregar um grid por exemplo;

}})

}else{alert('campos inválidos');

}• PHP: Antes tínhamos apenas uma ação para o arquivo PHP em questão 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 ação o lado cliente está requisitando, para isso passamos um parâmetro por POST ao arquivo informando qual a ação a ser executada e dentro do código PHP podemos fazer um IF e separa os blocos de ação. O código abaixo não substitui o código já criado no arquivo PHP, é apenas um exemplo de como implementar a condição da ação 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 código a ser executado case não seja ação 'insert'//Como o select por exemplo;

}

3. DELETE: Para implementarmos a deleção precisamos alterar os dois lados da aplicação.

• JS: Precisamos adicionar o campo ID no nosso store para que possamos envia-lo ao PHP para identificar qual registro queremos excluir, esta alteração não exemplificarei aqui pois é simples, e precisamos adicionar um botão em nossa tela, na TBAR por exemplo, e definir em seu HANDLER um requisição ajax enviando a ação quer queremos realizar e o ID do registro a ser excluído. 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 ação:if($_POST['acao'] == 'insert'){

//Código da ação de insert}else if($_POST['acao'] == 'delete'){

$id = $_POST['id'];$result = pg_query($db, "DELETE FROM pessoas WHERE id = $id");

}else{//Código da ação de select

}4. UPDATE: Essa é uma ação complicada, ela se resume em pegar a linha selecionada no grid,

carregar estes dados para um formulário de forma que o usuário possa editar as informações e enviá-las por submit com a ação de update.

• JS: Crie um botão para a alteração, copie o handler do botão de adicionar, coloque um IF em torno deste código verificando se existe uma linha selecionada no grid, adicione um campo a mais no formulário 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 formulário (os campos devem ter os mesmos nomes dos campos do store) e no handler do botão de salvar altere a ação para update:

//código a ser adicionado a window//listeners é uma propriedade da window assim como height, width, etclisteners:{

show: function(){var form = Ext.getCmp('formPessoas').getForm();form.loadRecord(grid.getSelectionModel().getSelected());

}}

• PHP: Temos de adicionar mas um bloco de código: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 necessidadesExt.extend e Ext.override são formas de modificar e adicionar classes da biblioteca ExtJS,

ambos são funções internas da biblioteca.

1. Extend: Esta função nos permite estender uma classe já existente adicionando novas propriedades, métodos, eventos e valores padrão. Um bom e simples exemplo seria estender a classe Window para uma classe chamada MyWindow e adicionar a ela altura e largura padrão:

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 função nos permite adicionar funcionalidades a uma classe já existente sem que seja necessária a criação de uma nova classe. Um bom exemplo seria adicionar um método a classe Ext.data.Store que nos permita adicionar registros mais facilmente como demonstrado no código abaixo, um exemplo mais complexo e de grande utilidade é um override que nos permite adicionar colunas em um formulário de forma fácil 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 tínhamos de proceder assim://store.insert(0, new store.recordType(form.getForm().getValues()));

//Após o override podemos proceder assim://store.insertRecord(form.getForm().getValues());

Praticando um pouco mais

Criando mais cadastros em nossa aplicaçãoEsta parte está destinada a última aula deste curso e consiste em criar novos cadastros para

praticarmos um pouco mais, esta criação de novos cadastros envolve criação de tabelas no banco de dados, criação dos arquivos PHP necessários e adição dos códigos JavaScript necessários.

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 criação de um cadastro de estados fazendo as alterações na tabela e tela do cadastro de cidades para efetuar a ligação entre ambos e que o usuário possa selecionar em um combobox o estado da cidade.

E por fim aconselho a todos soltar a imaginação, estudar os exemplos e a documentação e claro, pedir ajuda a alguém mais experiente em ExtJS, no caso deste curso presencial, o professor.

Fim

AgradecimentosObrigado 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 Informação Marcelo Azambuja.

Abraços a todos.