Programação Web com Zend Framework e Ajax com Dojo

64
Fabio Ginzel Fabio Ginzel [email protected] [email protected]

description

Mini-Curso ministrado por Fabio Ginzel abortando os conceitos basicos de programação para web indo até zend framework e dojo

Transcript of Programação Web com Zend Framework e Ajax com Dojo

Page 1: Programação Web com Zend Framework e Ajax com Dojo

Fabio GinzelFabio Ginzel

[email protected]@pandora.com.br

Page 2: Programação Web com Zend Framework e Ajax com Dojo

PROGRAMAÇÃO

WEB

Page 3: Programação Web com Zend Framework e Ajax com Dojo

OBJETIVO:OBJETIVO:

1.1. Compreender conceitos básicos do Compreender conceitos básicos do funcionamento da internet;funcionamento da internet;

2.2. Entender as mudanças da antiga web para a Entender as mudanças da antiga web para a nova web (web 2.0)nova web (web 2.0)

3.3. Entender o fluxo de uma aplicação webEntender o fluxo de uma aplicação web

4.4. Saber o “nosso” modo de programar para Saber o “nosso” modo de programar para webweb

1.1. Compreender conceitos básicos do Compreender conceitos básicos do funcionamento da internet;funcionamento da internet;

2.2. Entender as mudanças da antiga web para a Entender as mudanças da antiga web para a nova web (web 2.0)nova web (web 2.0)

3.3. Entender o fluxo de uma aplicação webEntender o fluxo de uma aplicação web

4.4. Saber o “nosso” modo de programar para Saber o “nosso” modo de programar para webweb

Page 4: Programação Web com Zend Framework e Ajax com Dojo

RESUMORESUMO

1.1. Conceitos de WebConceitos de Web

2.2. Ferramentas de ProgramaçãoFerramentas de Programação

3.3. O DesenvolvimentoO Desenvolvimento

1.1. Conceitos de WebConceitos de Web

2.2. Ferramentas de ProgramaçãoFerramentas de Programação

3.3. O DesenvolvimentoO Desenvolvimento

Page 5: Programação Web com Zend Framework e Ajax com Dojo

Conceitos de WebConceitos de Web

1.1. Conceitos de WebConceitos de Web

1.11.1 JavaScriptJavaScript

1.21.2 RequisiçãoRequisição

1.31.3 Web “1.0”Web “1.0”

1.41.4 Web “2.0”Web “2.0”

1.51.5 AjaxAjax

1.61.6 CSSCSS

1.1. Conceitos de WebConceitos de Web

1.11.1 JavaScriptJavaScript

1.21.2 RequisiçãoRequisição

1.31.3 Web “1.0”Web “1.0”

1.41.4 Web “2.0”Web “2.0”

1.51.5 AjaxAjax

1.61.6 CSSCSS

Page 6: Programação Web com Zend Framework e Ajax com Dojo

JavaScriptJavaScript

- Linguagem interpretadaLinguagem interpretada- Roda do lado do cliente (quem interpreta é Roda do lado do cliente (quem interpreta é

o browser)o browser)- Consegue alterar elementos html Consegue alterar elementos html

dinamicamente, por isso é usada para dinamicamente, por isso é usada para validações dinamicas.validações dinamicas.

- Pode estar dentro do html ou em um Pode estar dentro do html ou em um arquivo separadoarquivo separado

- Pode ter funções ou nãoPode ter funções ou não

- Linguagem interpretadaLinguagem interpretada- Roda do lado do cliente (quem interpreta é Roda do lado do cliente (quem interpreta é

o browser)o browser)- Consegue alterar elementos html Consegue alterar elementos html

dinamicamente, por isso é usada para dinamicamente, por isso é usada para validações dinamicas.validações dinamicas.

- Pode estar dentro do html ou em um Pode estar dentro do html ou em um arquivo separadoarquivo separado

- Pode ter funções ou nãoPode ter funções ou não

Page 7: Programação Web com Zend Framework e Ajax com Dojo

JavaScript dentro de um arquivo JavaScript dentro de um arquivo HTMLHTML

Com Função:Com Função:<script type="text/javascript"> <script type="text/javascript">

function msgErro(erro){function msgErro(erro){alert(“O erro foi: “ + erro);alert(“O erro foi: “ + erro);

} } </script> </script> Sem Função:Sem Função:<script type="text/javascript"> <script type="text/javascript">

alert(“Seu Browser passou por aqui”);alert(“Seu Browser passou por aqui”);</script> </script>

Com Função:Com Função:<script type="text/javascript"> <script type="text/javascript">

function msgErro(erro){function msgErro(erro){alert(“O erro foi: “ + erro);alert(“O erro foi: “ + erro);

} } </script> </script> Sem Função:Sem Função:<script type="text/javascript"> <script type="text/javascript">

alert(“Seu Browser passou por aqui”);alert(“Seu Browser passou por aqui”);</script> </script>

Page 8: Programação Web com Zend Framework e Ajax com Dojo

JavaScript ExternoJavaScript Externo

No html:No html:<script type="text/javascript“ src=“/apresentacao/arquivo.js"></script> <script type="text/javascript“ src=“/apresentacao/arquivo.js"></script>

No Arquivo (arquivo.js):No Arquivo (arquivo.js):grupo = {grupo = {

msgErro : function(erro){msgErro : function(erro){

alert(“Msg de erro dentro de arquivo: “ + erro) ;alert(“Msg de erro dentro de arquivo: “ + erro) ;

},},

escreveNaDiv : function(msg){escreveNaDiv : function(msg){

document.getElementByID(“nomeDaDiv”).innerHTML = document.getElementByID(“nomeDaDiv”).innerHTML = msg ;msg ;

}}

};};

alert(“passou pelo arquivo”) ;alert(“passou pelo arquivo”) ;

No html:No html:<script type="text/javascript“ src=“/apresentacao/arquivo.js"></script> <script type="text/javascript“ src=“/apresentacao/arquivo.js"></script>

No Arquivo (arquivo.js):No Arquivo (arquivo.js):grupo = {grupo = {

msgErro : function(erro){msgErro : function(erro){

alert(“Msg de erro dentro de arquivo: “ + erro) ;alert(“Msg de erro dentro de arquivo: “ + erro) ;

},},

escreveNaDiv : function(msg){escreveNaDiv : function(msg){

document.getElementByID(“nomeDaDiv”).innerHTML = document.getElementByID(“nomeDaDiv”).innerHTML = msg ;msg ;

}}

};};

alert(“passou pelo arquivo”) ;alert(“passou pelo arquivo”) ;

Page 9: Programação Web com Zend Framework e Ajax com Dojo

RequisiçãoRequisição

Uma mensagem enviada pelo cliente Uma mensagem enviada pelo cliente (browser) para o servidor web (browser) para o servidor web solicitando dadossolicitando dados

Existem diversos “metodos” de Existem diversos “metodos” de requisição, que diz o que o servidor requisição, que diz o que o servidor deve fazer com aquela requisiçãodeve fazer com aquela requisição

Usamos basicamente 2: Get e PostUsamos basicamente 2: Get e Post

Uma mensagem enviada pelo cliente Uma mensagem enviada pelo cliente (browser) para o servidor web (browser) para o servidor web solicitando dadossolicitando dados

Existem diversos “metodos” de Existem diversos “metodos” de requisição, que diz o que o servidor requisição, que diz o que o servidor deve fazer com aquela requisiçãodeve fazer com aquela requisição

Usamos basicamente 2: Get e PostUsamos basicamente 2: Get e Post

Page 10: Programação Web com Zend Framework e Ajax com Dojo

Método GetMétodo Get Solicita a resposta do servidor dado um Solicita a resposta do servidor dado um

determinado endereço (nada mais)determinado endereço (nada mais) Nesse endereço podem conter parametros Nesse endereço podem conter parametros

