Gráficos Com JME

Gráficos em Java ME com MECHART
Publicado por Tutoriais Admin em 17/08/2009 - 11.894 visualizações
comentários: 0
Ricardo da Silva Ogliari
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 Figura 2: Gráfico pizza Figura 3: Gráfico de barras
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.
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 java.util.Vector;
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
import 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.
Para usar qualquer um dos três gráficos podemos fazer o import através da
seguinte linha de código Java:
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 LineChartrecebe
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.
public class UsoLineChart extends MIDlet{

private LineChart lineChart;

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);
}

}
class ClCanvas extends Canvas {

protected void paint(Graphics graphics) {}
}
Listagem 2 - Uso do LineChart.
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
´srespectivamente, 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.

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);
}
}
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.
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:

private BarChart barChart;

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étodofullChart(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:
Fosse usado:
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 da API mechart. Disponível
em https://mechart.dev.java.net/
MOBILIDADETUDO. Blog do idealizador da mechart. Disponível
em http://mobilidadetudo.blogspot.com/
Home > Artigos > Java ME >
Gráficos em Java ME com MECHART 2.0

Publicado por Tutoriais Admin em 15/08/2009 - 6.199 visualizações
comentários: 0
Ricardo da Silva Ogliari
Introdução
A API MECHART foi criada com o objetivo de suprir uma necessidade na
programação Java ME, a falta de uma API que pudesse construir gráficos de maneira
simples e rápida, sem a necessidade de programar diretamente na classe Canvas . Na
programação para plataforma Java SE temos o exemplo do framework JFreeChart .
Além disso, é crescente a preocupação com a interface dos programas móveis, devido
ao avanço dos telefones celulares e também a facilidade de criação de interface ricas
em outras linguagens e / ou frameworks para programação de dispositivos móveis.
Na primeira versão da API MECHART era possível a criação de três tipos de gráficos:
gráficos de linhas, gráfico pizza e gráfico de barras. Na segunda versão um novo tipo
de gráfico foi adicionado, o gráfico combinado. Este, por sua vez, combina barras e
linhas. Além disso, nesta nova versão, é possível criar gráficos passando cores no
formato RGB, tirando a limitação de uso das cores pré-definidas na API. Também,
existe um método createImage para todos os tipos de gráficos, que retorna um
objeto Image , permitindo seu uso em uma tela Canvas . Por fim, a criação de gráficos
em Canvas , e não somente como CustomItem , também foi adicionada a esta versão
mais recente da MECHART.
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 quatro tipos disponíveis de gráficos. Por fim, deixamos o convite para que mais
pessoas contribuam no crescimento da API.
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 quatro tipos de gráficos: gráfico combinado
(Figura 1), gráfico de barras (Figura 2), gráfico de linhas (Figura 3) e gráfico de
pizza (Figura 4). A Figura 1 ilustra um gráfico herdado da versão 1.0 da API, sendo
que, o mesmo é construído como uma instância da classe CustomItem. O gráfico de
barras, ilustrado na Figura 2, também representa uma instância da mesma classe. A
Figura 3 mostra um gráfico de linhas, que usa uma das novas funcionalidades da
nosa versão da API MECHART, a construção de gráficos como uma instância da
classe Canvas. Por fim, a Figura 4 apresenta o uso do métodocreateImage, que
retorna uma instância da classe Image, sendo assim, esta instância pode ser usado
em um Canvas ou em um Form da maneira como o usuário achar adequada.
Figura 1: Gráfico Figura 2: Gráfico de Figura 3: Gráfico de Figura 4: Gráfico de

combinado dentro de um Barras dentro de um linhas dentro de um pizza dentro de um
Form. Form. Canvas. Canvas como um Image.
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 a Figura 5 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 5: 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 6 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.
Figura 6: 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.
public class Midlet extends MIDlet {
}
}
Listagem 1: MIDlet básica.
Para usar qualquer um dos quatro gráficos podemos fazer o import através da
seguinte linha de código Java:
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, cores das linhas, 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. Porém, para alguns casos específicos, as cores devem ser definidas com
códigos RGB,. Por exemplo, o programador recebe do design gráfico um esboço do
menu do aplicativo móvel, as cores que ele usou não existem nas constantes da
LineChart, sendo assim, ele deverá usar seus códigos RGB. Veja a Listagem 2 com o
código da MIDlet que mostraria o gráfico da Figura 7. A Listagem 3 ilustra apenas a
criação do objeto lineChart com códigos RGB e seu resultado na Figura 8.
import com.mechart.chart.LineChart;
fmMain = new Form("");
fmMain.append(new StringItem("Balancete 1º Semestre", null));
short[][] posicoes = new short[][]{{50, 43, 19, 47, 90, 63},
{30, 13, 15, 82, 79, 50},
{23, 24, 49, 51, 70, 81}};
String[] legenda = new String[]{"Jan", "Fev", "Mar", "Abr", "Mai", "Jun"};
byte[] cores = new byte[]{LineChart.MAROON, LineChart.BLUE,
LineChart.WHITE};
new String[]{"Produção", "Vendas", "Gastos"}, 1, cores, LineChart.GRAY,
(short)90);
}
}
class ClCanvas extends Canvas
{
protected void paint(Graphics graphics) {}
}
Listagem 2: Uso do LineChart.
int[][] coresMat = new int[][]{new int[]{255, 0, 0}, new int[]{0, 255, 0}, new
int[]{0, 0, 255}};
lineChart = new LineChart(cv.getWidth(), 75, posicoes, legenda, new String[]
{"Produção", "Vendas", " Estoque"},
1, coresMat, new int[]{220, 220, 220}, (short)90);
Listagem 3: Uso do LineChart com códigos RGB.

