Académique Documents
Professionnel Documents
Culture Documents
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.
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.
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.
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.
import com.mechart.chart.*;
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.
import com.mechart.chart.*;
import java.util.Vector;
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
fmMain.addCommand(cmSair);
fmMain.setCommandListener(this);
display.setCurrent(fmMain);
}
Referências
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
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;
02 import java.util.Vector;
03 import javax.microedition.midlet.*;
04 import javax.microedition.lcdui.*;
05
06 public class UsoLineChart extends MIDlet {
07
08 private Display display;
09 private Form fmMain;
10 private LineChart lineChart;
11
12 public void startApp() {
13 display = Display.getDisplay(this);
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
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:
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.
01 display = Display.getDisplay(this);
02 short[][] posicoes = new short[][]{{50, 43, 19, 47, 90, 63},
03 {30, 13, 15, 82, 79, 50},
04 {23, 24, 49, 51, 70, 81}};
05
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
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;
02 import java.util.Vector;
03 import javax.microedition.midlet.*;
04 import javax.microedition.lcdui.*;
05
06 public class UsoPieChart extends MIDlet {
07
08 private PieChart pieChart;
09 private Form fmMain;
10 private Display display;
11
12 public void startApp() {
13 display = Display.getDisplay(this);
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);
31 display.setCurrent(fmMain);
32 }
33
34 public void pauseApp() {
35 }
36
37 public void destroyApp(boolean unconditional) {
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.
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.
01 display = Display.getDisplay(this);
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
13 int[][] coresMat = new int[][]{new int[]{0, 0, 0},
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.
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