Serie, Teil 3: Java programmieren mit Xamba

Grafische Oberfläche

Teil 3 der Java easy-Serie beschreibt ausführlich, wie Sie mit Xamba grafische Benutzeroberflächen designen können. Mit Xamba ist das Designen von grafischen Oberflächen erstaunlich simpel und macht richtig Spaß. Selbst Einsteiger sind auf Anhieb in der Lage, Oberflächen umzusetzen, die bisher nur erfahrene Programmierer realisieren konnten. Zudem ist die Zeitersparnis im Vergleich zur klassischen Java-Programmierung gewaltig, denn Xamba bietet Ihnen einen innovativen Wysiwyg-GUI-Builder, mit dem Sie genauso frei und pixelgenau wie mit einem Grafikprogramm layouten können. Oberflächen lassen sich damit ganz leicht per Drag&Drop realisieren.

Die Basis des GUI-Builders ist Java Swing. Swing ist eine mächtige Grafikbibliothek und meist Grundlage für Benutzeroberflächen-Programmierung in Java. Die mit Xamba entwickelten Oberflächen passen sich automatisch an das System Look and Feel des jeweiligen Clients an. Ein bedeutender Vorteil des Xamba GUI-Builders ist zudem, dass Sie sich nicht um das Event-Handling, also das Abfangen von Mausereignissen an den einzelnen GUI-Komponenten kümmern müssen. Um eine Komponente mit einer Aktion zu belegen, müssen Sie diese lediglich selektieren, anschließend in die Code-Ansicht wechseln und das gewünschte Ereignis aus der Event-Auswahlbox des Code-Editors auswählen. Xamba springt automatisch zum Code des gewählten Events, sodass Sie sofort mit der Umsetzung der Aktionslogik beginnen können.

Menü-Assistent

Menüs konstruieren Sie in Xamba mithilfe eines Assistenten. Ziehen Sie dazu die Komponente "Menubar" aus der linken Symbolleiste per Drag&Drop in die Arbeitsfläche. Über das Menü Extras gelangen Sie ebenfalls zum Menü-Assistenten. Xamba unterscheidet zwischen Menü, z.B. Datei oder Bearbeiten, und Menüleiste, in der sich die einzelnen Menüs befinden. Klicken Sie das '+'-Zeichen, um ein neues Menü anzulegen, klicken Sie den neuen Eintrag Menü mit Mehrfachklick an und geben Sie Datei ein. Ziehen Sie nun den rechts stehenden Begriff Menüpunkt per Drag&Drop nach links in das freie Feld, welches das spätere Menü darstellt. Auf dieselbe Weise können Sie nun weitere Menüpunkte, Trennlinien, sowie Checkboxen und Radio- Buttons einfügen. Um ein Untermenü anzuhängen, legen Sie einfach im linken Feld ein zweites Menü an und fügen dieses ebenfalls per Drag&Drop wie einen weiteren Menüpunkt ein. Per Mausklick lässt sich auch die Reihenfolge der Menü-Einträge ganz leicht abändern. Zudem können Sie jedem Menüpunkt ein eigenes Icon zuweisen. Ziehen Sie dazu ein Bild aus dem Xamba-Bilderkatalog auf den entsprechenden Menüpunkt. Den Bilderkatalog finden Sie im Menü Ansicht bei Werkzeugregister. Um den Katalog mit Bilder zu füllen, klicken Sie das '+'-Zeichen und im folgenden Dialog auf Verzeichnis auf der Festplatte verknüpfen. Wählen Sie dann einen Ordner auf Ihrer Festplatte aus, in dem sich bereits einige Bilder befinden. Unterstützt werden die Formate GIF, JPG und PNG. Für Programm-Icons empfiehlt sich eine Größe von 16 x 16 oder 24 x 24 Pixel. Um Ihre Menüs auf den Bildschirm zu bringen, müssen Sie jedoch noch die eigentliche Menüleiste konstruieren. Klicken Sie dazu im Menü- Assistenten auf das '+'-Zeichen bei Menüleisten und ziehen Sie danach Ihre oben links angelegten Menüs nacheinander nach rechts unten auf die Dummy-Menüleiste. Klicken Sie abschließend auf Menüleiste auf Fenster einfügen. Bereits im Entwurf ist die Menüleiste voll funktionsfähig. Um Ihre Menü-Einträge nun mit Funktionalität zu belegen, müssen Sie diese im Entwurf anwählen, wodurch Xamba automatisch in die Code-Ansicht wechselt. Hier müssen Sie nur noch das Klick-Ereignis ACTION_PERFORMED() anwählen, um die gewünschten Funktionen hinterlegen zu können. Alle Menüs und Menüleisten, die Sie im Menü-Assistenten anlegen, werden global verwaltet, sodass Sie diese in jedes Programmfenster einfügen können. Änderungen wirken sich ebenso global aus.

