Desenvolvimento de Software para WEB

Prévia do material em texto

Desenvolvimento de Software 
para WEB 
 
JSF (JavaServer Faces) – Parte 5 
Prof. Regis Pires Magalhães 
regispires@lia.ufc.br 
AJAX 
AJAX 
• AJAX = Asynchronous JavaScript and XML 
• Jesse James Garrett batiza esta nova forma de 
comunicação entre cliente e servidor. 
• AJAX não é uma tecnologia, mas várias: 
▫ XHTML e CSS 
▫ DOM 
▫ XML, XSLT, XPath 
▫ XMLHttpRequest (XHR) 
▫ JavaScript 
DOM(Document Object Model) 
• DOM apresenta a estrutura de páginas web com 
um conjunto de objetos que podem ser 
manipulados via JavaScript; 
• Utilizar DOM permite que aplicações AJAX 
modifiquem o conteúdo da interface on the fly, 
de fato redesenhando partes da página 
 
 
AJAX 
AJAX JavaScript 
XML 
XHTML CSS 
XHR 
AJAX - Resumo 
• Não é interessante recarregar uma página inteira 
só para modificar uma pequena parte da tela. 
• Objetivo: melhorar a interatividade entre as 
aplicações e os usuários. 
• Vantagens: 
▫ Atualizar trechos de uma página ao invés da 
página inteira. 
▫ Realizar requisições sem interromper a navegação 
dos usuários. 
• JSF 2 possui suporte nativo à AJAX. 
AJAX 
• Conjunto de tecnologias que permitem às 
aplicações WEB prover interações ricas, 
informação mais instantânea e interfaces 
dinâmicas sem carregamento total da página. 
• Permite requisições ao servidor, sendo que a 
resposta vem como: 
▫ Fragmentos HTML; 
▫ Scripts a serem executados pelo cliente; 
▫ Dados arbitrários. 
• Nome: marketing ou técnico? 
▫ É possível trabalhar de forma síncrona e sem 
XML. 
AJAX 
• Javascript é usado para trazer do servidor 
informações adicionais para uma página. 
• O retorno de fragmentos HTML permite 
substituição ou adição aos elementos existentes 
na página. 
• A execução de scripts vindos do servidor 
permitem a alteração da aparência, conteúdo e 
comportamento da página. 
AJAX 
• Vantagens: 
▫ Diminui o tráfego de rede; 
▫ Deixa as páginas mais compactas/enxutas; 
▫ Melhora o tempo de resposta da aplicação; 
▫ Maior interatividade. 
10 
 Comparing traditional 
and AJaXian application 
 Compare # of bytes for 
same action 
 AJAX 73% more 
