GUI-Programmierung mit JControl/Vole

III. Standard-Komponenten

Das Package jcontrol.ui.vole enthält eine Sammlung von GUI-Komponenten, die die Anforderungen an eine komfortable grafische Benutzeroberfläche für die meisten Aufgaben abdeckt. Dieses Kapitel beschreibt Funktion und Arbeitsweise dieser Standardkomponenten und liefert Beispielprogramme, die den Umgang mit dem GUI-Framework JControl/Vole demonstrieren.



Buttons

Buttons bilden eine anschauliche und intuitiv benutzbare Methode, um dem Benutzer die Interaktion mit einem Programm zu ermöglichen. Interessant für den Programmierer ist hier vor allem das interne Verhalten dieser Buttons, wie z.B. das Auslösen von ActionEvents oder die Aktualisierung der Darstellung.

In JControl/Vole gibt es 3 verschiedene Arten von Buttons: Den einfachen Button, den RadioButton und die CheckBox. Diese Varianten werden im weiteren Verlauf dieses Tutorials näher betrachtet und anhand eines Beispiels deren Funktionsweise verdeutlicht.

Der folgende Quelltext zeigt ein Beispielprogramm, dass alle drei Button-Typen verwendet, um eine ansonsten zweckfreie Benutzeroberfläche zu erstellen.

In Bild 1 ist ein Screenshot des VoleButtonExample-Programms auf dem JControl/Sticker dargestellt. Um das Look&Feel von JControl/Vole selbst auszuprobieren, laden Sie die Projekt-Datei VoleButtonExample.jcp aus dem ZIP-Archiv VoleButtonExample.zip http://www.jcontrol.org/examples/VoleButtonExample.zip in Ihre JControl/IDE und starten Sie den Simulator (alternativ können Sie das Projekt natürlich auch in Ihr JControl-Gerät laden!).

Bild 1: Das VoleButtonExample

1    import jcontrol.ui.vole.Border;
2    import jcontrol.ui.vole.Button;
3    import jcontrol.ui.vole.CheckBox;
4    import jcontrol.ui.vole.Container;
5    import jcontrol.ui.vole.Frame;
6    import jcontrol.ui.vole.RadioButton;
7    
8    /**
9     * <p>This example demonstrates how to use buttons
10     * within the GUI framework JControl/Vole.</p>
11     *
12     * <p>(C) DOMOLOGIC Home Automation GmbH 2003-2005</p>
13     */
14    public class VoleButtonExample extends Frame {
15     
16      /**
17       * Create different kinds of buttons.
18       */
19      public VoleButtonExample() {
20        // create a simple button and add it to the frame
21        Button simpleButton = new Button("Press me!", 30, 45, 65, 12);
22        this.add(simpleButton);
23       
24        // create a Container with three RadioButtons
25        // and a Border around it
26        Container c1 = new Container();
27           
28        RadioButton rb1 = new RadioButton("Radio 1", 5, 8);
29        RadioButton rb2 = new RadioButton("Radio 2", 5, 18);
30        RadioButton rb3 = new RadioButton("Radio 3", 5, 28);
31       
32        // add the RadioButtons to the Container   
33        c1.add(rb1);
34        c1.add(rb2);
35        c1.add(rb3);
36       
37        // add a Border
38        c1.add(new Border("RadioButtons", 0, 0, 60, 40))
39       
40        // add the Container to the Frame
41        this.add(c1);
42       
43       
44        // create a Container with two CheckBoxes and a Border around it
45        Container c2 = new Container();
46    
47        CheckBox cb1 = new CheckBox("Check 1", 69, 10);
48        CheckBox cb2 = new CheckBox("Check 2", 69, 23);
49    
50        // add the CheckBoxes to the Container   
51        c2.add(cb1);
52        c2.add(cb2);
53       
54        // add a Border
55        c2.add(new Border("CheckBoxes", 64, 0, 60, 40));
56       
57        // add the second Container to the Frame
58        this.add(c2);
59      }
60    
61      /**
62       * Instantiate the VoleButtonExample.
63       */
64      public static void main(String[] args) {
65        VoleButtonExample vbe = new VoleButtonExample();
66        // make the Frame visible
67        vbe.show();
68      }
69    }
Listing 1: VoleButtonExample.java


