2.
<ul><li>Formado em Sistemas para Internet pelo IFPB (antigo CEFET-PB) </li></ul><ul><li>Desenvolvedor Java – Dynavideo </li></ul><ul><ul><li>Líder Técnico do Projeto ITVP </li></ul></ul><ul><li>4 anos de experiência com desenvolvimento web </li></ul><ul><ul><li>Alguns projetos: Paraiba1, Lojas maia. </li></ul></ul><ul><li>2 anos de experiência com pesquisa científica </li></ul><ul><ul><li>Desenvolvimento de aplicações web educacionais. </li></ul></ul>

3.
<ul><li>1991: O cientista inglês do CERN, Tim Berners Lee, constrói um sistema de gerenciamento de informação onde o texto poderia conter links e referências. </li></ul><ul><li>Ele havia criado um servidor para publicar este tipo de documento (chamado hipertexto), bem como um programa para lê-lo, que ele chamou de World Wide Web. </li></ul><ul><li>1993: o CERN lança o código-fonte do WWW em dóminio público, dando vazão à criação dos navegadores web. </li></ul>

4.
<ul><li>Interação entre cliente e servidor </li></ul>

5.
<ul><li>A maioria das ações do usuário na interface dispara uma solicitação HTTP para o servidor web. </li></ul><ul><li>O servidor processa algo - recuperando dados, realizando cálculos - e então retorna uma página HTML para o cliente. </li></ul><ul><li>Modelo adaptado do uso original da Web como um agente de hipertexto </li></ul><ul><li>O que faz a Web boa para hipertexto não necessariamente faz ela boa para aplicações de software. </li></ul>

6.
<ul><li>Se nós estivéssemos projetando a Web a partir do zero para aplicações, não faríamos com que os usuários esperassem em vão. </li></ul><ul><li>Uma vez que a interface está carregada, por que a interação do usuário deveria parar a cada vez que a aplicação precisasse de algo do servidor? </li></ul><ul><li>Na realidade, por que o usuário deve ver a aplicação ir ao servidor toda vez? </li></ul>

7.
<ul><li>O navegador é um terminal burro, não sabe nada sobre o que o usuário está realizando, tudo é retido no servidor. </li></ul><ul><li>Enquanto o servidor está fazendo seu trabalho, o que o usuário estará fazendo? </li></ul><ul><li>O que é certo, esperando. E a cada etapa em uma tarefa,o usuário aguarda mais uma vez. </li></ul>

8.
E como podemos resolver estes problemas?!

10.
<ul><li>Acrônimo em língua inglesa de Asynchronous Javascript And XML </li></ul><ul><li>É o uso combinado de tecnologias como Javascript e XML, com o objetivo de tornar páginas Web mais interativas com o usuário, utilizando solicitações assíncronas de informações. </li></ul><ul><li>AJAX não é uma tecnologia — são várias tecnologias conhecidas trabalhando juntas, cada uma fazendo sua parte. </li></ul>

11.
<ul><li>Lógica da aplicação é movida para o navegador: é executada u ma página mais complexa, contendo grande proporção de código JavaScript. </li></ul><ul><li>Esta página sabe como responder às informações inseridas pelo usuário e é capaz de decidir se manipula a entrada do usuário ele mesmo ou se passa uma solicitação para o servidor web. </li></ul>1. O navegador deve hospedar uma aplicação, não conteúdo

12.
<ul><li>O cabeçalho, o histórico de navegação, e outras características do layout da página estão todas carregadas, o servidor necessita enviar de volta somente os dados relevantes. </li></ul><ul><li>O tráfego tem sua maior intensidade no início, as comunicações subseqüentes com o servidor são muito mais eficientes. </li></ul>2. O servidor fornece dados, não conteúdo

13.
<ul><li>Múltiplas ações do usuário: enquanto processa uma ação pode requisitar outras </li></ul><ul><li>Recursos de aplicações desktop: novas possibilidades de interação além de hyperlinks e formulários. </li></ul><ul><li>A possibilidade de se comunicar com o servidor em resposta a um movimento ou arraste do mouse, habilita o servidor a trabalhar juntamente com o usuário </li></ul>3. A interação do usuário com a aplicação pode ser flexível e contínua

