Para começar a executar os exemplos dados neste artigo, você precisa do JDK 1.2 ou superior ( http://java.sun.com ). Você também precisará de um servidor web que suporte JSP. Testei este exemplo no Tomcat, onde usei a classe com.sun.image.codec.jpeg (lançada no Sun Java 2 SDK) para codificar os dados gráficos.
Como você deseja ter planos de fundo reutilizáveis, você deve criar uma classe Java para gerenciar o layout, incluindo a área do título e as bordas externas. Como mostrado na Figura A.
Figura A
Como você pode ver, sombreei a área do título e a borda externa. O título tem uma borda branca de um pixel de largura e a área gráfica tem uma borda preta fina. Essas bordas adicionam definição às sombras.
Os limites são fáceis de criar. Use o método Fill() do objeto Graphics2D para preencher um retângulo de título azul e, em seguida, use o método draw() para desenhar a borda com outra cor.
Criar um efeito de sombra também é muito simples. Primeiro, use o método fill() para desenhar uma sombra. Em seguida, desenhe o título com um deslocamento de sete pixels. Este deslocamento cria um efeito tridimensional, que resulta no efeito de sombra.
Suponha que haja uma empresa que vende produtos agrícolas e precise de um histograma para mostrar as vendas. Em uma aplicação prática, precisaríamos obter esses dados de um banco de dados ou arquivo XML, mas para simplificar, vamos supor que os dados de vendas estejam armazenados nos dois arrays a seguir:
String datanames[] = {"maçã", "laranja", "pêssego", "limão", "toranja"};
int valores de dados[] = {11, 62, 33, 102, 50};
A primeira matriz contém itens de diversos produtos agrícolas comercializados pela empresa. A segunda matriz é o volume de vendas correspondente a cada produto agrícola.
O histograma será exibido e salvo no formato JPEG, então precisamos definir o MIME, o tipo de conteúdo, corretamente. Os navegadores usam tipos MIME para decidir como reagir. O código a seguir define o tipo MIME:
resposta.setContentType("imagem/jpeg");
A seguir, precisamos de um objeto que represente a imagem. A API Java 2D suporta a classe BufferedImage , que fornece uma maneira de salvar e gerenciar dados de pixel na memória. Queremos que os gráficos sejam coloridos, por isso usamos o tipo de gráfico TYPE_INT_RGB . Os dois dados inteiros WIDTH e HEIGHT são usados para especificar a largura e a altura da imagem em pixels:
BufferedImage bi = novo BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
Agora que temos um objeto BufferedImage, podemos definir o conteúdo de Graphics2D chamando o método createGraphics() do objeto:
Graphics2D biContext = bi.createGraphics();
O programador que criou o gráfico precisa definir o parâmetro WIDTH com base na importância do gráfico e no layout geral da página. Os elementos gráficos são redimensionados automaticamente de acordo com as alterações na largura do gráfico.
A largura e a área delimitadora do título, bem como o quadrado reto mais longo do gráfico, precisam ser calculados com base no parâmetro WIDTH . O objetivo disso é garantir que todos os elementos gráficos não excedam a largura do gráfico e cruzem a borda direita do gráfico.
O número de itens de dados que precisam ser exibidos determina o parâmetro HEIGHT do gráfico. Se novos elementos forem adicionados às matrizes datavalues[] e datanames[] , a altura do gráfico deverá crescer de acordo para acomodar o tamanho da área de exibição necessária.
O parâmetro máximo é usado para o quadrado reto mais longo. Então, as larguras dos outros blocos retangulares são calculadas em relação ao máximo :
int barWidth = (innerWIDTH * currentValue) /máximo;
O algoritmo acima usa os dois valores de máximo e de innerWIDTH (área gráfica) do gráfico para garantir que o retângulo se expandirá e contrairá automaticamente conforme o valor de WIDTH muda.
Para exibir o gráfico, precisamos criar uma imagem de fundo e então adicionar os dados gráficos. Primeiro, crie um objeto graphBG e chame seu método draw() :
gráficoBG gr = novo gráficoBG();
gr.draw(biContext, WIDTH, HEIGHT, "Produto Agrícola", "Média Geral: " + média);
Os parâmetros do método draw() incluem conteúdo gráfico, biContext , WIDTH e HEIGHT , que a classe graphBG usa para determinar a largura e altura do título e da área gráfica. Por fim, o valor médio dos dados é calculado e adicionado ao texto exibido no título.
A posição da coordenada vertical (eixo y) de cada bloco retangular é calculada de acordo com a seguinte fórmula: y_pos = i * displayHeight + headerOffset . O displayHeight é igual à altura do texto no quadrado reto mais a altura do quadrado reto, e headerOffset representa a distância vertical da parte superior do gráfico, incluindo a altura da área do título e da sombra.
Criei esses retângulos e suas bordas usando a mesma técnica que usei para criar as bordas dos títulos anteriormente. Subtraí um pixel da largura e altura das bordas do retângulo para que cada retângulo pareça ter uma borda vermelha e facilitei o efeito de subtração desenhando as bordas internas em um fundo branco.
Criamos a imagem na memória, agora a codificamos e exibimos ao usuário. Não podemos usar o fluxo de saída JSP padrão para processar JPEG, então precisamos usar response.getOutputStream() para obter o fluxo do objeto de resposta. Podemos usar o fluxo de saída para criar um objeto JPEGImageEncoder e chamar seu encode() , passando o objeto BufferedImage que criamos anteriormente:
Codificador JPEGImageEncoder = JPEGCodec.createJPEGEncoder(saída);
codificador.encode(bi);
A imagem resultante é relativamente pequena, ocupando apenas 13,7 kilobytes de capacidade. A Figura B dá o efeito final:
Figura B
Em ambos os casos, a saída de index.jsp é uma imagem JPEG. Você pode salvá-lo em sua área de trabalho ou pressionar a tecla PrintScreen para fazer uma captura de tela. Se precisar exibir vários gráficos na mesma página ou introduzir gráficos em outro conteúdo, você pode usar a tag HTML img (< img src = ”index.jsp"> ) e, em seguida, colocar os gráficos quando necessário, como Use um forma.
Talvez uma das tecnologias mais antigas da Internet para gráficos gerados dinamicamente possa realizar outras tarefas além da exibição de uma imagem. Imagine que você precisa registrar o número de visualizadores desta imagem (semelhante ao registro do número de cliques em um anúncio), então você precisa implementar tarefas como contagem de cliques, banco de dados ou acesso a arquivos em index.jsp , e você pode processar essas tarefas em segundo plano Não há necessidade de usar a alternância de páginas em buffer para o usuário.
Neste artigo examinamos um método que produz histogramas claros e de aparência agradável. Lidamos habilmente com a alteração do tamanho dos gráficos e a codificação deles no formato JPEG, e discutimos a modificação do código HTML para colocar as imagens resultantes em diferentes locais da página.