ComboBox und NumberChooser


ComboBox

Die ComboBox ist eine interaktive GUI-Komponente, die dem Benutzer mehrere Texteinträge zur Auswahl anbietet. Im deaktivierten Zustand ist sie zugeklappt und zeigt den derzeitig ausgewählten Eintrag an. Hat sie den Eingabefokus, kann die ComboBox vom Benutzer durch Betätigen der Select-Funktion geöffnet werden. Nun kann ein anderer Eintrag ausgewählt werden, wobei die Liste der Einträge herauf- oder herunterscrollt, wenn sie länger als der darstellbare Bereich ist.

Die wichtigsten Methoden der Klasse jcontrol.ui.vole.ComboBox sind in der folgenden Tabelle 1 aufgeführt:

MethodeBeschreibung
ComboBox(int x, int y)Erzeugt eine neue ComboBox an der angegebenen Position.
add(String item)Fügt der ComboBox einen neuen Eintrag hinzu.
String getSelectedItem()Gibt den momentan selektierten Eintrag der ComboBox als String zurück.
int getSelectedIndex()Gibt den Index des momentan selektierten Eintrags der ComboBox zurück.
remove(String item)Entfernt einen Eintrag aus der ComboBox.
select(int index)Selektiert den als Index übergebenen Eintrag in der ComboBox.
Tabelle 1: Methoden der Klasse jcontrol.ui.vole.Container

Installiert man mit Hilfe der Methode setActionListener(ActionListener listener) einen ActionListener auf die ComboBox, feuert sie ITEM_SELECTED-ActionEvents, wenn der Benutzer eine Auswahl tätigt.


NumberChooser

Der NumberChooser ist eine GUI-Komponente bestehend aus einem Textfeld und zwei Schaltflächen. Das Textfeld zeigt eine Dezimalzahl an, deren Wert durch Betätigen der beiden Pfeiltasten eingestellt werden kann. Dabei wird der Wert jeweils um 1 erhöht, bzw. reduziert (der Benutzer kann diese Schrittweite nicht direkt verändern). Minimaler und maximaler Wert müssen dem Konstruktor übergeben werden. Vom Programmierer beeinflussbar sind ferner die verwendete Schriftart sowie Größe und Position der GUI-Komponente. Folgende Methoden stehen zur Verfügung:

MethodeBeschreibung
NumberChooser(int x, int y, int min, int max)Erzeugt einen neuen NumberChooser an der angegebenen Position mit dem durch die Parameter min und max abgegrenzten Wertebereich.
int getValue()Gibt den aktuellen Wert der GUI-Komponente NumberChooser zurück.
setFont(Resource font)Ändert die Schriftart zur Darstellung des Textfeldes in die durch die Resource übergebene.
setValue(int value)Ändert den Wert des der GUI-Komponente NumberChooser. Der neue Wert muss innerhalb des dem Konstruktor übergebenen Wertebereichs liegen.
Tabelle 2: Methoden der Klasse jcontrol.ui.vole.NumberChooser

Zum Abschluss dieses Kapitels soll ein kurzer Quelltext gezeigt werden, der den Umgang mit den GUI-Komponenten ComboBox und NumberChooser demonstriert. Er ist ebenfalls in der Datei VoleComboNumberExample.zip http://www.jcontrol.org/examples/VoleComboNumberExample.zip enthalten. Bild 2 zeigt einen Screenshot des Beispielprogramms.

Bild 2: Das VoleComboNumberExample

