Your SlideShare is downloading. ×
0
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
JavaEE
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaEE

1,504

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,504
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
41
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1.  
  • 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?!
  • 9.  
  • 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

×