JavaEE

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>  <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 = "home.xhtml"; 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 = "create"; private static final String EDIT_STATE = "edit"; private static final String LIST_STATE = "list"; private static final String REMOVE_STATE = "remove"; 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("users.xhtml"); 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 "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns= "http://www.w3.org/1999/xhtml" xmlns:h= "http://java.sun.com/jsf/html" xmlns:f= "http://java.sun.com/jsf/core" xmlns:ui= "http://java.sun.com/jsf/facelets" xmlns:a4j= "http://richfaces.org/a4j" xmlns:rich= "http://richfaces.org/rich” >

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

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

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

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

JavaEE

Mais conteúdo relacionado

Mais procurados (18)

Destaque (8)

Semelhante a JavaEE (20)

Mais de Elenilson Vieira (20)

JavaEE