Figura 7: Gráfico LineChart resultante da Figura 8: Gráfico LineChart resultante da
Listagem 2. Listagem 3.
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.
Nesta nova versão da API MECHART podem ser citadas algumas melhorias:
• Possibilidade de criação do gráfico com códigos RGB;

• Gráfico de múltiplas linhas;
• Possibilidade de criação de gráfico com Canvas;
• Possibilidade de criação de um objeto Image de um gráfico.
Os dois primeiros itens foram mostrados anteriormente. Para a criação de um
gráfico de linhas como uma instância de Canvas e não de CustomItem, existe a
classe LineChartCanvas. Seu uso é mostrado na Listagem 4, perceba que apenas o
método startApp() foi alterado, não existe mais o uso da classe Form. Além disso,
no contrutor da classe LineChartCanvas são passados onze parâmetros e não nove,
sendo que, apenas os dois últimos diferem, sendo estes parâmetros: umbyte que
representa o posicionamento, um vetor de inteiros que forma o código RGB da cor
de fundo do Canvas, não do gráfico.
O parâmetro de posicionamento pode ser uma das duas constantes existentes na
classe: FULL e NONE. Usando a constante NONE o gráfico terá a altura passado por
parâmetro para o construtor, de contrário, o altura do gráfico será a altura do
display do celular, útil em caso onde o programador deseja que o gráfico seja
mostrado em toda tela do aparelho celular, sem se importar em obter a altura do
display. A Figura 9 ilustra o resultado da Listagem 4 e a Figura 10 ilustra o resultado
com o uso de LineChartCanvas.NONE e não de LineChartCanvas.FULL. Assim como
na explicação anteriormente, também é possível criar o gráfico passando os
códigos RGB das cores, o mesmo gráfico da Figura 9 pode ser criado com o código
da Listagem 5. As mudanças estão no sétimo e oitavo parâmetros, onde um vetor
de bytes é substituído por uma matriz de inteiros e, uma constante da
classe LineChartCanvas é substituída por um vetor de inteiros.
short[][] posicoes = new short[][]{{50, 43, 19, 47, 90, 63},
{30, 13, 15, 82, 79, 50},
{23, 24, 49, 51, 70, 81}};
byte[] cores = new byte[]{LineChart.MAROON, LineChart.BLUE,
LineChart.WHITE};
int[]{0, 0, 255}};
display.setCurrent(new LineChartCanvas(cv.getWidth(), 100, posicoes, legenda,
new String[]{"Produção", "Vendas", "Gastos"}, 1,
cores, LineChart.GRAY, (short)90, LineChartCanvas.FULL,
new int[]{20, 200, 200}));
Listagem 4: Uso do LineChartCanvas.
Figura 9: LineChartCanvas com FULL. Figura 10: LineChartCanvas com NONE.