1    import jcontrol.system.Time;
2    import jcontrol.ui.vole.Border;
3    import jcontrol.ui.vole.ComboBox;
4    import jcontrol.ui.vole.Container;
5    import jcontrol.ui.vole.Frame;
6    import jcontrol.ui.vole.NumberChooser;
7    
8    /**
9     * <p>This example demonstrates how to use the
10     * components ComboBox and NumberChooser within
11     * the GUI framework JControl/Vole.</p>
12     *
13     * <p>(C) DOMOLOGIC Home Automation GmbH 2003-2005</p>
14     */
15    public class VoleComboNumberExample extends Frame {
16     
17      /**
18       * Create Vole ComboBox and NumberChooser UI elements.
19       */
20      public VoleComboNumberExample() {
21        // create a new ComboBox
22        ComboBox cb = new ComboBox(10,10);
23    
24        // add some entries
25        cb.add("Vole");
26        cb.add("Mole");
27        cb.add("Tiger");
28        cb.add("Lion");
29        cb.add("Elephant");
30        cb.add("Tyrannosaurus Rex");
31       
32        // add the box to our Frame
33        this.add(cb);
34       
35       
36        // create some NumberChoosers and a Container to hold them
37        Container c = new Container();
38       
39        NumberChooser nc1 = new NumberChooser(10,40,1,31);
40        NumberChooser nc2 = new NumberChooser(35,40,1,12);
41        NumberChooser nc3 = new NumberChooser(60,40,2000,2099);
42       
43        // set current date
44        Time t = new Time();
45        nc1.setValue(t.day);
46        nc2.setValue(t.month);
47        nc3.setValue(t.year);   
48       
49        // add the NumberChoosers to the Container
50        c.add(nc1);
51        c.add(nc2);
52        c.add(nc3);
53       
54        // add the Container to the frame
55        this.add(c);
56       
57       
58        // nice borders
59        this.add(new Border("ComboBox", 0,0,128,25));
60        this.add(new Border("Current Date", 0,30,128,25));
61      }
62    
63    
64      public static void main(String[] args) {
65        new VoleComboNumberExample().show();
66      }
67    }
Listing 2: VoleComboNumberExample.java


Slider und ScrollBar


Slider

Der Slider von JControl/Vole Mit der GUI-Komponente Slider ist es möglich, Zahlenwerte grafisch als Schieberegler darzustellen. Bewegt der Benutzer den Slider, so wird ein VALUE_CHANGED-ActionEvent mit dem neuen Wert generiert. Folgende Methoden werden von der Klasse jcontrol.ui.vole.Slider angeboten:

MethodeBeschreibung
Slider(int x, int y, int width, int min, int max, int step)Erzeugt einen neuen Slider an der angegebenen Position mit dem durch die Parameter min und max abgegrenzten Wertebereich und der Breite width. Die Höhe der GUI-Komponente Slider kann nicht verändert werden. Durch den Parameter step kann die Schrittweite des Sliders bei Bewegung durch den Benutzer eingestellt werden.
int getValue()Gibt den aktuellen Wert der GUI-Komponente Slider zurück.
setValue(int value)Ändert den Wert der GUI-Komponente Slider. Wenn der neue Wert nicht innerhalb des bei der Erzeugung des Sliders angegebenen Bereichs liegt, so wird er entsprechend angepasst.
Tabelle 3: Methoden der Klasse jcontrol.ui.vole.Slider


ScrollBar

Der Scrollbar von JControl/Vole Die Klasse ScrollBar stellt Methoden zur Verfügung, die das unkomplizierte Zeichnen eines grafischen Scroll-Balkens ermöglichen. Einen ScrollBar wird man meistens mit anderen (zu scrollenden) GUI-Komponenten kombinieren. Die im nächsten Abschnitt beschriebenen GUI-Komponenten TextArea und List beispielsweise machen von der Klasse ScrollBar Gebrauch. Über die Methode setValue(int value) wird dem ScrollBar-Objekt seine aktuelle Scrollposition mitgeteilt. Diese muss zwischen 0 und 100 liegen, spiegelt also einen Prozentwert wider. Das grafische Kästchen, welches die Scrollposition symbolisiert, wird automatisch an die korrekte Position bewegt. Darüber hinaus kann die ScrollBar entweder horizontal oder vertikal dargestellt werden. Tabelle 4 fasst die wichtigsten Methoden zusammen:

MethodeBeschreibung
ScrollBar(int x, int y, int size, boolean orientation)Erstellt eine neue ScrollBar an der angegebenen Position mit der durch size übermittelten Größe. Der Parameter orientation kann die Werte ScrollBar.HORIZONTAL und ScrollBar.VERTICAL annehmen.
setValue(int value)Ändert die Scrollposition der ScrollBar auf den angegebenen Wert. Dieser muss zwischen 0 und 100 liegen, die ScrollBar wird nach Aufruf dieser Methode neu gezeichnet.
Tabelle 4: Methoden der Klasse jcontrol.ui.vole.ScrollBar