Kontext-Menüs

Um ein Kontextmenü einzublenden, klicken Sie einfach die GUI-Komponente an, bei der das Menü erscheinen soll, wechseln in die Code-Ansicht und wählen ein passendes Ereignis, in der Regel ON_MOUSE_DOWN aus. Klicken Sie nun in der Bibliothek bei Menüs ein Menü, welches Sie anzeigen möchten, mit Mehrfachklick an und ziehen Sie die Methode showPopup() in den Code-Editor. Wenn das Kontextmenü wie üblich bei Rechtsklick angezeigt werden soll, benötigen Sie davor noch eine Abfrage. Geben Sie if gefolgt von einem Leerzeichen ein oder ziehen Sie die Anweisung Wenn-Bedingung aus der linken Symbolleiste per Drag&Drop in den Code-Editor. Klicken Sie in der Bibliothek mit Mehrfachklick auf Aktuelle Funktion und danach auf 'XdevMouseEvent e', sodass sich der Zweig öffnet. Ziehen Sie nun die Methode isRightMouseButton() in die Klammer bei 'if ( )' im Code-Editor. Diese Methode überprüft, ob es sich beim Mausereignis e um einen Rechtsklick handelt. Verschieben Sie abschließend die bereits vorhandene Methode Datei.showPopup(); zwischen die Klammern der If-Anweisung.

Gliederung mit Tabs

Tabs eignen sich hervorragend für die Unterteilung eines bestimmten Themas und werden daher sehr häufig eingesetzt. Die einzelnen Tabs sitzen dabei in einem gemeinsamen Grund-Container, dem TabPane. Bei Anwahl eines Tabs wird automatisch dessen dazugehöriger Content-Bereich angezeigt. Dieser funktioniert wie ein Container, in den Sie wiederum beliebige Komponenten, auch weitere TabPanes, einfügen und frei darin positionieren können. Um einem TabPane neue Tabs hinzuzufügen, diese zu sortieren oder um einzelne Tabs zu löschen, klicken Sie den Tab Pane mit Rechtsklick an, wählen Sie im folgenden Kontextmenü TabPane und danach die entsprechende Aktion aus. Um ein Tab zu beschriften, klicken Sie dieses an und geben Sie in den Eigenschaften bei Beschriftung die gewünschte Bezeichnung ein.

Leicht ist auch der Umgang mit Splitpanes, mit denen Sie bestimmte Bereiche aufteilen können. Wichtig ist, dass Sie die beiden Bereiche des Splitpanes jeweils mit einer weiteren Träger-Komponente füllen, z. B. mit einem Container, Formular, TabPane, oder einem weiteren Splitpane. Über die Eigenschaft Ausrichtung können Sie den Splitpane wahlweise horizontal oder vertikal teilen. Der Splitter selbst lässt sich beliebig mit der Maus verschieben. Dabei wird die Position im Entwurf automatisch als Grundeinstellung übernommen und nach dem Programmstart genauso angezeigt.

Leistungsfähige Komponenten