da requisição.da requisição. Uma aplicação pode receber esses Uma aplicação pode receber esses

parametros e decidir quais dados retornarparametros e decidir quais dados retornar Ex: Ex: http://www.pandora.com.brhttp://www.pandora.com.br Com parâmetros:Com parâmetros: http://www.orkut.com.br/http://www.orkut.com.br/

Main#Community?cmm=161395Main#Community?cmm=161395

Solicita a resposta do servidor dado um Solicita a resposta do servidor dado um determinado endereço (nada mais)determinado endereço (nada mais)

Nesse endereço podem conter parametros Nesse endereço podem conter parametros da requisição.da requisição.

Uma aplicação pode receber esses Uma aplicação pode receber esses parametros e decidir quais dados retornarparametros e decidir quais dados retornar

Ex: Ex: http://www.pandora.com.brhttp://www.pandora.com.br Com parâmetros:Com parâmetros: http://www.orkut.com.br/http://www.orkut.com.br/

Main#Community?cmm=161395Main#Community?cmm=161395

Page 11: Programação Web com Zend Framework e Ajax com Dojo

Método PostMétodo Post Solicita a resposta do servidor dado um Solicita a resposta do servidor dado um

determinado endereço e uma série determinado endereço e uma série ilimitada de parametros que vão no corpo ilimitada de parametros que vão no corpo da mensagemda mensagem

O Endereço se mantem inalterado e os O Endereço se mantem inalterado e os parametros vão de forma que o usuário parametros vão de forma que o usuário não percebanão perceba

Exemplo: preenchimento de um Exemplo: preenchimento de um formulário, após clicar no OK.formulário, após clicar no OK.

Solicita a resposta do servidor dado um Solicita a resposta do servidor dado um determinado endereço e uma série determinado endereço e uma série ilimitada de parametros que vão no corpo ilimitada de parametros que vão no corpo da mensagemda mensagem

O Endereço se mantem inalterado e os O Endereço se mantem inalterado e os parametros vão de forma que o usuário parametros vão de forma que o usuário não percebanão perceba

Exemplo: preenchimento de um Exemplo: preenchimento de um formulário, após clicar no OK.formulário, após clicar no OK.

Page 12: Programação Web com Zend Framework e Ajax com Dojo

Post e Get ComparativoPost e Get Comparativo O get tem uma limitação de quantidade de O get tem uma limitação de quantidade de

parametros, já que o endereço do site tem parametros, já que o endereço do site tem um limiteum limite

Não da para gravar no favoritos ou no Não da para gravar no favoritos ou no historico um pagina gerada atraves de um historico um pagina gerada atraves de um dado que vai no postdado que vai no post

O get tem uma limitação de quantidade de O get tem uma limitação de quantidade de parametros, já que o endereço do site tem parametros, já que o endereço do site tem um limiteum limite

Não da para gravar no favoritos ou no Não da para gravar no favoritos ou no historico um pagina gerada atraves de um historico um pagina gerada atraves de um dado que vai no postdado que vai no post

Page 13: Programação Web com Zend Framework e Ajax com Dojo

Post e Get: Quando Usar?Post e Get: Quando Usar? Usar o Get em paginação ou em paginas Usar o Get em paginação ou em paginas

que o usuario pode querer acessar que o usuario pode querer acessar diretamente sem passar por diretamente sem passar por intermediariosintermediarios

Usar o post em todos os outros casos, Usar o post em todos os outros casos, resumindo... Em Formulários.resumindo... Em Formulários.

Usar o Get em paginação ou em paginas Usar o Get em paginação ou em paginas que o usuario pode querer acessar que o usuario pode querer acessar diretamente sem passar por diretamente sem passar por intermediariosintermediarios

Usar o post em todos os outros casos, Usar o post em todos os outros casos, resumindo... Em Formulários.resumindo... Em Formulários.

Page 14: Programação Web com Zend Framework e Ajax com Dojo

Web “1.0”Web “1.0” Paginas estaticas, sem interação com Paginas estaticas, sem interação com

usuário, onde o servidor web retorna usuário, onde o servidor web retorna sempre uma pagina completasempre uma pagina completa

O Browser (cliente) só tem o trabalho de O Browser (cliente) só tem o trabalho de exibir a pagina que o servidor retornou.exibir a pagina que o servidor retornou.

O Usuário é apenas um leitor da O Usuário é apenas um leitor da informação. informação.

Ex:Ex:

http://www.sindicato.com.br/http://www.sindicato.com.br/

Paginas estaticas, sem interação com Paginas estaticas, sem interação com usuário, onde o servidor web retorna usuário, onde o servidor web retorna sempre uma pagina completasempre uma pagina completa

O Browser (cliente) só tem o trabalho de O Browser (cliente) só tem o trabalho de exibir a pagina que o servidor retornou.exibir a pagina que o servidor retornou.

O Usuário é apenas um leitor da O Usuário é apenas um leitor da informação. informação.

Ex:Ex:

http://www.sindicato.com.br/http://www.sindicato.com.br/

Page 15: Programação Web com Zend Framework e Ajax com Dojo

Web “2.0”Web “2.0” Paginas dinamicas, alteradas com a Paginas dinamicas, alteradas com a

participação do usuário.participação do usuário. O Usuário deixa de ser um leitor, ele passa O Usuário deixa de ser um leitor, ele passa

ser um escritor daquela pagina, ser um escritor daquela pagina, solicitando e cadastrando informações.solicitando e cadastrando informações.

O Browser (cliente) passa a fazer parte da O Browser (cliente) passa a fazer parte da programação, interpretando javascripts programação, interpretando javascripts que fazem a interação acontecer.que fazem a interação acontecer.

Ex:Ex:

http://www.orkut.com/http://www.orkut.com/

Paginas dinamicas, alteradas com a Paginas dinamicas, alteradas com a participação do usuário.participação do usuário.

O Usuário deixa de ser um leitor, ele passa O Usuário deixa de ser um leitor, ele passa ser um escritor daquela pagina, ser um escritor daquela pagina, solicitando e cadastrando informações.solicitando e cadastrando informações.

O Browser (cliente) passa a fazer parte da O Browser (cliente) passa a fazer parte da programação, interpretando javascripts programação, interpretando javascripts que fazem a interação acontecer.que fazem a interação acontecer.

Ex:Ex:

http://www.orkut.com/http://www.orkut.com/

Page 16: Programação Web com Zend Framework e Ajax com Dojo

AjaxAjax Nova Linguagem?Nova Linguagem? Grande Inovação?Grande Inovação?

Nova Linguagem?Nova Linguagem? Grande Inovação?Grande Inovação?

Page 17: Programação Web com Zend Framework e Ajax com Dojo

AJAXAJAX Asynchronous Javascript And XMLAsynchronous Javascript And XML Nada mais do que o uso do Nada mais do que o uso do

javascript para fazer requisição ao javascript para fazer requisição ao servidor web, retornando apenas servidor web, retornando apenas dados e não mais uma pagina inteira.dados e não mais uma pagina inteira.

Manuseando esses dados retornados Manuseando esses dados retornados na tela de forma a criar uma pagina na tela de forma a criar uma pagina dinamicadinamica

Ex. Qualquer grid dos nossos sistemas Ex. Qualquer grid dos nossos sistemas atuaisatuais

Asynchronous Javascript And XMLAsynchronous Javascript And XML Nada mais do que o uso do Nada mais do que o uso do

javascript para fazer requisição ao javascript para fazer requisição ao servidor web, retornando apenas servidor web, retornando apenas dados e não mais uma pagina inteira.dados e não mais uma pagina inteira.

Manuseando esses dados retornados Manuseando esses dados retornados na tela de forma a criar uma pagina na tela de forma a criar uma pagina dinamicadinamica