compact 
Bandwidth 
B
y
te
s 
Alexei White - http://www.ajaxinfo.com 
AJAX - Histórico 
• Microsoft Remote Scripting (IE ActiveX 
Microsoft.XMLHTTP), permite trabalhar com 
XML do servidor no cliente IE. 
• Em outros navegadores: 
▫ Mozilla incorpora um objeto Javascript que realiza 
a mesma funcionalidade XMLHttpRequest 
• XMLHttpRequest incluido pelo w3c 
• Incorporado a DOM v3 
• W3C Working Draft 27 February 2007 
Modelo Tradicional x AJAX 
Como Funciona 
AJAX 
• Usa um recurso chamado XMLHttpRequest 
(XHR) que encapsula requisições HTTP. 
• AJAX = XHR + DHTML (HTML, CSS, 
JavaScript) + Design Rico 
• Não é obrigatório usar XML com 
XMLHttpRequest. 
• Também é possível usar chamadas síncronas 
com AJAX, mas o browser pararia de responder 
às ações do usuário até a requisição ter sido 
processada. 
• Não há necessidade de recarregar a página 
inteira a cada ação; 
AJAX 
• Atualização apenas de trechos da tela; 
• Capacidade de realizar um post (submit) sem 
sair da página; 
• Capacidade de receber apenas a informação que 
precisa ser atualizada em vez de receber a página 
inteira. 
O objeto XMLHttpRequest 
• Estabelece um canal independente de 
comunicação entre páginas web do “client-side” 
com o “Server-side” para transferir dados; 
• Inicialmente chamado de XMLHttp 
• “Chave” para Web 2.0. 
XHR 
• IE 5, 5.5 e 6 implementam XHR como um objeto 
ActiveX (Msxml12.XMLHTTP / 
Microsoft.XMLHTTP) 
• Mozilla 1.0+, Safari 1.2+, Opera 8+, IE7 provêem 
objetos XMLHttpRequest nativos. 
• Todos os objetos XHR possuem os mesmos 
métodos e propriedades. 
JSON 
• JSON = JavaScript Object Notation 
• Formato de troca de dados leve. 
• Alternativa ao uso de XML em requisições AJAX 
▫ Rápido, leve 
▫ Não é preciso converter de XML para objetos 
JavaScript, pois objetos JSON já são JavaScript. 
Framework AJAX 
• jQuery: Interação com o DOM e Efeitos visuais 
▫ Framework JavaScript criado para simplificar a 
criação de efeitos visuais e de interatividade em 
web sites. 
• “O foco principal da biblioteca jQuery é a simplicidade. Por 
que submeter os desenvolvedores ao martírio de escrever 
longos e complexos códigos para criar simples efeitos?” 
John Resig 
 
• Resolução da incompatibilidade entre os navegadores. 
• Redução de código. 
• Reusabilidade do código através de plug-ins. 
• Utilização de uma vasta quantidade de plugins criados por 
outros desenvolvedores. 
• Trabalha com AJAX e DOM. 
• Implementação segura de recursos do CSS1, CSS2 e CSS3. 
• Licença MIT e GPL. 
• John Resig 
▫ Trabalha da Mozilla Corporation. 
▫ Em 22/08/2005 escreveu um artigo 
em seu blog relatando sua frustração 
com a maneira verbosa de se 
escrever JavaScript para obter os 
resultados pretendidos. 
▫ Em 14/01/2006, apresentou uma palestra com os 
resultados dos seus estudos: “jQuery a nova onda 
para JavaScript”. Ali nascia o jQuery. 
▫ Hoje é líder da equipe de desenvolvimento do 
jQuery. 
Fazendo requisições AJAX 
• Devemos indicar para o JSF quais componentes 
e eventos devem realizar requisições AJAX. 
• Para fazer isso, utilizamos a tag <f:ajax>. 
 
 
 
• Uma requisição AJAX será realizada toda vez 
que o valor da caixa de texto for modificado. 
▫ O evento padrão associado ao componente 
<h:inputText> é o onchange. 
<h:inputText > 
 <f:ajax /> 
</h:inputText > 
Funcionamento 
• Além da tag f:ajax, o suporte a AJAX do JSF tem 
uma pequena biblioteca javascript que recebe o 
HTML resultante dessa nova renderização e, a 
partir do id do elemento, via DOM (Document 
Object Model), substitui o conteúdo antigo pelo 
novo. 
Sem AJAX... 
... 
<h:commandButton value="Adicionar Marca" 
 action="#{marcaBean.addMarca}" /> 
 
<h:dataTable id="tabelaMarcas" 
 value="#{marcaBean.marcasParaIncluir}" 
 var="marca"> 
<h:column> 
<h:inputText value="#{marca.nome}"/> 
</h:column> 
</h:dataTable> 
... 
Com AJAX... 
... 
<h:commandButton value="Adicionar Marca" 
 action="#{marcaBean.addMarca}"> 
 <f:ajax render="tabelaMarcas"/> 
</h:commandButton> 
<h:dataTable id="tabelaMarcas" 
 value="#{marcaBean.marcasParaIncluir}" 
 var="marca"> 
