GUI-Programmierung mit JControl/Vole
|
II. GrundstrukturIn diesem Kapitel werden die Basiskonzepte von JControl/Vole beschrieben und anhand von Beispielprogrammen dargestellt. Außerdem wird ein Grundgerüst für Anwendungen entwickelt, die auf JControl/Vole basieren. Bild 1 zeigt den prizipiellen Aufbau von JControl/Vole. Jedes Anwendungsprogramm, das darauf aufsetzt, muss zunächst eine Instanz der Klasse |  |
Bildlich kann man sich eine Anwendung, die auf JControl/Vole basiert, als Baumstruktur vorstellen (Bild 2): Die Wurzel wird durch die Instanz der Klasse Frame dargestellt, die Äste werden durch Container repräsentiert. Die einzelnen Blätter sind die Components, also die tatsächlich für den Benutzer sichtbaren GUI-Komponenten wie Schaltflächen, Labels, Textfelder, Menüs usw.
Frame
Die Klasse jcontrol.ui.vole.Frame zeichnet für die Tastaturabfrage, das Event-Handling und das Focus-Management verantwortlich. Sie erweitert außerdem die Klasse jcontrol.ui.vole.Container und besitzt alle ihre Fähigkeiten. Einem Frame können Components und Container hinzugefügt werden. Der folgende Quelltext zeigt eine einfache Anwendung, die ein Label-Component und zwei Button-Components darstellt.
| 1 | import jcontrol.ui.vole.Button; |
| 2 | import jcontrol.ui.vole.Frame; |
| 3 | import jcontrol.ui.vole.Label; |
| 4 | |
| 5 | /** |
| 6 | * <p>This example demonstrates how to implement JControl |
| 7 | * applications with a graphical user interface |
| 8 | * using the GUI framework JControl/Vole.</p> |
| 9 | * |
| 10 | * <p>(C) DOMOLOGIC Home Automation GmbH 2003-2005</p> |
| 11 | */ |
| 12 | public class VoleExampleBase extends Frame { |
| 13 | |
| 14 | Button b1, b2; |
| 15 | Label l; |
| 16 | |
| 17 | /** |
| 18 | * Create and show a label and two buttons. |
| 19 | */ |
| 20 | public VoleExampleBase() { |
| 21 | // create some components |
| 22 | l = new Label("Welcome to Vole!", 0, 5, 128, 10, |
| 23 | Label.ALIGN_CENTER); |
| 24 | b1 = new Button("Button 1", 8,20,50,12); |
| 25 | b2 = new Button("Button 2", 62,20,50,12); |
| 26 | |
| 27 | // add the components to the frame |
| 28 | this.add(l); |
| 29 | this.add(b1); |
| 30 | this.add(b2); |
| 31 | |
| 32 | // make the frame visible |
| 33 | show(); |
| 34 | } |
| 35 | |
| 36 | public static void main(String[] args) { |
| 37 | new VoleExampleBase(); |
| 38 | } |
| 39 | } |
Bild 2 zeigt einen Screenshot von obigem Beispielprogramm. Wenn Sie den Quelltext dieses Beispiels herunterladen, in ein neues JControl/IDE-Projekt einfügen und dann den Simulator starten, sehen Sie das GUI-Framework JControl/Vole in Aktion. Die Klasse Frame sorgt automatisch für eine kontinuierliche Abfrage der Tastatur, durch Bewegen des Tasters am JControl-Gerät können Sie den Eingabefokus zwischen den beiden Buttons hin- und herschalten. Da wir in dem Beispielprogramm jedoch keinen ActionListener für die Buttons installiert haben, empfängt das Programm keine ActionEvents und kann somit auch nicht auf das Betätigen eines Buttons reagieren. Wie Events verarbeitet werden, können Sie in Kapitel 4 dieses Tutorials nachlesen (Event-Handling).
Container
Ein Container (jcontrol.ui.vole.Container) kann beliebig viele weitere Container oder Components enthalten. Der Eingabefokus wird innerhalb eines Containers von Component zu Component weitergegeben, bis das letzte Component bzw. der letzte Sub-Container erreicht wurde. Dann springt der Fokus zum nächsten Container, in welchem er wieder von Component zu Component weitergegeben wird. Es macht also Sinn, zusammengehörige Components in einem Container zu organisieren. Die Reihenfolge, in der die Components den Fokus erhalten, richtet sich nach der Reihenfolge, in der sie dem Container, bzw. Frame hinzugefügt werden.
Ferner wirken sich sämtliche Operationen, die auf einen Container ausgeführt werden, auch auf alle enthaltenen Kind- Komponenten aus: Löscht man beispielsweise den Container mit Hilfe der Methode remove(), werden auch alle Kind-Komponenten aus der Benutzeroberfläche entfernt.
Die wichtigsten Methoden der Klasse Container sind in der folgenden Tabelle 1 aufgeführt und kurz erläutert:
| Methode | Beschreibung |
|---|---|
Container(int x, int y, int width, int height) | Erzeugt einen neuen Container mit den angegebenen Ausmaßen. |
add(Component c) | Fügt dem Container ein neues Component hinzu. Die enthaltenen Komponenten werden in der Reihenfolge ihres Hinzufügens gezeichnet. |
remove(Component c) | Entfernt eine Komponente aus dem Container. |
removeAll() | Entfernt alle Komponenten aus dem Container. |
remove() | Entfernt alle Komponenten aus dem Container und den Container selbst. |
transferFocus() | Erzwingt einen Wechsel des Eingabefokus zum nächsten Component. |
jcontrol.ui.vole.Container
Eine vollständige Zusammenstellung aller Klassenmethoden mit ausführlichen Erläuterungen findet man in der JControl API-Dokumentation http://www.jcontrol.org/current/docs/api/jcontrol/ui/vole/Container.html.
Component
Die Klasse jcontrol.ui.vole.Component dient als Basisklasse für sämtliche GUI-Komponenten und enthält die folgenden Standardmethoden, die von jeder GUI-Komponente und auch von jedem Container implementiert werden:
| Methode | Beschreibung |
|---|---|
getParent() | Gibt den Container zurück, der dieses Component enthält. |
boolean isVisible() | Prüft, ob die GUI-Komponente sichtbar ist. |
remove() | Entfernt die GUI-Komponente aus seinem Container. |
requestFocus() | Versucht, den Eingabefokus an diese GUI-Komponente zu übergeben. In manchen Situationen ist dies nicht möglich. |
removeFocus() | Entzieht diesem Component-Objekt den Fokus. |
setBounds(int x, int y, int width, int height) | Ändert die Position und Größe dieser GUI-Komponente. Das Component wird daraufhin neu gezeichnet. |
setFont(Font f) | Stellt die als Parameter übergebene Schriftart für dieses Component ein. Das Component wird daraufhin neu gezeichnet. |
setVisible(boolean b) | Schaltet die Darstellung dieser GUI-Komponente ein oder aus. |
validate() | Berechnet die Ausmaße (die sog. PreferredSize) dieser GUI-Komponente neu und bewirkt das Neuzeichnen der grafischen Darstellung. |
jcontrol.ui.vole.Component
Für eine vollständige Auflistung und genaue Beschreibung aller Methoden der Klasse Component steht die JControl API-Dokumentation http://www.jcontrol.org/current/docs/api/jcontrol/ui/vole/Component.html zur Verfügung.
Komponenten von JControl/Vole
Die folgende Tabelle zeigt eine Liste mit allen Komponenten, die in JControl/Vole enthalten sind. Eine detailiertere Beschreibung dieser Komponenten, sowie einige Beispielprogramme finden Sie im Kapitel Standard-Komponenten. Ein Klick auf den Namen einer Komponente verweist auf ein entsprechendes Unterkapitel, in dem diese näher beschrieben wird. Zur API-Dokumentation der Komponente gelangen Sie durch einen Klick auf die Klasse.
| Icon | Name | Kurzbeschreibung | Klasse |
|---|---|---|---|
| AnimationContainer | Container mit speziellen Funktionenen für Komponenten, die das Interface "Animateable" implementieren. | jcontrol.ui.vole.AnimationContainer | |
 | Border | Zeichnet einen Rahmen | jcontrol.ui.vole.Border |
 | Button | Beschriftete Schaltfläche die solange aktiviert ist, wie sie gedrückt wird | jcontrol.ui.vole.Button |
 | CheckBox | Schaltfläche mit dauerhaften Zuständen on und off | jcontrol.ui.vole.CheckBox |
 | ComboBox | Aus einer Liste von Einträgen kann einer ausgewählt (aktiviert) werden. | jcontrol.ui.vole.ComboBox |