Ex. Qualquer grid dos nossos sistemas Ex. Qualquer grid dos nossos sistemas atuaisatuais

Page 18: Programação Web com Zend Framework e Ajax com Dojo

AJAX - PrincipiosAJAX - Principios O navegador hospeda uma aplicação, e não O navegador hospeda uma aplicação, e não

conteúdoconteúdo O O servidorservidor fornece dados, e não conteúdo fornece dados, e não conteúdo A interação do utilizador com a aplicação A interação do utilizador com a aplicação

pode ser flexível e contínuapode ser flexível e contínua

O navegador hospeda uma aplicação, e não O navegador hospeda uma aplicação, e não conteúdoconteúdo

O O servidorservidor fornece dados, e não conteúdo fornece dados, e não conteúdo A interação do utilizador com a aplicação A interação do utilizador com a aplicação

pode ser flexível e contínuapode ser flexível e contínua

Page 19: Programação Web com Zend Framework e Ajax com Dojo

AJAX – Visão GeralAJAX – Visão Geral

Page 20: Programação Web com Zend Framework e Ajax com Dojo

AJAX - BibliotecasAJAX - Bibliotecas- Existem diversas bibliotecas para ajudar no uso de Existem diversas bibliotecas para ajudar no uso de

ajax, as mais conhecidas são:ajax, as mais conhecidas são:

YUI - Yahoo! UI LibraryYUI - Yahoo! UI Library jQueryjQuery GWT – GoogleGWT – Google DojoDojo

TODAS COM O MESMO PRINCIPIO DE TODAS COM O MESMO PRINCIPIO DE REQUISIÇÃO DE DADOS NÃO DE PAGINA!REQUISIÇÃO DE DADOS NÃO DE PAGINA!

- Existem diversas bibliotecas para ajudar no uso de Existem diversas bibliotecas para ajudar no uso de ajax, as mais conhecidas são:ajax, as mais conhecidas são:

YUI - Yahoo! UI LibraryYUI - Yahoo! UI Library jQueryjQuery GWT – GoogleGWT – Google DojoDojo

TODAS COM O MESMO PRINCIPIO DE TODAS COM O MESMO PRINCIPIO DE REQUISIÇÃO DE DADOS NÃO DE PAGINA!REQUISIÇÃO DE DADOS NÃO DE PAGINA!

Page 21: Programação Web com Zend Framework e Ajax com Dojo

CSSCSS Usado para dar forma a pagina, mudar a Usado para dar forma a pagina, mudar a

posição de objetos, mudar cores, posição de objetos, mudar cores, tamanhos, fonte... Etctamanhos, fonte... Etc

Como o css só mexe na parte visual, Como o css só mexe na parte visual, podemos deixar a cargo de um podemos deixar a cargo de um webdesignerwebdesigner

Estas propriedades tambêm podem estar Estas propriedades tambêm podem estar “embutidas” no objeto não podendo “embutidas” no objeto não podendo assim ser alteradas por um css. Ex:assim ser alteradas por um css. Ex:

<button style<button style=“width:100px”=“width:100px” id="btnLogin" type="button">Login</button> id="btnLogin" type="button">Login</button>

Não é uma boa pratica!Não é uma boa pratica!

Usado para dar forma a pagina, mudar a Usado para dar forma a pagina, mudar a posição de objetos, mudar cores, posição de objetos, mudar cores, tamanhos, fonte... Etctamanhos, fonte... Etc

Como o css só mexe na parte visual, Como o css só mexe na parte visual, podemos deixar a cargo de um podemos deixar a cargo de um webdesignerwebdesigner

Estas propriedades tambêm podem estar Estas propriedades tambêm podem estar “embutidas” no objeto não podendo “embutidas” no objeto não podendo assim ser alteradas por um css. Ex:assim ser alteradas por um css. Ex:

<button style<button style=“width:100px”=“width:100px” id="btnLogin" type="button">Login</button> id="btnLogin" type="button">Login</button>

Não é uma boa pratica!Não é uma boa pratica!

Page 22: Programação Web com Zend Framework e Ajax com Dojo

CSSCSS Assim como javascript o css pode Assim como javascript o css pode

estar contido no html ou em um estar contido no html ou em um arquivo separado.arquivo separado.

Tambem é interpretado pelo browserTambem é interpretado pelo browser O Ideal é sempre fazer parte de um O Ideal é sempre fazer parte de um

arquivo separado, para o arquivo separado, para o webdesigner ter total liberdade, alem webdesigner ter total liberdade, alem de possibilitar a alteração do visual de possibilitar a alteração do visual da pagina alterando apenas um da pagina alterando apenas um arquivoarquivo

Assim como javascript o css pode Assim como javascript o css pode estar contido no html ou em um estar contido no html ou em um arquivo separado.arquivo separado.

Tambem é interpretado pelo browserTambem é interpretado pelo browser O Ideal é sempre fazer parte de um O Ideal é sempre fazer parte de um

arquivo separado, para o arquivo separado, para o webdesigner ter total liberdade, alem webdesigner ter total liberdade, alem de possibilitar a alteração do visual de possibilitar a alteração do visual da pagina alterando apenas um da pagina alterando apenas um arquivoarquivo

Page 23: Programação Web com Zend Framework e Ajax com Dojo

CSS - ExemploCSS - Exemplo No HTML:No HTML: <link href="/apresentacao/estilo.css" media="screen" <link href="/apresentacao/estilo.css" media="screen"

rel="stylesheet" type="text/css" />rel="stylesheet" type="text/css" /> <button id="btnLogin“ class= “classLoggin” <button id="btnLogin“ class= “classLoggin”

type="button">Login</button>type="button">Login</button>

Estilo.cssEstilo.css #btnLogin {#btnLogin {

width: 200px; width: 200px; position: relative; position: relative; left: 100px;left: 100px;

}} OuOu .classLoggin {.classLoggin {

width: 200px; width: 200px; position: relative; position: relative; left: 100px;left: 100px;

}}

No HTML:No HTML: <link href="/apresentacao/estilo.css" media="screen" <link href="/apresentacao/estilo.css" media="screen"

rel="stylesheet" type="text/css" />rel="stylesheet" type="text/css" /> <button id="btnLogin“ class= “classLoggin” <button id="btnLogin“ class= “classLoggin”

type="button">Login</button>type="button">Login</button>

Estilo.cssEstilo.css #btnLogin {#btnLogin {

width: 200px; width: 200px; position: relative; position: relative; left: 100px;left: 100px;

}} OuOu .classLoggin {.classLoggin {

width: 200px; width: 200px; position: relative; position: relative; left: 100px;left: 100px;

}}

Page 24: Programação Web com Zend Framework e Ajax com Dojo

Ferramentas de ProgramaçãoFerramentas de Programação

2.2. Ferramentas de ProgramaçãoFerramentas de Programação

2.12.1 FirebugFirebug

2.22.2 FirePHPFirePHP

2.32.3 Zend StudioZend Studio

2.2. Ferramentas de ProgramaçãoFerramentas de Programação

2.12.1 FirebugFirebug

2.22.2 FirePHPFirePHP

2.32.3 Zend StudioZend Studio

Page 25: Programação Web com Zend Framework e Ajax com Dojo

FirebugFirebug

- É um plugin para o Firefox, que possibilita É um plugin para o Firefox, que possibilita Editar, visualizar e DEBUGAR:Editar, visualizar e DEBUGAR:

- CSSCSS- HTMLHTML- JavascriptJavascript

Para instala-lo procure no google firebug,Para instala-lo procure no google firebug,

Depois ativá-lo para aquele site clicando na Depois ativá-lo para aquele site clicando na baratinhabaratinha

- É um plugin para o Firefox, que possibilita É um plugin para o Firefox, que possibilita Editar, visualizar e DEBUGAR:Editar, visualizar e DEBUGAR:

- CSSCSS- HTMLHTML- JavascriptJavascript

