Web2.

0eAJAX
AugustodeCarvalhoFontes

Agenda
Web2.0 RichInternetApplications(RIA) AJAX Exemplo AJAXToolkitseFrameworks Concluso

Web2.0
OnomeWeb2.0foidadopelaOReillyMediaem2004 Novosserviosonline
BritannicaOnlineWikipedia nytimes.comBlogs SitespessoaisMySpace abc.go.comYouTube Yahoo!Directorydel.icio.us

Caractersticas
Webcomoumaplataforma IntelignciaColetiva Mashups Melhorexperinciadousurio

Web2.0 Webcomoumaplataforma
Armazenamentoeprocessamentonoservidor
Ex:Writely,Flickr,GMail

Novasformasdelucro Nohlanamentodeverses,o aprimoramentocontnuo Nohnecessidadedeportarparadiversas plataformas APIsOnline

GoogleMapsAPI,AmazonWebServices,eBayAPI

Web2.0 Web2.0

Web2.0
IntelignciaColetiva
Colaborao
Wikis SourceForge.net YouTube

Folksonomy
Metodologiaderecuperaodeinformao Tags(rtulos)soassociadosdeformacolaborativa
Nataxonomiageralmenteosprpriosautoresassociamosrtulos

Ex:del.icio.us,flickr.com,last.fm,etc.

Web2.0
IntelignciaColetiva
FiltrosdeSPAMcolaborativos Blogs

Mashups
Utilizacontedodemaisdeumafonteparacriarum novoservio AtravsdeumaAPIouWebFeeds(RSS,Atom,etc.) Ex:HousingMaps(GoogleMaps+Craigslist)

Melhorexperinciadousurio
RichInternetApplications(RIA)

Web2.0 Web2.0

RichInternetApplication(RIA)
Incorporarusabilidadedasaplicaesemdesktop paraaWeb
Oprogramarespondedeformaintuitivaerpida Tudoacontecenaturalmente

AplicaesWebtradicionais
AWebfoioriginalmenteprojetadaparanavegaopor documentosHTML ModeloClique,aguardeerecarregue Apginatransferidadoservidorparaoclientee recarregadaacadaevento,enviodedadosou navegao Modelodecomunicaosncrono Perdadecontexto

RichInternetApplication(RIA)
Modelosncrono
Cliente
Atividadedousurio Atividadedousurio Atividadedousurio

Servidor

Processamento

Processamento

T ran sm is so

Tempo

T ran sm is so

Tr an sm is so

Tr an sm is so

RichInternetApplication(RIA)
RichInternetApplication(RIA)
Aidianotorecente JavaApplet(1995) MacromediaFlash(1996) JavaWebStart DHTML
HTML+JavaScript+CSS+DOM

DHTMLcomIFrameoculto Flex
Flash+comunicaoassncrona

AJAX
DHTML+XMLHttpRequest(comunicaoassncrona)

RichInternetApplication(RIA)
Modeloassncrono
Cliente
Atividadedousurio Interao Processamento Exibio Interao Exibio Interao Exibio

T ran s m is s

T ran s m is s

Tempo

Servidor

Processamento

Processamento

Processamento

T ran s m is s

T ran s m is s

T ran s m is s o

T ran s m is s

AJAX AsynchronousJavaScriptandXML
Otermosurgiuemfevereirode2005noartigo Ajax:ANewApproachtoWebApplicationsde JesseJamesGarrett.

Exemplos
Tadalist Amazon.comDiamondSearch NovoYahooMailBeta GoogleCalendar

AJAX AJAX

AJAX Caractersticas
Modeloassncrono Interfacemaisnaturaleintuitiva Atualizaoparcialdatela
Apenasoselementosquecontmnovasinformaes soatualizados Nohperdadecontexto

Fluxobaseadoemdados

AJAX
Usurio Navegador Servidor

1:VisitaumaaplicaoAJAX

2:HTML/JS/CSSiniciais

AJAX
Usurio Event Handler Response Handler Servidor

1:Ao

2:Requisio

3:Processamento 4:Resposta

5:AtualizarInterface

AJAX
CasosdeusoparaAJAX
Validaoemtemporealcomlgicanoservidor
Ex:Verificardisponibilidadedeumlogindeusurio

Autocompletar
Ex:GoogleSuggest