Der nachfolgend gelistete Quelltext implementiert ein kleines Beispielprogramm, das einen Slider und eine ScrollBar darstellt. Bild 3 zeigt einen Screenshot dieses Programms. Wie alle Beispiele dieses Tutorials ist es in der herunterladbaren Datei VoleSliderScrollbarExample.zip http://www.jcontrol.org/examples/VoleSliderScrollbarExample.zip enthalten.

Bild 3: Das VoleSliderScrollbarExample

1    import jcontrol.ui.vole.Frame;
2    import jcontrol.ui.vole.Label;
3    import jcontrol.ui.vole.ScrollBar;
4    import jcontrol.ui.vole.Slider;
5    
6    /**
7     * <p>This example demonstrates how to use the
8     * components Slider and ScrollBar within the
9     * GUI framework JControl/Vole.</p>
10     *
11     * <p>(C) DOMOLOGIC Home Automation GmbH 2003-2005</p>
12     */
13    public class VoleSliderScrollbarExample extends Frame {
14     
15      /**
16       * Create a Slider and a ScrollBar
17       */
18      public VoleSliderScrollbarExample() {
19        // Create and add the Slider
20        Slider slider = new Slider(5, 30, 80, 0, 20, 1);
21        this.add(slider);
22       
23        // Create and add the ScrollBar
24        ScrollBar sb = new ScrollBar(110, 0, 64,
25                                     ScrollBar.ORIENTATION_VERTICAL);
26        sb.setValue(30);
27        this.add(sb);
28       
29        // Add a text label
30        Label l = new Label("Slider Demo", 5, 10);
31        this.add(l);
32      }
33    
34    
35      /**
36       * Instantiate the VoleSliderScrollbarExample
37       */
38      public static void main(String[] args) {
39        new VoleSliderScrollbarExample().show();
40      }
41    }
Listing 3: VoleSliderScrollbarExample.java


List und TextArea


List

Die GUI-Komponente List zeigt eine Liste von Strings an und ermöglicht die grafische Auswahl eines Eintrags. Enthält die Liste mehr Einträge als auf Grund ihrer Größe gleichzeitig darstellbar sind, kann am rechten Rand eine ScrollBar eingeblendet werden. Der momentan durch den Benutzer ausgewählte Eintrag wird durch die Invertierung der entsprechenden Zeile hervorgehoben. Die GUI-Komponente List "feuert" ActionEvents vom Typ ITEM_SELECTED. Die folgenden Methoden sind zur Erstellung einer Liste verfügbar:

MethodeBeschreibung
List(int x, int y, boolean scrollbar)Erzeugt eine neue GUI-Komponente List an der angegebenen Position. Der Parameter scrollbar zeigt an, ob ein Scrollbalken am rechten Listenrand gezeichnet werden soll. Da die Breiten- und Höhenangabe fehlt, wird bei der Verwendung dieses Konstruktors die bevorzugte Größe automatisch bestimmt.
List(int x, int y, int width, int height, boolean scrollbar)Dieser Konstruktor arbeitet genau wie sein o.a. Pendant mit dem Unterschied, dass Breite und Höhe der Liste vom Progammierer vorgegeben werden können.
add(String item)Fügt der Liste einen neuen Eintrag hinzu.
remove(String item)Entfernt einen Eintrag aus der Liste.
Tabelle 5: Methoden der Klasse jcontrol.ui.vole.List


TextArea

Mit der TextArea ist es möglich, längere Texte mit Scroll-Funktionalität anzuzeigen. Der Inhalt der TextArea kann entweder statisch im Konstruktor oder dynamisch mit der add-Methode übergeben werden. Die Methode remove ermöglicht es, einzelne Textzeilen wieder zu entfernen. Tabelle 6 fasst die Methoden der TextArea zusammen:

MethodeBeschreibung
TextArea(int x, int y, int width, int height, boolean showScrollbar)Erzeugt eine neue TextArea mit der angegebenen Position und Größe. Der Parameter boolean legt fest, ob am rechten Rand der TextArea ein Scrollbalken gezeichnet werden soll.
TextArea(String[] text, int x, int y, int width, int height, boolean showScrollbar)Bei diesem Konstruktor kann neben den o.g. Parametern noch ein String-Array mit dem initialen Textinhalt der TextArea übergeben werden.
add(String item)Fügt der TextArea eine neue Textzeile hinzu. Die Länge des Strings darf dabei die Breite der TextArea nicht überschreiten. Sollte der String länger sein, so wird er auf die passende Länge getrimmt (die hinteren Zeichen werden abgeschnitten).
remove(int row)Entfernt die Zeile mit der als Parameter übergebenen Zeilennummer aus der TextArea. Die nachfolgenden Zeilen rücken dem entsprechend um eine Zeile nach oben.
Tabelle 6: Methoden der Klasse jcontrol.ui.vole.TextArea