Para instala-lo procure no google firebug,Para instala-lo procure no google firebug,

Depois ativá-lo para aquele site clicando na Depois ativá-lo para aquele site clicando na baratinhabaratinha

Page 26: Programação Web com Zend Framework e Ajax com Dojo

FirePHPFirePHP

- É um plugin para o Firefox, que junto com É um plugin para o Firefox, que junto com o Firebug permite que você envie o Firebug permite que você envie mensagens para ele atraves de comandos mensagens para ele atraves de comandos em PHP, facilitando o debug de sistemas.em PHP, facilitando o debug de sistemas.

- Mais pra frente veremos ele funcionandoMais pra frente veremos ele funcionando

- É um plugin para o Firefox, que junto com É um plugin para o Firefox, que junto com o Firebug permite que você envie o Firebug permite que você envie mensagens para ele atraves de comandos mensagens para ele atraves de comandos em PHP, facilitando o debug de sistemas.em PHP, facilitando o debug de sistemas.

- Mais pra frente veremos ele funcionandoMais pra frente veremos ele funcionando

Page 27: Programação Web com Zend Framework e Ajax com Dojo

Zend StudioZend Studio

- IDE baseada no eclipse, que permite IDE baseada no eclipse, que permite trabalhar com php e traz diversas trabalhar com php e traz diversas facilidades para se trabalhar com o facilidades para se trabalhar com o framework desenvolvido pelo mesmo framework desenvolvido pelo mesmo grupo (Zend Framework)grupo (Zend Framework)

- Permite DebuggarPermite Debuggar- Criar arquivos atraves de templates do Criar arquivos atraves de templates do

próprio frameworkpróprio framework

- IDE baseada no eclipse, que permite IDE baseada no eclipse, que permite trabalhar com php e traz diversas trabalhar com php e traz diversas facilidades para se trabalhar com o facilidades para se trabalhar com o framework desenvolvido pelo mesmo framework desenvolvido pelo mesmo grupo (Zend Framework)grupo (Zend Framework)

- Permite DebuggarPermite Debuggar- Criar arquivos atraves de templates do Criar arquivos atraves de templates do

próprio frameworkpróprio framework

Page 28: Programação Web com Zend Framework e Ajax com Dojo

O DesenvolvimentoO Desenvolvimento

3.3. O DesenvolvimentoO Desenvolvimento

3.13.1 Orientação a ObjetosOrientação a Objetos

3.23.2 MVCMVC

3.33.3 PHPPHP

3.43.4 Zend FrameworkZend Framework

3.53.5 DojoDojo

3.3. O DesenvolvimentoO Desenvolvimento

3.13.1 Orientação a ObjetosOrientação a Objetos

3.23.2 MVCMVC

3.33.3 PHPPHP

3.43.4 Zend FrameworkZend Framework

3.53.5 DojoDojo

Page 29: Programação Web com Zend Framework e Ajax com Dojo

Orientação a ObjetosOrientação a Objetos

- ““Dividir para conquistar”Dividir para conquistar”- Dividir uma tarefa complicada em varias Dividir uma tarefa complicada em varias

simplessimples- Ex. Agencia de CarrosEx. Agencia de Carros

- Dividimos em: Dividimos em: - vendevende- compracompra

- imprime boletoimprime boleto- recebe o cartão de creditorecebe o cartão de credito- Etc.....Etc.....

- ““Dividir para conquistar”Dividir para conquistar”- Dividir uma tarefa complicada em varias Dividir uma tarefa complicada em varias

simplessimples- Ex. Agencia de CarrosEx. Agencia de Carros

- Dividimos em: Dividimos em: - vendevende- compracompra

- imprime boletoimprime boleto- recebe o cartão de creditorecebe o cartão de credito- Etc.....Etc.....

Page 30: Programação Web com Zend Framework e Ajax com Dojo

Orientação a ObjetosOrientação a ObjetosClasseClasse

- É a receita de um objetoÉ a receita de um objeto- Podemos ter varios objetos de Podemos ter varios objetos de

uma determinada classeuma determinada classe

- É a receita de um objetoÉ a receita de um objeto- Podemos ter varios objetos de Podemos ter varios objetos de

uma determinada classeuma determinada classe

Page 31: Programação Web com Zend Framework e Ajax com Dojo

Orientação a ObjetosOrientação a ObjetosObjetoObjeto

- É o bolo feito com a receita.É o bolo feito com a receita.- Trabalhamos com o objeto e não com a classeTrabalhamos com o objeto e não com a classe- Ex.Ex.- Classe homemClasse homem

- Objeto FabioObjeto Fabio- Objeto LeandroObjeto Leandro- ..........

- A classe não faz ação e não tem atributos, mas o objeto A classe não faz ação e não tem atributos, mas o objeto sim..sim..

- Ex: Homem não tem uma idade, não fala alguma coisa,Ex: Homem não tem uma idade, não fala alguma coisa,- Mas o fabio tem 24 anos, e fala alguma coisa.Mas o fabio tem 24 anos, e fala alguma coisa.

- É o bolo feito com a receita.É o bolo feito com a receita.- Trabalhamos com o objeto e não com a classeTrabalhamos com o objeto e não com a classe- Ex.Ex.- Classe homemClasse homem

- Objeto FabioObjeto Fabio- Objeto LeandroObjeto Leandro- ..........

- A classe não faz ação e não tem atributos, mas o objeto A classe não faz ação e não tem atributos, mas o objeto sim..sim..

- Ex: Homem não tem uma idade, não fala alguma coisa,Ex: Homem não tem uma idade, não fala alguma coisa,- Mas o fabio tem 24 anos, e fala alguma coisa.Mas o fabio tem 24 anos, e fala alguma coisa.

Page 32: Programação Web com Zend Framework e Ajax com Dojo

Orientação a ObjetosOrientação a ObjetosHerançaHerança

- Uma classe pode herdar outra Uma classe pode herdar outra classeclasse

- Isto é, tudo que a classe pai faz Isto é, tudo que a classe pai faz ele faz tem, e faz algo mais.ele faz tem, e faz algo mais.

- Ex. Classe pai: MamiferosEx. Classe pai: Mamiferos- Classe filha BaleiaClasse filha Baleia

- Uma classe pode herdar outra Uma classe pode herdar outra classeclasse

- Isto é, tudo que a classe pai faz Isto é, tudo que a classe pai faz ele faz tem, e faz algo mais.ele faz tem, e faz algo mais.

- Ex. Classe pai: MamiferosEx. Classe pai: Mamiferos- Classe filha BaleiaClasse filha Baleia

Page 33: Programação Web com Zend Framework e Ajax com Dojo

Orientação a ObjetosOrientação a ObjetosConstrutorConstrutor

- Quando instanciamos um objeto, isto é criamos Quando instanciamos um objeto, isto é criamos um objeto a partir de uma classe, ele chama um objeto a partir de uma classe, ele chama determinado método da classe, este é o determinado método da classe, este é o construtor:construtor:

- $fabio = new Homem(“24 anos”);$fabio = new Homem(“24 anos”);- Na classe:Na classe:- Class homem {Class homem {

- Private idade ;Private idade ;- Public function _construct(idade)Public function _construct(idade)- {{

$this->idade = idade;$this->idade = idade; }}

}}

- Quando instanciamos um objeto, isto é criamos Quando instanciamos um objeto, isto é criamos um objeto a partir de uma classe, ele chama um objeto a partir de uma classe, ele chama determinado método da classe, este é o determinado método da classe, este é o construtor:construtor:

- $fabio = new Homem(“24 anos”);$fabio = new Homem(“24 anos”);- Na classe:Na classe:- Class homem {Class homem {

- Private idade ;Private idade ;- Public function _construct(idade)Public function _construct(idade)- {{

$this->idade = idade;$this->idade = idade; }}

}}

