Upload
cejug
View
3.690
Download
1
Embed Size (px)
DESCRIPTION
Palestra ministrada por Christiano Milfont, no Cafe Com Tapioca, evento do CEJUG no dia 12 de julho de 2007 - Implementando MVC com AJAX
Citation preview
Café com Tapioca 2007
Christiano Milfont – [email protected]
FrameworksMelhores práticas do XHRImplementando MVCJavascript Orientado a Objetos
Implementação MVC usando Ajax
Frameworks
Frameworks● Um Framework Ajax utiliza as tecnologias CSS (camada de formatação da apresentação), XHTML (camada de estrutura da apresentação), XML (dados a serem manipulados), Javascript (camada de controle), DOM ou JSON (especificações do formato dos dados) , o objeto XMLHttpRequest (que fornece conexões assíncronas) e extende essa tecnologias padrões com componentes de eventos, efeitos, Drag'n'Drop, entre outros.● Os benefícios de se usar um Framework Ajax é o encapsulamento da complexidade das tecnologias necessárias, fornecendo um só mecanismo Cross Browser que permita a utilização do ajax com acessibilidade semelhante ao ambiente desktop além de facilitar o tratamento dos dados nas as camadas físicas entre o lado cliente e o lado servidor.
Tipos de Frameworks● Javascript Multipurpose: frameworks que fornecessem componentes sobre o conjunto de todas as tecnologias web no lado cliente e mecanismos de acesso ao lado servidor, como o encapsulamento do tratamento dos dados.
● Javascript Remote: frameworks que são especialistas no encapsulamento do mecanismo de troca de objetos entre as camadas físicas.
● Javascript Specialized: frameworks que são especialistas em somente um determinado comportamento ou mecanismo do conjunto de tecnologias web, como por exemplo: especialistas em efeitos ou somente na extensão do javascript.
Javascript Multipurpose Frameworks...
Javascript Remoting Frameworks...
Javascript Specialised Frameworks...
Melhores práticas do XHR
1 Namespaces contra funções globais2 Detecção otimizada3 Bridge encapsula diferenças de Cross Browser4 Delegação de eventos5 New School suplanta Old School6 Separação em camadas7 Orientação a objetos contra prog. funcional8 DOM contra innerHTML
Anatomia de uma operação Ajax ...
Anatomia de uma operação Ajax ...
1 Ocorre um evento no cliente2 Um XHR é instanciado3 A instância é configurada4 Solicita uma conexão assíncrona5 A requisição é processada pelo servidor6 O servidor retorna um XML7 O XHR chama o callback e repassa o XML8 O HTML DOM processa o XML.
1. Ocorre um evento no cliente● Um evento mapeado é acionado no cliente:
2. Um XHR é instanciado
● Instancia uma versão do objeto XHR dependendo do Browser, a Microsoft (criadora do objeto) tem algumas implementações dependendo da versão do Internet Explorer.
3. A instância é configurada
● O método “open” do objeto XHR cria uma conexão e recebe como parâmetros: o método de conexão (“POST” ou “GET”); a “url” do servidor; e um booleano que indica se a conexão é assíncrona (TRUE) ou síncrona (FALSE).
● Associa-se uma função “callback” que processará o resultado do servidor.
● Submete os dados caso a conexão seja POST.
4. Solicita uma conexão assíncrona
● Quando a propriedade readStatedo objeto XHR recebe o valor 4 a conexão foi terminada, podemos processar diretamente ou somente quando a propriedade status receber o valor “200”.
5. A requisição é processada pelo servidor
● O servidor processa uma requisição como outra qualquer e devolve um XML ou um texto.
6. O servidor retorna um XML ou um texto
● É comum utilizar na resposta um texto com o objeto no formato JSON para ser processado na função callback.
7 e 8. Callback processa retorno● A função callback processa o retorno utilizando DOM.
Métodos e propriedades do XHRStatus do readyState0: Não inicializado.1: Conexão estabelecida.2: Requisição recebida.3: Em processo.4: Finalizada.
AtributosreadyState: Troca valores de 0 a 4 que indicam que está “Ready”.Status: Códigos de status do response HTTP.responseText: Processa a resposta como texto.responseXML: Processa a resposta como um objeto XML.onreadystatechange: Propriedade que recebe uma função que é invocada quando o evento readystatechange é disparado.
Métodosopen(mode, url, boolean): inicializa aconexão e recebe os parametros mode(conexão), url e booleano (síncrono ouassíncrono).send("string"): Null para GET ou uma String dos parametros e valores para o POST.
Implementação MVC usando Ajax
MVC Original
... a visão observa o comportamento do
modelo para renderizar a interface ...
... o controlador responde a eventos e solicita modificações
no modelo ...
... o modelo gerencia a lógica de negócios e
fornece API de acesso.
Migração para web ...
MVC Model 2
... a visão não enxerga o
comportamento do modelo ...
... o controlador assume parcialmente
a renderização da visão ...
... o modelo gerencia a lógica de negócios e
fornece API de acesso.
Se aplica a WebWorks Mentawai
SpringFlow JSF ...
Struts ...
LoginAction
LoginForm
LoginVO
LoginBO
DBLoginDAO
Sem fronteiras entre as camadas lógicas...
MVC Model 3? ... a visão escuta respostas do
modelo ...
... o controlador devolve responsbilidades da
visão...
... o modelo gerencia a lógica de negócios e
fornece API de acesso.
Back to the future...
Javascript Orientado a Objetos
Christiano Milfont
Introdução“Procedural code gets information then makes decisions. Object-oriented code tells objects to do things.”
Alec Sharp
Prototype-based
JSON (Javascript
Object Notation)
Factory Vs Construtor Vs Prototype
Private vs Public
Polimorfismo
Associação
Overloading e Overriding
Alternativa de Overloading
Herança via Object Masquerading
Herança via call e apply
call(Objeto, argumento1, argumento2, ...)apply(Objeto, array-de-argumentos)
Herança via call e apply - cont.
Herança via Prototype
Para saber mais...https://cejug.dev.java.net/