OperaesMestreDetalhe
Ex:Carregamentodecomboboxes

Componentesdeinterfaceavanados(widgets)
Ex:rvores,menus,barradeprogresso.

Notificaoprovenientedoservidor
Simuladaatravsderequisiesperidicas

AJAX
TecnologiasUtilizadas
HTML/XHTML(Estrutura)
Maiornecessidadedeumdocumentobemformatado

CSS(Apresentao)
Permiteseparaodaapresentaododocumento(estilo) PodeseralteradoporJavaScript

JavaScript(Comportamento)
Amplamenteutilizada Utilizadopelagrandemaioriadosnavegadores.Noh necessidadedeinstalaodeplugins

DOM
RepresentaaestruturadedocumentosXMLeHTML

AJAX TecnologiasUtilizadas
HTTP,Formulrios
umarequisioHTTPcomum

Programaodoladodoservidor
Oservidoraindanecessrio JSP,Servlets,JSF,Struts

XMLHttpRequest
ObjetoJavaScriptqueforneceacomunicao assncronacomoservidor

AJAX
XMLHttpRequest
ObjetoJavaScript Adotadopelosnavegadoresmodernos
PrimeiraimplementaonativanoMozilla1.0(2002)

AWorldWideWebConsortiumpublicouuma especificaocomoWorkingDraftem5deabrilde 2006 NoInternetExplorerumcontroleActiveXchamado MSXML

OIE7irsuportaroobjetoXMLHttpRequestdeformanativa

AJAX
XMLHttpRequest
Comunicasecomoservidorutilizandorequisies HTTPcomuns:GET/POST Permitecomunicaoassncrona Funcionaaofundo
Nointerrompeaoperaodousurio

Otipodaresposta(ContentType)podeser:
text/xml text/plain text/json text/javascript

AJAX
MtodosdoXMLHttpRequest
Mtodo
open(method,URL,asyncFlag, username,password)

Descrio AbreepreparaumarequisioHTTPidentificada pelomtodoeURL.asynchFlagindicasea comunicaodeveserassncronaouno. fazerarequisio.

setRequestHeader(label,value) AssociaumvaloraumcabealhoHTTPantesde send(postdata) getAllResponseHeaders()

ExecutaarequisioHTTP. RetornaumalistadetodososcabealhosHTTPda resposta

getResponseHeader(label) abort()

RetornaocabealhoHTTPassociadoaolabel Interrompeumarequisioqueestsendo processada.

AJAX
PropriedadesdoXMLHttpRequest
Propriedade
onreadystatechange readystate

Descrio InformaafunoJavaScriptquedeveserchamada acadamudanadeestado Estadoatualdarequisio,podeser: 0=noiniciada 1=iniciandoconexo 2=conexoestabelecida 3=ematividade(algumdadofoirecebido) 4=completa StatusHTTPrecebidodoservidor 200=OK 403=Forbidden 500=InternalError ...

status

AJAX
PropriedadesdoXMLHttpRequest
Propriedade
responseText responseXML

Descrio Representaotextual(string)dosdadosenviados peloservidor RepresentaododocumentoXMLenviadopelo servidor Representaotextual(string)dostatusHTTP recebidodoservidor(OK,NotFound,etc)

statusText

AJAX APIDOM(DocumentObjectModel)
Osnavegadoresmantmumarepresentao dosdocumentosqueestosendoexibidos
DisponvelpeloobjetoJavaScriptdocument

AAPIDOMpermitequecdigoJavaScript alterearvoreDOMprogramaticamente
Exemplos:
Adicionarumanovalinhaaumatabela AlterarocontedodeumaDIV AlteraroestiloCSSdeumelemento

Exemplo
Validaoemtemporealpelo servidor

AJAXToolkitseFrameworks Tiposdesoluesdisponveishoje
BibliotecasJavaScript(ladodocliente) FrameworksdechamadaremotaviaProxy ComponentesJSFcomcomportamentoAJAX Wrappers TradutorJavaparaJavaScript FrameworkscomextensoparaAJAX