Ein Highlight in Xamba ist sicherlich die simple Abbildung komplexer Trees, was in Java gewöhnlich mit enormen Programmieraufwand verbunden ist. Mithilfe eines speziellen Assistenten ist die Abbildung von Trees in Xamba jedoch ein Kinderspiel. Jede Hierarchie eines Trees wird mithilfe einer virtuellen Tabelle gefüllt.

Entwickeln Sie zuerst das Datenmodell für Ihren Tree und konstruieren Sie dazu ein ER-Diagramm im Daten-Editor, den Sie über das Menü DATEN aufrufen. Für den ersten Tree verwenden wir das ER-Diagramm aus dem letzten Workshop, welches sich aus den Tabellen Angebote, MODELLE und HERSTELLER zusammensetzt. Zur Erstellung dieses ER-Diagramms wählen Sie als Datenquelle die JDBC-Schnittstelle für HSQL, importieren Sie die genannten Tabellen als virtuelle Tabellen ohne Daten, klicken Sie dann auf ER-Diagramm, ziehen Sie alle VTs per Drag&Drop nach rechts in den freien Bereich und verknüpfen Sie die ID-Felder per Drag&Drop korrekt miteinander.

Tree-Komponente einfügen

Fügen Sie nun die Komponente Tree auf die Arbeitsfläche ein, vergrößern Sie den Tree auf 250 x 400 Pixel und wechseln Sie anschließend in die Code-Ansicht. Wählen Sie das Ereignis ON_SHOW() aus, sodass der Tree bereits beim Programmstart aufgebaut wird. Fügen Sie eine Datenbankabfrage in den Code- Editor ein, selektieren Sie alle Datenfelder der Tabelle ANGEBOTE, wählen Sie bei Ziel (Virtuelle Tabelle) die VT ANGEBOTE aus und klicken auf OK, um den SQL-Assistenten zu schließen. Führen Sie nun dieselbe Abfrage für die Tabellen MODELLE und HERSTELLER durch, selektieren Sie erneut alle Datenfelder und wählen Sie MODELLE bzw. HERSTELLER als Ziel-VT aus. Fügen Sie nun die Anweisung Tree füllen in den Code-Editor ein und klicken Sie diese im Code-Editor an, um den Tree-Assistenten aufzurufen. Klicken Sie den Tree auf der Arbeitsfläche an, wenn Sie Xamba dazu auffordert. Wählen Sie nun im Tree-Assistent bei Virtuelle Quell-Tabelle die VT HERSTELLER aus, da es sich dabei um die oberste Kategorie handelt. Wählen Sie bei Anzeige-Spalte das Feld MARKE und bei Daten-Spalte das Feld ID aus, um zu jedem Tree-Eintrag dessen Datensatz-ID zu hinterlegen. Diese wird später gegebenenfalls zur Speicherung editierter Tree-Einträge benötigt. Klicken Sie nun auf das '+'-Zeichen rechts oben, um einen Gruppenwechsel für die erste Unterkategorie einzufügen. Wählen Sie MODELLE als Quelltabelle aus. Durch die Verknüpfungen im ER-Diagramm werden die zusammengehörenden ID-Felder automatisch erkannt. Wählen Sie das Feld BEZEICHNUNG für die Darstellung, sowie ID für die Daten- Spalte und legen Sie einen weiteren Gruppen an, wählen Sie die Tabelle ANGEBOTE aus, sowie die Felder PREIS und ID. Übernehmen Sie die Einstellungen des Assistenten.

Tabellen und Diagramme

Table dient zur Ausgabe von Datensätzen. Über die Eigenschaften der Table können Sie festlegen, wie sich die Spalten verhalten und ob die Einträge der Table editierbar sein sollen. Ab Java 5 lassen sich die Datensätze einer Table sogar per Mausklick in den Tabellenkopf sortieren, ohne dass Sie dafür irgendwelche Änderungen vornehmen müssen. Es ist deshalb empfehlenswert, immer das neueste JDK zu verwenden.

