GUI-Programmierung mit JControl/Vole

VII. Menüs

Mit dem Package jcontrol.ui.vole.menu bietet JControl/Vole eine leicht anwendbare Sammlung von grafischen und textbasierten Benutzer-Menüs. Dieses Kapitel zeigt kurze Beispielprogramme und erläutert den Umgang mit den verschiedenen Menü-Typen. Begleitend zu diesem Tutorial lohnt sich ein Blick auf das Demoprogramm VoleMenuDemo, welches in der Rubrik Examples & Demos http://www.jcontrol.org/examples/index_de.html heruntergeladen werden kann.

Bild 1: Verschiedene Menüs, die mit JControl/Vole realisiert wurden



Allgemeines


Das MenuInterface

Obwohl das Package jcontrol.ui.vole.menu grafisch sehr unterschiedliche Menüs anbietet, unterscheiden diese sich kaum in ihrer Verwendung durch ein Anwendungsprogramm. Dies wird durch die gemeinsame Schnittstelle MenuInterface ermöglicht, die von allen Menü-Typen implementiert wird und einen Satz an "Standardmethoden" zur Menüprogrammierung bereitstellt. Tabelle 1 fasst diese zusammen und beschreibt ihre Funktionalität.

MethodeBeschreibung
addMenuItem(String item)Fügt dem Menü einen neuen Eintrag hinzu. Der String item beschreibt dabei Menü-abhängig entweder einen Textmenü-Eintrag oder verweist auf eine Bildressource.
addMenuItem(String item, int pos)Fügt einen neuen Menü-Eintrag an der angegebenen Position hinzu.
removeMenuItem(String item)Entfernt einen Eintrag aus dem Menü.
enableMenuItem(String item, boolean onoff)Bestimmt für einen Menü-Eintrag, ob dieser aktiviert oder deaktiviert (ausgegraut) ist.
boolean isMenuItemEnabled(String item)Gibt zurück, ob der angegebene Menüeintrag momentan aktiviert oder deaktiviert ist.
int getSelectedIndex()Gibt den Index des momentan durch den Benutzer ausgewählten Menü-Eintrags zurück.
boolean select(int index)Selektiert den durch index übergebenen Menü-Eintrag. Der Rückgabewert weist auf Erfolg oder Misserfolg der Operation hin.
boolean select(String item)Wie select(int index) mit dem Unterschied, dass der zu selektierende Eintrag über einen String identifiziert wird.
Tabelle 1: Methoden der Schnittstelle jcontrol.ui.vole.menu.MenuInterface

Um die obigen Methoden verwenden zu können, müssen Sie zunächst ein Menü instantiieren. Dazu stehen -- je nach Anwendungszweck -- verschiedene Menü-Typen zur Verfügung. Diese werden in den folgenden Abschnitten mit Beispielprogrammen vorgestellt.


Umgang mit Menüs

Die Klasse Frame von JControl/Vole ist so ausgelegt, dass immer nur ein Menü gleichzeitig aktiv sein kann. Um ein Menü zu aktivieren und damit für den Benutzer sichtbar zu machen, muss die Methode Frame.setMenu(Menu m) aufgerufen werden. Das Menü wird daraufhin auf den Bildschirm gezeichnet (evtl. darunterliegende Komponenten werden überdeckt) und erhält den Eingabefokus. Der Benutzer kann nun einen Menüeintrag auswählen (hoch, runter, rechts, links) und die Auswahl durch einen Druck auf einen Taster bestätigen. Das UI-Framework entfernt das Menü dann automatisch wieder und löst ein ActionEvent aus.


ActionEvents empfangen

Um die von den Menüs ausgelösten ActionEvents empfangen zu können, gibt es zwei Möglichkeiten. Entweder können Sie die Methode onActionEvent aus der Klasse Frame überschreiben, oder Sie fügen dem Menü mit Hilfe der Methode setListener(ActionListener listener) einen eigenen ActionListener hinzu. In den nachfolgenden Quelltextbeispielen wird die erste Variante gezeigt.