AJAXToolkitseFrameworks
BibliotecasJavaScript(ladodocliente)
Podeserutilizadacomqualquertecnologiadolado doservidor Podemsercombinadascomoutrasbibliotecas Cuidadeincompatibilidadesdebrowsers UtilizaIFrameocultosenecessrio Capturaeventosdenavegaocomoosbotes avanarevoltar Componentesdeinterfaceavanados(widgets) APIJavaScriptmaisfcildeusarparacontrolede eventos,erros,etc. Ex:DojoToolkit,Rico,Script.aculo.us

AJAXToolkitseFrameworks FrameworksdechamadaremotaviaProxy
SimilaraomodelodecomunicaoRPC
Arquiteturabaseadaemstubseskeletons

Oframeworkgeraostubdocliente(proxy)para chamadasaocdigodoservidor Fazomarshallingdetodososparmetros Ex:DirectWebRemoting(DWR),JSONRPC DWR2.0irsuportarAJAXReverso

ChamadaJavaScriptapartirdocdigoJava

AJAXToolkitseFrameworks ComponentesJSFcomcomportamento AJAX

Escondetodaacomplexidadedaprogramao AJAX
OautornoprecisasaberJavaScript

ComponentesJSFsoreutilizveis Ex:ajax4jsf,ICEfaces,DynaFaces

AJAXToolkitseFrameworks Wrappers
Atualmenteexistemvriostoolkitscom diferentescomponentesesintaxesdeuso Empacota(wrap)oscomponentesvisuaisem customtags(JSP)oucomponentesJSF Tentaconsolidarasdiferentesbibliotecas JavaScript(ladodocliente)
DependedebibliotecascomooDojo,DHTML Goodies,Script.aculo.us.

Ex:jMarki

AJAXToolkitseFrameworks TradutorJavaparaJavaScript
DesenvolveaaplicaoAJAXusandoapenas cdigoJava Quandoaaplicaoimplantada,converte cdigoJavaparaJavaScript HostedModepermitedepuraodocdigo Ex:GoogleWebToolkit(GWT)

AJAXToolkitseFrameworks FrameworkscomextensoparaAJAX
AlgunsFrameworksdedesenvolvimentode aplicaoparaWebestotrazendo comportamentonativoaoAJAX Ex:RubyonRails,Echo2,Shale

Concluso Prs
Interfacemaisintuitivaenatural Fluxobaseadoemdados(noempginas) Nonecessitadeplugins Grandereduonacarganarede
Apenasosdadosrelevantesparaasolicitaodo usuriosotrafegados

SoluoRIAmaisvivelatualmente Diversostoolkitseframeworksestosurgindo

Concluso Contras
Aumentodecomplexidade
PodeserresolvidocomcomponentesJSF

Cdigovisvelporhackers Aindaexisteincompatibilidadedenavegadores JavaScriptdifcildemanteredepurar Existempoucosmodelosdearquiteturae melhoresprticas OsToolkitseFrameworksaindaestoimaturos

Amaioriaemversobeta

Links
Writely
http://www.writely.com/

Flickr
http://www.flickr.com/

GMail
http://www.gmail.com/

HousingMaps
http://www.housingmaps.com/

TadaList
http://www.tadalist.com/

AmazonDiamondSearch
http://www.amazon.com/gp/gsl/search/finder/1043928955 0300739?ie=UTF8&redirect=true&productGroupID=loose_diamonds

NovoYahooMailBeta
http://whatsnew.mail.yahoo.com/

GoogleCalendar
http://www.google.com/calendar/

Links
GoogleSuggest
http://www.google.com/webhp?complete=1&hl=en

DojoToolkit
http://dojotoolkit.com/

Rico
http://openrico.org/

Script.aculo.us
http://script.aculo.us/

DirectWebRemoting(DWR)
http://getahead.ltd.uk/dwr

JSONRPC
http://jsonrpc.org/

ajax4jsf
https://ajax4jsf.dev.java.net/

ICEfaces
http://www.icesoft.com/products/icefaces.html

Links
DynaFaces
https://jsfextensions.dev.java.net/nonav/mvn/slides.html

DHTMLGoodies
http://www.dhtmlgoodies.com/

jMarki
https://ajax.dev.java.net/

GoogleWebToolkit(GWT)
http://code.google.com/webtoolkit/

RubyonRails
http://www.rubyonrails.org/

Echo2
http://www.nextapp.com/platform/echo2/echo/

Shale
http://struts.apache.org/strutsshale/