display.setCurrent(new LineChartCanvas(cv.getWidth(), 100, posicoes, legenda,
coresMat, new int[]{180, 180, 180}, (short)90, LineChartCanvas.FULL,
new int[]{200, 200, 200}));
Listagem 5: Uso do LineChartCanvas com códigos RGB.
Além disso, o usuário da MECHART pode criar um objeto Image usando o
método createImage da LineChartCanvas. A Listagem 6 apresenta na primeira parte, o
método startApp e, na segunda, o código da classe Canvas. Perceba que os
parâmetros necessários no método createImagesão os mesmos para instanciar um
objeto da classe LineChartCanvas. O resultado do código está na Figura 11.
display.setCurrent(cv);
}
--------------------------------------//---------------------------------------
class ClCanvas extends Canvas {
Image img = null;
Font fonte = Font.getFont(Font.FACE_MONOSPACE, Font.STYLE_BOLD,
Font.SIZE_MEDIUM);
short[][] posicoes = new short[][]{{50, 43, 19, 47, 32, 90}, {30, 13, 15, 82, 79,
50}, {23, 24, 49, 51, 70, 81}};
int[]{0, 0, 255}};
public ClCanvas()
{
img = LineChartCanvas.createImage(getWidth(), 100, posicoes, legenda,
coresMat, new int[]{255, 255, 255}, (short)90, LineChartCanvas.NONE,
new int[]{200, 200, 200});
setFullScreenMode(true);
}
protected void paint(Graphics g) {
g.setColor(220, 220, 220);
g.fillRect(0, 0, getWidth(), getHeight());
g.setFont(fonte);
g.setColor(0, 0, 0);
g.drawString("Teste da MECHART", getWidth()/2, 0, Graphics.HCENTER|
Graphics.TOP);
g.drawString("Dados empresariais", getWidth()/2, fonte.getHeight(),
Graphics.HCENTER|Graphics.TOP);
g.drawImage(img, 0, fonte.getHeight()*2, Graphics.LEFT|Graphics.TOP);
g.setColor(255, 0, 0);
g.drawLine(0, fonte.getHeight()*2, getWidth(), fonte.getHeight()*2);
}
}
Listagem 6: Código necessário na MIDlet e no Canvas para utilização do método
createImage.
Figura 11: gráfico de linhas criado com o método createImage() da classe
LineChartCanvas.
PieChart:
O gráfico de pizza, talvez um dos mais conhecidos, é criado com a
classe PieChart. Seu construtor 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 7 com o código para uso
da PieChart.
import com.mechart.chart.PieChart;
public class UsoPieChart extends MIDlet {
private PieChart pieChart;
Canvas cv = new Canvas() {
protected void paint(Graphics graphics) {
}
};
fmMain = new Form("");
fmMain.append(new StringItem("Gráfico: ", "Participação PIB"));
{PieChart.BLACK, PieChart.BLUE, PieChart.GREEN, PieChart.WHITE,
PieChart.RED});
}
}
Listagem 7: : Uso da PieChart
A criação do gráfico de pizza tem dois pontos cruciais, um instância da
classe Vector que informa os dados e o vetor de bytes com as cores de cada pedaço
da pizza. A Figura 12 apresenta o resultado da Listagem 7. Também, é possível
passar uma matriz de inteiros com os códigos RGB ao invés de um vetor de bytes,
veja sua forma de implementação no trecho da Listagem 8.
Figura 12: gráfico de pizza criado com a PieChart.
pieChart = new PieChart(cv.getWidth(), 70, dados, 1, new int[][]{new
int[]{0, 0, 0},
new int[]{0, 0, 255}, new int[]{0, 255, 0}, new int[]{255, 255, 255},
new int[]{255, 0, 0}});
Listagem 8: Uso da PieChart com o código RGB das cores .
De forma análoga ao gráfico de linhas, o de pizza também teve melhorias nesta última
versão da MECHART, exceto pelo uso de múltiplas linhas, os avanços se aplicam aos
dois tipos de gráficos. Para criação de gráficos como instância de Canvas, existe a
classe PieChartCanvas. A Listagem 9 apresenta o código necessário para criação de
um gráfico através da PieChartCanvas. É importante ressaltar dois pontos, primeiro,
as mudanças ocorrem somente no método startApp, e segundo, apenas dois
parâmetros foram adicionados aos já usados anteriormente. Um byte que identifica a
posição do gráfico, FULL ou NONE, com funcionamento análogo ao LineChartCanvas,
e, um vetor de inteiros que representa a cor de fundo do Canvas. A Listagem 10
mostra o uso da classe com valores RGB. A Figura 13 apresenta o resultado deste
código.
Canvas cv = new Canvas() {
}
};
int[][] coresMat = new int[][]{new int[]{0, 0, 0},
new int[]{255, 0, 0}};
display.setCurrent(new PieChartCanvas(cv.getWidth(), 100, dados, 1,
new byte[]{PieChartCanvas.BLACK, PieChartCanvas.BLUE,
PieChartCanvas.GREEN, PieChartCanvas.WHITE,
PieChartCanvas.RED},
PieChartCanvas.FULL,
new int[]{200, 200, 200}));
Listagem 9: Uso das PieChartCanvas.
int[][] coresMat = new int[][]{new int[]{0, 0, 0},
new int[]{255, 0, 0}};
display.setCurrent(new PieChartCanvas(cv.getWidth(), 100, dados, 1,
coresMat,
PieChartCanvas.FULL,
new int[]{200, 200, 200}));
Listagem 10: Usa PieChartCanvas com RGB.
Figura 13: gráfico de pizza criado com a PieChartCanvas.
O método createImage da classe PieChartCanvas recebe os mesmos parâmetros que
a classe recebe em seu construtor. Seu uso é igual ao da LineChartCanvas. A
Listagem 11 mostra o uso deste método de duas formas, na primeira, usando códigos
RGB e, na segunda, usando as constantes pré-definidas na classe. A Figura 14
mostra o resultado das duas listagens.
img = PieChartCanvas.createImage(getWidth(), 100, dados, 1,
new int[][]{new int[]{0, 0, 0}, new int[]{255, 255, 255}, new int[]{0,
255, 0}, new int[]{255, 0, 0}, new int[]{100, 100, 100}},
PieChartCanvas.NONE,
new int[]{200, 200, 200});
-------------------------------------//----------------------------------------
img = PieChartCanvas.createImage(getWidth(), 100, dados123, 1,
new byte[]{PieChartCanvas.WHITE, ...},
PieChartCanvas.NONE,
new int[]{200, 200, 200});
Listagem 11: Uso do método createImage da classe PieChartCanvas.
Figura 14: gráfico de pizza criado com o método createImage da classe
PieChartCanvas.
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 12 como utilizar a classe:
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étodofullChart(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 15 e 16, a Figura 15 mostra o gráfico segundo
a Listagem 12, já a Figura 15 mostra como ficaria o gráfico se na linha:
Fosse usado:
barChart.fullChart(true);
A Listagem 13 mostra o código de criação do gráfico de barras passando os códigos
RGB das cores. Pode haver uma disparidade entre as cores dos códigos das
listagens e o resultado nas figuras, mas isso fica para surpresa do leitor.
import com.mechart.chart.BarChart;
Gráficos em Java ME com MECHART
MECHART é uma API que fornece uma biblioteca para construção de gráficos de linhas,
pizza e barras. Registrada sobre a GPL, encontra-se como um projeto no java.net. Neste
link pode-se encontrar o .jar da API, as classes .java, a documentação e os códigos fonte.
A intenção deste post é apresentar esta API para aqueles que ainda não conhecem. A
MECHART pode ajudar de forma significativa os desenvolvedores de aplicativos móveis com
a plataforma Java ME, visto que a dificuldade para gerar gráficos nessa plataforma é
considerável, pois é necessário a utilização de classes de baixo nível, como Canvas.
Para utilizar a API basta realizar o download do .jar ou se preferir vá nas propriedades do seu
projeto e crie um novo diretório "com.mechart.chart" e insera todas as classes dispostas no
arquivo que você baixou.
No código fonte basta importar as classes para usá-las:
Nos atributos da classe basta declarar os objetos para acessá-las:

Classe LineChart
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áfico, 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.
Classe PieChart
O gráfico de pizza é 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.
Classe BarChart
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. O método fullChart(boolean fullChart), chamado por
barChart.fullChart(false), especifica se as barras que compõe o gráfico ocuparão um espaço
uniforme ou não, de acordo com o argumento booleano.
Na versão 2.0 da API foi criado um novo tipo de gráfico, o gráfico combinado.
Este, por sua vez, combina barras e linhas. Além disso, nesta nova versão, é possível criar
gráficos passando cores no formato RGB, tirando a limitação de uso das cores pré-definidas na
API. Também, existe um método createImage para todos os tipos de gráficos, que retorna um
objeto Image , permitindo seu uso em uma tela Canvas . Por fim, a criação de gráficos em
Canvas, e não somente como CustomItem, também foi adicionada a esta versão mais recente
da MECHART.
Veja o Resultado:
Segue um código exemplificando o uso da API.
public class Midlet extends MIDlet implements CommandListener{


private StringItem siTabela;
private Command cmSair;


siTabela = new StringItem("Tabela", "Titulos");

short[] posicoes = new short[]{50, 43, 19, 47, 32, 90};

String[] legenda = new String[]{"Jan", "Fev", "Mar", "Abr",
"Mai", "Jun"};
{PieChart.BLACK, PieChart.FUCHSIA, PieChart.GREEN, PieChart.YELLOW,
PieChart.LIME});
barChart = new BarChart(cv.getWidth(), 80, dados, 1, new byte[]
{BarChart.RED, BarChart.NAVY,
BarChart.PURPLE, BarChart.LIME, BarChart.TEAL},
BarChart.SILVER, (short)90);
"Produção", 1, LineChart.MAROON, LineChart.GRAY, (short)90);
fmMain.append(siTabela);
barChart.sizeBar(20);
fmMain.append(barChart);
cmSair = new Command("Sair", Command.EXIT, 1);
fmMain.addCommand(cmSair);
fmMain.setCommandListener(this);
}
public void pauseApp() {

}
public void destroyApp(boolean unconditional) {

}
public void commandAction(Command c, Displayable d) {

destroyApp(true);
notifyDestroyed();
}
}
class ClCanvas extends Canvas