| Component | Basisklasse aller Komponenten von JControl/Vole | jcontrol.ui.vole.Component | |
| Container | Komponente, die andere Komponenten enthalten (gruppieren) kann. | jcontrol.ui.vole.Container | |
| Frame | Ausgangskomponente für grafische Benutzeroberflächen, die auf JControl/Vole basieren | jcontrol.ui.vole.Frame | |
 | Label | Zeigt ein Bild oder nicht editierbaren Text an | jcontrol.ui.vole.Label |
 | List | Zeigt Texte mit vertikalem Scrollbalken auf der rechten Seite an | jcontrol.ui.vole.List |
 | NumberChooser | Komponente, die eine Nummer zeigt und mittels Schaltflächen verändern kann | jcontrol.ui.vole.NumberChooser |
 | RadioButton | Schaltfläche mit dauerhaften Zuständen on und off | jcontrol.ui.vole.RadioButton |
 | RockerSwitch | Schaltfläche mit dauerhaften Zuständen on und off | jcontrol.ui.vole.RockerSwitch |
 | ScrollBar | Erzeugt einen Scrollbalken | jcontrol.ui.vole.ScrollBar |
 | Slider | Erzeugt einen verschiebbaren Regler | jcontrol.ui.vole.Slider |
 | TextArea | Eine Textfläche mit aktivierbarem Scrollbalken an der rechten Seite | jcontrol.ui.vole.TextArea |
 | TextScroller | Innerhalb dieser Komponente wird ein Text automatisch nach oben oder unten bewegt | jcontrol.ui.vole.TextScroller |
 | Diagram | Zeichnet ein (animiertes) Diagramm | jcontrol.ui.vole.graph.Diagram |
 | Histogram | Zeichnet ein (animiertes) Histogramm | jcontrol.ui.vole.graph.Histogram |
 | BigImageMenu | Ein Menü, das mehrere Menüpunkte besitzt aber nur einen gleichzeitig darstellt | jcontrol.ui.vole.menu.BigImageMenu |