Page 34: Programação Web com Zend Framework e Ajax com Dojo

Orientação a ObjetosOrientação a ObjetosClasse AbstrataClasse Abstrata

- Ela define um modelo (Ela define um modelo (templatetemplate) para ) para uma funcionalidade e fornece uma uma funcionalidade e fornece uma implementação incompletaimplementação incompleta

- Ex.:Ex.:- Classe abstrata mamiferosClasse abstrata mamiferos- Classe concreta baleiaClasse concreta baleia- Objeto da classe baleia willyObjeto da classe baleia willy

- Ela define um modelo (Ela define um modelo (templatetemplate) para ) para uma funcionalidade e fornece uma uma funcionalidade e fornece uma implementação incompletaimplementação incompleta

- Ex.:Ex.:- Classe abstrata mamiferosClasse abstrata mamiferos- Classe concreta baleiaClasse concreta baleia- Objeto da classe baleia willyObjeto da classe baleia willy

Page 35: Programação Web com Zend Framework e Ajax com Dojo

Model View Controller (MVC)Model View Controller (MVC)

- É um padrão de programaçãoÉ um padrão de programação- Consisti em dividir a aplicação em 3 Consisti em dividir a aplicação em 3

partes:partes:- Model (Modelo)Model (Modelo)- View (Visão)View (Visão)- Controller (Controle)Controller (Controle)

- É um padrão de programaçãoÉ um padrão de programação- Consisti em dividir a aplicação em 3 Consisti em dividir a aplicação em 3

partes:partes:- Model (Modelo)Model (Modelo)- View (Visão)View (Visão)- Controller (Controle)Controller (Controle)

Page 36: Programação Web com Zend Framework e Ajax com Dojo

Modelo (Model)Modelo (Model)

- É a camada responsável pelos dados, ela É a camada responsável pelos dados, ela representa os dados em um banco de representa os dados em um banco de dadosdados

- Reponsável por gravar os dados e por Reponsável por gravar os dados e por buscar os dados no banco de dadosbuscar os dados no banco de dados

- Exemplo: No arpan, teriamos uma classe Exemplo: No arpan, teriamos uma classe da camada model chamada Pessifisi, da camada model chamada Pessifisi, outra chamada pessjuri etc...outra chamada pessjuri etc...

- É a camada responsável pelos dados, ela É a camada responsável pelos dados, ela representa os dados em um banco de representa os dados em um banco de dadosdados

- Reponsável por gravar os dados e por Reponsável por gravar os dados e por buscar os dados no banco de dadosbuscar os dados no banco de dados

- Exemplo: No arpan, teriamos uma classe Exemplo: No arpan, teriamos uma classe da camada model chamada Pessifisi, da camada model chamada Pessifisi, outra chamada pessjuri etc...outra chamada pessjuri etc...

Page 37: Programação Web com Zend Framework e Ajax com Dojo

View (Visão)View (Visão)

- É a camada responsável pela É a camada responsável pela apresentação do sistemaapresentação do sistema

- Nela você programa como os dados serão Nela você programa como os dados serão apresentados para o usuárioapresentados para o usuário

- Exemplo: O .dfm do delphiExemplo: O .dfm do delphi

- É a camada responsável pela É a camada responsável pela apresentação do sistemaapresentação do sistema

- Nela você programa como os dados serão Nela você programa como os dados serão apresentados para o usuárioapresentados para o usuário

- Exemplo: O .dfm do delphiExemplo: O .dfm do delphi

Page 38: Programação Web com Zend Framework e Ajax com Dojo

Controller (Controle)Controller (Controle)

- É a camada responsável pelo É a camada responsável pelo processamento do sistemaprocessamento do sistema

- Ela pega os dados do model processa e Ela pega os dados do model processa e apresenta na camada viewapresenta na camada view

- É a camada responsável pelo É a camada responsável pelo processamento do sistemaprocessamento do sistema

- Ela pega os dados do model processa e Ela pega os dados do model processa e apresenta na camada viewapresenta na camada view

Page 39: Programação Web com Zend Framework e Ajax com Dojo

Model View Controller (MVC)Model View Controller (MVC)

Page 40: Programação Web com Zend Framework e Ajax com Dojo

MVC no DelphiMVC no Delphi

- No delphi é possível programar usando o No delphi é possível programar usando o padrão MVC.padrão MVC.

- O data modulo seria a camada modelO data modulo seria a camada model- O .dfm seria a camada viewO .dfm seria a camada view- E o .pas a camada controlllerE o .pas a camada controlller

- No delphi é possível programar usando o No delphi é possível programar usando o padrão MVC.padrão MVC.

- O data modulo seria a camada modelO data modulo seria a camada model- O .dfm seria a camada viewO .dfm seria a camada view- E o .pas a camada controlllerE o .pas a camada controlller

Page 41: Programação Web com Zend Framework e Ajax com Dojo

PHPPHP

- Linguagem interpretada, que é Linguagem interpretada, que é executada no servidorexecutada no servidor

- Em constante mudançaEm constante mudança- Incorpora Orientação a Objetos a Incorpora Orientação a Objetos a

partir da versão 5 (recente)partir da versão 5 (recente)

- Linguagem interpretada, que é Linguagem interpretada, que é executada no servidorexecutada no servidor

- Em constante mudançaEm constante mudança- Incorpora Orientação a Objetos a Incorpora Orientação a Objetos a

partir da versão 5 (recente)partir da versão 5 (recente)

Page 42: Programação Web com Zend Framework e Ajax com Dojo

PHP - VariaveisPHP - Variaveis

- Não é necessário declarar o tipo.Não é necessário declarar o tipo.- Podendo mudar o tipo de uma Podendo mudar o tipo de uma

variavel em tempo de execuçãovariavel em tempo de execuçãoEx:Ex:$apr = 10;$apr = 10;$apr = “apresentacao”;$apr = “apresentacao”;

- Não é necessário declarar o tipo.Não é necessário declarar o tipo.- Podendo mudar o tipo de uma Podendo mudar o tipo de uma

variavel em tempo de execuçãovariavel em tempo de execuçãoEx:Ex:$apr = 10;$apr = 10;$apr = “apresentacao”;$apr = “apresentacao”;

Page 43: Programação Web com Zend Framework e Ajax com Dojo

PHP – Métodos MágicosPHP – Métodos Mágicos

- No php existe a possibilidade de chamar No php existe a possibilidade de chamar metodos que não existem em um objeto.metodos que não existem em um objeto.

Ex:Ex:public function __construct(public function __construct( ): chamado sempre que ): chamado sempre que

o objeto é instanciadoo objeto é instanciadopublic function __call($metodo,$parametrospublic function __call($metodo,$parametros ): ):

chamado sempre que um metodo que não existe é chamado sempre que um metodo que não existe é chamadochamado

-- Logo o php não vai dar mensagem de erro se você chamar um Logo o php não vai dar mensagem de erro se você chamar um metodo que não existe.metodo que não existe.

- No php existe a possibilidade de chamar No php existe a possibilidade de chamar metodos que não existem em um objeto.metodos que não existem em um objeto.

Ex:Ex:public function __construct(public function __construct( ): chamado sempre que ): chamado sempre que

o objeto é instanciadoo objeto é instanciadopublic function __call($metodo,$parametrospublic function __call($metodo,$parametros ): ):

chamado sempre que um metodo que não existe é chamado sempre que um metodo que não existe é chamadochamado

-- Logo o php não vai dar mensagem de erro se você chamar um Logo o php não vai dar mensagem de erro se você chamar um metodo que não existe.metodo que não existe.

Page 44: Programação Web com Zend Framework e Ajax com Dojo

Zend FrameworkZend Framework

- Um framework que traz uma biblioteca de Um framework que traz uma biblioteca de classes para ajudar na programação web classes para ajudar na programação web com phpcom php