In der überschriebenen Methode onActionListener der Klasse Frame sollte zunächst überprüft werden, ob ein empfangenes ActionEvent auch von einem Menü abgeschickt wurde (und nicht etwa von einem Button oder einer anderen GUI-Komponente). Dazu eignet sich der Java-Operator instanceof:

                if (event.getSource() instanceof Menu) {
             ...
              /* Aktionen ausfuehren */
             ...
         }

Anschließend kann mit der Methode Menu.getSelectedIndex() festgestellt werden, welcher Menüeintrag ausgewählt wurde.


MenuBar

Die MenuBar ist eine horizontale Menüzeile mit textbasierten Einträgen und Scroll-Funktionalität. Dieses Menü eignet sich durch seinen geringen Platzbedarf sehr gut für Anwendungen, bei denen das Menü ständig sichtbar sein soll. Ein spezieller Konstruktor-Parameter position ermöglicht die automatische Anordnung am oberen oder unteren Bildschirmrand (ALIGN_TOP, bzw. ALIGN_BOTTOM). Über die Methode setFont(Resource font) können außerdem individuelle Schriftarten eingestellt werden.

Das folgende Beispielprogramm VoleMenuBarExample baut ein Menü vom Typ MenuBar am unteren Bildschirmrand auf und stellt es dar. Um das Programm selbst ausprobieren zu können, laden Sie das ZIP-Archiv VoleMenuBarExample.zip http://www.jcontrol.org/examples/VoleMenuBarExample.zip herunter und öffnen anschließend das Projekt VoleMenuBarExample.jcp in Ihrer JControl/IDE.

Bild 2: Das VoleMenuBarExample

1    import jcontrol.ui.vole.Frame;
2    import jcontrol.ui.vole.menu.MenuBar;
3    
4    /**
5     * <p>This example demonstrates how to use the
6     * component MenuBar within the GUI framework
7     * JControl/Vole.</p>
8     *
9     * <p>(C) DOMOLOGIC Home Automation GmbH 2003-2005</p>
10     */
11    public class VoleMenuBarExample extends Frame {
12     
13      /**
14       * Create and show a MenuBar.
15       */
16      public VoleMenuBarExample() {
17    
18        // create the MenuBar
19        MenuBar menu = new MenuBar(0, 0, 128, 64, MenuBar.ALIGN_BOTTOM);
20       
21        // add some menu items
22        menu.addMenuItem("Red");
23        menu.addMenuItem("Green");
24        menu.addMenuItem("White");
25        menu.addMenuItem("Blue");
26        menu.addMenuItem("Cyan");
27        menu.addMenuItem("Black");
28        menu.addMenuItem("Gray");
29        menu.addMenuItem("Orange");
30       
31        // add the menu bar to the Frame
32        this.setMenu(menu);
33       
34        // disable a menu item
35        menu.enableMenuItem("White", false);
36    
37        // show the frame   
38        setVisible(true);   
39      }
40    
41      /**
42       * Instantiate the VoleMenuBarExample
43       */
44      public static void main(String[] args) {
45        new VoleMenuBarExample();   
46      }
47    }
Listing 1: VoleMenuBarExample.java


TextMenu

Das TextMenu ist eine einfache Liste von Texteinträgen mit Scroll-Funktion. Die Menüeinträge werden linksbündig untereinander in dem Zeichenbereich des Menüs dargestellt. Ausmaße und Position des Textmenüs können im Konstruktor der Klasse TextMenu vorgegeben werden. Enthält das Menü mehr Einträge als gleichzeitig darstellbar sind, symbolisieren Pfeile am oberen und unteren Rand, dass die Liste gescrollt werden kann. Der momentan selektierte Eintrag wird invertiert dargestellt.