14.
<ul><li>Codificar uma aplicação Ajax é diferente </li></ul><ul><li>O código que fornecido aos usuários no início da aplicação deve executar até que eles encerrem-na, sem interrupção. </li></ul><ul><li>Para atingirmos o objetivo, devemos escrever códigos de alto-desempenho. </li></ul><ul><li>A base de código será tipicamente mais ampla que qualquer código escrito para uma aplicação web clássica. </li></ul>4. Real codificação requer disciplina

15.
<ul><li>Uma aplicação Ajax se comunica eficientemente com o servidor enquanto o usuário continua com seu trabalho. </li></ul><ul><li>Aplicações Ajax demonstram ser claramente uma descendência da aplicação clássica baseada em páginas. </li></ul>Concluímos que…

16.
<ul><li>Se o usuário desativar a execução de scripts em seu navegador, a aplicação poderá não funcionar corretamente, na maior parte das vezes. </li></ul><ul><li>O lado do cliente muitas vezes é escrito em linguagens interpretadas, como JavaScript, que provocam uma sensível redução de desempenho </li></ul><ul><li>Tempo de carregamento da aplicação: toda inteligência do lado cliente deve ser baixada do servidor para o cliente. </li></ul>

17.
<ul><li>Perda de visibilidade por Sites de Busca: Sites de busca podem não serem capazes de indexar os textos carregados dinamicamente. </li></ul><ul><li>Voltar/avançar e bookmark: a página só é carregada uma vez, não há como navegar nas sub-páginas pelo browser ou marcar uma delas como favorita. </li></ul><ul><li>Dependência de conexão com Internet: uma típica aplicação em ajax requer que a aplicação fique permanentemente conectada à rede. </li></ul>

18.
<ul><li>Riqueza: </li></ul><ul><li>É possível oferecer características que não podem ser obtidas utilizando apenas o HTML disponível no navegador para aplicações web padrões </li></ul><ul><li>Capacidade de poder incluir qualquer coisa no lado do cliente, como arrastar e soltar, utilizar uma barra para alterar dados, etc. </li></ul><ul><li>Cálculos efetuados apenas pelo cliente e que não precisam ser enviados volta para o servidor. </li></ul>

19.
<ul><li>Melhor Resposta: </li></ul><ul><li>A interface é mais reativa a ações do usuário do que em aplicações Web padrão, que necessitam de uma constante interação com um servidor remoto. </li></ul><ul><li>Com isto as aplicações Ajax levam o usuário a ter a sensação de estarem utilizando uma aplicação desktop. </li></ul>

20.
<ul><li>Equilibrio entre Cliente/Servidor: </li></ul><ul><li>A carga de processamento entre o Cliente e Servidor torna-se mais equilibrada, </li></ul><ul><li>O servidor web não necessita realizar todo o processamento e enviar para o cliente </li></ul><ul><li>O mesmo servidor pode lidar com mais sessões de clientes simultaneamente. </li></ul>

21.
<ul><li>Comunicação Assíncrona: </li></ul><ul><li>Uma ação realizada pelo usuário como o clique em um botão não precisa esperar por uma resposta do servidor. </li></ul><ul><li>É possível antecipar uma futura necessidade de alguns dados, carregando-os no cliente antes que ele os solicite, de modo a acelerar uma posterior resposta. </li></ul><ul><li>Ex.: O Google Maps usa esta técnica para gravar dados no cliente, agilizando a exibição dos mapas </li></ul>

22.
<ul><li>Otimização da Rede: </li></ul><ul><li>O fluxo de dados na rede também pode ser significativamente reduzida </li></ul><ul><li>O cliente tem uma inteligência imbutida maior, podendo decidir quais dados serão trocados com o servidor </li></ul><ul><li>Transferência apenas dos dados necessários, ou seja, redução do número de respostas. </li></ul><ul><li>Carga global da rede é reduzida. </li></ul>

