implementando mvc com ajax

Café com Tapioca 2007

Christiano Milfont – cmilfont@gmail.com

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/