{
}
Caso prefira faça o download do projeto deste exemplo.
Para mais informações veja:
Referências
MECHART. Página oficial da API mechart. Disponível em https://mechart.dev.java.net/

Artigo MECHART 1.0. http://www.javafree.org/artigo/871434/Graficos-em-Java-ME-com-
MECHART.html
Artigo MECHART 2.0. http://www.javafree.org/artigo/871435/Graficos-em-Java-ME-com-
MECHART-20.html
MOBILIDADETUDO. Blog do idealizador da mechart. Disponível
emhttp://mobilidadetudo.blogspot.com/
Grafici in JavaME con MEChart
Articoli - JavaME
0 Comments e 0 Reactions
In questo articolo vediamo come generare grafici per la piattaforma JavaME utilizzando la libreria
opensource MEChart
Introduzione
L'API MECHART è stata creata al fine di colmare un vuoto nella programmazione Java ME, la mancanza
di una API con la quale costruire la grafica in maniera rapida e semplice, senza la necessità di
programmare direttamente con la classe Canvas. Sviluppando sulla piattaforma Java SE abbiamo
l'esempio del framework JFreeChart. Inoltre, c'è una crescente preoccupazione per l'interfaccia grafica
delle nostre applicazioni, dovuta al progresso dei telefoni cellulari e anche alla facilità di creazione di
interfacce in altri linguaggi e / o framework di programmazione per i dispositivi mobili.
Nella prima versione delle API MECHART era stato possibile creare tre tipi di grafici: linea, torta e barre.
Nella seconda versione è stato aggiunto un nuovo tipo di grafico, il grafico combinato, che combina barre
e linee. Inoltre, in questa nuova versione, è possibile creare grafici utilizzando colori RGB e non essere
costretti ad utilizzare il set di colori predefiniti nelle API. Inoltre, è presente un metodo createImage per tutti
i tipi di grafica, che restituisce un oggetto Image utilizzabile su una Canvas. Infine è stato aggiunta a
questa ultima versione di MECHART anche la possibilità di creare grafici su Canvas, non solo come
CustomItem.
Questo articolo mira a fornire una panoramica di come aggiungere MECHART al vostro progetto e a fare
una sintesi dei metodi necessari per la creazione di quattro tipi di grafici disponibili. Infine, c'è l'invito a un
maggior numero di persone che possano contribuire alla crescita di questa API.
MECHART: Il Progetto
MECHART è registrato come un progetto su java.net, disponibile all'indirizzo https://mechart.dev.java.net/.