- Alem de trazer a biblioteca ele sugere um Alem de trazer a biblioteca ele sugere um jeito de programar e organizar o código jeito de programar e organizar o código usando MVCusando MVC

- Um framework que traz uma biblioteca de Um framework que traz uma biblioteca de classes para ajudar na programação web classes para ajudar na programação web com phpcom php

- Alem de trazer a biblioteca ele sugere um Alem de trazer a biblioteca ele sugere um jeito de programar e organizar o código jeito de programar e organizar o código usando MVCusando MVC

Page 45: Programação Web com Zend Framework e Ajax com Dojo

Zend Framework Zend Framework Organização dos diretóriosOrganização dos diretórios

- RaizRaiz- ApplicationApplication

- ConfigsConfigs

- LayoutsLayouts

- ModulesModules- Próxima paginaPróxima pagina

- LibraryLibrary- PublicPublic

- RaizRaiz- ApplicationApplication

- ConfigsConfigs

- LayoutsLayouts

- ModulesModules- Próxima paginaPróxima pagina

- LibraryLibrary- PublicPublic

Page 46: Programação Web com Zend Framework e Ajax com Dojo

Zend Framework Zend Framework Modules (Módulos)Modules (Módulos)

- Cada módulo é como um sistema Cada módulo é como um sistema completo, mas com algum tipo de completo, mas com algum tipo de ligação entre os outros, como o ligação entre os outros, como o arpan, panorama, panoptico.. etcarpan, panorama, panoptico.. etc

- ModulesModules- Nome_do_moduloNome_do_modulo

- ControllersControllers

- ModelsModels

- ViewsViews

- Cada módulo é como um sistema Cada módulo é como um sistema completo, mas com algum tipo de completo, mas com algum tipo de ligação entre os outros, como o ligação entre os outros, como o arpan, panorama, panoptico.. etcarpan, panorama, panoptico.. etc

- ModulesModules- Nome_do_moduloNome_do_modulo

- ControllersControllers

- ModelsModels

- ViewsViews

Page 47: Programação Web com Zend Framework e Ajax com Dojo

Zend FrameworkZend Frameworkindex.phpindex.php

- Fica dentro da pasta public e manda o Fica dentro da pasta public e manda o fluxo para o bootstrapfluxo para o bootstrap

- Único arquivo que não é uma classeÚnico arquivo que não é uma classe

Vamos olhar o index.phpVamos olhar o index.php

- Fica dentro da pasta public e manda o Fica dentro da pasta public e manda o fluxo para o bootstrapfluxo para o bootstrap

- Único arquivo que não é uma classeÚnico arquivo que não é uma classe

Vamos olhar o index.phpVamos olhar o index.php

Page 48: Programação Web com Zend Framework e Ajax com Dojo

Zend FrameworkZend FrameworkBootstrapBootstrap

- É uma classe (começa a parte OO)É uma classe (começa a parte OO)- Recebe o fluxo do index.php Recebe o fluxo do index.php - Cria e prepara todas as variaveis, objetos Cria e prepara todas as variaveis, objetos

e parametros que vão ser usados no e parametros que vão ser usados no sistemasistema

- Vamos olhar o bootstrapVamos olhar o bootstrap

- É uma classe (começa a parte OO)É uma classe (começa a parte OO)- Recebe o fluxo do index.php Recebe o fluxo do index.php - Cria e prepara todas as variaveis, objetos Cria e prepara todas as variaveis, objetos

e parametros que vão ser usados no e parametros que vão ser usados no sistemasistema

- Vamos olhar o bootstrapVamos olhar o bootstrap

Page 49: Programação Web com Zend Framework e Ajax com Dojo

Zend FrameworkZend Framework.htaccess.htaccess

- Arquivo que fica no public que configura o Arquivo que fica no public que configura o apache para aquela aplicaçãoapache para aquela aplicação

- Parametro importante:Parametro importante:

RewriteEngine OnRewriteEngine On

RewriteRule ^.*$ index.php [NC,L]RewriteRule ^.*$ index.php [NC,L]- Ele diz que todos as requisição a partir Ele diz que todos as requisição a partir

daquele ponto vão ser direcionadas para o daquele ponto vão ser direcionadas para o index.phpindex.php

- Arquivo que fica no public que configura o Arquivo que fica no public que configura o apache para aquela aplicaçãoapache para aquela aplicação

- Parametro importante:Parametro importante:

RewriteEngine OnRewriteEngine On

RewriteRule ^.*$ index.php [NC,L]RewriteRule ^.*$ index.php [NC,L]- Ele diz que todos as requisição a partir Ele diz que todos as requisição a partir

daquele ponto vão ser direcionadas para o daquele ponto vão ser direcionadas para o index.phpindex.php

Page 50: Programação Web com Zend Framework e Ajax com Dojo

Zend FrameworkZend FrameworkRewriteRewrite

- Isso significa se caso for digitadoIsso significa se caso for digitado

http://testes.completo.com.br/msb/cur/public/usuario/loginhttp://testes.completo.com.br/msb/cur/public/usuario/login

-- Esta requisição irá para o index.php e este encaminhará para Esta requisição irá para o index.php e este encaminhará para o bootstrapo bootstrap

- Isso significa se caso for digitadoIsso significa se caso for digitado

http://testes.completo.com.br/msb/cur/public/usuario/loginhttp://testes.completo.com.br/msb/cur/public/usuario/login

-- Esta requisição irá para o index.php e este encaminhará para Esta requisição irá para o index.php e este encaminhará para o bootstrapo bootstrap

Requisição Index.phpBootstrap

Page 51: Programação Web com Zend Framework e Ajax com Dojo

ControllersControllers- O framework, a partir do bootstrap vai encaminhar o fluxo da O framework, a partir do bootstrap vai encaminhar o fluxo da

aplicação para um determinado arquivo que fica dentro da aplicação para um determinado arquivo que fica dentro da pasta controllers de algum modulo usando a seguinte logicapasta controllers de algum modulo usando a seguinte logica

http://testes.completo.com.br/msb/cur/public/MODULO/CONTROLLERhttp://testes.completo.com.br/msb/cur/public/MODULO/CONTROLLER

Logo a requisiçãoLogo a requisiçãohttp://testes.completo.com.br/msb/cur/public/default/usuario/http://testes.completo.com.br/msb/cur/public/default/usuario/

O fluxo da aplicação vai para o modulo “default” arquivoO fluxo da aplicação vai para o modulo “default” arquivo

UsuarioControllerUsuarioController

- O framework, a partir do bootstrap vai encaminhar o fluxo da O framework, a partir do bootstrap vai encaminhar o fluxo da aplicação para um determinado arquivo que fica dentro da aplicação para um determinado arquivo que fica dentro da pasta controllers de algum modulo usando a seguinte logicapasta controllers de algum modulo usando a seguinte logica

http://testes.completo.com.br/msb/cur/public/MODULO/CONTROLLERhttp://testes.completo.com.br/msb/cur/public/MODULO/CONTROLLER

Logo a requisiçãoLogo a requisiçãohttp://testes.completo.com.br/msb/cur/public/default/usuario/http://testes.completo.com.br/msb/cur/public/default/usuario/

O fluxo da aplicação vai para o modulo “default” arquivoO fluxo da aplicação vai para o modulo “default” arquivo

UsuarioControllerUsuarioController

Page 52: Programação Web com Zend Framework e Ajax com Dojo

ActionAction

- Dentro de uma classe controller podemos ter Dentro de uma classe controller podemos ter metodos publicos do tipo Action, eles são metodos metodos publicos do tipo Action, eles são metodos que recebem uma requisição com o seguinte que recebem uma requisição com o seguinte formato:formato:

http://testes.completo.com.br/msb/cur/public/modulo/controller/actionhttp://testes.completo.com.br/msb/cur/public/modulo/controller/action

