Lektion 4: Dialogprogrammierung und Graphik
Werbung
Lektion 4: Dialogprogrammierung und Graphik Helmar Burkhart Informatik Universität Basel [email protected] Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-0 Übersicht Lektion 4 • Grundprinzipien von Graphik und Dialog • AWT-Graphik • Turtle-Graphik • Komponenten und Behälter • Swing Prinzipien • Ereignisbehandlung • Layout- und Plattformsichten Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-1 Hoffentlich ein Volltreffer Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-2 Übersicht und Geschichte • Graphik- und Dialogelemente haben sich im Laufe der letzten Jahre stark verändert. • Java 1.0 -> 1.1: Neue Ereignisbehandlung • AWT (Abstract Windows Toolkit) • Swing • JFC (Java Foundation Classes) Wir geben einen Einstieg in die Techniken. Die vorhandenen Klassenpakete sind umfangreich ! Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-3 Graphik Template (1) Das folgende Muster dient vorerst als Schablone zum Erzeugen einer Graphikausgabe. Importieren der Pakete für Graphik und Dialog import java.awt.*; import java.awt.event.*; import javax.swing.*; xyz ist jeweils zu setzen public class xyz{ public static void main(String args[]) { JFrame f = new xyzFrame(); f.show(); } } Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-4 Graphik Template (2) class xyzFrame extends JFrame{ public xyzFrame(){ Fenstertitel setTitle("xyz Text"); Fenstergrösse setSize(220,250); addWindowListener( new WindowAdapter(){ public void windowClosing (WindowEvent e){ System.exit(0);} } ); Container contentPane = getContentPane(); contentPane.add( new xyzPanel() ); } } Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-5 Graphik Template (3) class xyzPanel extends JPanel{ public void paintComponent(Graphics g){ super.paintComponent(g); g.fillArc(0, 0, 200, 200, 0, 360 ); } } Zeichenoperationen einsetzen Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-6 AWT Graphik • java.awt.Graphics ist eine Klasse zum Erzeugen graphischer Objekte: Linien, Rechtecke, Kreise,... drawRect(int x, int y, int breite, int hoehe) (0,0) x-Werte (x,y) breite hoehe y-Werte Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-7 Graphics Methoden • Linie: drawLine(...) • Rechteck: drawRect(...) • Gefülltes Rechteck: fillRect(...) • Ellipse: drawOval(...) • Bogen: drawArc(...) • Gefüllter Bogen: fillArc(...) • Polygon: drawPolygon(...) • Text: drawString(...) Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-8 xyz = Schnabel public void paintComponent(Graphics g){ super.paintComponent(g); int r = 150; // Kreisradius int cx = 250; // Kreiszentrum int cy = 300; int angle = 30; // Halber Oeffnungswinkel int dx =(int)(r*Math.cos(angle * Math.PI / 180)); int dy = (int)(r*Math.sin(angle * Math.PI / 180)); g.drawLine(cx, cy, cx + dx, cy + dy); g.drawLine(cx, cy, cx + dx, cy - dy); g.drawArc(cx - r, cy - r, 2 * r, 2 * r, angle, 360 - 2 * angle); Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-9 Farbe • java.awt.Color unterstützt das Arbeiten mit Farbe. • Farbe mittels RGB-Wert spezifizierbar. • Standardfarben mittels Bezeichner Color.gray Color.blue Color.pink Color.red Color.cyan Institut für Informatik Universität Basel Color.yellow Color.green Color.magenta Color.orange Color.white EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-10 xyz = FillCircles (1) public void paintComponent(Graphics g){ super.paintComponent(g); int r = 250; // Kreisradius int cx = 380; // Kreiszentrum int cy = 280; Color c =Color.white; for (int i=0; i<30; i++){ switch(i%10){ case 0: c=Color.gray;break; case 1: c=Color.blue;break; case 2: c=Color.pink;break; case 3: c=Color.red;break; Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-11 xyz = FillCircles (2) case 4: c=Color.cyan;break; case 5: c=Color.yellow;break; case 6: c=Color.green;break; case 7: c=Color.magenta;break; case 8: c=Color.orange;break; case 9: c=Color.white;break; } g.setColor(c); g.fillArc(cx - r, cy - r, 2 * r, 2 * r, 0, 360 ); r-=10; } } } Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-12 Klasse java.awt.Polygon • Es gibt eine Klasse java.awt.Polygon • Konstruktor für leeres Polygon bzw. aus Felder von x und y Werten. • Methode addPoint() fügt neuen Punkt am Polygon an. Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-13 xyz = DrawPoly Polygon p = new Polygon(); cx = 600; int i; for (i = 0; i < 5; i++) p.addPoint( (int)(cx + r * Math.cos(i * 2 * Math.PI / 5)), (int)(cy + r * Math.sin(i * 2 * Math.PI / 5))); g.drawPolygon(p); } } Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-14 Turtle Graphik Turtle Graphik ist ein einfaches Modell zum Erlernen von Graphik (im Kindergartenalter). • Es gibt eine "Schildkröte", die einen Zeichenstift besitzt. • Die Schildkröte läuft immer in eine Richtung; diese kann aber durch Links- bzw. Rechtsdrehen geändert werden. • Die gegenwärtige Richtung kann gespeichert werden. • Die gegenwärtige Position kann gespeichert werden. • Erweiterungen: Farbstifte, Stift hoch/tief Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-15 Turtle Graphik Routinen (1) class TurtleGraphics{ Point pos; // Position double dir =0; // Initialrichtung nach rechts Graphics turtle; TurtleGraphics(Graphics g, int xpos, int ypos) TurtleGraphics(Graphics g) Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-16 Turtle Graphik Routinen (2) void move(double dist) void turnLeft(double ang) void turnRight(double ang) Point getPenPos() void setPenPos(Point p) double getPenDir() void setPenDir(double w) void setPenColor(Color c) Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-17 Wir erzeugen folgende Spirale Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-18 Turtle Spirale public void paintComponent(Graphics g){ super.paintComponent(g); TurtleGraphics tg = new TurtleGraphics(g,100,100); double dist = 400; while (dist >0){ tg.move(dist); tg.turnRight(90); dist-=10; } } Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-19 Jetzt sind Sie dran ! Wie kommt man wieder heraus ? Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-20 Welche Ausgabe wird erzeugt ? public void paintComponent(Graphics g){ super.paintComponent(g); TurtleGraphics tg = new TurtleGraphics(g,350,250); double dist=5; tg.setPenColor(Color.blue); while (dist<=150){ tg.move(dist); tg.turnRight(30); dist+=0.5; } } Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-21 Jetzt wird's schwieriger: Rekursion public void paintComponent(Graphics g){ super.paintComponent(g); TurtleGraphics tg = new TurtleGraphics(g,300,300); fac = 0.5 tg.turnLeft(90); draw(tg,128); } private void draw(TurtleGraphics tg, double s){ if (s<1) return; Point p = tg.getPenPos(); double w = tg.getPenDir(); tg.turnLeft(45); tg.move(s); draw(tg,fac*s); tg.setPenPos(p); tg.setPenDir(w); tg.turnRight(45); tg.move(s); draw(tg,fac*s); } Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-22 Aufgaben beim GUI-Programmieren Die Programmierung der graphischen Benutzerschnittstelle (Graphical User Interface = GUI) umfasst folgende Unteraufgaben: • Die Definition des logischen Aufbaus der Schnittstelle, d.h. die Einbettung der Dialogkomponenten. • Die Definition der Ereignisbehandlung, d.h. die Festlegung der Aktionen. • Die Definition der allgemeinen Gestaltung, d.h. insbesondere der Platzierungsregeln (layout management). • Die Definition des spezifischen Aussehens (Plattformsicht). Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-23 Programmabbruch auf die unfeine Art Was passiert, wenn wir xyzFrame "vereinfachen" ? class xyzFrame extends JFrame{ public xyzFrame(){ setTitle("xyz Text"); setSize(220,250); /* addWindowListener(........); */ Container contentPane = getContentPane(); contentPane.add(new xyzPanel() ); } } Fenster schliesst Anwendung per <ctrl> c abbrechen Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-24 Komponenten und Behälter • Komponenten (component) und Behälter (container) definieren den logischen Aufbau der graphischen Benutzerschnittstelle. • Komponenten sind GUI-Elemente, die auf dem Bildschirm dargestellt und umplaziert werden können, und die Ereignisse auslösen, empfangen und behandeln. Bsp.: Knopf (button), Menü (menu), Rollbalken(scrollbar). • Behälter sind GUI-Elemente, die andere Komponenten beinhalten können. Bsp.: Fenster (window, frame), Leiste (panel) Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-25 Hierarchischer Aufbau des GUI Behälter Komponenten Anordnung Aktionen Knopf A Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-26 Vererbungshierarchie AWT und Swing java.lang.Object java.awt.event.* java.awt.Component java.awt.layout java.awt.Container javax.swing.JComponent javax.swing.JPanel javax.swing.JButton Java.awt.Graphics java.awt.Window java.awt.Frame javax.swing.JFrame ... Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-27 Ereignisbehandlung • Interaktive Programme sind Programme, deren Ablauf auf ständige Benutzereingaben ausgerichtet ist. • Die Ereignisbehandlung sorgt dafür, dass Reaktionen auf Benutzereingaben erfolgen (vgl. Informatik I, Lektion 9). Fenster verschieben oder schliessen Knopf drücken Menü auswählen Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-28 Ereignisorientiertes Programmieren Beim ereignisorientierten Programmieren ist der Programmablauf verteilt: Benutzereingabe: Taste drücken Aufruf der Ereignisbehandlung Ereignisreaktion Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik Ereignisbehandler wird aufgerufen Ereignisbehandlung reagiert: Fenster schliessen 4-29 Ereignisbehandlung Die Ereignisbehandlung ist in Java seit Version 1.1 vereinheitlicht. Prinzip: Die Ereignisbehandlung wird der Komponente hinzugefügt, die auf die Benutzereingabe reagieren soll. Beispiel: Fenster schliessbar machen. • WindowListener ist ein Interface des Pakets java.awt.event. • 7 abstrakte Methoden darunter windowClosing() • addWindowListener(WindowListener l) Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-30 Klasse xyzWindowListener class xyzWindowListener implements WindowListener{ public void windowClosing(WindowEvent e){System.exit(0);} public public public public public public void void void void void void windowActivated(WindowEvent e){} windowClosed(WindowEvent e){} windowDeactivated(WindowEvent e){} windowDeiconified(WindowEvent e){} windowIconified(WindowEvent e){} windowOpened(WindowEvent e){} } Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-31 xyzFrame mit Ereignisbehandlung class xyzFrame extends JFrame{ public xyzFrame(){ setTitle("xyz Text"); setSize(220,250); addWindowListener(new xyzWindowListener()); } Neuen Ereignisbehandler erzeugen und dem JFrame hinzufügen Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-32 Adapterklassen • Das Implementieren einer Schnittstelle ist mühsam, wenn man nur 1 Methode implementieren will. • Adapterklassen sind eine "leere" Implementierung der Listenerklasse. • Man kann von der Adapterklasse ererben und nur die gewünschte Methode überschreiben. class xyzWindowListener extends WindowAdapter{ public void windowClosing(WindowEvent e){System.exit(0);} Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-33 Lokale, innere Klasse Ein WindowListener wird nur im Kontext eines Fensters angewendet → Lokalität durch innere Klasse. class xyzFrame extends JFrame{ public xyzFrame(){ Klasse wird innerhalb eines Anweisungsblocks definiert. Nur im entsprechenden Block bekannt. class xyzWindowListener extends WindowAdapter{ public void windowClosing(WindowEvent e){ System.exit(0);} } addWindowListener( new xyzWindowListener()); Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-34 Elegante Lösung: Anonyme Klasse class xyzFrame extends JFrame{ Definition einer public xyzFrame(){ namenlosen Klasse abgeleitet von setTitle("xyz Text"); WindowAdapter und setSize(220,250); erzeugen eines Objekts. addWindowListener( new WindowAdapter(){ public void windowClosing (WindowEvent e){ System.exit(0);} } ); } } Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-35 Toolkit • Java zielt auf plattformunabhängiges Programmieren. Um eine Anwendung systemneutral zu schreiben braucht man manchmal aber Information über das System, z.B. die Bildschirmauflösung. • Die Klasse java.awt.Toolkit dient hier als Bindeglied. Toolkit tk = Toolkit.getDefaultToolkit(); Dimension d = tk.getScreenSize(); System.out.println(“Hoehe: "+d.height+ " Breite: "+d.width); Hoehe: 768 Breite: 1024 Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-36 CenteredFrame und CloseableFrame Paket frames aufbauen mit 2 Hilfsklassen, die alles verstecken, was man ständig an Funktionalität will. • CenteredFrame extends JFrame: Erzeugt ein Fenster, das in der Bildschirmmitte platziert wird. Verschiedene Konstruktoren betreffend der Grösse. • CloseableFrame extends CenteredFrame: Macht Fenster schliessbar. Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-37 Aufbau eines JFrame Ein JFrame Behälter ist ein strukturiertes Objekt, das mehrere übereinandergelagerte Ebenen umfasst. Wir arbeiten hier nur mit der Inhaltsebene (content pane). Gibt Referenz auf Inhaltsebene zurück Container contentPane = getContentPane(); contentPane.add( new xyzPanel() ); Der Inhaltsebene wird eine andere Komponente (hier Leiste) hinzugefügt. Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-38 Allgemeines GUI Template (1) Importieren der Pakete für Graphik und Dialog import import import import java.awt.*; java.awt.event.*; javax.swing.*; frames.*; Importieren des eigenen Pakets für Fenster. class xyzGUIFrame extends CloseableFrame{ ... Hier wird das eigentliche GUI definiert. } Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-39 Allgemeines GUI Template (2) public class xyz{ public static void main(String args[]) { JFrame f = new xyzGUIFrame(); f.show(); } Fenster sichtbar machen. Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-40 Knöpfe und Leisten (1) Wir zeigen am Beispiel von Knöpfe und Leisten das prinzipielle Vorgehen bei der GUI Gestaltung. JButton: Knopf der textuell beschriftet oder multmedial gestaltet werden kann. JPanel: Leiste auf der Komponenten platziert werden können. Default-Platzierung ist Aneinanderreihung (FlowLayout). Beispiel: Wir erzeugen Knöpfe und platzieren diese in eine Leiste. Die Leiste selber liegt in einem Fenster. Die Knöpfe reagieren beim Drücken, z.B. Setzen von Hintergrundfarbe. Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-41 Knöpfe und Leisten (2) Konstruktoren: • JButton(String text) • JPanel() Ereignisbehandlung: • interface ActionListener • public void actionPerformed(ActionEvent event) • interface ContainerListener • public void componentAdded(...) • public void componentRemoved(...) Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-42 Button1 (1) class Button1GUIFrame extends CloseableFrame{ class ButtonListener implements ActionListener{ public void actionPerformed(ActionEvent event){ System.out.println("Knopf gedrueckt!");} } Button1GUIFrame(){ setTitle("Test auf Reaktion eines Knopfs"); ActionListener actListener = new ButtonListener(); Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-43 Button1 (2) p = new JPanel(); yellowbutton = new JButton("gelb"); yellowbutton.addActionListener(actListener); p.add(yellowbutton); orangebutton = new JButton("orange"); orangebutton.addActionListener(actListener); p.add(orangebutton); Container contentPane = getContentPane(); contentPane.add(p);} private JPanel p; private JButton yellowbutton; private JButton orangebutton; } Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-44 Button2 "Mehrfachvererbung" in Java class Button2GUIFrame extends CloseableFrame implements ActionListener{ ... yellowbutton.addActionListener(this); ... public void actionPerformed(ActionEvent event) { System.out.println("Knopf gedrueckt!"); } Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-45 Button3 Spezifisches Reagieren auf Ereignis. getActionCommand liefert Knopfbeschriftung zurück. public void actionPerformed(ActionEvent event) { String arg = event.getActionCommand(); if ("gelb".equals(arg)) System.out.println("Knopf GELB gedrueckt!"); else if ("orange".equals(arg)) System.out.println("Knopf ORANGE gedrueckt!"); } Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-46 Button4 Wie Button3, aber wir setzen den Farbhintergrund der Leiste mittels setBackground(Color c). public void actionPerformed(ActionEvent event) { String arg = event.getActionCommand(); if ("gelb".equals(arg)) p.setBackground(Color.yellow); else if ("orange".equals(arg)) p.setBackground(Color.orange); repaint(); } Aufforderung zum Auffrischen. Auch bei Graphik. Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-47 Button5 getSource() liefert direkte Referenz auf die Komponente, die das Ereignis ausgelöst hat. public void actionPerformed(ActionEvent event){ Object source = event.getSource(); if (source == yellowbutton) p.setBackground(Color.yellow); else if (source == orangebutton) p.setBackground(Color.orange); repaint();} Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-48 Button6 Bei vielen einheitlichen Knöpfen wird das Programm durch Einführen von Hilfsmethoden klarer: getColors(), defineButton public void actionPerformed(ActionEvent event) { String arg = event.getActionCommand(); Color c= getColors(arg); p.setBackground(c); repaint();} private void defineButton(String str){ JButton button = new JButton(str); button.setBackground( getColors(str)); button.addActionListener(this); p.add(button);} Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-49 Button7 Die Inhaltsebene eines JFrame hat BorderLayout als Darstellungsformat. Es werden 2 Leisten generiert und platziert. Container contentPane = getContentPane(); contentPane.add("North", p); pc = new JPanel(); contentPane.add("Center", pc); ... pc.setBackground(c); Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-50 Dialogkomponenten Dialogkomponenten in Swing (wie auch bei AWT) werden in 4 Schritten behandelt: • Deklaration einer Referenzvariablen für die Komponente. • Erzeugen eines neuen Komponentenobjekts und Zuweisen an die Referenzvariable. • Ereignisbehandlung für die Komponente definieren. • Einfügen der Komponente in einen Behälter. JButton yellowbutton = new JButton("gelb"); yellowbutton.addActionListener(this); p.add(yellowbutton); Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-51 Dialogbehälter Dialogbehälter in Swing (wie auch bei AWT) werden in 2-5 Schritten behandelt: • Deklaration einer Referenzvariablen für den Behälter. • Erzeugen eines neuen Behälterobjekts und Zuweisen an die Referenzvariable. • Eventuell Ereignisbehandlung für den Behälter definieren. • Eventuell Anordnung für den Behälter definieren. • Eventuelles Einfügen in einen Behälter. Bsp. Knopf (JButton) in Leiste (JPanel) platzieren. Jeder Knopfdruck wird in einer Textmarke (JLabel) mitgezählt. Knopfdruck entweder via Maus oder von Tastatur. Beide Leisten in Rahmen (JFrame) legen. Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-52 Knopfdruck zählen (1) p1 = new JPanel(); JButton button=new JButton("Drück mich"); button.setMnemonic(KeyEvent.VK_I); button.addActionListener(this); p1.add(button); p2 = new JPanel(); label= new JLabel(labelPrefix + "0 "); p2.add(label); Container contentPane = getContentPane(); contentPane.add("North", p1); contentPane.add("South", p2); Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-53 Knopfdruck zählen (2) public void actionPerformed(ActionEvent event) { numClicks++; label.setText(labelPrefix+numClicks); } private JPanel p1,p2; private JLabel label; private String labelPrefix = "Anzahl Tastendrücke: "; private int numClicks = 0; Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-54 Vererbungshierarchie AWT und Swing java.lang.Object java.awt.event.* java.awt.Component java.awt.layout java.awt.Container JComponent JPanel Java.awt.Graphics Window Frame Dialog JFrame JDialog ... JButton JLabel Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-55 JComponent javax.swing.JComponent AbstractButton JButton JComboBox JMenuItem JMenu JLabel JToggleButton JCheckbox JList JRadioButton JMenuBar JTextComponent JOptionPane JTextField JTextArea JPanel JScrollbar Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-56 Menü und Verwandte • Das Erzeugen von Menüs erfolgt hierarchisch. • Die Menüleiste (JMenuBar) wird im Rahmen verankert. • Die einzelnen Menüs (JMenu) werden der Reihe nach in der Leiste platziert. • Innerhalb des Menüs werden der Reihe nach die einzelnen Menüeinträge (JMenuItem) aufgereiht. • Die Menüeinträge können durch eine Trennkomponente strukturiert werden. • Sowohl das Menü wie die Elemente können durch Auswahl mit der Maus oder Tastenmnemonics aktiviert werden. • Jeder Menüeintrag erhält einen Ereignisbehandler. Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-57 Menü-Beispiel (1) JMenuBar mb = new JMenuBar(); setJMenuBar(mb); JMenu dateiMenu = new JMenu("Datei"); dateiMenu.setMnemonic('D'); JMenuItem neuItem = new JMenuItem("Neu... Strg+N", 'N'); neuItem.addActionListener(this); dateiMenu.add(neuItem); JMenuItem speichernUnterItem = new JMenuItem("Speichern unter...", 'u'); speichernUnterItem.addActionListener(this); dateiMenu.add(speichernUnterItem); Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-58 Menü-Beispiel (2) dateiMenu.addSeparator(); JMenuItem druckenItem = new JMenuItem("Drucken... Strg+P",'r'); druckenItem.addActionListener(this); dateiMenu.add(druckenItem); mb.add(dateiMenu); } public void actionPerformed( ActionEvent event){ String arg = event.getActionCommand(); } Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-59 Übersichtliche Menügestaltung • Da die Menüleiste meist einige Menüs mit etlichen Einträgen umfasst und der Aufbau jeweils der gleiche ist, kann mit Hilfe von Hilfsmethoden eine übersichtlichere Darstellung gewonnen werden. • makeMenu: Eigene Hilfsmethode, die jeweils ein neues Menü mit Einträgen erstellt, die sich die gleiche Ereignisbehandlung teilen. • Erzeugen von Untermenüs wird unterstützt. Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-60 Menüerzeugung mit Hilfsmethode (1) private static JMenu makeMenu( String name, char mnem, Object [] items, ActionListener al){ JMenu m = new JMenu(name); m.setMnemonic(mnem); JMenuItem mi=null; for (int i= 0; i<items.length; i++){ if (items[i]==null) m.addSeparator(); else { if (items[i] instanceof String){ mi =new JMenuItem( (String)items[i]); if (items[++i]!="") mi.setMnemonic(((String)items[i]). charAt(0)); } Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-61 Menüerzeugung mit Hilfsmethode (2) else mi=(JMenuItem)items[i]; mi.addActionListener(al); m.add(mi); } } return m; } Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-62 Menüerzeugung mit Hilfsmethode (3) JMenuBar mb = new JMenuBar(); setJMenuBar(mb); mb.add (makeMenu("Datei", 'D', new Object[]{"Neu... Strg+N", "Oeffnen...", "Speichern", "Speichern unter...", null, "Drucken... Strg+P", "Seitenansicht", "Seiteneinrichtung", null, "Beenden", }, this)); Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik "N", "f", "S", "u", "r", "c", "", "B" 4-63 Menüerzeugung mit Hilfsmethode (4) mb.add(makeMenu("Ansicht", 'A', new Object[]{ "Liste", "", "Details", "", makeMenu("Symbole anordnen", 'm', new Object []{ "nach Name", "", "nach Typ", "", "nach Datum", "", null, "Automatisch Anordnen", ""}, this) }, this)); } Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-64 Weitere Dialogkomponenten • • • • • • • • Texteingabefeld: Texteingabebereich: Rollbalken: Kontrollkästchen: Dateiauswahl: Farbauswahl: Auswahlliste: Tabellen: Institut für Informatik Universität Basel JTextField JTextArea JScrollBar JCheckBox JFileChooser JColorChooser JList JTable EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-65 Ereignisbehandlung - Übersicht (1) Schnittstelle Methode Ereignis Urheber WindowListener windowClosing windowOpened ... WindowEvent Window ActionListener actionPerformed ActionEvent getActionCommand getModifiers Button List MenuItem Textfield ItemListener itemStateChanged ItemEvent Checkbox Choice TextListener textValueChanged TextEvent TextComponent Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-66 Ereignisbehandlung - Übersicht (2) Schnittstelle Methode Ereignis Urheber KeyListener keyTyped KeyEvent Component MouseListener mousePressed MouseEvent Component getx gety MouseEvent Component MouseMotionListener mousemoved .... Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-67 Komponentenanordnung (1) Die Komponentenanordnung wird mit Hilfe von LayoutManager definiert. • FlowLayout: Aneinanderreihung von links nach rechts. • BorderLayout: Anordnung mittels NEWS-Schema. North West Center East South Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-68 Komponentenanordnung (2) • GridLayout: Starres zweidimensionales Gitter • Gridbag-Layout: Flexibles zweidimensionales Gitter • Es können eigene Layout-Manager entwickelt werden. Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-69 Plattformaussehen Swing erlaubt plattformspezifische Sichten der Dialogumgebung: • Windows • Motif • Metal (Java look and feel) UIManager.setLookandFeel(plattformName); Swing.Utilities.updateComponentTreeUI(getParent()); Muss in try-catch Teil stehen Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-70 Programme Lektion 4 Graphik Template Schnabel FillCircles DrawPoly Turtle Graphik Routinen Turtle Beispiel 1 Turtle Beispiel 2 Turtle Beispiel 3 Turtle Beispiel 4 Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik (4-4 bis 4-6) (4-9) (4-11/12) (4-14) (4-16/17) (4-19) (4-20) (4-21) (4-22) 4-71 Programme Lektion 4 (Forts.) NotCloseable Closeable1 Closeable2 Closeable3 Toolkit Institut für Informatik Universität Basel (4-24) (4-31/32) (4-33) (4-34) (4-36) Button1 Button2 Button3 Button4 Button5 Button6 Button7 (4-43/44) (4-45) (4-46) (4-47) (4-48) (4-49) (4-50) EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik 4-72 Programme Lektion 4 (Forts.) Knopfdruck zählen Menü-Beispiel 1 Menüerzeugung mit Hilfsmethoden Komponentenanordnung Institut für Informatik Universität Basel EINFÜHRUNG IN DIE INFORMATIK II Lektion 4: Dialogprogrammierung und Graphik (4-53) (4-58/59) (4-61/64) (4-69) 4-73