<h:column> 
<h:inputText value="#{marca.nome}"/> 
</h:column> 
</h:dataTable> 
... 
Atributos 
• render  propriedade mais comum de se usar 
quando trabalhamos com AJAX no JSF. 
▫ Através dela, informamos a subárvore, ou 
subárvores que devem ser renderizadas 
novamente para atualizar a tela. 
• event  É o evento DOM que queremos usar 
para disparar a ação AJAX. 
▫ O valor padrão dessa propriedade é click para 
links e botões, e change para componentes de 
entrada de dados. 
▫ Existe também o evento blur, quando um 
componente perde o foco. 
Atributos 
• execute  Através dessa propriedade, informamos qual 
subárvore deve ser submetida ao servidor para que o JSF 
processe. 
▫ Essa árvore não é a mesma que irá ser renderizada 
novamente pela propriedade render. 
• listener  Assim como uma action do JSF pode ter 
action listeners associadas, uma requisicão AJAX 
também pode ter um listener. 
▫ Para isso basta ligarmos a propriedade listener com 
um método com a seguinte assinatura: 
 public void <nome do 
método>(javax.faces.event.AjaxBehaviorEvent event) throws 
javax.faces.event.AbortProcessingException. 
Exemplo 
... 
Nova Marca: 
<h:inputText id="novaMarca"value="#{marcaBean.novaMarca.descricao}"/> 
<h:commandButton value="Adicionar Marca" 
 action="#{marcaBean.addMarca}"> 
 <f:ajax execute="novaMarca" 
 render="tabelaMarcas novaMarca"/> 
</h:commandButton> 
<h:dataTable id="tabelaMarcas" 
 value="#{marcaBean.marcasParaIncluir}" 
 var="marca"> 
 <h:column>#{marca.nome}</h:column> 
</h:dataTable> 
... 
Definindo o evento 
<h:inputText > 
 <f:ajax event="keyup"/> 
</h:inputText > 
Aplicando AJAX a vários componentes 
• O JSF assumirá o evento padrão de cada 
componente. 
▫ <h:inputText> e <h:inputSecret>  onchange. 
▫ <h:commandButton>  onclick. 
<f:ajax > 
 <h:inputText /> 
 <h:inputSecret /> 
 <h:commandButton value="OK"/> 
</f:ajax > 
Mudando evento padrão de vários 
componentes 
• É possível mudar o evento padrão de diversos 
componentes, ao mesmo tempo em que 
deixamos todos eles com suporte a AJAX. 
 ... 
<f:ajax event="keyup"> 
 Ano de Fabricação: 
 <h:inputText value="#{auto.anoFabricacao}"/> 
 Ano do Modelo: 
 <h:inputText value="#{auto.anoModelo}"/> 
</f:ajax> 
... 
Especificando um evento padrão para os 
componentes internos 
<f:ajax event="blur"> 
 <h:panelGroup id="dadosAutomovel"> 
 Ano de Fabricação: 
 <h:inputText id="anoFabricacao" 
 value="#{automovelBean.automovel.anoFabricacao}"> 
 <f:ajax render="anoFabricacaoMsg"/> 
 </h:inputText> 
 <h:message id="anoFabricacaoMsg" for="anoFabricacao"/> 
 Ano do Modelo: 
 <h:inputText id="anoModelo" 
 value="#{automovelBean.automovel.anoModelo}"> 
 <f:ajax render="anoModeloMsg"/> 
 </h:inputText> 
 <h:message id="anoModeloMsg" for="anoModelo"/> 
 <h:panelGroup> 
</f:ajax> 
evento onblur usado como padrão 
para os componentes dentro dele. 
Equivalente a tirar o f:ajax que 
envolve os demais e repetir 
event="blur" nos f:ajax internos. 
Definindo o tipo de evento 
<f:ajax event="mouseout"> 
 <h:inputText /> 
 <h:inputSecret /> 
 <h:commandButton value ="OK"/> 