A questo indirizzo potete trovare i jar che necessari per la vostra applicazione, la documentazione e il
codice sorgente. E' importante notare che l'API sono rilasciate sotto licenza GPL, sono quindi benvenuti i
contributi per la sua crescita. L'API è ancora in fase iniziale, gestita da due soli sviluppatori.
Attualmente, è possibile creare quattro tipi di grafici: grafico combinato (Figura 1), il grafico a barre (Figura
2), grafico a linee(Figura 3) e grafico a torta (Figura 4). La Figura 1 mostra un grafico ereditato dalla
versione 1.0 delle API, che è costruito attraverso un'istanza della classe CustomItem. Il grafico a barre,
illustrato nella figura 2, rappresenta un esempio della stessa classe. La figura 3 mostra un grafico a linee,
che usa una delle nuove funzionalità di API MECHART, la costruzione di grafici attraverso un'istanza della
classe Canvas. Infine, la figura 4 mostra l'uso del metodo createImage, che restituisce un'istanza della
classe Image che può essere utilizzata sia in una Canvas che in una Form.
Utilizzare l'API con NetBeans
L'uso di un particolare IDE è a discrezione del lettore, tuttavia, non sarebbe possibile qui spiegare la
configurazione di tutti gli IDE, quindi, è stato scelto NetBeans, che è molto popolare tra i programmatori
Java. Utilizzando NetBeans 5.0 (o versioni successive) il lettore avrà una maggiore facilità, in quanto il
WTK può essere collegato direttamente all'IDE. Si presume che il NetBeans Mobility Pack sia già
installato, e che il WTK con cui si vuole sviluppare sia configurato, in quanto questo non è il focus di
questo articolo. Dopo aver creato un nuovo progetto Mobile, il lettore deve accedere alle proprietà di esso,
una schermata simile alla figura seguente
Si noti che sulla sinistra è selezionato "Libraries & Resources" , e sulla destra c'è il path del jar di mechart.
Utilizzare MECHART
Per continuare, è essenziale che il lettore abbia una conoscenza di base di Java ME. Il seguente codice
mostra l'ossatura di base della nostra MIDlet senza l'uso di mechart.
01 import java.util.Vector;
02 import javax.microedition.midlet.*;
03 import javax.microedition.lcdui.*;
04 import com.mechart.chart.*;
05
06 public class Midlet extends MIDlet {
07
08 private Display display;
09 private Form fmMain;
10
11 public void startApp() {
12 display = Display.getDisplay(this);
13 fmMain = new Form("Teste CustomItem");
14 display.setCurrent(fmMain);
15 }
16
17 public void pauseApp() {
18 }
19
20 public void destroyApp(boolean unconditional) {
21 }
22 }
Per utilizzare uno dei quattro elementi grafici dobbiamo fare il seguente import
1 import com.mechart.chart.*;
LineChart
Dopo aver definito l'oggetto LineChart, è necessario inizializzarlo e quindi aggiungerlo al Form. Il
costruttore della classe LineChart riceve in totale nove parametri, che sono:
• Larghezza
• Altezza
• I dati del grafico
• La legenda
• L'identificazione dei dati
• La dimensione del font
• Il colore delle linee
• Il colore della parte inferiore del grafico
• Il valore massimo per il grafico
Per il colore, la LineChart ha già definito alcuni valori costanti da utilizzare, senza la necessità di
conoscere i codici RGB dei colori. Ma per alcuni casi specifici, i colori dovrebbero essere definiti con i
codici RGB. Ad esempio, quando lo sviluppatore riceve una bozza del layout grafico dell'applicazione, con
usa colori che non esistono tra quelli predefiniti in LineChart, c'è bisogno di sapere il codice RGB per
specificare il giusto colore. Il codice della seguente Midlet è relativo al grafico che possiamo vedere
nell'immagine successiva (grafico a sinistra).
01 import com.mechart.chart.LineChart;
05
06 public class UsoLineChart extends MIDlet {
07
10 private LineChart lineChart;
11
14 fmMain = new Form("");
15 ClCanvas cv = new ClCanvas();
16 fmMain.append(new StringItem("Balancete 1º Semestre", null));
17 short[][] posicoes = new short[][]{{50, 43, 19, 47, 90, 63},
18 {30, 13, 15, 82, 79, 50}, {23, 24, 49, 51, 70, 81}};
19
20 String[] legenda = new String[]

{"Jan", "Fev", "Mar", "Abr", "Mai","Jun"};
21 byte[] cores = new byte[]{LineChart.MAROON, LineChart.BLUE,
LineChart.WHITE};
22 lineChart = new LineChart(cv.getWidth(), 75, posicoes,

legenda, newString[]
{"Produção", "Vendas", "Gastos"}, 1, cores, LineChart.GRAY,
23
(short)90);
24
25 fmMain.append(lineChart);
27 }
28
30 }
31
33 }
34 }
35
36 class ClCanvas extends Canvas {
37
38 protected void paint(Graphics graphics) {
39 }
40 }
Il codice seguente invece illustra soltanto la creazione di un oggetto LineChart con codici RGB e il suo
risultato è visibile nel grafico della precedente immagine (grafico a destra)
1 int[][] coresMat = new int[][]{new int[]{255, 0, 0},

2 new int[]{0, 255, 0}, new int[]{0, 0, 255}};
3
4 lineChart = new LineChart(cv.getWidth(), 75, posicoes, legenda,
5 new String[]{"Produção", "Vendas", " Estoque"}, 1, coresMat,
6 new int[]{220, 220, 220}, (short)90);
Si noti che è stata creata anche una inner class che estende Canvas, per recuperare la larghezza e
l'altezza del display del dispositivo. Se il progetto è indirizzato ad una piattaforma target e le sue
dimensioni sono note, l'uso di questa Canvas non è necessario. Questa nuova versione delle API
MECHART introduce alcuni miglioramenti che vengono riportati qui di seguito:
• Possibilità di creare il grafico con colori RGB