- Dentro de uma classe controller podemos ter Dentro de uma classe controller podemos ter metodos publicos do tipo Action, eles são metodos metodos publicos do tipo Action, eles são metodos que recebem uma requisição com o seguinte que recebem uma requisição com o seguinte formato:formato:

http://testes.completo.com.br/msb/cur/public/modulo/controller/actionhttp://testes.completo.com.br/msb/cur/public/modulo/controller/action

Page 53: Programação Web com Zend Framework e Ajax com Dojo

ExemploExemplo

class BemvindoController extends class BemvindoController extends Zend_Controller_Action {Zend_Controller_Action {

public function olamundoAction()public function olamundoAction(){{

$this->view->assign("texto","Ola Mundo") ;$this->view->assign("texto","Ola Mundo") ;}}

}}

- Para chegar nesse action deveriamos digitarPara chegar nesse action deveriamos digitarhttp://endereco/public/modulo/bemvindo/olamundohttp://endereco/public/modulo/bemvindo/olamundo

class BemvindoController extends class BemvindoController extends Zend_Controller_Action {Zend_Controller_Action {

public function olamundoAction()public function olamundoAction(){{

$this->view->assign("texto","Ola Mundo") ;$this->view->assign("texto","Ola Mundo") ;}}

}}

- Para chegar nesse action deveriamos digitarPara chegar nesse action deveriamos digitarhttp://endereco/public/modulo/bemvindo/olamundohttp://endereco/public/modulo/bemvindo/olamundo

Page 54: Programação Web com Zend Framework e Ajax com Dojo

ViewView- Relembrando a estrutura de diretórios:Relembrando a estrutura de diretórios:

- ModulesModules- Nome_do_moduloNome_do_modulo

- ControllersControllers- ModelsModels- ViewsViews

- Nome_do_controllerNome_do_controller- Nome_do_action.phtmlNome_do_action.phtml

- Relembrando a estrutura de diretórios:Relembrando a estrutura de diretórios:

- ModulesModules- Nome_do_moduloNome_do_modulo

- ControllersControllers- ModelsModels- ViewsViews

- Nome_do_controllerNome_do_controller- Nome_do_action.phtmlNome_do_action.phtml

Page 55: Programação Web com Zend Framework e Ajax com Dojo

ViewView

- Depois de passar por um action o Depois de passar por um action o framework direciona para o seu respectivo framework direciona para o seu respectivo view para saida dos dadosview para saida dos dados

- Depois de passar por um action o Depois de passar por um action o framework direciona para o seu respectivo framework direciona para o seu respectivo view para saida dos dadosview para saida dos dados

Page 56: Programação Web com Zend Framework e Ajax com Dojo

DojoDojo

- Biblioteca ajax integrada com zend frameworkBiblioteca ajax integrada com zend framework- Dividida em 3 sub-bibliotecas:Dividida em 3 sub-bibliotecas:

- DojoDojo- DijitDijit- DojoxDojox

- Biblioteca ajax integrada com zend frameworkBiblioteca ajax integrada com zend framework- Dividida em 3 sub-bibliotecas:Dividida em 3 sub-bibliotecas:

- DojoDojo- DijitDijit- DojoxDojox

Page 57: Programação Web com Zend Framework e Ajax com Dojo

DojoDojo

- É responsável pelo ajax em si, com os metodosÉ responsável pelo ajax em si, com os metodos

xhrPost e xhrGet que fazem a criação da thread e a xhrPost e xhrGet que fazem a criação da thread e a requisição, alem de outros arquivos requisição, alem de outros arquivos componentes basicos, como manipulção de componentes basicos, como manipulção de data.data.

- É responsável pelo ajax em si, com os metodosÉ responsável pelo ajax em si, com os metodos

xhrPost e xhrGet que fazem a criação da thread e a xhrPost e xhrGet que fazem a criação da thread e a requisição, alem de outros arquivos requisição, alem de outros arquivos componentes basicos, como manipulção de componentes basicos, como manipulção de data.data.

Page 58: Programação Web com Zend Framework e Ajax com Dojo

XhrPost e XhrGetXhrPost e XhrGet

