Graphische Nutzerschnittstellen

Transkript

1 Graphische Nutzerschnittstellen Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm Hochschule Harz FB Automatisierung und Informatik Raum Tel / Inhalt 1. Einführung, Literatur, Begriffe 2. Architektur eines Fenstersystems 3. Java-Dialog (Dialog/SDI/MDI) 4. Grafik in Java 5. Benutzeroberfläche (Layout, Dialog, RDI, GUI-Elemente) 6. Design Pattern (Framework, Mehrschicht Anwendung) 7. Testroutinen (JUnit) 8. JDBC (Datenbankanbindung) 9. Threads 2 1

2 Frame SDI und MDI-Fenster Einfaches Fenster (à Taschenrechner), AWT JFrame Einfaches Fenster (à Taschenrechner), Swing SDI- und MDI-Frames Hauptfenster mit dem DesktopPane Clientfenster als JInternalFrame Dialog Diese Klasse erlaubt die Erstellung modaler Fenster zur Eingabe von Optionen, spezieller Dateneingabe etc. 3 Dialog - Benutzeroberflächen in Java Ein Dialogfenster ist ein Fenster, in dem der Benutzer Daten eingeben kann. Das Fenster mindestens einen Schalter (Ok). Mit Betätigen wird eine Aktion ausgelöst. Beispiel: Meldung 4 2

3 Beispiele für Dialogfenster Eigenschaften: Titel Aktives Element Schalter Abbruch Schalter Ok Mit Betätigen des Schalters Ok wird eine weitere Aktion ausgeführt. 5 Beispiele für Dialogfenster 6 3

4 Single Dokument Interface Ein SDI-Fenster zeigt Daten in einem Fenster und stellt sie dem Benutzer zur Verfügung. Eigenschaften: Menüleiste Schalterleisten Statuszeile Kein Schalter Ok oder Abbruch 7 Single Dokument Interface Beispiele: Calculator Notepad Explorer Spiele Internetbrowser Einfaches Fenster Darstellung eines Textes Zweigeteiltes Fenster Komplexe Darstellung Zweigeteiltes Fenster 8 4

5 Beispiele für SDI-Fenster Eigenschaften: Titel Aktives Element Schalter Abbruch Mehrere Schalter Menüs Abbruch mit dem Schalter x 9 Beispiele für SDI-Fenster 10 5

6 Beispiele für SDI-Fenster 11 Beispiele für SDI-Fenster 12 6

7 Multi Dokument Interface (MDI) Ein MDI-Fenster zeigt Daten in mehreren eigenständigen Fenster an. Eigenschaften: Menüleiste Schalterleisten Statuszeile Kein Schalter Ok oder Abbruch Wechselnde Menüleisten (Groupindex) Mehrere Fenster für eine Datei Komplex 13 Multi Dokument Interface (MDI) Weitere Eigenschaften: Eigenständige Clientfenster (Klassen) Mainframe Menü für die Client-Fenster Anzeige der letzten Dateien Fensterdarstellung cascade, tile, arrange icons, next, previous Programminfo Hilfe Erzeugen Dialogfenster zur speziellen Eingabe (JDialog) 14 7

8 Menü für die Client-Fenster: Beispiel an der Assembler-IDE 15 Menü für die Client-Fenster: Beispiel an der Assembler-IDE 16 8

9 Multi Dokument Interface Beispiele: Winword Mehrere identische Fenster Powerpoint Mehrere identische Fenster Works Mehrere unterschiedliche Fenster JBuilder Mehrere unterschiedliche Fenster Rational Rose Mehrere unterschiedliche Fenster Visual C++ Mehrere unterschiedliche Fenster Eclipse Mehrere unterschiedliche Fenster 17 Beispiele für MDI-Fenster (Powerpoint) 18 9

10 Beispiele für MDI-Fenster (JvEditor) 19 Beispiele für MDI-Fenster (JBuilder, Eclipse) 20 10

11 Allgemeine MDI- Regeln Die Menüs des Mainfensters enthalten nur die Inhalte für das MainFenster. Menü Datei Menü Bearbeiten Menü Ansicht Menü Fenster Menü Hilfe Die Schalterleisten haben Funktionen sowohl für das Mainfenster als auch für die unterschiedlichen Clientfenster. Datei öffnen, speichern, Drucken Zwischenablage 21 Menü Datei: Neu Create Client Öffnen Create Client Schließen Message to Client Speichern Message to Client Speichern unter Message to Client Drucken Message to Client Drucker einstellen Eigenschaften Message to Client Beenden Message to all Clients 22 11

12 Menü Bearbeiten: Rückgängig Message to Client Wiederholen Message to Client Ausschneiden Message to Client Kopieren Message to Client Einfügen Message to Client Alles markieren Message to Client Löschen Message to Client Suchen Message to Client Ersetzen Message to Client 23 Menü Ansicht: Symbolleisten Lineal Statuszeile Zoom Message to Client Zoom zurück Message to Client Zoom vorher Message to Client Komplette Ansicht Message to Client 24 12