Das folgende Quelltextbeispiel unterscheidet sich kaum von dem in Abschnitt MenuBar, lediglich die MenuBar wurden gegen ein TextMenu ausgetauscht sowie einige Parameter im Konstruktor geändert. Bild 3 zeigt einen Screenshot des VoleTextMenuExample.

Bild 3: Das VoleTextMenuExample

1    import jcontrol.ui.vole.Frame;
2    import jcontrol.ui.vole.menu.TextMenu;
3    
4    /**
5     * <p>This example demonstrates how to use the
6     * component TextMenu within the GUI framework
7     * JControl/Vole.</p>
8     *
9     * <p>(C) DOMOLOGIC Home Automation GmbH 2003-2005</p>
10     */
11    public class VoleTextMenuExample extends Frame {
12     
13      /**
14       * Create and show a TextMenu.
15       */
16      public VoleTextMenuExample() {
17    
18        // create the MenuBar
19        TextMenu menu = new TextMenu(0, 0, 50, 64);
20       
21        // add some menu items
22        menu.addMenuItem("Red");
23        menu.addMenuItem("Green");
24        menu.addMenuItem("White");
25        menu.addMenuItem("Blue");
26        menu.addMenuItem("Cyan");
27        menu.addMenuItem("Black");
28        menu.addMenuItem("Gray");
29        menu.addMenuItem("Orange");
30        menu.addMenuItem("Lime");
31        menu.addMenuItem("Yellow");
32        menu.addMenuItem("Brown");
33       
34        // add the menu bar to the Frame
35        this.setMenu(menu);
36       
37        // disable a menu item
38        menu.enableMenuItem("White", false);
39    
40        // show the frame   
41        setVisible(true);   
42      }
43    
44      /**
45       * Instantiate the VoleMenuBarExample
46       */
47      public static void main(String[] args) {
48        new VoleTextMenuExample();   
49      }
50    }
Listing 2: VoleTextMenuExample.java


BigImageMenu

Wenn ein Anwendungsprogramm mit einem auffälligen und intuitiven Bildmenü ausgestattet werden soll, bietet sich die Klasse BigImageMenu an. Dieses Menü ist darauf optimiert, pro Menüpunkt eine bildschirmfüllende Grafik anzuzeigen. Pfeile am oberen und unteren Bildschirmrand weisen darauf hin, ob sich in dieser Richtung weitere Menüpunkte befinden. Der Pfeil am rechten Bildschirmrand deutet auf das Untermenü hin, welches sich hinter dem aktuellen Menüpunkt verbirgt. Aufgrund des hohen (grafischen) Platzbedarfs eines Menüpunkts eignet sich das BigImageMenu besonders als attraktives Hauptmenü einer Anwendung. Die Untermenüs können dann beispielsweise mit dem MultiImageMenu oder einem TextMenu realisiert werden.

Für das nachfolgend abgedruckte Beispielprogramm VoleBigImageMenuExample haben wir einige Bilder mit dem JControl/IDE-Werkzeug PictureEdit gezeichnet. Diese sind zusammen mit dem Beispielprogramm und einem JControl/IDE-Projekt in dem herunterladbaren ZIP-Archiv VoleBigImageMenuExample.zip http://www.jcontrol.org/examples/VoleBigImageMenuExample.zip enthalten. Bild 4 zeigt einen Screenshot des Beispielprogramms, welches Sie am besten gleich selbst mit dem JControl/IDE-Simulator oder Ihrem JControl-Modul ausprobieren.

Bild 4: Das VoleBigImageMenuExample

