Olá desenvolvedores, dando continuidade a implementação do gráfico de Gantt comumente utilizado para gerenciar as etapas de um projeto. Na parte 1 deste tutorial para efeitos de teste, copiamos e inserimos em nosso projeto os dados que constam aqui, no arquivo data.js. Assim constatamos o perfeito funcionamento da nossa implementação até aqui. Porém, os dados ainda estão estáticos.

Para torná-los dinâmicos atente-se para algumas pequenas alterações na função JavaScript, o objetivo é torná-la mais amigável para nós. Assim, no evento onClick em msg escreva “Evento de clique. Em onResize escreva “Evento de redimensionamento”. E em onDrag, escreva “Evento de arrastar”.

Em slideWidth onde é determinado o comprimento da tela de exibição do gráfico, altere para 600. Antes de seguir com à construção do gráfico, vamos reduzir a exibição a um único registro.

IMPORTANTE: Lembre-se que quando a resposta vier do servidor será preciso fazer a conversão, isto é, o parse do JSON.

var ganttDataResposta = JSON.parse(response);

O próximo passo é processar os dados no lado do servidor e enviar a resposta em formato de Ajax. Desse modo antes de começarmos de fato a construção do Gantt View, será preciso construir o objeto JSON com os dados do planejamento.

A ideia é que somente após o processamento do servidor, que passará pelo Ajax a construção do gráfico Gantt seja iniciada. E o Ajax responsável por receber a resposta do servidor é a linha de código abaixo. E, importante, ele envolverá toda a função de construção do gráfico.

Porém antes de executarmos o Ajax é preciso executar o ready, a função que será executada assim que a tela for exibida.

$(document).ready(function() {
     $.get("buscarDatasPlanejamento"),function (response){
     ...
   });
});

MONTANDO O GANTT VIEW

E agora precisamos implementar a servlet, clique com o botão direito do mouse sobre o package de servlet >> New >> Servlet. Em Class Name atribua o nome que definimos para ela na página JSP, buscarDatasPlanejamento. Na anotação @WebServlet corrija o redirecionamento.

@WebServlet(“/pages/buscarDatasPlanejamento”);

Como a requisição está sendo feita com o Get os dados serão interceptados no método doGet() da servlet. E só com esta implementação já temos o Ajax sendo chamado, isto é, o Get chamando o Gantt View.

EM POUCAS PALAVRAS

O que faremos nos próximos tutoriais é montar o JSON captando a resposta do Ajax e processando em Javascript. Então iremos criar o banco de dados e projetar uma estrutura em JSON. Eu fico por aqui e nos vemos no próximo tutorial.