Olá desenvolvedores, neste tutorial daremos início ao desenvolvimento de uma ferramenta chamada ganttView ou gráfico de Gantt. Este gráfico é utilizado para gerir o tempo em gerenciamento de projetos. Na verdade, trata-se de plugin jQuery para construir gráficos de Gantt em HTML.

Grosso modo e não muito diferente do que informamos acima o gráfico de Gantt é usado para ilustrar o avanço em diferentes etapas de um projeto.

E para ter acesso a todas as informações do projeto basta acessar a página no GitHub. O que iremos fazer é bem simples, vamos criar a página para a implementação do gráfico. Estilizá-la, declarar as bibliotecas jQuery e então estaremos prontos para tentar carregar os dados do banco de dados.

Como sempre fazemos para a implementação de uma nova funcionalidade, na página principal index.jsp, escreveremos o link para a página do gráfico de Gantt. E dentro da subpasta pages criaremos a página ganttView.jsp.

ESTRUTURANDO O PROJETO

Na pasta WebContent crie uma subpasta para armazenar exclusivamente os scripts do GanttView. Uma vez que estamos implementando inúmeras funcionalidades neste projeto. Dê para a pasta o nome de scriptGanttView.

Dentro da pasta que acabou de criar crie o arquivo “jquery-ui-1.8.4.css” copie todo o conteúdo do link para dentro do arquivo de estilo CSS. O próximo arquivo de estilo que irá criar é o “reset.css” e do mesmo modo proceda com ele copiando o conteúdo do link. E por fim importe o conteúdo demais um arquivo de estilo, o “jquery.ganttView.css”.

Agora repetiremos o mesmo procedimento com os arquivos JavaScript. Clique com o botão direito do mouse sobre a pasta scriptGanttView >> New >> Other e pesquise por JavaScript Source File, clique na opção correspondente e atribua um nome ao arquivo, “jquery-1.4.2.js”, e dentro dele copie o conteúdo do link. Faça o mesmo para os arquivos, “date.js”, “jquery-ui-1.8.4.js”, “jquery.ganttView.js”.

Observe que o arquivo data.js é o responsável pelo carregamento dos dados. Ele implementa toda uma estrutura de código JSON. É uma opção tê-lo em um arquivo separado ou em uma função no corpo da página. Prefiro trabalhar com esta segunda opção e é assim que iremos fazer.

BIBLIOTECAS E ESTILIZAÇÃO

Com a página criada o próximo passo é a declaração dos arquivos de estilos CSS dentro da tag de cabeçalho (head).  

E o mesmo processo iremos aplicar aos arquivos da biblioteca JavaScript, declarando-os no cabeçalho da página.

E para mantermos o padrão da página que originalmente implementou este exemplo, copiaremos o estilo de CSS inline, responsável por determinar a família e o tamanho da fonte. Clique aqui para acessar o código CSS e o código JavaScript. Este será implementado fora da tag <body>

E dentro da tag body implementaremos as divs dentro das quais chamaremos a função JavaScript.  Id ganttChart.

EM POUCAS PALAVRAS

E no próximo tutorial trabalharemos o Ajax para buscar os dados e enviar para o servidor. Eu fico por aqui e nós nos vemos no próximo tutorial.