Im Folgenden ist ein Quelltext-Beispiel aufgeführt, dass sowohl ein List-Objekt als auch eine TextArea anlegt, mit einigen Einträgen füllt und auf dem Display darstellt. Laden Sie das Projekt VoleListTextareaExample.jcp aus dem ZIP-Archiv VoleListTextareaExample.zip http://www.jcontrol.org/examples/VoleListTextareaExample.zip in Ihre JControl/IDE, um das Beispiel in Aktion zu sehen. Bild 4 zeigt einen Screenshot des Programms.

Bild 4: Das VoleListTextareaExample

1    import jcontrol.ui.vole.Frame;
2    import jcontrol.ui.vole.List;
3    import jcontrol.ui.vole.TextArea;
4    
5    /**
6     * <p>This example demonstrates how to use the
7     * components List and TextArea within the GUI
8     * framework JControl/Vole.</p>
9     *
10     * <p>(C) DOMOLOGIC Home Automation GmbH 2003-2005</p>
11     */
12    public class VoleListTextareaExample extends Frame {
13     
14      /**
15       * Create a List and a TextArea.
16       */
17      public VoleListTextareaExample() {
18        // create a list with some entries
19        List l = new List(0, 0, 128, 31, true);
20        l.add("North");
21        l.add("South");
22        l.add("East");
23        l.add("West");
24        l.add("North-East");
25        l.add("North-West");
26        l.add("South-East");
27        l.add("South-West");
28        this.add(l);
29       
30        // create a TextArea
31        TextArea ta = new TextArea(new String[]{"The TextArea",
32                                                 "can be filled",
33                                                 "up with nonsense",
34                                                 "and nobody really",
35                                                 "cares about it."},
36                                   0, 32, 128, 32, true);
37        this.add(ta);
38      }
39    
40      /**
41       * Instantiate the VoleListTextareaExample
42       */
43      public static void main(String[] args) {
44        new VoleListTextareaExample().show();
45      }
46    }
Listing 4: VoleListTextareaExample.java


Statische Komponenten

Neben den vielfältigen GUI-Komponenten, die mit dem Benutzer interagieren, bietet JControl/Vole auch noch einige andere statische Komponenten, die zur Darstellung von Texten, Bildern oder grafischen Layout-Elementen verwendet werden können.


Label

Die Klasse Label stellt eine GUI-Komponente zur Verfügung, die einen String oder eine Bild-Ressource darstellt. Dabei können verschiedene horizontale Ausrichtungen (links, rechts und zentriert) vorgegeben werden. Das Label sorgt selbständig dafür, dass das enthaltene Objekt nach einer Überdeckung durch eine andere GUI-Komponente neu gezeichnet wird. Mit Labels lassen sich Texte und Bilder ohne großen Programmieraufwand komfortabel positionieren und ausrichten. In der Tabelle 7 sind die wichtigsten Methoden von Label aufgeführt.

MethodeBeschreibung
Label(Object label, int x, int y)Mit diesem Konstruktor lässt sich sehr schnell ein neues Label erstellen. Als Parameter kann entweder eine Bild-Ressource (jcontrol.io.Resource) oder ein String übergeben werden. Die Werte x und y bestimmen die Position des Labels auf dem Display. Die benötigten Ausmaße werden automatisch anhand der übergebenen Ressource berechnet.
Label(Object label, int x, int y, int width, int height, int align)Erzeugt ein neues Label wie mit o.a. Konstruktor, allerdings können hier Breite und Höhe der GUI-Komponente fest vorgegeben werden. Der Parameter align kann die Werte ALIGN_LEFT, ALIGN_RIGHT oder ALIGN_CENTER annehmen.
Label(String label, int x, int y, int align)Dieser spezielle Konstruktor kann herangezogen werden, wenn das Label einen String darstellen soll und eine andere horizontale Ausrichtung als linksbündig verwendet werden soll.
setAlign(int align, boolean revalidate)Ändert die horizontale Ausrichtung des Label-Inhaltes. Ist der Wert von revalidate true, wird die vom Label belegte Fläche vor dem Neuzeichnen gelöscht.
setLabel(Object label, boolean revalidate)Ändert den Inhalt des Labels. Mit dem Parameter revalidate kann die Neuberechnung der bevorzugten Größe erzwungen werden.
Tabelle 7: Methoden der Klasse jcontrol.ui.vole.Label