23.
Maravilha! Mas, como ficará na prática a estrutura da aplicação?

24.
Aplicação Clássica – Navegação baseada em páginas

25.
Estrutura do template principal: * Apenas o bloco principal é recarregado a cada requisição TOPO RODAPÉ LATERAL PRINCIPAL

26.
Sub-páginas – Navegação baseada em estados Uma única página: users.xhtml LIST CREATE EDIT REMOVE

27.
LIST CREATE EDIT REMOVE LIST CREATE EDIT REMOVE A sub-página é exibida de acordo com o estado atual Listar Usuários Criar Novo usuário Menu Usuários

28.
<ul><li>Tecnologias necessárias para o desenvolvimento: </li></ul><ul><li>Java Server Faces: http://java.sun.com/javaee/javaserverfaces/ </li></ul><ul><li>Facelets https://facelets.dev.java.net/ </li></ul><ul><li>Richfaces http://www.jboss.org/richfaces </li></ul>

29.
<ul><li>Bibliotecas necessárias: </li></ul><ul><li>Apache Commons (annotations, beanutils, collections, digester, el, io, lang, loggin, resources, etc..) </li></ul><ul><li>JSF: (jsf-api.jar, jsf-impl.jar, jsf-tlds.jar) </li></ul><ul><li>Facelets: (jsf-facelets.jar) </li></ul><ul><li>Richfaces: (richfaces-api-3.3.x.GA.jar, richfaces-impl-3.3.x.GA.jar, richfaces-ui-3.3.x.GA.jar) </li></ul><ul><li>Taglibs e Expression Language: jstl.jar, standard.jar, el-ri.jar </li></ul>

30.
Configuração no web.xml: <context-param> <param-name>javax.faces.DEFAULT_SUFFIX</param-name> <param-value>.xhtml</param-value> </context-param> <context-param> <param-name>javax.faces.STATE_SAVING_METHOD</param-name> <param-value> server </param-value> </context-param> <context-param> <param-name> org.apache.myfaces.NUMBER_OF_VIEWS_IN_SESSION</param-name> <param-value>80</param-value> </context-param>

31.
Configuração no web.xml: <context-param> <param-name>org.richfaces.SKIN</param-name> <param-value>blueSky</param-value> </context-param> <context-param> <param-name>org.richfaces.CONTROL_SKINNING_CLASSES</param-name> <param-value>enable</param-value> </context-param> <!-- Utilizando o facelets junto com o Richfaces --> <context-param> <param-name>org.ajax4jsf.VIEW_HANDLERS</param-name> <param-value>com.sun.facelets.FaceletViewHandler</param-value> </context-param>

32.
Configuração no web.xml: <filter> <display-name>RichFaces Filter</display-name> <filter-name> richfaces</filter-name> <filter-class>org.ajax4jsf.Filter</filter-class> <init-param> <param-name>maxRequestSize</param-name> <param-value>1610612730</param-value> </init-param> </filter> <filter-mapping> <filter-name> richfaces</filter-name> <servlet-name>Faces Servlet</servlet-name> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> <dispatcher>INCLUDE</dispatcher> </filter-mapping>

33.
Configuração no web.xml: <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern> *.jsf </url-pattern > </servlet-mapping>

