GUI-Programmierung mit JControl/Wombat
|
II. GrundstrukturIn diesem Kapitel werden die Basiskonzepte von JControl/Wombat beschrieben und anhand von Beispielprogrammen dargestellt. Außerdem wird ein Grundgerüst für Anwendungen entwickelt, die auf JControl/Wombat basieren. Bild 1 zeigt den prizipiellen Aufbau von JControl/Wombat. Jedes Anwendungsprogramm, das darauf aufsetzt, muss zunächst eine Instanz der Klasse |  |
Bildlich kann man sich eine Anwendung, die auf JControl/Wombat 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.wombat.Frame zeichnet für die Tastaturabfrage, das Event-Handling, das Focus-Management und nicht zuletzt das Zeichnen der Komponenten verantwortlich. Der folgende Quelltext zeigt eine einfache Anwendung, die ein Label-Component und zwei Button-Components darstellt.
| 1 | import jcontrol.ui.wombat.Button; |
| 2 | import jcontrol.ui.wombat.Container; |
| 3 | import jcontrol.ui.wombat.Frame; |
| 4 | import jcontrol.ui.wombat.Label; |
| 5 | |
| 6 | /** |
| 7 | * <p>This example demonstrates how to implement JControl |
| 8 | * applications with a graphical user interface |
| 9 | * using the GUI framework JControl/Wombat.</p> |
| 10 | * |
| 11 | * <p>(C) DOMOLOGIC Home Automation GmbH 2003-2005</p> |
| 12 | */ |
| 13 | public class WombatExampleBase extends Frame { |
| 14 | |
| 15 | Button b1, b2; |
| 16 | Label l; |
| 17 | |
| 18 | /** |
| 19 | * Create and show a label and two buttons. |
| 20 | */ |
| 21 | public WombatExampleBase() { |
| 22 | // create some components |
| 23 | l = new Label("Welcome to Wombat!", 0, 5, 128, 10, Label.STYLE_ALIGN_CENTER); |
| 24 | b1 = new Button("Button 1", 8,20,50,12); |
| 25 | b2 = new Button("Button 2", 62,20,50,12); |
| 26 | |
| 27 | // creates a new componaint container |
| 28 | Container c = new Container(); |
| 29 | |
| 30 | // add the components to the container |
| 31 | c.add(l); |
| 32 | c.add(b1); |
| 33 | c.add(b2); |
| 34 | |
| 35 | // add container to this frame |
| 36 | setContent(c); |
| 37 | |
| 38 | // make the frame visible |
| 39 | setVisible(true); |
| 40 | } |
| 41 | |
| 42 | public static void main(String[] args) { |
| 43 | new WombatExampleBase(); |
| 44 | } |
| 45 | } |
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/Wombat 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.wombat.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(Component c) des im Darstellungsbaum darüberliegenden Containers, 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() | Erzeugt einen neuen Container. |
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. |
jcontrol.ui.wombat.Container
Eine vollständige Zusammenstellung aller Klassenmethoden mit ausführlichen Erläuterungen findet man in der JControl API-Dokumentation.
Component
Die Klasse jcontrol.ui.wombat.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 |
|---|---|
getFrame() | Liefert die (Frame)-Wurzel der Anwendung zurück. |
boolean isVisible() | Prüft, ob die GUI-Komponente sichtbar ist. |
boolean isEnabled() | Gibt an, ob die Komponente aktiviert ist. Nicht aktivierte Komponenten können nicht angeklickt bzw. selektiert werden. |
repaint() | Bewirkt ein einfaches Neuzeichnen der Komponente. |
repaintAll() | Bewirkt ein komplettes Neuzeichnen der Komponente, also z.B. inklusive löschen des Hintergrundes. |
setBackgroundColor(Color bg) | Setzt die Hintergrundfarbe der Komponente. |
setForegroundColor(Color fg) | Setzt die Vordergrundfarbe, in aller Regel ist dies die Schriftfarbe. |
setTransparentColor(Color tc) | Setzt die Farbe der transparenten Bereiche, welche z.B. durch die runden Ecken von Buttons oder Comboboxen entstehen. Wird diese Farbe nicht gesetzt, wird hierfür die Hintergrundfarbe genommen. |
setBounds(int x, int y, int width, int height) | Ändert die Position und Größe dieser Komponente. Diese Methode sollte eher sparsam benutzt werden, da diese Werte bereits im Konstruktor beschrieben werden. Ein Verändern von Position und Größe sichtbarer Komponenten kann zu unerwünschten Effekten durch nicht gelöschte Pixel führen. |
setFont(Resource f) | Stellt die als Parameter übergebene Schriftart für diese Komponente ein. Die Komponente wird daraufhin neu gezeichnet. |
setRedraw(boolean r) | Durch Setzen dieses Parameters auf false kann ein unerwünschtes Neuzeichnen der Komponente unterdrückt werden. Erst nachdem der Parameter wieder auf true zurückgesetzt worden ist, wird die Komponente wieder gezeichnet. |
setVisible(boolean b) | Schaltet die Darstellung dieser Komponente ein oder aus. Setzt man eine bereits gezeichnete Komponente auf unsichtbar, wird deren Grafikbereich durch ein Rechteck mit der Hintergrundfarbe gelöscht. |
jcontrol.ui.wombat.Component
Für eine vollständige Auflistung und genaue Beschreibung aller Methoden der Klasse Component steht die JControl API-Dokumentation zur Verfügung.
Outlines und Contents
Üblicherweise folgen die meisten komplexen grafischen Applikationen für kleinere Systeme, wie z.B. JControl-basierte Geräte, einem gewissen Standardmuster bezüglich der Benutzerführung. Dies ergibt sich unter anderem aus der Tatsache, dass aufgrund der beschränkten Displaygrößen die vom PC bekannten Konzepte wie z.B. Unterstützung mehrerer Fenster usw. oft nicht praktikabel sind. Stattdessen werden in aller Regel unterschiedliche Bereiche einer Anwendung auf verschiedenen Bildschirmseiten untergebracht, die - z.B. über ein zentrales Menü gesteuert - nacheinander angezeigt werden können. Bekannt ist dieses Konzept vor allem aus dem Bereich der Mobiltelefone.
Für Anwendungen dieser Art bietet JControl/Wombat nun ein Verfahren an, das den einfachen Austausch von Seiteninhalten ermöglicht, bei gleichzeitigem Anzeigen z.B. einer zentralen Menüstruktur.
Ein Frame, die Basis aller Anwendungen, besitzt zwei Grundelemente. Zum einen den sog. Content. Dies ist ein beliebiger Container, der die aktuelle Bildschirmseite repräsentiert. Komponenten werden also nicht direkt in den Frame, sondern immer in einen Content eingefügt. Der Content kann jederzeit zur Laufzeit durch einen anderen ersetzt werden. So lässt sich sehr einfach ein Seitenwechsel realisieren.
Das zweite Grundelement des Frames ist die sog. Outline. Dies ist eine beliebige Komponente, die dem Frame optional zugewiesen werden kann. Die Outline ist als statisches Element gedacht und wird immer parallel zum aktuellen Content angezeigt. D.h. bei einem Wechsel des Content bleibt die Outline stets erhalten. Dies eignet sich also für Elemente, die einen festen, immer sichtbaren Bestandteil der Benutzeroberfläche darstellen sollen, also z.B. ein zentrales Menü, ein Logo in einer Bildschirmecke, eine Uhr- oder Datumsanzeige usw. Natürlich kann die Outline ihrerseits auch ein Container sein, so dass es möglich ist, mehrere Komponenten zu einer Outline zu gruppieren.
Im Installationsverzeichnis der JControl/IDE befindet sich im Unterverzeichnis "demos/cobra5329/WombatTutorial/PageDemo" (unter Windows üblicherweise "C:\Programme\JControl\demos\cobra5329\WombatTutorial\PageDemo"). ein Beispielprogramm zur Illustration dieser Eigenschaft. Es zeigt eine Möglichkeit zum Arbeiten mit einer Outline als zentrales Menü zum Wechseln zwischen zwei Bildschirmseiten. Die Outline wird durch eine eigene Klasse repräsentiert, die einen Container erweitert. In ihrer Eigenschaft als Menü besitzt sie zwei Buttons, deren Aktionen einen Seitenwechsel auslösen sollen. Dies geschieht zentral über die Methode showPage in der Hauptklasse PageDemo. An dieser Stelle wird je nach Parameter dem Frame ein neuer Content zugewiesen. Die beiden Contents dieses Beispiels sind ebenfalls über eigene Klassen implementiert. Beim Wechsel des Content wird einfach jeweils eine neue Instanz der jeweiligen Klasse erzeugt. Es wäre hier auch möglich, bereits angelegte Objekte für die einzelnen Contents immer wiederzuverwenden.
Komponenten von JControl/Wombat
Die folgende Tabelle zeigt eine Liste mit allen Komponenten, die in JControl/Wombat 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 |
|---|---|---|---|
 | Border | Zeichnet einen Rahmen | jcontrol.ui.wombat.Border |
 | Button | Einfache Schaltfläche. Eine Beschriftung und gleichzeitiges Anzeigen eines Bildes ist möglich. | jcontrol.ui.wombat.Button |
 | CheckBox | Schaltfläche mit dauerhaften Zuständen on und off | jcontrol.ui.wombat.CheckBox |
 | ComboBox | Aus einer Liste von Einträgen kann einer ausgewählt (aktiviert) werden. | jcontrol.ui.wombat.ComboBox |