• Grafico a più linee
• Creazione del grafico con Canvas
• Possibilità di creare un Image di un grafico
I primi due punti sono stati mostrati prima. Per creare un grafico a linee, utilizzando una Canvas e non un
CustomItem, c'è la classe LineChartCanvas. Il suo utilizzo è mostrato nel seguente codice, dove potete
notare che solo il metodo startApp() è stato cambiato, non è più presente l'uso di Form. Inoltre, il
costruttore della classe LineChartCanvas ha undici parametri e non nove come LineChart, di cui solo gli
ultimi due differiscono: un byte che rappresenta la posizione, un vettore di interi che formano il codice
RGB del colore di sfondo della Canvas non del grafico.
Il parametro di posizionamento può essere uno delle due costanti presenti nella classe: FULL e NONE.
Utilizzando la costante NONE il grafico avrà come altezza quella definita nel costruttore, altrimenti,
l'altezza del grafico sarà l'altezza del display del telefono, utile nei casi in cui lo sviluppatore vuole che il
grafico venga visualizzato sullo schermo del telefono cellulare. La seguente immagine mostra il risultato
del seguente codice, a sinistra utilizzando LineChartCanvas.FULL e a destra utilizzando
LineChartCanvas.NONE.
03 {30, 13, 15, 82, 79, 50},
04 {23, 24, 49, 51, 70, 81}};
05

{"Jan", "Fev", "Mar", "Abr", "Mai", "Jun"};
07 byte[] cores = new byte[]{LineChart.MAROON, LineChart.BLUE,

LineChart.WHITE};
08 int[][] coresMat = new int[][]{ new int[]{255, 0, 0},
09 new int[]{0, 255, 0},
10 new int[]{0, 0, 255}};
11
12 display.setCurrent(new LineChartCanvas(cv.getWidth(), 100, posicoes,

legenda,
13 new String[]{"Produção", "Vendas", "Gastos"}, 1,
14 cores, LineChart.GRAY, (short)90, LineChartCanvas.FULL, new int[]

{20,200, 200}));
Come spiegato precedentemente,è possibile anche creare il grafico passando codici RGB. Lo stesso
grafico che vediamo nell'immagine precedente può essere creato con il codice che viene riportato di
seguito. Le modifiche riguardano soltanto il settimo e l'ottavo parametro, l'array di byte è sostituito da una
matrice di numeri interi, e una costante di LineChartCanvas è sostituita da un vettore di interi.
1 display.setCurrent(new LineChartCanvas(cv.getWidth(),
2 100, posicoes, legenda,
3 new String[]{"Produção", "Vendas", "Gastos"}, 1,
4 coresMat, new int[]{180, 180, 180},
5 (short)90, LineChartCanvas.FULL,
6 new int[]{200, 200, 200}));
Inoltre, l'utente può creare un oggetto Image utilizzando il createImage di LineChartCanvas. Il seguente
codice presenta la prima parte, il metodo startApp e, nel secondo, il codice della classe Canvas. I
parametri passati sono necessari al metodo createImage per istanziare un oggetto della classe
LineChartCanvas. Il risultato del codice è mostrato nella successiva immagine

03 ClCanvas cv = new ClCanvas();
04 display.setCurrent(cv);
05 }
06
07 ...
08 ...
09 ...
10
11 class ClCanvas extends Canvas {
12
13 Image img = null;
Font fonte = Font.getFont(Font.FACE_MONOSPACE,
14
Font.STYLE_BOLD, Font.SIZE_MEDIUM);
16 {30, 13, 15, 82, 79, 50}, {23, 24, 49, 51, 70, 81}};
17