| Menu | Abstrakte Basisklasse für Menüs unter JControl/Vole | jcontrol.ui.vole.menu.Menu | |
 | MenuBar | Eine einfache Menüleiste | jcontrol.ui.vole.menu.MenuBar |
 | MultiImageMenu | Menüpunkte werden durch Bilder dargestellt | jcontrol.ui.vole.menu.MultiImageMenu |
 | TextMenu | Textbasiertes, scrollbares Menü | jcontrol.ui.vole.menu.TextMenu |
 | AnalogClock | Stellt eine analoge Uhr dar | jcontrol.ui.vole.meter.AnalogClock |
 | AnalogMeter | Ein analoges Messinstrument | jcontrol.ui.vole.meter.AnalogMeter |
 | BarMeter | (Animierter) Balken zur Darstellung von Werten | jcontrol.ui.vole.meter.BarMeter |
 | DigitalMeter | Werte werden in digitaler Form dargestellt | jcontrol.ui.vole.meter.DigitalMeter |
 | FanMeter | Anzeige eines (animierten) Lüfters mit Anzeige eines (Drehzahl-)Werts | jcontrol.ui.vole.meter.FanMeter |
 | SevenSegmentMeter | Anzeige von Werten mittels 7-Segment-Darstellung | jcontrol.ui.vole.meter.SevenSegmentMeter |
 | Thermometer | (Animiertes) Thermometer zur anschaulichen Darstellung von Messwerten | jcontrol.ui.vole.meter.Thermometer |