Introduzione
J2me Chart Component è una libreria gratuita per MIDP2.0 , nata con lo scopo di permettere agli sviluppatori J2ME di aggiungere grafici alle loro "MIDlet" personali o commerciali. Scrivo questo articolo perchè alcune persone hanno chiesto un "tutorial" su come utilizzare la libreria. Spero questo sia utile e che faciliti la diffusione di ChartComponent.
Panoramica
A partire dalla versione 1.5 di ChartComponent, gli sviluppatori possono scegliere di utilizzarlo in due modi differenti:
1) come componente grafico (PieChart, VBarChart, HBarChart,LineChart)
2) come libreria di disegno, utilizzando come destinazione oggetti Graphics diversi
Analizzeremo entrambi gli usi. Utilizzeremo una "Form" con un componente grafico "Chart" nel primo esempio, una "Form" e una "Image" nel secondo. Quest'ultimo utilizzo permette anche l'esportazione e/o manipolazione del grafico creato.
Prima di proseguire, è bene scaricare la libreria qui e assicurasi di aggiungerla al "classpath".
Il codice
Andremo a scrivere una MIDlet minimale con una "Form" contenente un grafico a barre verticali. Ecco il codice:
1:import javax.microedition.midlet.*;
2:import javax.microedition.lcdui.*;
3:import java.util.*;
4:
5:import org.beanizer.j2me.charts.VBarChart;
6:
7:public class ChartExample1 extends MIDlet implements CommandListener {
8: private Display display;
9: private Form mainForm;
10: private final static Command CMD_EXIT = new Command("Exit", Command.EXIT, 1);
11: final VBarChart item= new VBarChart("");
12:
Niente di stravagante fino ad ora. L'unica cosa da notare è la creazione di una istanza dell'oggetto VBarChart. La parte interessante viene ora, nel metodo "startApp":
13: public void startApp() {
14: display = Display.getDisplay(this);
15:
16: mainForm = new Form("VBarChart Demo");
17: item.setFont(Font.FACE_PROPORTIONAL,Font.STYLE_PLAIN,Font.SIZE_SMALL);
18: item.setDrawAxis(true);
19: item.setPreferredSize(mainForm.getWidth(),120);
20: item.setMargins(5,45,10,15);
21: item.showShadow(true);
22: item.setShadowColor(20,20,20);
23: item.setColor(40, 40, 200);
24: item.resetData();
25: item.addElement("a",40,0,0,255);
26: item.addElement("b",23,0,255,0);
27: item.addElement("c",75,255,0,0);
28: item.setMaxValue(100);
29: mainForm.append(item);
30: mainForm.addCommand(CMD_EXIT);
31: mainForm.setCommandListener(this);
32: display.setCurrent(mainForm);
33: }
34:
Concentriamoci solo sulle righe interessanti:
- Linea 18: vogliamo che gli assi X ed Y vengano mostrati
- Linea 21: un'ombra per dare al grafico un aspetto 3D
- Linea 22: il colore dell'ombra
- Linea 24: azzeriamo i dati, in caso stiamo riutilizzando un componente già usato
- Linee 25-26-27: qui vengono inseriti i dati nel grafico. I parametri sono:
- una etichetta da mostrare sull'asse X
- un valore (per l'asse Y)
- i colori della barra in notazione R,G,B
- Linea 28: qui indichiamo il valore massimo per le Y
Il resto del codice è quello che generalmente troviamo in ogni MIDlet.
35: public void commandAction(Command c, Item e) {
36: if(c.getLabel().equals("Exit")){
37: destroyApp(false);
38: notifyDestroyed();
39: }
40: }
41: public void commandAction(Command c, Displayable d){
42: if(c.getLabel().equals("Exit")){
43: destroyApp(false);
44: notifyDestroyed();
45: }
46: }
47:
48: protected void pauseApp() {
49: }
50:
51: protected void destroyApp(boolean arg0){
52: }
53:
54:}
55:
Nel caso volessimo un grafico a barre orizzontali, cambiamo solo la linea 11:
11: final LineChart item= new LineChart("");
oppure
11: final HBarChart item= new HBarChart("");
Attenzione che con HBarChart gli assi sono invertiti.
Lascio la spiegazione di PieChart(grafici a torta) per un prossimo articolo, dato che presenta alcune differenze rispetto agli altri grafici.
Usare la libreria come tool grafico
Il semlice esempio mostrato copre gran parte delle necessità nello sviluppo j2me di grafici, ma ci sono casi in cui non ci serve un componente grafico, e il grafico deve essere esportato o manipolato. Questo è possibile con ChartComponent utilizzando il metodo drawChart ( drawPie per PieChart).
drawChart accetta come parametri un oggetto Graphics e la lunghezza e l'altezza del grafico.
In questo modo, se dobbiamo disegnare il grafico all'interno di un oggetto Image, basta sostituire nel codice precedente la linea 29 con qualcosa del genere:
Image image= Image.createImage(150,150);
Graphics g= image.getGraphics();
item.drawChart(g,120, 120);
mainForm.append(image);
Come si può vedere, creiamo una immagine,disegnamo il grafico nel suo oggetto Graphics e alla Form aggiungiamo l'immagine invece del ChartItem.
Conclusioni
Ce n'è abbastanza per poter iniziare ad utilizzare la libreria. Il prossimo articolo sarà focalizzato su PieChart ed altre utili caratteristiche di ChartComponent.
ChartComponent è e rimarrà libera per utilizzo sia privato che commerciale. Se avete trovato questo articolo utile, per favore citatelo sui "blog".
Hasta la proxima. |
Articoli 