{"Jan", "Fev", "Mar", "Abr", "Mai","Jun"};
20 new int[]{0, 255, 0}, new int[]{0, 0, 255}};
21
22 public ClCanvas() {
23 img = LineChartCanvas.createImage(getWidth(),
24 100, posicoes, legenda, new String[]

{"Produção", "Vendas","Gastos"},
25 1, coresMat, new int[]{255, 255, 255}, (short) 90,

LineChartCanvas.NONE,
26 new int[]{200, 200, 200});
27 setFullScreenMode(true);
28 }
29
30 protected void paint(Graphics g) {
31 g.setColor(220, 220, 220);
32 g.fillRect(0, 0, getWidth(), getHeight());
33 g.setFont(fonte);
34 g.setColor(0, 0, 0);
35 g.drawString("Teste da MECHART", getWidth() / 2, 0,
36 Graphics.HCENTER | Graphics.TOP);
37 g.drawString("Dados empresariais", getWidth() / 2,
fonte.getHeight(), Graphics.HCENTER |
38
Graphics.TOP);
39 g.drawImage(img, 0, fonte.getHeight() * 2,
40 Graphics.LEFT | Graphics.TOP);
41 g.setColor(255, 0, 0);
g.drawLine(0, fonte.getHeight() * 2, getWidth(),
42
fonte.getHeight() * 2);
43 }
44 }
PieChart
Il grafico a torta, forse il più conosciuto, viene creato con la classe PieChart. Il costruttore riceve cinque
parametri che sono:
• Larghezza
• Altezza totale del grafico
• I dati
• Grandezza del font
• Colori definiti per le diverse sezioni
L'ultimo parametro è passato in un array di byte. I byte che definiscono i colori principali sono disponibili
come costanti stitiche nella classe PieChart. Il seguente esempio mostra l'uso di PieChart.
01 import com.mechart.chart.PieChart;
05
06 public class UsoPieChart extends MIDlet {
07
08 private PieChart pieChart;
11
14 Vector dados = new Vector();
15 dados.addElement(new String[]{"Brasil", "50"});
16 dados.addElement(new String[]{"Alemanha", "88"});
17 dados.addElement(new String[]{"Itália", "71"});
18 dados.addElement(new String[]{"Argentina", "45"});
19 dados.addElement(new String[]{"Uruguai", "22"});
20 Canvas cv = new Canvas() {
21
22 protected void paint(Graphics graphics) {
23 }
24 };
25 fmMain = new Form("");
26 fmMain.append(new StringItem("Gráfico: ", "Participacao
PIB"));
27 pieChart = new PieChart(cv.getWidth(), 70, dados, 1,
28 new byte[]{PieChart.BLACK, PieChart.BLUE,
29 PieChart.GREEN, PieChart.WHITE, PieChart.RED});
30 fmMain.append(pieChart);
32 }
33
35 }
36
38 }
39 }
La creazione del grafico a torta ha due punti cruciali, una istanza della classe Vector che comunica i dati e
il vettore di byte relativi ai colori di ogni sezione. L'immagine successiva mostra il risultato del precedente
esempio.
Inoltre, è possibile passare come parametro un array di interi con i codici RGB invece di un array di byte.
Per vedere come fare ciò potete vedere il codice seguente.
1 pieChart = new PieChart(cv.getWidth(), 70, dados, 1,

2 new int[][]{ new int[]{0, 0, 0},
3 new int[]{0, 0, 255},
4 new int[]{0, 255, 0},
5 new int[]{255, 255, 255},
6 new int[]{255, 0, 0}});
7
8 fmMain.append(pieChart);
Come il LineChart, anche il PieChart ha avuto dei miglioramenti in questa versione più recente di
MECHART. Per creare grafici come istanza di Canvas è possibile utilizzare la classe PieChartCanvas. Il
seguente esempio mostra il codice necessario per creare un grafico tramite PieChartCanvas.
02 Vector dados = new Vector();
03 dados.addElement(new String[]{"Brasil", "50"});
04 dados.addElement(new String[]{"Alemanha", "88"});
05 dados.addElement(new String[]{"Itália", "71"});
06 dados.addElement(new String[]{"Argentina", "45"});
07 dados.addElement(new String[]{"Uruguai", "22"});
08
09 Canvas cv = new Canvas() {
10 protected void paint(Graphics graphics) {}
11 };
12
14 new int[]{0, 0, 255},
15 new int[]{0, 255, 0},
16 new int[]{255, 255, 255},
17 new int[]{255, 0, 0}};
18
19 display.setCurrent(new PieChartCanvas(cv.getWidth(), 100, dados, 1,
20 new byte[]{PieChartCanvas.BLACK, PieChartCanvas.BLUE,
21 PieChartCanvas.GREEN, PieChartCanvas.WHITE,PieChartCanvas.RED},
22 PieChartCanvas.FULL,new int[]{200, 200, 200}));
E 'importante sottolineare due punti, in primo luogo, i cambiamenti si verificano solo nel metodo startApp,
e in secondo luogo solo due parametri sono stati aggiunti a quelli già utilizzati in precedenza. Un byte che
identifica la posizione del grafico, FULL o NONE (come in LineChartCanvas), e un array di interi che
rappresentano il colore di sfondo della Canvas. Il seguente esempio mostra l'uso della classe con valori
RGB e l'immagine successiva ci permette di vedere il risultato di questo codice.
1 int[][] coresMat = new int[][]{ new int[]{0, 0, 0},

2 new int[]{0, 0, 255}, new int[]{0, 255, 0},
3 new int[]{255, 255, 255},
4 new int[]{255, 0, 0}};
5
6 display.setCurrent(new PieChartCanvas(cv.getWidth(), 100, dados, 1,
7 coresMat,PieChartCanvas.FULL,
8 new int[]{200, 200, 200}));
Il metodo createImage della classe PieChartCanvas riceve gli stessi parametri del costruttore PieChart. Il
suo utilizzo è uguale a quello visto in LineChartCanvas. Il seguente esempio di codice mostra l'uso di
questo metodo in due modi, in primo luogo, utilizzando i codici RGB e, nel secondo, utilizzando le costanti
pre-definite nella classe. L'immagine successiva mostra il risultato dei due esempi.
01 img = PieChartCanvas.createImage(getWidth(), 100, dados, 1,

02 new int[][]{new int[]{0, 0, 0}, new int[]{255, 255, 255},
03 new int[]{0, 255, 0},
04 new int[]{255, 0, 0},
05 new int[]{100, 100, 100}},
06 PieChartCanvas.NONE,
07 new int[]{200, 200, 200});
08 ...
09 ...
10 ...
11 img = PieChartCanvas.createImage(getWidth(), 100, dados123, 1,
12 new byte[]{PieChartCanvas.WHITE, ...},
13 PieChartCanvas.NONE,
14 new int[]{200, 200, 200});
BarChart
Il grafico a barre è costruito con l'uso della classe BarChart di mechart, il suo costruttore è simile ad altre
API grafiche. I parametri passati sono:
• Larghezza
• Altezza totale del grafico
• I dati (un vettore dove ogni vettore è una delle componenti del grafico)
• Il vettore di byte che rappresenta i colori utilizzati
• Un byte che rappresenta il colore di sfondo del grafico
• Il valore massimo che il grafico riceverà
Come le altre classi delle API, il BarChart ha alcuni valori statici e costanti utilizzati per definire i principali
colori. L'utilizzo di questa classe è simile alle precedenti, infatti è presente come negli altri casi una classe
(BarChartCanvas) che ci permette di gestire il grafico all'interno di un Canvas. L'unica differenza
sostanziale riguarda il metodo fullChart() di BarChart. Utilizzando questo metodo possiamo dire a
MECHART se vogliamo che il grafico con le sue linee occupi tutto lo spazio in orizzontale o meno.
Riferimenti
Articolo originale - Gráficos em Java ME com MECHART 2.0