13 Menü Fenster: Neues Fenster Message to Client Vorheriges Fenster Message to Client Nächstes Fenster Message to Client Kaskade Teilen vertikal Teilen horizontal Symbole arrangieren 25 Menü Hilfe: Hilfe Inhalt und Index Direkthilfe Info 26 13

14 Aufbau eines Dialogfenster in Java import javax.swing.*; public class Frame1 extends JFrame { //Frame konstruieren public Frame1() { this.setsize(400, 300); this.settitle("frame1"); public static void main(string[] args) { Frame1 frame = new Frame1(); frame.setvisible(true); // wichtig Originalframe. Ohne weitere GUI-Elemente 27 Dialogfenster mittels JFrame Konstruktoren: JFrame() JFrame(String stitle); Methoden: setjmenubar setmaximizedbound setresizable settitle setundecorated(true); // ohne Menüleiste setsize(width, height) setlocation(x,y) Methoden: JLayeredPane getlayeredpane() JRootPane getrootpane() JGlassPane getglasspane() setextendedstate(int state): NORMAL ICONIFIED MAXIMIZED_HORIZ MAXIMIZED_VERT MAXIMIZED_BOTH JRootPane root = f.getrootpane(); Container content = this.getcontentpane(); 28 14

15 Top-Level-Container 29 Top-Level-Container JFrame, JDialog und JWindow: Enthalten jeweils ein RootPane JRootPane enthält: LayeredPane MenuBar ContentPane (speichert JComponent) GlassPane 30 15

16 Java: Beispiel Menü1 public class menu1 extends JFrame { JMenuBar menubar1; JMenu MainFile; JMenuItem MnNew; // Menü-Container // Menü Datei // Menüeintrag menu1 31 Java: Beispiel Menü1 public class menu1 extends JFrame { public menu1() { menubar1 = new JMenuBar(); MainFile = new JMenu("Datei"); MnNew = new JMenuItem("New File"); MnNew.setText("Neue Datei"); MnNew.addActionListener(new ActionListener() { public void actionperformed(actionevent e) { MnNew_actionPerformed(e); ); MainFile.add(MnNew); menubar1.add(mainfile); this.setjmenubar(menubar1); menu1 menüs\menu

17 Java: menu2 menu2 33 Java: Eintragen von Menüs // Menü Variablen private JMenuBar menubar1; private JMenu MainFile; private JMenuItem MnNew; private JMenuItem MnOpen; private JMenuItem MnClose; private void setmenus() { menubar1 = new JMenuBar(); MainFile = new JMenu("Datei"); MnNew = new JMenuItem("Neu"); MnNew.addActionListener(new ActionListener() { public void actionperformed(actionevent e) { MnNew_click(); ); MnNew.setAccelerator( KeyStroke.getKeyStroke(KeyEvent.VK_N, ActionEvent.CTRL_MASK)); MainFile.add(MnNew); menubar1.add(mainfile); MainFile.addSeparator(); this.setjmenubar(menubar1); // setmenus menu2 menu

18 Ereignisse: Ereignisse durch ein GUI-Element werden durch folgende Aktionen ausgelöst. Ein GUI-Element angeklickt Der Inhalt einer Textzeile wird verändert Die Bezeichnung eines JLabels wird verändert Mausklick auf einen Schalter Auswahl eines Menüs Auswahl eines Popupmenüs Maus über einem Element Maustaste wurde gedrückt Maustaste wurde losgelassen Taste wurde gedrückt Taste wurde losgelassen etc 35 Ereignisse: Klassen der verschiedenen Ereignisse: Anzeige aus dem JBuilder 3,

19 Ereignisse: Beispiel Schalter: Schalter hat für jede Aktion eine Liste mit möglichen Empfängern. Um ein bestimmtes Ereignis zu erhalten, muss man sich registrieren lassen (ActionListener). Der Schalter ruft nun durch die Definition des Listener die interne Funktion auf. Diese internen Funktionen werden nacheinander aufgerufen. Verkettete Liste Beispiel Schalter: Dialog: class Action1 extends JFrame { private void setgui() { bn = new JButton( "Ok" ); myactionlistener myaction = new myactionlistener(); BnOk.addActionListener(myAction); // Registrierung class myactionlistener implements java.awt.event.actionlistener { public void actionperformed(actionevent e) { System.out.println("Hier wurde ein Schalter gedrückt"); Action1 bis

20 2. Beispiel Schalter: class Action2 extends JFrame { int i=42; private vod setgui() { bn = new JButton( "Ok" ); myactionlistener myaction = new myactionlistener(); BnOk.addActionListener(myAction); // Registrierung class myactionlistener implements java.awt.event.actionlistener { public void actionperformed(actionevent e) { System.out.println("Hier wurde ein Schalter gedrückt: "+i); BnOk_Click(); // Aufruf einer Methode in der Hauptklasse // class private void BnOk_Click() { System.out.println("Hier wurde ein Schalter gedrückt"); // Action2 Action1 bis Beispiel Schalter: private void setgui() { bn = new JButton( "Ok" ); ActionListener al; al = new java.awt.event.actionlistener() { public void actionperformed(actionevent e) { BnOk_Click(e); ; bn.addactionlistener(al); // create void BnOk_Click(ActionEvent e) { settitle("der Schalter wurde gedrückt"); Der blauer Text definiert die interne Funktion des Actionlisteners. Liste04 / Listener

21 4. Beispiel Schalter: Anonyme Klasse private void setgui() { BnOk = new JButton( "Ok" ); BnOk.addActionListener( new java.awt.event.actionlistener() { public void actionperformed(actionevent e) { BnOk_Click(e); ); // setgui void BnOk_Click(ActionEvent e) { settitle("der Schalter wurde gedrückt"); Beispiel Schalter: ActionListener public class Action5 extends JFrame implements ActionListener { JButton BnOk = new JButton("Ok"); JButton BnEsc = new JButton("Abbruch"); private void setgui() { BnOk.addActionListener(this); BnEsc.addActionListener(this); // setgui public void actionperformed(actionevent e) { System.out.println("Hier actionperformed"); if (e.getsource()==bnok) System.out.println("Hier BnOk"); if (e.getsource()==bnesc) System.out.println("Hier BnEsc"); // Action

22 6. Beispiel Schalter: ActionListener, ohne instanceof public class Action5 extends JFrame implements ActionListener { JButton BnOk = new JButton("Ok"); JButton BnEsc = new JButton("Abbruch"); private void setgui() { BnOk.addActionListener(this); BnOk.setActionCommand("Ok"); BnEsc.addActionListener(this); // setgui public void actionperformed(actionevent e) { String cmd = e.getactioncommand(); if (cmd.equals("ok") ) { BnOk_Click(); // Action5 43 Opendialog: FileChooser 44 22

23

24 Methoden der Klasse FileChooser : File getcurrentdirectory() Returns the current directory. File getselectedfile() Returns the selected file. File[] getselectedfiles() Returns a list of selected files if the filechooser is set to allow 47 FileChooser Beispiel: void MnOpen_actionPerformed(ActionEvent e) { JFileChooser jfilechooser1 = new JFileChooser(); String sfilename; // Ok-Schalter gedrückt? if (jfilechooser1.showopendialog(this) == JFileChooser.APPROVE_OPTION) { sfilename = jfilechooser1.getselectedfile().getpath(); MyJInternalFrame frame = new MyJInternalFrame( sfilename ); frame.setbounds(0, 0, 450, 300); _desktoppane.add(frame); _desktoppane.movetofront(frame); // MnOpen 48 24

25

26 Filter für die Klasse FileChooser Die Klasse FileFilter erlaubt die Steuerung der Auswahl der Dateien mit Hilfe von Dateimasken. Die Klasse ist abstract, so dass erst eine Klasse abgeleitet werden muss. Beispiel MyFileFilter Speicherung der Filter in einer Hashtabelle Konstruktoren public MyFileFilter(String extension, String description) { this(new String[] {extension, description); public MyFileFilter(String[] filters, String description) { this(filters, description); public MyFileFilter(String[] filters) { this(filters, null); 51 Filter für die Klasse FileChooser Methoden zur Speicherung der Extension: public boolean accept(file f) public String getextension(file f) public void addextension(string extension) public String getdescription() public void setdescription(string description) public void setextensionlistindescription(boolean b) public boolean isextensionlistindescription() 52 26

27 FileChooser Beispiel mit Filter: void MnOpen_actionPerformed(ActionEvent e) { JFileChooser jfilechooser1 = new JFileChooser(); String sfilename; MyFileFilter javafilter, txtfilter; javafilter = new MyFileFilter("java", "Java-Texte"); txtfilter = new MyFileFilter( new String[] {"dat", "txt", "Texte"); jfilechooser1.setmultiselectionenabled(false); jfilechooser1.setcurrentdirectory( new File("D:\\HS-Harz\\Vorlesungen\\GUI") ); jfilechooser1.addchoosablefilefilter(javafilter); jfilechooser1.addchoosablefilefilter(txtfilter); if (JFileChooser.APPROVE_OPTION == jfilechooser1.showopendialog(this)) { // Aktion // MnOpen 53 MDI: mdi

28 MDI: mdi02 public void SaveToFile() { // suche aktive Fenster // speichert eine Datei MyInternalFrame frame; JInternalFrame[] ff; // Array aller Clientfenster ff = _desktoppane.getallframes(); if (ff.length>0) { frame = (MyInternalFrame) ff[0]; // oberste Fenster, wechselt System.out.println( frame.gettitle() ); frame.savetofile(..); // SaveToFile 55 MDI: mdi03 Mit einer gemeinsamen Actionlistener-Methode 56 28

29 MDI: mdi04 Mit einer gemeinsamen Actionlistener-Methode Problem: BnNew und MnNew 57 MDI: mdi05 Mit einer gemeinsamen Actionlistener-Methode Problem: BnNew und MnNew behoben mittels ActionCommand 58 29

30 MDI: mdi06 Mit einer gemeinsamen Actionlistener-Methode Nimbus-Look and Feel Eine Basisklasse mit vier JInternalFrames 59 30