Revisão 2.2

Esta é uma revisão para a segunda prova.

  1. Altere o MiniBlog para utilizar AJAX no formulário para publicar novos posts, nesse caso, após a publicação, uma <div> acima do formulário deverá ser modificada para informar que a publicação foi realizada com sucesso.
  2. Foi adicionado o jQuery à página mestre para que todas as outras páginas possam usar.

    /master-page.jsp (utilizando jQuery)

    E modifiquei a página de publicação para poder adicionar por AJAX.

    /posts/adicionar.jsp (formulário usando AJAX)

    Veja que a chamada AJAX é também feita para o comando Posts:publicar.

  3. Adicione ao MiniBlog a funcionalidade de filtrar a lista de posts por uma certa tag.

    Assim, adicione antes da lista de posts um campo de busca que autocomplete as tags disponíveis cadastradas no sistema usando AJAX. Será algo como o seguinte:

    Filtrar por tag:

    Para isso funcionar desse jeito use um <input> vinculado a um datalist e crie um subcomando que receba os caracteres digitados e devolva uma série de <option> com os valores das tagsque iniciem pelos caracteres digitados.

    Para a consulta no banco, adicione o seguinte método à TagDao.

    public List<Tag> obterIniciamPor(String caracteres) {
        String query =
            "SELECT id, nome " +
            "FROM Tags " +
            "WHERE nome LIKE :filtro";
    
        try (Connection con = db.open()) {
            return con.createQuery(query)
                .addParameter("filtro", caracteres + "%")
                .executeAndFetch(Tag.class);
        }
    }

    Resumo do que será necessário fazer nessa questão:

    1. Adicionar à página de lista de posts um formulário tal como:
      <form>
        Filtrar por tag: <input list="tags">
        <datalist id="tags"></datalist>
        <button type="submit">Buscar</button>
      </form>
    2. Criar o comando no Java para retornar a lista de <option> de tags.

    3. Adicionar o evento de JavaScript keyup para pegar os caracteres ao digitar:

      $("input[name='tags']").keyup(function () {
          // Aqui você irá fazer uma chamada AJAX ao servidor web
          // e com o retorno, modificar as opções do datalist associado.
      });

    OBS: o elemento <datalist> não é compatível com o navegador Safari.

  4. Eu criei um novo comando chamadado Tags:opcoes para retornar a lista de opções.

    Tags:opcoes (novo comando)
    /tags/opcoes.jsp (nova página, usada pelo comando)

    E adicionei à tela da lista de posts o JavaScript necessário para a autocompletação funcionar.

    /posts/lista.jsp
  5. Complete a questão anterior, obtendo os posts de uma certa tag via AJAX.

    Isto é, ao clicar no botão de busca, a lista de posts deverá ser atualizado sem recarregar a página.

    Para atingir esse objetivo, você precisará:

    1. Criar um ou mais métodos DAO com o necessário para consultar. Você deve decidir a melhor estratégia, quais classes DAO serão modificadas, quantos métodos novos serão necessários, etc.
    2. Criar um comando no Java que retorne o fragmento HTML da lista de posts.
    3. Associar via JavaScript um evento submit() ao formulário e fazer as chamadas AJAX e manipulações necessárias no HTML.
  6. Eu adicionei ao DAO de posts um método para obter uma lista de posts pelo nome da tag.

    obterPorTag() (novo método de PostDao)

    Para retornar o fragmento HTML de posts a ser chamado via AJAX, eu criei um novo comando.

    Posts:porTag (novo comando)
    /posts/quadro.jsp (página usada pelo comando)

    A nova página, quadro.jsp, está sendo usada na lista de posts para exibir a lista inicial com todos os posts e para exibir, via AJAX, os posts filtrados pela tag selecionada.

    Note nas linhas 35 a 37 o include e a <div id="posts">.

    /posts/lista.jsp (tela de lista de posts modificada)