Академический Документы
Профессиональный Документы
Культура Документы
Rodrigo K. Nascimento
rodrigoknascimento@gmail.com
FACCAT
Atualizado em 26 de Novembro de 2009
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............................................................................................3
Formato de dados, funes e estrutura........................................................................................3
ExtJS................................................................................................................................................6
Conhecendo o ExtJS...................................................................................................................6
Instalando o ExtJS e testando......................................................................................................8
Parte Prtica 1: Montando uma interface simples.....................................................................12
AJAX.............................................................................................................................................13
O que , para que serve e quando usar......................................................................................13
Como o ExtJS se comunica com o servidor..............................................................................13
Instalando o servidor Apache....................................................................................................14
Testando o AJAX do ExtJS.......................................................................................................14
Parte Prtica 2: Interagindo nossa interface com o servidor.....................................................15
PHP................................................................................................................................................16
Conhecendo o PHP...................................................................................................................16
Instalando o PHP.......................................................................................................................16
Parte Prtica 3: Interagindo nossa interface com o servidor.....................................................17
PostgreSQL....................................................................................................................................18
Conhecendo o PostgreSQL.......................................................................................................18
Instalando o PostgreSQL e o PgAdmin.....................................................................................18
Criando nosso Banco de Dados................................................................................................19
Parte Prtica 4: Tornando nossa aplicao funcional................................................................19
Extend e Override..........................................................................................................................22
Adaptando o ExtJS as nossas necessidades..............................................................................22
Praticando um pouco mais.............................................................................................................23
Criando mais cadastros em nossa aplicao..............................................................................23
Fim.................................................................................................................................................24
Agradecimentos........................................................................................................................24
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
req = new ActiveXObject(Microsoft.XMLHTTP);
Firefox
req = new XMLHttpRequest();
Operadores aritmticos:
+ x+y Soma ou concatena y a x;
- xy Subtrai y de x;
* x*y Multiplica x por y;
% x%y Retorna o resto da diviso de x por y;
/ x/y Divide x por y;
++ x++ Adiciona 1 a x;
-- x-- Subtrai 1 de 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.
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'}];
var variavel1 = {nome:['Joo','Jorge']};
Uma classe em JavaScript uma funo que contm variveis e funes referenciadas a si,
ou seja, declaradas com thi, 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:
classe1.prototype.quantidadePessoas=function(){
return this.pessoas.length
}
obj1.quantidadePessoas(); //Deve retornar 1;
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 preenche-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 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 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 extra-
oficialmente 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
Pode ser utilizado sob a GPL ou pode-se adquirir uma licena comercial, alm de ser
possvel a compra de suporte tcnico.
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.
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.
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;
http://www.extjs.com/deploy/dev/examples/samples.html
http://www.extjs.com/deploy/dev/docs/
No momento em que escrevo esta apostila a verso atual da biblioteca do ExtJS 3.0.0.
Instalando o ExtJS e testando
Instalando:
1. Entre na rea de download do site do ExtJS e faa a download da verso 3.0.0 da biblioteca,
ela vir compactada;
2. Dentro do pacote ZIP existe uma pasta chamada ext-3.0.0, extraia-a para uma pasta em seu
computador, se voc tiver um servidor web instalado aproveite para coloca-la dentro da
pasta do seu servidor;
Testando:
1. Crie um arquivo chamado index.html na mesma pasta que contm a pasta ext-3.0.0;
2. Crie um arquivo chamado index.js;
3. Abra o arquivo index.html e escreva o seguinte cdigo:
<html>
<head>
<title>Testando o ExtJS</title>
<link rel="stylesheet" type="text/css" href="ext-
3.0.0/resources/css/ext-all.css" />
<script src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script src="ext-3.0.0/ext-all.js"></script>
<script src="index.js"></script>
</head>
<body>
</body>
<button id="btClose">Fechar Janela</button>
</html>
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:
1. 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;
2. ext-all.js contm o cdigo de todos os componentes visuais e no visuais da biblioteca;
3. 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:
1. 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;
2. Criamos para uma varivel chamada win um compoente chamado Window (janela)
com largura de 300px, altura de 200px, titulo e um pequeno texto;
3. 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;
4. Ext.get(). Lembra do document.getElementById()? Pois , podemos compara-lo a
ele, com uma pequena diferena, Ext.get nos traz um elemento pelo id que ele contm na
sua tab 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 paramentos, o nome do evento a se associar, a funo de callback que
queremos executar quando esse evento ocorrer e o escopo, o escopo um paramentro
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 quantidade
for igual a zero:
var qtd = 0;
if(qtd === 0){
alert('quantidade zerada');
}
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.
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();
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
nulo e adicione os seguintes campos:
1. Endereo (campo texto);
2. Data Cadastro (campo data, no pode ser nulo);
3. Profisso (Campo texto).
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.
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.
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.
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 carrega-los e para
isso h duas formas, colocar autoLoad:true como configurao do store, ou depois de cria-lo
pegar sua referencia e executar o mtodo laod (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.
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 icone 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.
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
})
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 tinhamos de proceder assim:
//store.insert(0, new store.recordType(form.getForm().getValues()));
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.