| Component | Basisklasse aller Komponenten von JControl/Wombat | jcontrol.ui.wombat.Component | |
| Container | Komponente, die andere Komponenten enthalten (gruppieren) kann. | jcontrol.ui.wombat.Container | |
| Frame | Ausgangsklasse für grafische Benutzeroberflächen, die auf JControl/Wombat basieren. Jede Anwendung, die auf JControl/Wombat basiert, muß genau eine Instanz dieser Klasse enthalten. | jcontrol.ui.wombat.Frame | |
 | Label | Zeigt ein Bild oder nicht editierbaren Text an | jcontrol.ui.wombat.Label |
 | ListBox | Zeigt selektierbare Textzeilen mit optionalem Scrollbalken auf der rechten Seite an | jcontrol.ui.wombat.ListBox |
 | NumberChooser | Komponente, die eine Nummer zeigt und mittels Schaltflächen verändern kann | jcontrol.ui.wombat.NumberChooser |
 | RadioButton | Schaltfläche mit dauerhaften Zuständen on und off | jcontrol.ui.wombat.RadioButton |
 | ToggleSwitch | Umschalter mit dauerhaften Zuständen on und off | jcontrol.ui.wombat.ToggleSwitch |
 | Slider | Erzeugt einen verschiebbaren Regler | jcontrol.ui.wombat.Slider |
 | TextViewer | Eine Textfläche mit aktivierbarem Scrollbalken an der rechten Seite | jcontrol.ui.wombat.TextViewer |
 | MultiImageMenu | Menüpunkte werden durch Bilder dargestellt | jcontrol.ui.wombat.menu.MultiImageMenu |