Gráficos em Java ME com MECHART 1.0
Il progetto su Java.net
http://www.mobilidadetudo.com/
Traduzione a cura di Federico Paparoni

Gráficos Com JME

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Gráficos Com JME

Diunggah oleh

Hak Cipta:

Format Tersedia

Gráficos em Java ME com MECHART

Publicado por Tutoriais Admin em 17/08/2009 - 11.894 visualizações

Funcionalidades consideradas comuns em outras plataformas, ainda são um desafio

Figura 1: Gráfico de Linhas Figura 2: Gráfico pizza Figura 3: Gráfico de barras

Utilizando a API com o NetBeans e Wireless Toolkit

Figura 4: Hierarquia do projeto

public class Midlet extends MIDlet {

public void pauseApp() {}

public class UsoLineChart extends MIDlet{

public void startApp() {

public void pauseApp() {}

class ClCanvas extends Canvas {

public class UsoLineChart extends MIDlet{

private LineChart lineChart;

public void startApp() {

public class UsoLineChart extends MIDlet{

public void startApp() {

Home > Artigos > Java ME >

Gráficos em Java ME com MECHART 2.0

Figura 1: Gráfico Figura 2: Gráfico de Figura 3: Gráfico de Figura 4: Gráfico de

Utilizando a API com o NetBeans e Wireless Toolkit

Figura 5: Hierarquia do projeto

Listagem 3: Uso do LineChart com códigos RGB.

• Possibilidade de criação do gráfico com códigos RGB;

Figura 9: LineChartCanvas com FULL. Figura 10: LineChartCanvas com NONE.

Gráficos em Java ME com MECHART

No código fonte basta importar as classes para usá-las:

Nos atributos da classe basta declarar os objetos para acessá-las:

private PieChart pieChart;

public class Midlet extends MIDlet implements CommandListener{

private Form fmMain;

private Command cmSair;

public void startApp() {

fmMain = new Form("Teste CustomItem");

ClCanvas cv = new ClCanvas();

Vector dados = new Vector();

short[] posicoes = new short[]{50, 43, 19, 47, 32, 90};

cmSair = new Command("Sair", Command.EXIT, 1);

public void pauseApp() {

public void destroyApp(boolean unconditional) {

public void commandAction(Command c, Displayable d) {

class ClCanvas extends Canvas

Caso prefira faça o download do projeto deste exemplo.

Para mais informações veja:

MECHART. Página oficial da API mechart. Disponível em https://mechart.dev.java.net/

MECHART è registrato come un progetto su java.net, disponibile all'indirizzo https://mechart.dev.java.net/.

20 String[] legenda = new String[]

22 lineChart = new LineChart(cv.getWidth(), 75, posicoes,

1 int[][] coresMat = new int[][]{new int[]{255, 0, 0},

• Possibilità di creare il grafico con colori RGB

06 String[] legenda = new String[]

07 byte[] cores = new byte[]{LineChart.MAROON, LineChart.BLUE,

12 display.setCurrent(new LineChartCanvas(cv.getWidth(), 100, posicoes,

14 cores, LineChart.GRAY, (short)90, LineChartCanvas.FULL, new int[]

01 public void startApp() {

18 String[] legenda = new String[]

24 100, posicoes, legenda, new String[]

25 1, coresMat, new int[]{255, 255, 255}, (short) 90,

1 pieChart = new PieChart(cv.getWidth(), 70, dados, 1,

1 int[][] coresMat = new int[][]{ new int[]{0, 0, 0},

01 img = PieChartCanvas.createImage(getWidth(), 100, dados, 1,

Articolo originale - Gráficos em Java ME com MECHART 2.0

Anda mungkin juga menyukai