34.
<ul><li>Criando o FacesUtil </li></ul><ul><li>FacesUtil: </li></ul><ul><li>public class FacesUtil { </li></ul><ul><li>public static Object getSessionParam(String param) { </li></ul><ul><li>FacesContext context = FacesContext.getCurrentInstance(); </li></ul><ul><li>Map sessionMap = context.getExternalContext().getSessionMap(); </li></ul><ul><li>return sessionMap.get(param); </li></ul><ul><li>} </li></ul><ul><li>public static void setSessionParam(String param, Object object) { </li></ul><ul><li>FacesContext context = FacesContext.getCurrentInstance(); </li></ul><ul><li>Map sessionMap = context.getExternalContext().getSessionMap(); </li></ul><ul><li>sessionMap.put(param, object); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>

35.
<ul><li>Criando os Managed Beans: </li></ul><ul><li>PageBean: </li></ul>public class PageBean implements Serializable { public String currentPage = &quot;home.xhtml&quot;; public String getCurrentPage() { return currentPage; } public void setCurrentPage(String current) { this.currentPage = current; } }

36.
Configuração no faces-config.xml: <managed-bean> <managed-bean-name>pageBean</managed-bean-name> <managed-bean-class>br.appsajax.beans.pageBean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean> <managed-bean> <managed-bean-name>userBean</managed-bean-name> <managed-bean-class>br.appsajax.beans.UserBean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern> *.jsf </url-pattern> </servlet-mapping>

37.
<ul><li>Criando os Managed Beans: </li></ul><ul><li>UserBean: </li></ul><ul><li>public class UserBean { </li></ul><ul><li>private static final String CREATE_STATE = &quot;create&quot;; </li></ul><ul><li>private static final String EDIT_STATE = &quot;edit&quot;; </li></ul><ul><li>private static final String LIST_STATE = &quot;list&quot;; </li></ul><ul><li>private static final String REMOVE_STATE = &quot;remove&quot;; </li></ul><ul><li>private String currentState = LIST_STATE; </li></ul><ul><li>public boolean isCreateState() { </li></ul><ul><li>String state = this.getCurrentState(); </li></ul><ul><li>return (state == null || CREATE_STATE.equals(state)); </li></ul><ul><li>} </li></ul><ul><li>public boolean isEditState(), isRemoveState(), isListState()... </li></ul>

38.
<ul><li>Criando os Managed Beans: </li></ul><ul><li>UserBean: </li></ul><ul><li>private List<User> users; </li></ul><ul><li>private User user = new User(); </li></ul><ul><li>public void prepareCreate() { </li></ul><ul><li>clear(); </li></ul><ul><li>currentState = CREATE_STATE; </li></ul><ul><li>} </li></ul><ul><li>public void list() { </li></ul><ul><li>FacesUtil.setCurrentPage(&quot;users.xhtml&quot;); </li></ul><ul><li>users = facade.listUsers(); </li></ul><ul><li>} </li></ul><ul><li>public void prepareEdit() {} </li></ul><ul><li>public void prepareRemove() {} </li></ul>

39.
<ul><li>Criando os Managed Beans: </li></ul><ul><li>UserBean: </li></ul><ul><li>public void create() { </li></ul><ul><li>UserController.createUser(user); //controlador que adiciona o objeto </li></ul><ul><li>list(); </li></ul><ul><li>} </li></ul><ul><li>public void edit() { </li></ul><ul><li>UserController.editUser(user); //controlador que atualiza o objeto </li></ul><ul><li>list(); </li></ul><ul><li>} </li></ul><ul><li>public void remove() { </li></ul><ul><li>UserController.removeUser(user); //controlador que remove o objeto </li></ul><ul><li>list(); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>

40.
Cabeçalho das páginas - TagLibs: <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns= &quot;http://www.w3.org/1999/xhtml&quot; xmlns:h= &quot;http://java.sun.com/jsf/html&quot; xmlns:f= &quot;http://java.sun.com/jsf/core&quot; xmlns:ui= &quot;http://java.sun.com/jsf/facelets&quot; xmlns:a4j= &quot;http://richfaces.org/a4j&quot; xmlns:rich= &quot;http://richfaces.org/rich” >

41.
<ul><li>Criando o template principal </li></ul><ul><li>main.xhtml </li></ul><ul><li><rich:layout> <rich:layoutPanel position=&quot;top&quot; width=&quot;100%“> </rich:layoutPanel> <rich:layoutPanel position=&quot;left&quot; width=&quot;30%“> <a4j:include ajaxRendered=&quot;true&quot; viewId=&quot;menu.xhtml&quot; /> </rich:layoutPanel> </li></ul><ul><li><rich:layoutPanel position=&quot;center&quot; width=&quot;70%“> <a4j:include ajaxRendered=&quot;true&quot; viewId=&quot;#{pageBean.currentPage}&quot; /> </rich:layoutPanel> </li></ul><ul><li></rich:layout> </li></ul>

42.
<ul><li>Criando o menu lateral </li></ul><ul><li>menu.xhtml </li></ul><ul><li><rich:panelMenu mode=&quot;ajax&quot;> </li></ul><ul><li><rich:panelMenuGroup label=&quot;Usuários”> </li></ul><ul><li><rich:panelMenuItem label=“Listar Usuários&quot; action=&quot;#{userBean.list}&quot; > </rich:panelMenuItem> </li></ul><ul><li><rich:panelMenuItem label=&quot;Cadastrar Usuário&quot; action=&quot;#{userBean.prepareCreate}&quot; ></rich:panelMenuItem> </li></ul><ul><li></rich:panelMenuGroup> </li></ul><ul><li></rich:panelMenu> </li></ul><ul><li><ui:insert name= &quot;currentPage&quot; /> </li></ul>

43.
<ul><li>Criando o template de uma sub-página </li></ul><ul><li>users-template.xhtml </li></ul><ul><li><a4j:region> </li></ul><ul><li><a4j:outputPanel id= &quot;listUserPanel&quot; rendered=&quot;#{userBean.listState}&quot;> </li></ul><ul><li><ui:insert name= &quot;listUser&quot;></ui:insert> </li></ul><ul><li></a4j:outputPanel> </li></ul><ul><li><a4j:outputPanel id= &quot;createUserPanel” rendered= &quot;#{userBean.editState || userBean.createState}&quot;> </li></ul><ul><li><ui:insert name= &quot;createUser&quot;></ui:insert> </li></ul><ul><li></a4j:outputPanel> </li></ul><ul><li><a4j:outputPanel id= &quot;removeUserPanel” rendered= &quot;#{userBean.removeState}&quot;> </li></ul><ul><li>< ui:insert name= &quot;removeUser&quot;></ui:insert> </li></ul><ul><li></a4j:outputPanel> </li></ul><ul><li></a4j:region> </li></ul>

44.
<ul><li>Criando a sub-página </li></ul><ul><li>users.xhtml </li></ul><ul><li><ui:composition template=&quot;/templates/users-template.xhtml&quot;> </li></ul><ul><li><ui:define name=&quot;listUser&quot;> </li></ul><ul><li><a4j:commandButton action=&quot;#{userBean.prepareCreate}” value=“Novo” /> </li></ul><ul><li><!– Data Tables contendo a lista de conteúdos --> </li></ul><ul><li></ui:define> </li></ul><ul><li><ui:define name=&quot;createUser&quot;> </li></ul><ul><li><!– Formulário contendo os dados do usuário--> </li></ul><ul><li><a4j:commandButton type=&quot;submit“ rendered=&quot;#{userBean.createState}&quot; action=&quot;#{userBean.createAction}” value=“Adicionar&quot; /> </li></ul><ul><li><a4j:commandButton rendered=&quot;#{userBean.editState} action=&quot;#{userBean.editAction}&quot; type=&quot;submit“ value=“Editar&quot; /> </li></ul><ul><li></ui:define> </li></ul><ul><li><ui:define name=“removeUser&quot;> </li></ul><ul><li></ui:define> </li></ul><ul><li></ui:composition> </li></ul>

45.
<ul><li>Já que não é possivel utilizar o botão voltar utilize barras de navegação Ex.: Espaços > Conteúdos > Editar Conteúdo </li></ul><ul><li>Utilize javascript para desabilitar o botão após o primeiro clique, para mostrar ao usuário que a ação está sendo processada </li></ul><ul><li>Utilize a tag <a4j:status> para mostrar imagens indicando o processamento, as famosas imagens de “loading”. Gerador de Gifs para loadings: http://www.ajaxload.info/ </li></ul>

46.
FIM