1    import jcontrol.ui.vole.Frame;
2    import jcontrol.ui.vole.menu.BigImageMenu;
3    
4    /**
5     * <p>This example demonstrates how to use the
6     * component BigImageMenu within the GUI framework
7     * JControl/Vole.</p>
8     *
9     * <p>(C) DOMOLOGIC Home Automation GmbH 2003-2005</p>
10     */
11    public class VoleBigImageMenuExample extends Frame {
12     
13      /**
14       * Create and show a BigImageMenu
15       */
16      public VoleBigImageMenuExample() {
17    
18        // create a big BigImageMenu
19        BigImageMenu menu = new BigImageMenu(0, 0, 128, 64);
20       
21        // add some menu items
22        menu.addMenuItem("menu1.jcif");
23        menu.addMenuItem("menu2.jcif");
24        menu.addMenuItem("menu3.jcif");
25       
26        // show the menu
27        setMenu(menu);
28        show();
29      }
30    
31      /**
32       * Instantiate the VoleBigImageMenuExample
33       */
34      public static void main(String[] args) {
35        new VoleBigImageMenuExample();
36      }
37    }
Listing 3: VoleBigImageMenuExample.java


MultiImageMenu

Das MultiImageMenu arbeitet wie das BigImageMenu mit Grafiken als Menüpunkte. Allerdings werden die Piktogramme beim MultiImageMenu horizontal nebeneinander angeordnet, so dass mehrere Menüpunkte gleichzeitig angezeigt werden können. Auch das MultiImageMenu unterstützt Scrolling, wenn mehr Menüpunkte vorhanden sind, als gleichzeitig dargestellt werden können. Der momentan markierte Menüpunkt wird invertiert dargestellt. Die gewünschte Anzahl der parallel dargestellten Menüpunkte wird im Konstruktor übergeben. Der verfügbare Platz für die darzustellenden Piktogramme wird dann berechnet und diese werden abgeschnitten, wenn ihre Größe die berechnete übersteigt. Für ein gefälliges Erscheinungsbild ist es empfehlenswert, alle Grafiken gleich groß zu gestalten.

Das folgende Quelltextbeispiel zeigt den Umgang mit dem MultiImageMenu. Wie auch bei allen anderen Menüs ist nur sehr wenig Quelltext notwendig, um eine grafisch ansprechende Lösung zu erzielen. Bild 5 zeigt das MultiImageMenu in Aktion. Die Datei ist neben allen anderen Beispielen dieses Tutorials in dem herunterladbaren ZIP-Archiv VoleMultiImageMenuExample.zip http://www.jcontrol.org/examples/VoleMultiImageMenuExample.zip enthalten. Starten Sie Ihre JControl/IDE und probieren Sie es aus!

Bild 5: Das VoleMultiImageMenuExample

1    import jcontrol.ui.vole.Frame;
2    import jcontrol.ui.vole.menu.MultiImageMenu;
3    
4    /**
5     * <p>This example demonstrates how to use the
6     * component MultiImageMenu within the GUI framework
7     * JControl/Vole.</p>
8     *
9     * <p>(C) DOMOLOGIC Home Automation GmbH 2003-2005</p>
10     */
11    public class VoleMultiImageMenuExample extends Frame {
12     
13      /**
14       * Create and show a BigImageMenu
15       */
16      public VoleMultiImageMenuExample() {
17    
18        // create a big BigImageMenu
19        MultiImageMenu menu = new MultiImageMenu(0, 10, 128, 38, 6);
20       
21        // add some menu items
22        menu.addMenuItem("menuimage1.jcif");
23        menu.addMenuItem("menuimage2.jcif");
24        menu.addMenuItem("menuimage3.jcif");
25        menu.addMenuItem("menuimage4.jcif");
26        menu.addMenuItem("menuimage5.jcif");
27        menu.addMenuItem("menuimage6.jcif");
28        menu.addMenuItem("menuimage7.jcif");
29        menu.addMenuItem("menuimage8.jcif");
30        menu.addMenuItem("menuimage9.jcif");
31       
32        // show the menu
33        setMenu(menu);
34        show();
35      }
36    
37      /**
38       * Instantiate the VoleBigImageMenuExample
39       */
40      public static void main(String[] args) {
41        new VoleMultiImageMenuExample();
42      }
43    }
Listing 4: VoleMultiImageMenuExample.java


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