JavaEE
Upcoming SlideShare
Loading in...5
×
 

JavaEE

on

  • 2,318 views

 

Statistics

Views

Total Views
2,318
Slideshare-icon Views on SlideShare
2,292
Embed Views
26

Actions

Likes
0
Downloads
39
Comments
0

5 Embeds 26

https://blogs.oracle.com 11
http://www.slideshare.net 8
http://blogs.oracle.com 4
http://blogs.sun.com 2
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    JavaEE JavaEE Presentation Transcript

    •  
      • Formado em Sistemas para Internet pelo IFPB (antigo CEFET-PB)
      • Desenvolvedor Java – Dynavideo
        • Líder Técnico do Projeto ITVP
      • 4 anos de experiência com desenvolvimento web
        • Alguns projetos: Paraiba1, Lojas maia.
      • 2 anos de experiência com pesquisa científica
        • Desenvolvimento de aplicações web educacionais.
      • 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.
      • 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.
      • 1993: o CERN lança o código-fonte do WWW em dóminio público, dando vazão à criação dos navegadores web.
      • Interação entre cliente e servidor
      • A maioria das ações do usuário na interface dispara uma solicitação HTTP para o servidor web.
      • O servidor processa algo - recuperando dados, realizando cálculos - e então retorna uma página HTML para o cliente.
      • Modelo adaptado do uso original da Web como um agente de hipertexto
      • O que faz a Web boa para hipertexto não necessariamente faz ela boa para aplicações de software.
      • 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.
      • 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?
      • Na realidade, por que o usuário deve ver a aplicação ir ao servidor toda vez?
      • O navegador é um terminal burro, não sabe nada sobre o que o usuário está realizando, tudo é retido no servidor.
      • Enquanto o servidor está fazendo seu trabalho, o que o usuário estará fazendo?
      • O que é certo, esperando. E a cada etapa em uma tarefa,o usuário aguarda mais uma vez.
    • E como podemos resolver estes problemas?!
    •  
      • Acrônimo em língua inglesa de Asynchronous Javascript And XML
      • É 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.
      • AJAX não é uma tecnologia — são várias tecnologias conhecidas trabalhando juntas, cada uma fazendo sua parte.
      • Lógica da aplicação é movida para o navegador: é executada u ma página mais complexa, contendo grande proporção de código JavaScript.
      • 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.
      1. O navegador deve hospedar uma aplicação, não conteúdo
      • 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.
      • O tráfego tem sua maior intensidade no início, as comunicações subseqüentes com o servidor são muito mais eficientes.
      2. O servidor fornece dados, não conteúdo
      • Múltiplas ações do usuário: enquanto processa uma ação pode requisitar outras
      • Recursos de aplicações desktop: novas possibilidades de interação além de hyperlinks e formulários.
      • 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
      3. A interação do usuário com a aplicação pode ser flexível e contínua
      • Codificar uma aplicação Ajax é diferente
      • O código que fornecido aos usuários no início da aplicação deve executar até que eles encerrem-na, sem interrupção.
      • Para atingirmos o objetivo, devemos escrever códigos de alto-desempenho.
      • A base de código será tipicamente mais ampla que qualquer código escrito para uma aplicação web clássica.
      4. Real codificação requer disciplina
      • Uma aplicação Ajax se comunica eficientemente com o servidor enquanto o usuário continua com seu trabalho.
      • Aplicações Ajax demonstram ser claramente uma descendência da aplicação clássica baseada em páginas.
      Concluímos que…
      • 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.
      • O lado do cliente muitas vezes é escrito em linguagens interpretadas, como JavaScript, que provocam uma sensível redução de desempenho
      • Tempo de carregamento da aplicação: toda inteligência do lado cliente deve ser baixada do servidor para o cliente.
      • Perda de visibilidade por Sites de Busca: Sites de busca podem não serem capazes de indexar os textos carregados dinamicamente.
      • 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.
      • Dependência de conexão com Internet: uma típica aplicação em ajax requer que a aplicação fique permanentemente conectada à rede.
      • Riqueza:
      • É 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
      • Capacidade de poder incluir qualquer coisa no lado do cliente, como arrastar e soltar, utilizar uma barra para alterar dados, etc.
      • Cálculos efetuados apenas pelo cliente e que não precisam ser enviados volta para o servidor.
      • Melhor Resposta:
      • 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.
      • Com isto as aplicações Ajax levam o usuário a ter a sensação de estarem utilizando uma aplicação desktop.
      • Equilibrio entre Cliente/Servidor:
      • A carga de processamento entre o Cliente e Servidor torna-se mais equilibrada,
      • O servidor web não necessita realizar todo o processamento e enviar para o cliente
      • O mesmo servidor pode lidar com mais sessões de clientes simultaneamente.
      • Comunicação Assíncrona:
      • Uma ação realizada pelo usuário como o clique em um botão não precisa esperar por uma resposta do servidor.
      • É 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.
      • Ex.: O Google Maps usa esta técnica para gravar dados no cliente, agilizando a exibição dos mapas
      • Otimização da Rede:
      • O fluxo de dados na rede também pode ser significativamente reduzida
      • O cliente tem uma inteligência imbutida maior, podendo decidir quais dados serão trocados com o servidor
      • Transferência apenas dos dados necessários, ou seja, redução do número de respostas.
      • Carga global da rede é reduzida.
    • Maravilha! Mas, como ficará na prática a estrutura da aplicação?
    • Aplicação Clássica – Navegação baseada em páginas
    • Estrutura do template principal: * Apenas o bloco principal é recarregado a cada requisição TOPO RODAPÉ LATERAL PRINCIPAL
    • Sub-páginas – Navegação baseada em estados Uma única página: users.xhtml LIST CREATE EDIT REMOVE
    • 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
      • Tecnologias necessárias para o desenvolvimento:
      • Java Server Faces: http://java.sun.com/javaee/javaserverfaces/
      • Facelets https://facelets.dev.java.net/
      • Richfaces http://www.jboss.org/richfaces
      • Bibliotecas necessárias:
      • Apache Commons (annotations, beanutils, collections, digester, el, io, lang, loggin, resources, etc..)
      • JSF: (jsf-api.jar, jsf-impl.jar, jsf-tlds.jar)
      • Facelets: (jsf-facelets.jar)
      • Richfaces: (richfaces-api-3.3.x.GA.jar, richfaces-impl-3.3.x.GA.jar, richfaces-ui-3.3.x.GA.jar)
      • Taglibs e Expression Language: jstl.jar, standard.jar, el-ri.jar
    • 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>
    • 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>
    • 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>
    • 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>
      • Criando o FacesUtil
      • FacesUtil:
      • public class FacesUtil {
      • public static Object getSessionParam(String param) {
      • FacesContext context = FacesContext.getCurrentInstance();
      • Map sessionMap = context.getExternalContext().getSessionMap();
      • return sessionMap.get(param);
      • }
      • public static void setSessionParam(String param, Object object) {
      • FacesContext context = FacesContext.getCurrentInstance();
      • Map sessionMap = context.getExternalContext().getSessionMap();
      • sessionMap.put(param, object);
      • }
      • }
      • Criando os Managed Beans:
      • PageBean:
      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; } }
    • 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>
      • Criando os Managed Beans:
      • UserBean:
      • public class UserBean {
      • private static final String CREATE_STATE = &quot;create&quot;;
      • private static final String EDIT_STATE = &quot;edit&quot;;
      • private static final String LIST_STATE = &quot;list&quot;;
      • private static final String REMOVE_STATE = &quot;remove&quot;;
      • private String currentState = LIST_STATE;
      • public boolean isCreateState() {
      • String state = this.getCurrentState();
      • return (state == null || CREATE_STATE.equals(state));
      • }
      • public boolean isEditState(), isRemoveState(), isListState()...
      • Criando os Managed Beans:
      • UserBean:
      • private List<User> users;
      • private User user = new User();
      • public void prepareCreate() {
      • clear();
      • currentState = CREATE_STATE;
      • }
      • public void list() {
      • FacesUtil.setCurrentPage(&quot;users.xhtml&quot;);
      • users = facade.listUsers();
      • }
      • public void prepareEdit() {}
      • public void prepareRemove() {}
      • Criando os Managed Beans:
      • UserBean:
      • public void create() {
      • UserController.createUser(user); //controlador que adiciona o objeto
      • list();
      • }
      • public void edit() {
      • UserController.editUser(user); //controlador que atualiza o objeto
      • list();
      • }
      • public void remove() {
      • UserController.removeUser(user); //controlador que remove o objeto
      • list();
      • }
      • }
    • 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” >
      • Criando o template principal
      • main.xhtml
      • <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>
      • <rich:layoutPanel position=&quot;center&quot; width=&quot;70%“> <a4j:include ajaxRendered=&quot;true&quot; viewId=&quot;#{pageBean.currentPage}&quot; /> </rich:layoutPanel>
      • </rich:layout>
      • Criando o menu lateral
      • menu.xhtml
      • <rich:panelMenu mode=&quot;ajax&quot;>
      • <rich:panelMenuGroup label=&quot;Usuários”>
      • <rich:panelMenuItem label=“Listar Usuários&quot; action=&quot;#{userBean.list}&quot; > </rich:panelMenuItem>
      • <rich:panelMenuItem label=&quot;Cadastrar Usuário&quot; action=&quot;#{userBean.prepareCreate}&quot; ></rich:panelMenuItem>
      • </rich:panelMenuGroup>
      • </rich:panelMenu>
      • <ui:insert name= &quot;currentPage&quot; />
      • Criando o template de uma sub-página
      • users-template.xhtml
      • <a4j:region>
      • <a4j:outputPanel id= &quot;listUserPanel&quot; rendered=&quot;#{userBean.listState}&quot;>
      • <ui:insert name= &quot;listUser&quot;></ui:insert>
      • </a4j:outputPanel>
      • <a4j:outputPanel id= &quot;createUserPanel” rendered= &quot;#{userBean.editState || userBean.createState}&quot;>
      • <ui:insert name= &quot;createUser&quot;></ui:insert>
      • </a4j:outputPanel>
      • <a4j:outputPanel id= &quot;removeUserPanel” rendered= &quot;#{userBean.removeState}&quot;>
      • < ui:insert name= &quot;removeUser&quot;></ui:insert>
      • </a4j:outputPanel>
      • </a4j:region>
      • Criando a sub-página
      • users.xhtml
      • <ui:composition template=&quot;/templates/users-template.xhtml&quot;>
      • <ui:define name=&quot;listUser&quot;>
      • <a4j:commandButton action=&quot;#{userBean.prepareCreate}” value=“Novo” />
      • <!– Data Tables contendo a lista de conteúdos -->
      • </ui:define>
      • <ui:define name=&quot;createUser&quot;>
      • <!– Formulário contendo os dados do usuário-->
      • <a4j:commandButton type=&quot;submit“ rendered=&quot;#{userBean.createState}&quot; action=&quot;#{userBean.createAction}” value=“Adicionar&quot; />
      • <a4j:commandButton rendered=&quot;#{userBean.editState} action=&quot;#{userBean.editAction}&quot; type=&quot;submit“ value=“Editar&quot; />
      • </ui:define>
      • <ui:define name=“removeUser&quot;>
      • </ui:define>
      • </ui:composition>
      • Já que não é possivel utilizar o botão voltar utilize barras de navegação Ex.: Espaços > Conteúdos > Editar Conteúdo
      • Utilize javascript para desabilitar o botão após o primeiro clique, para mostrar ao usuário que a ação está sendo processada
      • 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/
    • FIM