Border

Mit der Klasse Border, die auch schon in den vorhergehenden Beispielprogrammen zum Einsatz kam, können verschiedene Rahmentypen auf das Display gezeichnet werden. Die Rahmen sind transparent und überdecken somit nicht schon vorhandene UI-Komponenten. Wahlweise kann bei der Konstruktion ein String übergeben werden, der am linken oberen Rand des Rahmens dargestellt wird. Wie Label sorgt Border selbständig für das Neuzeichnen des Rahmens, wenn er durch eine andere GUI-Komponente überdeckt war.

MethodeBeschreibung
Border(int x, int y, int width, int height)Erzeugt einen neuen Border mit der angegebenen Größe und Position.
Border(String label, int x, int y, int width, int height)Erzeugt einen neuen Border mit der angegebenen Größe und Position sowie der als String übergebenen Bezeichnung.
setLabel(String label)Ändert die Bezeichnung des Rahmens.
setStyle(int m_style)Ändert den Stil des Rahmens. Mögliche Werte sind SIMPLE_BORDER (Standard), ETCHED_BORDER (hervorgehobene Kanten) und ROUND_BORDER (runde Ecken).
Tabelle 8: Methoden der Klasse jcontrol.ui.vole.Border

Das Beispielprogramm VoleLabelBorderExample.java demonstriert die Verwendung von Label und Border. Es ist in dem ZIP-Archiv VoleLabelBorderExample.zip http://www.jcontrol.org/examples/VoleLabelBorderExample.zip inklusive eines entsprechenden JControl/IDE-Projekts enthalten. Bild 5 zeigt einen Screenshot.

Bild 5: Das VoleLabelBorderExample

1    import java.io.IOException;
2    
3    import jcontrol.io.Resource;
4    import jcontrol.ui.vole.Border;
5    import jcontrol.ui.vole.Frame;
6    import jcontrol.ui.vole.Label;
7    
8    /**
9     * <p>This example demonstrates how to use the
10     * components List and TextArea within the GUI
11     * framework JControl/Vole.
12     * This program needs the image resource
13     * 'mouse.jcif'.</p>
14     *
15     * <p>(C) DOMOLOGIC Home Automation GmbH 2003-2005</p>
16     */
17    public class VoleLabelBorderExample extends Frame {
18      Label imageLabel;
19     
20      /**
21       * Create a few Labels and Borders.
22       */
23      public VoleLabelBorderExample() {
24       
25        // create an image Label
26        try {
27          Resource img = new Resource("mouse.jcif");
28          imageLabel = new Label(img, 5, 10);
29        } catch (IOException e) {}
30       
31        Border b = new Border("Mouse", 0, 0, 50, 60);
32    
33        // add mouse and border to the frame
34        this.add(imageLabel);
35        this.add(b);
36           
37        // now create some text labels with different alignments
38        this.add(new Label("Programming", 60, 15));
39        this.add(new Label("with VOLE", 60, 25, 60, 10,
40                           Label.ALIGN_CENTER));
41        this.add(new Label("is really", 60, 35));
42        this.add(new Label("simple!", 60, 45, 60, 10,
43                           Label.ALIGN_RIGHT));
44       
45        // at last, add a 2nd border
46        this.add(new Border("Information", 52, 0, 75, 60));
47      }
48    
49    
50      /**
51       * Instantiate and show the VoleLabelBorderExample
52       */
53      public static void main(String[] args) {
54        new VoleLabelBorderExample().show();
55      }
56    }
Listing 5: VoleLabelBorderExample.java



© 2000-2006 DOMOLOGIC Home Automation GmbH. All Rights Reserved.