</f:ajax > 
Definindo componentes a avaliar 
• Definimos quais componentes devem ser avaliados 
no servidor através do atributo execute. 
• Ele pode ter uma lista com os identificadores dos 
componentes que precisam ser avaliados no 
servidor. 
• Componentes internos também serão avaliados. 
• Padrão: execute="@this". 
Definindo componentes a avaliar 
<h:form id="formulario-login"> 
 <h:inputText /> 
 <h:inputSecret /> 
 <h:commandButton value="Enviar"> 
 <f:ajax event="click" execute="formulario-login"/> 
 </h:commandButton > 
</h:form > 
Definindo componentes a atualizar 
<h:commandButton value="Gera Número"> 
 <f:ajax event="click" render="numero"/> 
</h:commandButton > 
<h:outputText id="numero" 
 value="#{geradorDeNumeroBean.numero}"/> 
<h:commandButton value ="Gera Números"> 
 <f:ajax event="click" render="numero1 numero2"/> 
</h:commandButton > 
<h:outputText id="numero1" 
 value="#{geradorDeNumeroBean.numero }"/> 
<h:outputText id="numero2“ 
 value"#{geradorDeNumeroBean.numero }"/> 
Associando um procedimento a 
uma requisição AJAX 
• Associação realizada através do atributo listener. 
• Executado na fase Invoke Application. 
<h:commandButton value="Salva"> 
 <f:ajax 
 event="click" 
 execute="formulario" 
 render="formulario" 
 listener="#{produtoBean.salva}"/> 
</h:commandButton> 
Palavras especiais 
• Palavras associadas a grupos especiais de 
componentes para uso nos atributos render e 
execute: 
▫ @all  todos os componentes da tela. 
▫ @none  nenhum componente. 
▫ @this  componente que disparou a requisição 
AJAX. 
▫ @form  componentes do formulário que 
contém o componente que disparou a requisição 
AJAX. 
Palavras especiais 
<h:form id="formulario-login"> 
 <h:inputText /> 
 <h:inputSecret /> 
 <h:commandButton value="Enviar"> 
 <f:ajax event="click" execute="@form"/> 
 </h:commandButton > 
</h:form > 
Exemplo 
<h:form > 
 <h:panelGrid columns ="2"> 
 <h:inputText id=" caixa "> 
 <f:ajax event="keyup" execute="caixa" 
 render="mensagem" /> 
 <f:validateLength minimum="5" maximum="10" /> 
 </h:inputText > 
 
 <h:message id="mensagem" for="caixa" 
 style="color:red"/> 
 
 <h:commandButton value="Enviar" /> 
 </h:panelGrid > 
</h:form > 
Exemplo 
<h:selectBooleanCheckbox 
value="#{compraBean.compra.temDesconto}"> 
 <f:ajax render="desconto"/> 
</h:selectBooleanCheckbox> Compra com desconto 
 
<h:panelGroup id="desconto" 
 rendered="#{compraBean.compra.temDesconto}"> 
 % desconto 
 <h:inputText 
 value="#{compraBean.compra.desconto}"/> 
</h:panelGroup> 
Exemplo – combos em cascata 
<h:selectOneMenu label="marca" value="#{automovelBean.marca}" 
 required="true" converter="entityConverter"> 
 <f:selectItem itemLabel="-- Selecione --" 
 noSelectionOption="true" /> 
 <f:selectItems value="#{marcaBean.marcas}" var="marca" 
 itemValue="#{marca}" itemLabel="#{marca.nome}" /> 
 <f:ajax render="selectModelo" /> 
</h:selectOneMenu> 
 
<h:selectOneMenu id="selectModelo" label="modelo" 
 value="#{automovelBean.automovel.modelo}" required="true" 
 converter="entityConverter"> 
 <f:selectItem itemLabel="-- Selecione --" 
 noSelectionOption="true" /> 
 <f:selectItems value="#{automovelBean.marca.modelos}" 
 var="modelo" itemValue="#{modelo}" 
 itemLabel="#{modelo.descricao}" /> 
</h:selectOneMenu> 
Boas práticas 
• Quando fazemos uma requisição AJAX, uma subárvore de 
componentes e criada, e o que precisamos fazer é procurar 
criar uma subárvore que seja a menor possível, já que isso 
influencia na performance.