Figura 3: Gráfico de barras

Gráficos em Java ME com mechart
Ricardo da Silva Ogliari
Introdução
A crescente utilização de pequenos dispositivos, como telefones celulares, faz
com que a demanda por soluções móveis também cresça, exigindo cada vez mais dos
programadores e de suas criações. Um exemplo disso são as inovações
proporcionadas na MIDP 2.0, porém, para a criação de interfaces gráficas somente
com a API presente na biblioteca padrão, ainda há um certo grau de dificuldade, além
de um número bastante reduzido de componentes gráficos.
Funcionalidades consideradas comuns em outras plataformas, ainda são um
desafio através do Java ME, como exemplos podem ser citados: a construção de
relatório, persistência de dados, dentre outros. Porém, a comunidade Java ME nos
fornece novidades, uma delas é a API MECHART, que fornece uma biblioteca para
construção de três tipos de gráficos: gráficos de linhas, gráfico pizza e gráfico de
barras. Como a API está registrada sobre GPL espera-se que mais colaboradores
ajudem no crescimento dessa biblioteca, para que, futuramente, a mesma possa
oferecer mais tipos de gráficos.
O presente artigo visa fornecer uma visão geral de como adicionar a
MECHART ao seu projeto, além de fazer uma síntese sobre os métodos necessários
para a criação dos três tipos disponíveis de gráficos. Por fim, o convite para que mais
pessoas contribuam no crescimento dessa API é reforçado mais uma vez.
MECHART: O Projeto
A mechart está registrada como um projeto no java.net, o link para acesso é:
https://mechart.dev.java.net/. Neste endereço pode-se encontrar o .jar que é usado na
aplicação, além de documentação e dos códigos fontes, é importante ressaltar que a
API está registrada sobre GPL e aguarda contribuições para seu crescimento. A API
ainda está em fase inicial, sendo desenvolvida apenas por dois programadores.
Atualmente, é possível a criação de três tipos de gráficos com a API, o gráficos
de linhas, o gráfico pizza e o gráfico de barras, todos eles são mostrados nas figuras
1, 2 e 3, respectivamente. O componente é gerado em uma classe que estende de
CustomItem, portanto, só pode ser usado dentro de um Form. Um dos objetivos do
criador da API e dos colaboradores é estender seu uso ao Canvas também.
Figura 1: Gráfico de Linhas
http://www.javafree.org/
Figura 2: Gráfico pizza
Figura 3: Gráfico de barras
A voz Java no Brasil – Pág. 1
Utilizando a API com o NetBeans e Wireless Toolkit
O uso de determinada IDE fica a cargo do leitor, porém, não seria possível
apresentar aqui o uso da API com todas as IDEs existentes, portanto, foi escolhido o
NetBeans, que é muito popular entre programadores Java, de forma similar, o Sun
Java Wireless Toolkit é bastante usado para emular programas Java ME, e para a
conseqüente distribuição. Aqui, é necessário fazer uma divisão entre duas versões do
NetBeans, a versão 3.6 representa a ferramenta no momento em que ainda seguia a
idéia de criação de filesystems, sem criar sua própria estrutura para projetos, a partir
da versão 4.1, o NetBeans passou a criar uma estrutura de projetos própria, suas
versões mais atuais, como a 5.0 (que será demonstrada aqui) continuam a seguir este
padrão.
NetBeans 3.6:
Usando a versão 3.6 do NetBeans, o leitor também deve usar uma versão do
Sun Java Wireless Toolkit (WTK) independente da IDE, se o leitor não tem
conhecimento dos dois softwares citados anteriormente, aconselha-se a leitura sobre
essas ferramentas antes de prosseguir a leitura do presente artigo. Através do WTK
cria-se o projeto, define-se o nome, configuração e perfil usado, dentre outras
características. Feito isso, uma árvore de diretórios semelhante à Figura 4 deve ser
formada no diretório apps da instalação do WTK. Para usar a mechart basta colocar o
jar da API na pasta lib da referida hierarquia.
Figura 4: Hierarquia do projeto
NetBeans 5.0:
Usando o NetBeans 5.0 o leitor terá uma facilidade maior, isso porque o WTK
pode ser acoplado diretamente a IDE, evitando a necessidade de constantes troca de
janelas para poder executar sua MIDlet. É presumido que o NetBeans já tenha o
Mobility Pack instalado, e o WTK mapeado, como esse não é o foco desse artigo,
entende-se que o leitor já tenha conhecimento de como fazer isso.
Depois de criado o projeto, o leitor deve acessar as propriedades do mesmo,
uma tela semelhante à Figura 5 corresponde à parte de configuração das
propriedades do projeto. Observe que a opção “Libraries & Resources” na parte
esquerda está selecionado, e na parte direita aparece o endereço de onde se encontra
o jar da mechart, para isso basta selecionar a opção “Add Jar/Zip...” na parte direita, e
posteriormente, mapear o endereço de onde o .jar da mechart está salvo.
http://www.javafree.org/
A voz Java no Brasil – Pág. 2
Figura 5: Tela de configurações do projeto.
Usando a mechart
Para continuar, é imprescindível que o leitor tenha um conhecimento básico da
Java ME. A Listagem 1 mostra o esqueleto básico da nossa MIDlet, sem o uso da
mechart, ainda. Observe que já foi criado um Form, pois como todo CustomItem é um
Item, o mesmo só pode ser adicionado em um formulário.
import
import
import
import
java.util.Vector;
javax.microedition.midlet.*;
javax.microedition.lcdui.*;
com.mechart.chart.*;
public class Midlet extends MIDlet {
private Display display;
private Form fmMain;
public void startApp() {
display = Display.getDisplay(this);
fmMain = new Form("Teste CustomItem");
display.setCurrent(fmMain);
}
public void pauseApp() {}
public void destroyApp(boolean unconditional) {}
}
Listagem 1 – MIDlet básica.
http://www.javafree.org/
A voz Java no Brasil – Pág. 3
Para usar qualquer um dos três gráficos podemos fazer o import através da
seguinte linha de código Java:
import com.mechart.chart.*;
LineChart:
Depois de criar o objeto nos atributos da classe, deve-se criar a instância da
classe e em seguida adicionar o item ao Form. O construtor da classe LineChart
recebe nove parâmetros no total, sendo eles: a largura total do gráfico, a altura total do
gráfico, os valores que formam a linha do gráficos, legenda dos dados, identificação
dos dados, tamanho da fonte, cor da linha, cor do fundo do gráfico e o valor máximo
para o gráfico. Para as cores, a LineChart já traz alguns valores definidos como
constantes para você usar, sem a necessidade de conhecer os códigos RGB das
cores desejadas. Veja a Listagem 2 com o código de uma MIDlet que mostraria o
gráfico da Figura 1.
import
import
import
import
com.mechart.chart.*;
java.util.Vector;
javax.microedition.midlet.*;
javax.microedition.lcdui.*;
public class UsoLineChart extends MIDlet{
private Display display;
private Form fmMain;
private LineChart lineChart;
public void startApp() {
display = Display.getDisplay(this);
fmMain = new Form("Teste LineChart");
ClCanvas cv = new ClCanvas();
short[] posicoes = new short[]{50, 43, 19, 47, 32, 90};
String[] legenda = new String[]{"Jan", "Fev", "Mar", "Abr", "Mai",
"Jun"};
lineChart = new LineChart(cv.getWidth(), 110, posicoes, legenda,
"Produção", 1, LineChart.MAROON, LineChart.GRAY, (short)90);
fmMain.append(lineChart);
display.setCurrent(fmMain);
}
public void pauseApp() {}
public void destroyApp(boolean unconditional) {}
}
class ClCanvas extends Canvas
{
protected void paint(Graphics graphics) {}
}
Listagem 2 – Uso do LineChart.
http://www.javafree.org/
A voz Java no Brasil – Pág. 4
Perceba que também foi criada uma classe interna que herda de Canvas, para
recuperar a largura e a altura do display do device, se o projeto é direcionado para
uma plataforma alvo de celulares, e suas dimensões são conhecidas, o uso do Canvas
não é necessário. A seguir são criados dois vetores, de short e String´s
respectivamente, que formaram os dados propriamente ditos do gráfico. Outro ponto
importante é as cores usadas. Para evitar que o usuário tivesse que decorar todos os
códigos RGB, a LineChart tem algumas constantes estáticas para a maiorias das
cores.
PieChart:
O gráfico de pizza, talvez um dos mais conhecidos, é criado com a classe
PieChart, que possui um construtor que recebe cinco parâmetros, sendo eles: a
largura total do gráfico, a altura total do gráfico, dados que formam a pizza, altura da
fonte e as cores de cada fatia da pizza. O último parâmetro é passado em um vetor de
byte, sendo que os bytes que definem as principais cores, estão disponíveis como
constantes estáticas na PieChart. Observe a listagem 3 com o código para uso da
PieChart.
import com.mechart.chart.*;
…
public class UsoLineChart extends MIDlet{
…
private LineChart lineChart;
public void startApp() {
…
Vector dados = new Vector();
dados.addElement(new String[]{"Brasil", "50"});
dados.addElement(new String[]{"Alemanha", "88"});
dados.addElement(new String[]{"Itália", "71"});
dados.addElement(new String[]{"Argentina", "45"});
dados.addElement(new String[]{"Uruguai", "22"});
pieChart = new PieChart(cv.getWidth(), 70, dados, 1, new
byte[]{PieChart.BLACK, PieChart.FUCHSIA, PieChart.GREEN,
PieChart.YELLOW, PieChart.LIME});
fmMain.append(pieChart);
display.setCurrent(fmMain);
}
…
}
…
Listagem 3 – Uso da PieChart
As linhas que estão marcadas com “...” são iguais a Listagem 2, até a classe
que herda de Canvas. A Listagem 3 não tem muita alteração em relação a Listagem 2,
exceções para a passagem dos dados, que no caso da PieChart é feita através de
uma instância de Vector e da utilização de um vetor de bytes que forma as imagens de
cada pedaço da pizza.
http://www.javafree.org/
A voz Java no Brasil – Pág. 5
Gráfico de Barras:
O Gráfico de Barras é construído com a utilização da classe BarChart da
mechart, seu construtor é semelhante aos demais gráficos da API, os parâmetros
passados são: a largura total do gráfico, a altura total do gráfico, dados que formam o
gráfico (detalhe, os dados são passados em um Vector, e cada elemento do vetor é
uma das “barras” do gráfico), tamanho da fonte, vetor de bytes representando as cores
usadas (mesma lógica do PieChart), um byte que representa a cor de fundo do gráfico,
e o valor máximo que o gráfico irá receber. Assim como as outras classes da API, a
BarChart também tem valores constantes e estáticos para definir algumas das
principais cores. Veja na Listagem 4 como utilizar a classe:
import com.mechart.chart.*;
…
public class UsoLineChart extends MIDlet{
…
private BarChart barChart;
public void startApp() {
…
Vector dados = new Vector();
dados.addElement(new String[]{"Brasil", "50"});
dados.addElement(new String[]{"Alemanha", "88"});
dados.addElement(new String[]{"Itália", "71"});
dados.addElement(new String[]{"Argentina", "45"});
dados.addElement(new String[]{"Uruguai", "22"});
barChart = new BarChart(cv.getWidth(), 80, dados, 1, new
byte[]{BarChart.RED, BarChart.NAVY,
BarChart.PURPLE, BarChart.LIME, BarChart.TEAL},
BarChart.SILVER, (short)90);
barChart.fullChart(false);
barChart.sizeBar(20);
}
…
}
…
Listagem 4 – Uso do BarChart
Depois de chegar até este último gráfico, o leitor não terá dificuldade de
entender o funcionamento do gráfico de barras, porém, preste atenção no método
fullChart(boolean fullChart), este método especifica se as barras que compõe o
gráfico ocuparão um espaço uniforme, ou seja, todas com o mesmo tamanho e
ocupando toda a área do gráfico, ou cada barra terá um tamanho menor, que será
especificado no método sizeBar(int tamBar). Para entender melhor este conceito,
veja as figuras 6 e 7, a Figura 6 mostra o gráfico segundo a Listagem 4, já a Figura 7
mostra como ficaria o gráfico se na linha:
barChart.fullChart(false);
Fosse usado:
http://www.javafree.org/
A voz Java no Brasil – Pág. 6
barChart.fullChart(true);
Figura 6: Gráfico de barras espaçadas.
Figura 7: Gráfico de barras “cheias”.
Conclusão
A construção de interfaces gráficas para qualquer sistema computacional é um
dos elementos críticos, que pode levar ao sucesso ou ao fracasso de uma solução.
Partindo deste ponto, a mechart pode ajudar de forma significativa aos
desenvolvedores de aplicativos móveis com a Java ME, além disso, gráficos podem
explicar de forma mais comunicativa e com um impacto maior, do que simples
caracteres na tela do telefone celular.
Referências Bibliográficas
MECHART. Página oficial
https://mechart.dev.java.net/ >.
da
API
mechart.
Disponível
em
<
MOBILIDADETUDO. Blog do idealizador da mechart. Disponível em <
http://mobilidadetudo.blogspot.com/ >.
Sobre o autor
Ricardo da Silva Ogliari é formando em Ciência da Computação pela
Universidade de Passo Fundo – RS. Desenvolveu sistemas móbile e web para
empresas do Rio Grande do Sul, atualmente trabalha como desenvolvedor de
aplicações direcionadas a telefones celulares na Kwead.com de São Paulo. Também,
foi palestrante dos eventos JustJava 2005 e EJES (Encontro Java do Espírito Santo)
2005, além de ministrar alguns cursos sobre a tecnologia Java ME e Java EE.
http://www.javafree.org/
A voz Java no Brasil – Pág. 7