University of Applied Sciences Fakultät Technik und (TI) Eclipse - SWT 1
GUI-Frameworks Fakultät Technik und (TI) GUI - Philosophien Minimalistic Approach Das Thema GUI (Graphic User Interface) ist gewaltig und füllt Bücher. Mit GUI-Frameworks sind Philosophien verbunden und somit auch religiöse Auseinandersetzungen. Im Weiteren gehen wir minimalistisch vor: Was ist der kleinste gemeinsame Nenner von zwei maßgeblichen GUI-Frameworks in Java: Swing und SWT/JFace Welche der beiden GUI-Frameworks ist für einen Anfänger am einfachsten zu verstehen (Voraussetzung: sehr einfaches GUI!). GUI und OS Kein GUI kommt am Betriebssystem vorbei. Alle heutigen Desktop-OS bieten umfangreich GUI-Unterstützung: Input-Output-Devices wie Bildschirm, Tastatur, Maus, Audio, etc... Window-System für Bildschirme mit vielen graphischen Elementen (Widgets) zur Anzeige von Ein-/Ausgabe. 1. Problem Wieviel Service soll ein GUI-Framework vom Betriebssystem nutzen? Nichts! Geht nicht! Alles! Geht, aber...! 2
GUI-Strategien Fakultät Technik und (TI) OS-Anbindung In der Art der OS-Anbindung unterscheiden sich Swing von SWT: Light-weight vs. Heavy-weight Light Weight (Java/Swing) Die Nutzung GUI-Elemente, die das Betriebssystem zu Verfügung stellt, beschränkt auf das AWT-(Abstract Window Toolkit) Framework. Die Nutzung der graphischen Elemente für den Bildschirm beschränkt sich bei AWT-Swing praktisch auf die (Haupt-)Fenster, die das OS zu liefern hat. Das ist native OS! Alle Widgets zeichnet Swing ausnahmslos selber! Heavy Weight (SWT) Was ist besser? Probleme Ein Framework wie SWT benutzt alle verfügbaren native Widgets eines Betriebssystem. Es schreibt nur Wrapper (JNI: in C und Java), mit denen man dann die Widgets anlegen, nutzen und entfernen kann. Eine philosophische Frage, so lange wie es nicht genau ein einheitliches native (Vista-) GUI gibt (OS X sei Dank). Verschiedene Desktop OS, sogar mit verschiedenen native GUI- Frameworks. In jedem OS fehlen native Widgets Die Menge der native Widgets ist von OS zu OS verschieden. Das LaF (Look and Feel) ist von OS zu OS verschieden. 3
SWT Fakultät Technik und (TI) OS-Bindings LaF Display Shell SWT bietet für folgende Plattformen native Bindings: Windows UNIXs: Linux (Motif bzw. GTK2), OS X, Solaris, AIX, HP-UX QNX Neutrino RTOS (realtime micro-kernel design für embedded devices) Für alle Anbindungen gilt: SWT hat das LaF der native Plattform. Sieht bei einem Linux-GUI aber evt. schlechter aus als LaF von Swing. Die Klasse Display repräsentiert die Schnittstelle zum OS für den gesamten (mehrere) Bildschirm(e). Die Superklasse ist Device (allgemeine Geräte). Neben Display gibt es die Subklasse Printer. Display ist zuständig für Kommunikation (Keyboard/Maouse, managed vor allem die Event (Ereignis-) Queue des OS in einer System-Thread. Die Klasse Shell ist der sogenannte Root-Container für alle Bildschirm- Fenster und Dialoge (vergleichbar mit Swing JFrame). Jede SWT-Applikation benötigt (mindestens) eine Shell- und eine Display-Instanz. 4
SWT-Hierarchie Fakultät Technik und (TI) Klassen- Abhängigkeiten Das folgende Bild zeigt hauptsächliche Klassen im Vererbungsbaum. Die Hierarchie hat nichts mit der Konstruktion einer Maske (Form) aus einzelnen Widgets zu tun. Device abstract Forms Der Zusammenbau einer Form basiert auf Containment, der sogenannten Parent-Child-Relationship und nicht auf Vererbung. Jedes Widget muss eine ein Parent Composite haben, in dem es enthalten ist (Display hat keines, es ist auch kein Widget!). Button button= new Button(composite, SWT.PUSH); Shell hat die Display-Instanz als Parent. 5
Arten von Widgets Fakultät Technik und (TI) Basic vs. Composite Es gibt zwei Arten von Widgets: Basic: Diese Art von Widgets können keine anderen enthalten. Button, Label,... Composite: Diese Art von Widgets können anderen enthalten. Shell, Tree, Table,... Composites sind mit Hilfe sogenannter Styles wie H_SCROLL, V_SCROLL scrollable. 6
Styles Fakultät Technik und (TI) Widget Styles Jedes Widget hat assoziierte Styles, die das Aussehen/Verhalten des Widget beeinflussen. Style int-konstante Wirkung Styles werden durch Bits in einem int repräsentiert. Mehrere Styles können durch oder-operationen für ein Widget gesetzt werden. Styles sind hints (Hinweise), sie können je nach OS oder Widget andere/ keine Wirkung haben werden. 7
Style-Komposition Fakultät Technik und (TI) Style-Sets Modale Fenster Erste SWT Applikation Zwei Shells Style-Bits Durch die -Op kann man convenience constants für eine Shell bauen: SHELL_TRIM == TITLE CLOSE MIN MAX RESIZE DIALOG_TRIM == TITLE CLOSE BORDER Modale Fenster verhindern, dass (nur) in der Applikation oder auf dem gesamten Bildschirm anderen Fenster angewählt werden können: import org.eclipse.swt.widgets.*; import static org.eclipse.swt.swt.*; final Display display = new Display (); final Shell shell = new Shell(display,CLOSE MIN); shell.settext("application"); shell.setsize (300,300); siehe oben! shell.open (); final Shell dshell = new Shell(shell,DIALOG_TRIM APPLICATION_MODAL); dshell.settext("dialog"); dshell.setsize (150,150); dshell.open(); System.out.println(Integer.toBinaryString(shell.getStyle())); System.out.println(Integer.toBinaryString(dShell.getStyle())); Die Event- Dispatch- Schleife while (!shell.isdisposed()) if (!display.readanddispatch ()) display.sleep (); display.dispose(); 8
Erste SWT -Applikation Fakultät Technik und (TI) Windows vs. OS X Aufgrund eines alten Bildes kann der nativen OS X Applikation als Vergleich die native Windows XP -Darstellung gegenüber gestellt werden: Arten von MODAL Dialog APPLICATION_MODAL, PRIMARY_MODAL, SYSTEM_MODAL Für Dialoge sind die Sub-Klassen der abstrakten Klasse Dialog aber besser geeignet. ColorDialog, DirectoryDialog, FileDialog, FontDialog, MessageBox, PrintDialog 9
Widget-Hierarchie Fakultät Technik und (TI) 10
Layout- Manager Fakultät Technik und (TI) Layout 5 Standard- Layout-Manager Mit Hilfe von Layout-Managern werden Widgets in Composites eingefügt. Jedes Composite-Widget hat einen Layout-Manager, der explizit gesetzt werden kann: Widget awidget= new Widget(compositeWidget,STYLE); Ein Layout-Manager berechnet für jedes eingefügte Widget Position und Größe. Ändert eine Composite die Größe, so wird Anordnung/Größe der Widgets automatisch neu berechnet. Alle Layout-Manager behandeln alle Widget in einem Composite gleich, so lange wie keine speziellen Layout-Daten mit setlayoutdata() angegeben werden. 11
Layout- Manager Fakultät Technik und (TI) FillLayout Alle Widgets im Composite werden mit derselben Größe in einer Reihe oder Spalte eingeordnet (Höhe/Breite= Max-Höhe/Breite der beteiligen Widgets, keine Zwischenräume). Einsatz sehr beschränkt: Entweder nur ein Widget im Composite oder alle Widget sind gleich gross und direkt nebeneinander anzuordnen. 12
FillLayout Fakultät Technik und (TI) Beispiel VERTICAL import org.eclipse.swt.widgets.*; import static org.eclipse.swt.swt.*; import org.eclipse.swt.layout.*; public class Main02 { public static void main(string[] args) { final Display display= new Display (); final Shell shell= new Shell(display,SHELL_TRIM); shell.settext("layout"); HORIZONTAL FillLayout filllayout = new FillLayout(); filllayout.type = VERTICAL; // HORIZONTAL shell.setlayout(filllayout); new Button(shell,NULL).setText("Button"); new Button(shell,RADIO BORDER).setText("Radio-Button"); new Text(shell,CENTER SHADOW_OUT).setText("Text"); } } shell.open (); shell.pack(); shell.setsize(300,150); while (!shell.isdisposed()) if (!display.readanddispatch ()) display.sleep (); display.dispose(); 13
RowLayout Fakultät Technik und (TI) RowLayout Alle Widget werden in einer Reihe angelegt. Sofern der Platz nicht reicht, erfolgt (bei wrap= true) Umbruch. Möglichkeiten der Anpassung: 14
RowLayout Fakultät Technik und (TI) Beispiel //... wie im letzten Beispiel RowLayout rowlayout= new RowLayout(); rowlayout.wrap= false; // kein automatischer Umbruch rowlayout.type= VERTICAL; // Ränder um Layout rowlayout.marginleft= 30; rowlayout.margintop= 10; rowlayout.marginright= 50; rowlayout.marginbottom= 5; rowlayout.spacing = 25; // Leerstellen zwischen Widgets shell.setlayout(rowlayout); setlayoutdata() aus Klasse Control Button button1 = new Button(shell, PUSH); button1.settext("button: 100x50"); button1.setlayoutdata(new RowData(150,40)); Button button2 = new Button(shell, PUSH); button2.settext("button: 150x20"); button2.setlayoutdata(new RowData(150,20)); //... wie im letzten Beispiel 15
GridLayout Anpassungen GridLayout Die Klasse GridLayout ist die wohl nützlichste und mächtigste Klasse der vordefinierten Layout-Klassen. Allerdings ist sie auf Grund der vielen verschiedenen Einstellungsmöglichkeiten auch recht kompliziert zu handhaben. Wer etwas Erfahrung mit der Gestaltung von HTML-Seiten mit Hilfe von Tabellen hat, weiß, wovon ich rede. Das GridLayout hat in der Tat einige Ähnlichkeiten mit HTML- Fakultät Technik Tabellen. und Auch (TI) Faculty hier gibt of Engineering es Reihen and Computer und Spalten, Science und es ist möglich, Ein GridLayout ist verschmelzen. ein Art von Matrix-Layout und hat leichte Ähnlichkeiten mit HTML-Tabellen und deren Anlage. numcolumns makecolumnsequalwidth marginheight marginwidth horizontalspacing verticalspacing horizontal oder vertikal angrenzende Tabellenelemente miteinander zu Die folgenden Optionen stehen für das GridLayout zur Verfügung: Anzahl der Spalten. Die Anzahl der Reihen ergibt sich aus der Anzahl der GUI- Elemente und der Anzahl der Spalten. Ist dieses Feld auf den Wert true gesetzt, so wird allen Spalten die gleiche Breite zugeordnet. Die Standardeinstellung ist»false«. Dieses Feld kontrolliert die Größe des Randbereichs oben und unten in Pixeln. Dieses Feld kontrolliert die Größe des Randbereichs links und rechts in Pixeln. Dieses Feld kontrolliert den Minimalabstand zwischen den Spalten in Pixeln. Dieses Feld kontrolliert den Minimalabstand zwischen den Reihen in Pixeln. GridLayout gridlayout = new GridLayout(); gridlayout.numcolumns = 4; gridlayout.marginwidth = 10; gridlayout.makecolumnsequalwidth = true; gridlayout.marginheight = 5; gridlayout.horizontalspacing = 6; gridlayout.verticalspacing = 4; gridlayout.makecolumnsequalwidth = true; composite.setlayout(gridlayout); 16
GridLayout Beispiele Fakultät Technik und (TI) Button- Anordnung GridLayout gridlayout = new GridLayout(); shell.setlayout(gridlayout); gridlayout.numcolumns = 4; for (int i= 1; i<= 7; i++) { Button button = new Button(shell,PUSH); button.settext("a" + i); } GridLayout gridlayout = new GridLayout(); gridlayout.numcolumns= 3; gridlayout.marginwidth= 50; // links/rechts vom Layout gridlayout.makecolumnsequalwidth = true; gridlayout.marginheight= 20; // oben/unten vom Layout gridlayout.horizontalspacing= 10; // h. Abstand der Widgets gridlayout.verticalspacing= 5; // v. Abstand der Widgets shell.setlayout(gridlayout); for (int i= 0; i<10; i++) new Label(shell,CENTER SHADOW_OUT).setText("Label Nr."+i); Column- Werte gridlayout.makecolumnsequalwidth= true; 17
Das folgende Beispiel zeigt, wie die einzelnen Optionen für eine Grid- Layout-Instanz gesetzt werden: GridLayout gridlayout = new GridLayout(); gridlayout.numcolumns = 3; Hochschule für Angewandte gridlayout.marginwidth = 10; gridlayout.makecolumnsequalwidth = true; GridData gridlayout.marginheight = 5; gridlayout.horizontalspacing = 6; Fakultät Technik und (TI) gridlayout.verticalspacing = 4; gridlayout.makecolumnsequalwidth = true; composite.setlayout(gridlayout); GridData Mit der Klasse GridData ist kann das Layout jedes einzelnen Widgets im Grid kontrolliert werden. Die Layout-Optionen, die mit Hilfe von GridData-Instanzen für individuelle GUI-Elemente innerhalb einer GridLayout-Instanz gesetzt wer- GridData Jedes Widget muss eine eigene GridData-Instanz haben. Eine GridDataden können, sind recht üppig. So verfügen GridData-Instanzen über die Instanz folgenden Felder: kann nicht für verschiedenen Widgets benutzt werden. GridData- Felder grabexcesshorizontalspace grabexcessverticalspace heighthint horizontalalignment horizontalindent horizontalspan verticalalignment verticalspan widthhint Ist dieses Feld auf den Wert true gesetzt, so füllt das GUI-Element den eventuell verbleibenden horizontalen Raum aus. Die Standardeinstellung ist»false«. Ist dieses Feld auf den Wert true gesetzt, so füllt das GUI-Element den eventuell verbleibenden vertikalen Raum aus. Die Standardeinstellung ist»false«. Spezifiziert eine minimale Höhe in Pixeln. Ist hier ein Wert angegeben, so ist bei dem jeweiligen GUI-Element eine etwaige vertikale Scroll-Funktion außer Kraft gesetzt! Spezifiziert, wie das GUI-Element horizontal in seiner Zelle ausgerichtet wird. Die folgenden Konstanten können angegeben werden: GridData.BEGINNING (Standard) GridData.CENTER GridData.END GridData.FILL Spezifiziert in Pixeln, wie weit ein GUI-Element von links eingerückt wird. Spezifiziert, wie viele Zellen das GUI-Element in horizontaler Richtung verbraucht (die Zellen werden miteinander verschmolzen). Spezifiziert, wie das GUI-Element vertikal in seiner Zelle ausgerichtet wird. Die folgenden Konstanten können angegeben werden: GridData.BEGINNING GridData.CENTER (Standard) GridData.END GridData.FILL Spezifiziert, wie viele Zellen das GUI-Element in vertikaler Richtung verbraucht (die Zellen werden miteinander verschmolzen). Spezifiziert eine minimale Breite in Pixeln. Ist hier ein Wert angegeben, so ist die horizontale Scroll-Funktion außer Kraft gesetzt! Bestimmte Attribute können bereits im GridData()-Konstruktor gesetzt werden. Dazu stehen folgende Stilkonstanten zur Verfügung: 18
GridData Beispiel Fakultät Technik und (TI) Anlage & Felder setzen Beispiel GridData griddata= new GridData(); griddata.attribute=...;... widget.setlayoutdata(griddata); new Button(shell,PUSH).setText("B1"); new Button(shell,PUSH).setText("Wide Button 2"); Button b3= new Button(shell,PUSH); b3.settext("button 3"); new Button(shell,PUSH).setText("B4"); new Button(shell,PUSH).setText("Button 5"); GridData griddata = new GridData(); griddata.verticalalignment= GridData.FILL; griddata.verticalspan = 2; b3.setlayoutdata(griddata); 19
Event-Modell Fakultät Technik und (TI) Ereignisse Listener Alle GUI-Frameworks ob native oder nicht arbeiten mit Ereignisverarbeitung. Sobald in der Umgebung (Tastatur, Maus, Touchscreen, Audio, Netzwerk,...) etwas passiert, wird ein entsprechendes Ereignis (Event) erzeugt. Um über bestimmte Ereignisse informiert zu werden, muss man ein (spezieller) als Listener (Zuhörer) sein, beispielsweise: MouseListener, MouseMoveListener, KeyListener, SelectionListener Anmelden Interfaces Adapter- Klassen Namens- Konvention Alle Listener müssen sich bei den Stellen anmelden, die die Ergebnisse erzeugen oder als erste erhalten: addforsomelistener() Die Listener sind Interfaces mit ein oder mehreren Methoden. Bestehen Listener aus mehreren Methoden, ist die Implementation recht mühsam. Deshalb werden Adapter-Klassen angeboten, die alle Methoden leer überschrieben haben. Leitet man seinen Listener von einem Adapter ab, braucht man dann nur die Methode(n) zu überschreibt, an der man interessiert ist. Die Bezeichnung der Events, Listener oder Adapter folgt einem einfachen Schema: EventNameEvent ListenerNameListener EventNameAdapter 20
Event-Liste Fakultät Technik und (TI) Event Tabelle Fett: Events besitzen Adapter Nachfolgend die Events Widgets, die sie auslösen bzw. weiterleiten Ursache der Auslösung 21
Event-Modell Fakultät Technik und (TI) Event Tabelle 22
StackLayout Beispiel Fakultät Technik und (TI) Beispiel Ein Interface Dies ist eine anonyme Klasse (ohne Namen) StackLayout bildet einen Stack nach. Mehrere Widgets liegen übereinander, aber immer nur das oberste ist zu sehen: shell.setlayout(new FillLayout()); final Composite comp= new Composite(shell,NULL); final StackLayout stacklayout= new StackLayout(); stacklayout.marginwidth= 50; stacklayout.marginheight= 20; comp.setlayout(stacklayout); final Button[] button= new Button[3]; for (int i= 0; i<button.length; i++) { button[i]= new Button(comp,SWT.PUSH); button[i].settext("button "+i); final int j= i; SelectionListener slistener = new SelectionAdapter() { public void widgetselected(selectionevent e) { int k= j==2?0:j+1; stacklayout.topcontrol= button[k]; comp.layout(); button[k].setfocus(); } }; button[i].addselectionlistener(slistener); } stacklayout.topcontrol= button[0]; // comp.layout(); erwartet als Argument eine Instanz eines Listener Anonyme Klassen müssen ein Interface implementieren oder von einer anderen Klasse abgeleitet werden. Dieses Interface/Klasse wird mit new IFace() {...} oder new BaseClass() {... } angegeben. 23
StackLayout Beispiel 2 Fakultät Technik und (TI) Beispiel Anstatt zuerst eine Instanz zum Typ SelectionListener zu erschaffen, kann man die Implementation direkt in die Methode von addselectionlistener einfügen. shell.setlayout(new FillLayout()); final Composite comp= new Composite(shell,NULL); final StackLayout stacklayout= new StackLayout(); stacklayout.marginwidth= 50; stacklayout.marginheight= 20; comp.setlayout(stacklayout); final Button[] button= new Button[3]; for (int i= 0; i<button.length; i++) { button[i]= new Button(comp,SWT.PUSH); button[i].settext("button "+i); final int j= i; button[i].addselectionlistener( new SelectionAdapter() { public void widgetselected(selectionevent e) { int k= j==2?0:j+1; stacklayout.topcontrol= button[k]; comp.layout(); button[k].setfocus(); } } ); } stacklayout.topcontrol= button[0]; 24
Tree-Widget Fakultät Technik und (TI) Beispiel final Tree tree= new Tree(shell,SWT.SINGLE); for (int i = 0; i<10; i++) { final TreeItem item1= new TreeItem(tree,SWT.NULL); item1.settext("item "+i); for (int j= 0; j<5; j++) { final TreeItem item2 = new TreeItem(item1,SWT.NULL); item2.settext("item "+i+"."+j); for (int k= 0; k<3; k++) { final TreeItem item3 = new TreeItem(item2,SWT.NULL); item3.settext("item "+i+"."+j+"."+k); } } } tree.addselectionlistener(new SelectionAdapter() { public void widgetselected(selectionevent e) { System.out.println("Selection:"+ tree.getselection()[0]); } }); tree.addtreelistener(new TreeListener() { public void treecollapsed(treeevent e) { System.out.println("tree collapsed"); } public void treeexpanded(treeevent e) { System.out.println("tree expended"); } }); Da ist noch ein kleiner Fehler zu finden! 25
SWT Beenden Fakultät Technik und (TI) Beenden des GUI Im Gegensatz zu Swing müssen alle graphischen SWT-Elemente nach Ende der Benutzung manuell entsorgt (garbage collected) werden. Hierzu hat jede Klasse Display, Widget,... eine dispose()-methode. Regel Ruft man von einem Composite-Widget dispose() auf, werden automatisch von allen Child-Widgets dispose() aufgerufen. Shell.dispose() entsorgt also alle enthaltenen Elemente in der Shell. Catch 22 Es gibt graphische Resourcen, die von vielen Elementen gemeinsam genutzt werden wie z.b. Instanzen von Color, Font. Diese werden nicht automatisch mit entsorgt und müssen einzeln per Hand mit dispose() entsorgt werden. Werden Resourcen nicht mittels dispose() entsorgt, stellt ein Betriebssystem wie Windows nach einiger Zeit den Betrieb ein. 26
SWT Installation Fakultät Technik und (TI) Hinweise zur Installation SWT benötigt swt.jar im Classpath Unter Windows werden außerdem DLL-Dateien benötigt: Erste Möglichkeit: Speichern im JRE\bin Verzeichnis Zweite Möglichkeit: Aufruf mit java -Djava.library.path= /dllpath MyApp 27