Für die Darstellung von Diagrammen bietet Xamba eine Diagramm-Komponente, die mit Daten aus einer Virtuellen Tabelle gefüllt wird. Für Web-Anwendungen steht ein sog. OLEContainer zur Verfügung, mit dem sich via URL HTML-Dokumente und Flash einbinden lässt. Mit Xamba können Sie Anwendung auch auf mehrere Programmfenster aufteilen. Wählen Sie im Menü Datei, Neues Fenster, um ein neues Fenster anzulegen. Fügen Sie einen Button ein und wechseln Sie in die Code- Ansicht. Fügen Sie die Anweisung Fensteraufruf in den Code-Editor ein und klicken Sie diese an. Wählen Sie im folgenden Assistent bei Fensteraufruf das Fenster aus, das Sie aufrufen möchten. Danach legen Sie fest, wo es angezeigt wird und wie es sich verhält.

Mehrsprachig

Auch für die Entwicklung mehrsprachiger Oberflächen sind Sie mit Xamba bestens gerüstet. Über die Eigenschaften lässt sich jeder Komponente, welche Text darstellen kann, ein global gültiger Schlüssel, ähnlich einer ID, zuweisen. In der Ressourcen-Verwaltung können Sie jedem Schlüssel den zur Anzeige bestimmten Text in verschiedenen Sprachen zuweisen. Wählen Sie im Menü Daten, Ressourcen, um die Schlüsselverwaltung zu öffnen. Klicken Sie mit Rechtsklick auf Deutsch, wählen Sie 'Danach einfügen' und danach Englisch als neue Sprache aus. Geben Sie bei *Neu als ersten Schlüssel Text1 ein, geben Sie dann Erstes Beispiel bei Deutsch und First example bei Englisch ein. Zum Übernehmen der Eingaben können Sie die Tab-Taste verwenden. Klicken Sie dann auf das '+' Zeichen, um die Eingaben zu übernehmen. Geben Sie als zweiten Schlüssel Button1, bei Deutsch Speichern, sowie bei Englisch Save ein. Klicken Sie erneut auf '+' und auf Übernehmen, um den Assistenten zu schließen. Fügen Sie nun einen Text-Container und daneben einen Button ein. Klicken Sie den Text-Container an und wählen Sie in den Eigenschaften bei Ressourcen-Schlüssel den Punkt Text1 aus. Klicken Sie dann den Button an und wählen Sie Button1 als Ressourcen-Schlüssel aus.

Die Wahl der Sprache richtet sich nach dem System des Clients. Mithilfe einer Funktion lässt sich jedoch die komplette Oberfläche selbst während der Laufzeit auf eine andere Sprache umstellen. Fügen Sie einen weiteren Button ein und beschriften Sie diesen mit Umschalten. Wechseln Sie in die Code-Ansicht, wählen Sie in der Funktionsbibliothek Misc die Methode set RessourceLanguage() aus und ziehen Sie diese in den Code- Editor. Geben Sie im folgenden Assistenten das Länderkürzel en in Anführungszeichen an, um die Oberfläche in Englisch anzuzeigen. Klicken Sie abschließend auf OK und starten Sie die Vorschau. Die komplette Ressourcen- Verwaltung lässt sich auch als XMLDatei exportieren, extern bearbeiten und jederzeit wieder importieren.

Wartung per Template

Auch an Werkzeuge, die für den Entwickler wichtig sind, wie Templates und Styles, haben die Entwickler von Xamba gedacht. Konstrukte die mehrmals in Ihrem Projekt vorkommen, können Sie als wiederverwendbares und global editierbares Template entwerfen. Fügen Sie dazu die Komponente Template auf die Arbeitsfläche ein und fügen Sie einige Komponenten direkt in das Template ein. Legen Sie nun ein neues Programmfenster an und fügen Sie Ihr Template ein. Wählen Sie dazu im Menü Datei, Neues Fenster. Wählen Sie anschließend im Menü Ansicht bei Werkzeugregister Templates aus, um die Template- Verwaltung anzuzeigen. Ziehen Sie nun Ihr Template per Drag&Drop in das leere Fenster.