Help desk com JavaServer Faces 2

O atendimento virtual tem se tornado cada vez mais comum no mundo conectado em que vivemos. Hoje em dia encontramos esse tipo de serviço em sites de bancos, lojas, assistências técnicas e outras empresas que procuram manter um canal prático de comunicação com seus clientes. A solução do chat online oferece algumas vantagens como: baixo custo, comparado ao atendimento por telefone, onde existe o custo da ligação; atendimento simultâneo a vários clientes; facilidade no armazenamento do histórico das conversas; dentre outras.

Este tipo de sistema pode ser construído de diversas maneiras, utilizando várias das tecnologias disponíveis no mercado. No universo Java, escolhemos o JavaServer Faces, tecnologia amplamente adotada para a construção de aplicações web.

O JavaServer Faces é a especificação oficial que define uma abordagem para a construção de aplicações web Java de modo parecido com o utilizado na criação de sistemas desktop, à base de um conjunto de componentes visuais e não visuais, extensíveis em sua maioria. Além dos componentes básicos, como botões, caixas de texto e formulários, existem diversas suítes de componentes, de terceiros, que intensificam o poder do JSF por meio de componentes mais inteligentes e visualmente mais atraentes, como caixas de texto com autocomplete, diálogos modais, drag and drop, suporte transparente a AJAX, etc. Dessa forma, é possível criar aplicações web com interfaces ricas sem muito esforço.

Com base nisso, neste artigo aprenderemos como construir uma aplicação de help desk para lojas virtuais. No nosso sistema, serão gerenciados os usuários, atendentes e chats, bem como a fila de espera. Nossa aplicação será um sistema web construído utilizando a tecnologia JavaServer Faces 2 juntamente com a suíte de componentes PrimeFaces, que dentre outras funcionalidades, adiciona o suporte a AJAX aos componentes JSF, além de uma série de novos componentes próprios. Assim sendo, tanto serão apresentados ao leitor alguns conceitos básicos – como Managed Beans, regras de navegação, validações e injeção de dependências – e componentes JSF, quanto componentes específicos do PrimeFaces, com destaques ao Polling e RemoteCommand.

Background

Antes de iniciarmos a parte prática do nosso artigo, veremos uma pequena introdução a respeito das tecnologias que empregaremos, para que o leitor que ainda não tenha tido a oportunidade de trabalhar com tais tecnologias, sinta-se mais à vontade durante a leitura.

JavaServer Faces e PrimeFaces

Atualmente em sua segunda versão, o JavaServer Faces é uma especificação que foi criada visando definir um padrão para tornar a construção de aplicações web mais simples e eficiente. Para isto, ela oferece um conjunto de componentes visuais e não visuais, bem como APIs para gerenciar esses componentes e tratar os eventos relacionados a estes. Também é oferecido um framework para lidar com validações, conversões, navegação, aparência, internacionalização e acessibilidade, dentre outros aspectos de um sistema web.

Numa aplicação JSF, a interface gráfica é escrita em HTML, com o auxílio de tags especiais, definidas pelas taglibs da especificação (ex.: <h:form/>). Para fazer a ligação entre a interface gráfica e as classes de negócio, que são classes Java comuns, o JSF define o conceito de Managed Beans. Estes, como o próprio nome sugere, representam objetos cujo ciclo de vida é gerenciado pelo JSF. Esses objetos são acessíveis tanto a partir das páginas HTML quanto de outras classes Java da aplicação. Para caracterizar uma classe como um managed bean, ela não precisa herdar de nenhuma classe pré-definida ou mesmo implementar uma interface, basta marcá-la com a anotação @ManagedBean e o JSF se encarrega do restante.

E visando expandir ainda mais o poder do JSF, temos oPrimeFaces, que oferece mais de 120 componentes inteligentes com o visual atraente, além de ser a implementação JSF mais utilizada atualmente. Dessa forma o desenvolvedor passa a contar com um enorme arsenal de componentes, que normalmente atendem a maioria das necessidades da aplicação, facilitando e tornando o desenvolvimento mais produtivo.

Nada como o clássico “Hello World” para iniciar nossa aventura no universo JSF. Nesse exemplo, implementaremos uma saudação nominal, e para isso exibiremos uma caixa de texto para o usuário digitar seu nome e um botão. Ao clicar no botão, será apresentada uma tela com uma mensagem de boas-vindas personalizada.

As Listagens 1, 2 e 3 mostram o código dessa simples aplicação. Na Listagem 1, podemos observar alguns elementos básicos de uma página JSF 2. Repare que a página é um documento XML com a extensão .xhtml e que, ao invés de diretivas <%@ taglib %>, utilizadas em páginas JSP, são utilizados namespaces para referenciar os grupos de tags fornecidos pelo JSF. Também é necessário substituir as tags HTML <head> e <body> pelas suas correspondentes <h:head> e <h:body> para que o servlet do JavaServer Faces consiga processar o conteúdo da página. A tag <h:form>, encontrada em praticamente toda página, representa um formulário HTML onde colocamos os componentes de interação com o usuário (caixas de texto, listas, labels, botões, etc.). Dentro do formulário, encontramos a tag <h:inputText>, que desenha um campo de entrada de texto, cujo valor está associado a uma propriedade de um dado managed bean. No nosso caso, a propriedade name do managed bean helloBean. Por fim, temos a tag <h:commandButton>, que será renderizada como um botão do tipo submit do HTML. O atributo action define um método do managed bean a ser invocado ou, como no exemplo, simplesmente o identificador da página para onde o sistema deve ser redirecionado. Neste caso, a String “welcome” representa o nome da página que deve ser aberta ao clicar no botão, ou seja, quando o botão for clicado, o JSF irá procurar o arquivo de nome welcome.xhtml e exibi-lo. Note que não é necessário informar a extensão deste arquivo.

Listagem 1. Arquivo index.xhtml com o formulário HTML.

    <?xml version="1.0" encoding="UTF-8"?>
  <!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">
   
  <h:head>
   <title>JSF 2.0 Hello World</title>
  </h:head>
   
  <h:body>
   <h:form>
    <h:inputText value="#{helloBean.name}" />
    <h:commandButton value="Enviar" action="welcome" />
   </h:form>
  </h:body>
   
  </html>

Na Listagem 2 temos a classe HelloBean. Como vimos anteriormente, a anotação @ManagedBean serve para indicar ao JavaServer Faces que os objetos dessa classe devem ser gerenciados e disponibilizados às demais partes da aplicação. A outra anotação, @SessionScoped, indica o escopo do bean. Neste caso utilizamos o escopo de sessão (HTTP), o que significa que o estado desse managed bean é mantido entre as requisições de um mesmo usuário. Também é possível utilizar as anotações @RequestScoped, @ApplicationScoped, @ViewScoped, @NoneScoped e @CustomScoped, que definem outros escopos suportados pelo JSF. No mais, a classe contém apenas o atributo name com seus métodos acessores.

Listagem 2. Managed bean HelloBean.

  import java.io.Serializable;
   
  import javax.faces.bean.ManagedBean;
  import javax.faces.bean.SessionScoped;
   
  @ManagedBean
  @SessionScoped
  public class HelloBean implements Serializable {
   
   private String name;
   
   public String getName() {
    return name;
   }
   
   public void setName(String name) {
    this.name = name;
   }
  }

Na Listagem 3, simplesmente exibimos uma mensagem de boas-vindas, a qual exibe o nome do usuário, armazenado no ...