Dojo.xhrPost({Dojo.xhrPost({

handleAs: ‘json’, // Formato de retornohandleAs: ‘json’, // Formato de retorno

url: url: http://teste.com/seila, //http://teste.com/seila, // Url da requisição Url da requisição

postData: {“id”:10,”nome”:”fabio”} // parametros postData: {“id”:10,”nome”:”fabio”} // parametros do postdo post

OuOu

form: “formteste”, // nome do formulario com os form: “formteste”, // nome do formulario com os campos a enviarcampos a enviar

load:load: function (resposta,xmlArgs) function (resposta,xmlArgs) { alert(resposta);{ alert(resposta);

} // função que vai chamar quando retornar a } // função que vai chamar quando retornar a requisiçãorequisição

Dojo.xhrPost({Dojo.xhrPost({

handleAs: ‘json’, // Formato de retornohandleAs: ‘json’, // Formato de retorno

url: url: http://teste.com/seila, //http://teste.com/seila, // Url da requisição Url da requisição

postData: {“id”:10,”nome”:”fabio”} // parametros postData: {“id”:10,”nome”:”fabio”} // parametros do postdo post

OuOu

form: “formteste”, // nome do formulario com os form: “formteste”, // nome do formulario com os campos a enviarcampos a enviar

load:load: function (resposta,xmlArgs) function (resposta,xmlArgs) { alert(resposta);{ alert(resposta);

} // função que vai chamar quando retornar a } // função que vai chamar quando retornar a requisiçãorequisição

Page 59: Programação Web com Zend Framework e Ajax com Dojo

DijitDijit

- É responsável pelos formularios e seus campos É responsável pelos formularios e seus campos bonitinhos e suas validações.bonitinhos e suas validações.

- Ex:Ex:- dijit.form.DateTextBoxdijit.form.DateTextBox - dijit.form.ValidationTextBox dijit.form.ValidationTextBox - Etc...Etc...

-- Obs. A Validação do validationTextBox pode Obs. A Validação do validationTextBox pode ser feita com o uso de Expressão Regularser feita com o uso de Expressão Regular

- É responsável pelos formularios e seus campos É responsável pelos formularios e seus campos bonitinhos e suas validações.bonitinhos e suas validações.

- Ex:Ex:- dijit.form.DateTextBoxdijit.form.DateTextBox - dijit.form.ValidationTextBox dijit.form.ValidationTextBox - Etc...Etc...

-- Obs. A Validação do validationTextBox pode Obs. A Validação do validationTextBox pode ser feita com o uso de Expressão Regularser feita com o uso de Expressão Regular

Page 60: Programação Web com Zend Framework e Ajax com Dojo

DojoxDojox

- São componentes criados a partir de um projeto São componentes criados a partir de um projeto que ainda não esta 100% maduro e que um dia se que ainda não esta 100% maduro e que um dia se transformarão em dojo ou dijittransformarão em dojo ou dijit

- O mais importante para nós é oO mais importante para nós é o- dojox.grid.DataGriddojox.grid.DataGrid

Obs. Na proxima versão do dojo (1.4) vão aparecer dois Obs. Na proxima versão do dojo (1.4) vão aparecer dois

novos grids o novos grids o dojoxdojox..gridgrid..EnhancedGridEnhancedGrid e o e o dojoxdojox..gridgrid..TreeGridTreeGrid

- São componentes criados a partir de um projeto São componentes criados a partir de um projeto que ainda não esta 100% maduro e que um dia se que ainda não esta 100% maduro e que um dia se transformarão em dojo ou dijittransformarão em dojo ou dijit

- O mais importante para nós é oO mais importante para nós é o- dojox.grid.DataGriddojox.grid.DataGrid

Obs. Na proxima versão do dojo (1.4) vão aparecer dois Obs. Na proxima versão do dojo (1.4) vão aparecer dois

novos grids o novos grids o dojoxdojox..gridgrid..EnhancedGridEnhancedGrid e o e o dojoxdojox..gridgrid..TreeGridTreeGrid

Page 61: Programação Web com Zend Framework e Ajax com Dojo

Dojo e Zend FrameworkDojo e Zend Framework

- A integração do dojo com o zend framework A integração do dojo com o zend framework é simples, já que o framework gera todo o é simples, já que o framework gera todo o codigo javascript que inicializa o dojo e seus codigo javascript que inicializa o dojo e seus componentes.componentes.

- Restando ao programador apenas o trabalho Restando ao programador apenas o trabalho de instanciar corretamente o componente do de instanciar corretamente o componente do dojo já encapsulado pelo frameworkdojo já encapsulado pelo framework

- A integração do dojo com o zend framework A integração do dojo com o zend framework é simples, já que o framework gera todo o é simples, já que o framework gera todo o codigo javascript que inicializa o dojo e seus codigo javascript que inicializa o dojo e seus componentes.componentes.

- Restando ao programador apenas o trabalho Restando ao programador apenas o trabalho de instanciar corretamente o componente do de instanciar corretamente o componente do dojo já encapsulado pelo frameworkdojo já encapsulado pelo framework

Page 62: Programação Web com Zend Framework e Ajax com Dojo

Formulario DojoFormulario Dojoclass Swe_Form_NovoContrib extends Zend_Dojo_Formclass Swe_Form_NovoContrib extends Zend_Dojo_Form

{{

public function render(Zend_View_Interface $view = null){public function render(Zend_View_Interface $view = null){

$this->getView()->headLink ()->appendStylesheet ($this->getView()->baseUrl $this->getView()->headLink ()->appendStylesheet ($this->getView()->baseUrl ( "/swe/styles/sty".strtolower(Pandora_Constantes::getConstante('clientesigla'))."/( "/swe/styles/sty".strtolower(Pandora_Constantes::getConstante('clientesigla'))."/inclcontr.css" ) );inclcontr.css" ) );

$this->getView()->headScript ()->prependFile ( $this->getView()->baseUrl ( $this->getView()->headScript ()->prependFile ( $this->getView()->baseUrl ( "/swe/js/inclcontrib.js" ) );"/swe/js/inclcontrib.js" ) );

$this->getView()->headScript ()->prependFile ( $this-$this->getView()->headScript ()->prependFile ( $this->getView()->baseUrl("/default/js/pandora/validates.js") );>getView()->baseUrl("/default/js/pandora/validates.js") );

$this->getView()->dojo()->requireModule ( 'dojo.data.ItemFileReadStore' ) $this->getView()->dojo()->requireModule ( 'dojo.data.ItemFileReadStore' )

return parent::render($view) ;return parent::render($view) ;

}}

class Swe_Form_NovoContrib extends Zend_Dojo_Formclass Swe_Form_NovoContrib extends Zend_Dojo_Form

{{

public function render(Zend_View_Interface $view = null){public function render(Zend_View_Interface $view = null){

$this->getView()->headLink ()->appendStylesheet ($this->getView()->baseUrl $this->getView()->headLink ()->appendStylesheet ($this->getView()->baseUrl ( "/swe/styles/sty".strtolower(Pandora_Constantes::getConstante('clientesigla'))."/( "/swe/styles/sty".strtolower(Pandora_Constantes::getConstante('clientesigla'))."/inclcontr.css" ) );inclcontr.css" ) );

$this->getView()->headScript ()->prependFile ( $this->getView()->baseUrl ( $this->getView()->headScript ()->prependFile ( $this->getView()->baseUrl ( "/swe/js/inclcontrib.js" ) );"/swe/js/inclcontrib.js" ) );

$this->getView()->headScript ()->prependFile ( $this-$this->getView()->headScript ()->prependFile ( $this->getView()->baseUrl("/default/js/pandora/validates.js") );>getView()->baseUrl("/default/js/pandora/validates.js") );

$this->getView()->dojo()->requireModule ( 'dojo.data.ItemFileReadStore' ) $this->getView()->dojo()->requireModule ( 'dojo.data.ItemFileReadStore' )

return parent::render($view) ;return parent::render($view) ;

}}

Page 63: Programação Web com Zend Framework e Ajax com Dojo

Formulario DojoFormulario Dojo public function init() {public function init() {

$this->setMethod('post');$this->setMethod('post');

$this->setName('formContrib'); $this->setName('formContrib');

$campo = new Pandora_Dojo_Form_Element_ValidationTextBox( "orgao" );$campo = new Pandora_Dojo_Form_Element_ValidationTextBox( "orgao" );

$campo->setMsgInvalido("Digite o nome do seu orgão sem acentos ou ç") $campo->setMsgInvalido("Digite o nome do seu orgão sem acentos ou ç")

->setPreDefDecorator(Pandora_Dojo_Form_Element_ValidationTextBox::NovaLinha)->setPreDefDecorator(Pandora_Dojo_Form_Element_ValidationTextBox::NovaLinha)

->setLabel ( "Orgão: " )->setLabel ( "Orgão: " )

->setRequired ( false )->setRequired ( false )

->setMaxLength ( 60 )->setMaxLength ( 60 )

->setRegExp('[a-zA-Z0-9\s]{1,}')->setRegExp('[a-zA-Z0-9\s]{1,}')

->addFilters(array('StringTrim', 'StringToUpper','StripTags')) ->addFilters(array('StringTrim', 'StringToUpper','StripTags'))

->setAttrib ( "uppercase", true )->setAttrib ( "uppercase", true )

->setAttrib('promptMessage',"Digite o nome do seu orgão sem ->setAttrib('promptMessage',"Digite o nome do seu orgão sem acentos" ) $campos[] = $campo;acentos" ) $campos[] = $campo;

$this->addElements($campos);$this->addElements($campos);

}}

}}

public function init() {public function init() {

$this->setMethod('post');$this->setMethod('post');

$this->setName('formContrib'); $this->setName('formContrib');

$campo = new Pandora_Dojo_Form_Element_ValidationTextBox( "orgao" );$campo = new Pandora_Dojo_Form_Element_ValidationTextBox( "orgao" );

$campo->setMsgInvalido("Digite o nome do seu orgão sem acentos ou ç") $campo->setMsgInvalido("Digite o nome do seu orgão sem acentos ou ç")

->setPreDefDecorator(Pandora_Dojo_Form_Element_ValidationTextBox::NovaLinha)->setPreDefDecorator(Pandora_Dojo_Form_Element_ValidationTextBox::NovaLinha)

->setLabel ( "Orgão: " )->setLabel ( "Orgão: " )

->setRequired ( false )->setRequired ( false )

->setMaxLength ( 60 )->setMaxLength ( 60 )

->setRegExp('[a-zA-Z0-9\s]{1,}')->setRegExp('[a-zA-Z0-9\s]{1,}')

->addFilters(array('StringTrim', 'StringToUpper','StripTags')) ->addFilters(array('StringTrim', 'StringToUpper','StripTags'))

->setAttrib ( "uppercase", true )->setAttrib ( "uppercase", true )

->setAttrib('promptMessage',"Digite o nome do seu orgão sem ->setAttrib('promptMessage',"Digite o nome do seu orgão sem acentos" ) $campos[] = $campo;acentos" ) $campos[] = $campo;

$this->addElements($campos);$this->addElements($campos);

}}

}}

Page 64: Programação Web com Zend Framework e Ajax com Dojo

DocumentaçãoDocumentação

http://framework.zend.comhttp://framework.zend.com

http://docs.dojocampus.orghttp://docs.dojocampus.orghttp://framework.zend.comhttp://framework.zend.com

http://docs.dojocampus.orghttp://docs.dojocampus.org