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 1

2 Benutzeroberflächen: Zeichnen in Java Benötigte Elemente: Linien (Farbe, Strichdicke, Strichart) Zeichenblatt (JFrame, JPanel, Canvas) 3 Benutzeroberflächen: Zeichnen in Java Methode Beschreibung clearrect() Löscht ein Gebiet der Zeichenfläche copyarea() kopiert ein Rechteck innerhalb der Zeichenfläche drawarc() zeichnet einen Bogen drawline() zeichnet eine Gerade drawoval() zeichnet eine Ellipse drawpolygon() zeichnet ein Polygon (Array) drawrect() zeichnet ein Rechteck drawroundrect() zeichnet ein Rechteck mit abgerundeten Ecken fillarc() füllt einen Bogen mit Farbe filloval() füllt ein Oval mit Farbe fillpolygon() füllt ein Polygon mit Farbe fillrect() füllt ein Rechteck mit Farbe getcolor() gibt die aktuelle Zeichnungsfarbe aus getfont() gibt den aktuellen Zeichensatz aus getfontmetrics() gibt die aktuellen Parameter des Zeichensatzes aus setcolor() legt die Zeichnungsfarbe fest setfont() setzt den aktuellen Zeichensatz drawstring( ) HexEditor drawchars() Array von Char s 4 2

3 Zeichnen in Java: Linien Linien zeichnen int x = 80; for (int i=0; i<60; i++) g.drawline(x,40,x,100); x += 1+ 3*Math.random() Die Variable g bezeichnet man auch als Grafikkontext Line-rect-circle\Line1 5 Zeichnen in Java: Linien import java.awt.*; import javax.swing.jframe; public class Linie01 extends JFrame public Linie01() setdefaultcloseoperation( ); // construktor int x = 80; for (int i=0; i<60; i++) g.drawline(x,40,x,100); x += 4+ 6*Math.random(); // paint public static void main(string[] args) Linie01 f ; f = new Linie01(); f.setsize(500, 300); f.settitle("1. Grafikbeispiel"); f.setvisible(true); // main // class Line01 6 3

4 Zeichnen in Java: Linien import java.awt.*; import javax.swing.jframe; public class Linie01 extends JFrame public Linie01() setdefaultcloseoperation( ); this.getcontentpane().add( new CCanvas(), BorderLayout.CENTER ); // construktor Update: canvas.update( canvas.getgraphics() ); public static void main(string[] args) Linie01 f ; f = new Linie01(); f.setsize(500, 300); f.settitle("1. Grafikbeispiel"); f.setvisible(true); // main // class class CCanvas extends Canvas int x = 80; for (int i=0; i<60; i++) g.drawline(x,40,x,100); x += 1+ 3*Math.random(); // paint // CCanvas Line01 7 Zeichnen in Java: Linien class CCanvas extends Canvas private int count=0; count=count+1; System.out.println(count+". zeichnen"); g.setcolor(color.white); g.fillrect(0,0, getwidth(), getheight() ); g.setcolor(color.red); int width,height; width = this.getwidth(); height = this.getheight(); g.drawline(0,0,width,height); Line02 8 4

5 Zeichnen in Java: Linien Linien zeichnen Links /oben :100,100 Rechts / unten:600,400 mitte / oben: 350, 50 Vorlesungsaufgabe Line03 9 Vorlesungsaufgabe: g.drawline(100,100, 600,100); // waagerecht oben g.drawline(600,100, 600,400); // senkrecht rechts g.drawline(100,400, 600,400); // waagerecht unten g.drawline(100,100, 100,400); // senkrecht links g.drawline(100,100, 600,400); // links oben nach rechts unten g.drawline(100,400, 600,100); // links unten nach rechts oben g.drawline(100,100, 350, 50); // links oben nach rechts unten g.drawline(350, 50, 600,100); // links unten nach rechts oben Line2 10 5

6 Sinusfunktionen: double f(double x) return (Math.cos(x/5) + Math.sin(x/7) + 2) * getsize().height / 4; for (int x = 0 ; x < getsize().width ; x++) g.drawline(x, f(x), x + 1, f(x + 1)); Line04 11 class CCanvas extends Canvas double f(double x) return (Math.cos(x/5) + Math.sin(x/7) + 2) * getsize().height / 4; g.setcolor(color.white); g.fillrect(25,25, getwidth()-50, getheight()-50 ); g.setcolor(color.red); for (int x = 0 ; x < getsize().width ; x++) g.drawline(x, (int) f(x), x + 1, (int) f(x + 1)); Line

7 Sinusfunktionen: double f(double x) return ( Math.sin(x/7) + 2) * getsize().height / 4; Color c; Font f; for (int x = 0 ; x < getsize().width ; x++) g.drawline(x, (int)f(x), x + 1, (int)f(x + 1)); c = g.getcolor(); f = g.getfont(); Line05 13 Gedämpfte Sinusschwingung: double f(double x) return ( Math.sin(x/7)*Math.exp(-x*0.002) + 2) * getsize().height / 4; Color c; Font f; for (int x = 0 ; x < getsize().width ; x++) g.drawline(x, (int)f(x), x + 1, (int)f(x + 1)); c = g.getcolor(); f = g.getfont(); Line6 14 7

8 Zeichnen in Java: Rechteck Aufgabe: Zeichnen von 10 Rechtecken Rect1 15 Zeichnen in Java: Rechteck int x, y; // Mittelpunkt int w, h; // Breite Höhe for (int i=0; i<10; i++) x = (int) ( 400*Math.random() ); y = (int) ( 200*Math.random() ); w = (int) ( 400*Math.random() ); h = (int) ( 200*Math.random() ); g.drawrect(x,y,w,h); // Links Oben // Links Oben // Width // Height Rect1 16 8

9 Zeichnen in Java: Rechteck Recchteck Koordinaten x0 = 200; y0 = 200; diffx = 50; diffy = 25; diff wird nach jedem Zeichen um 10 Punkte erhöht Vorlesungsaufgabe Rect2 17 Zeichnen in Java: Rechtecke zeichnen diff diff Rect2 18 9

10 Vorlesungsaufgabe: int x0, y0; // Mittelpunkt int x, y; // Mittelpunkt links / oben int w, h; // Breite Höhe int diff; x0 = 200; y0 = 200; diff = 50; g.setcolor(color.red); g.drawline(x0-200,y0,x0+200,y0); g.drawline(x0,y0-200,x0,y0+200); g.setcolor(color.blue); for (int i=0; i<10; i++) x = x0 - diff; y = y0 - (diff >> 1); h = diff; w = diff << 1; g.drawrect(x,y,w,h); diff += 10; // for // SHR // SHL Rect2 19 Zeichnen in Java: Kreis int x, y; // Mittelpunkt int w, h; // Breite Höhe x = 80; y = 80; for (int i=0; i<10; i++) w = (int) ( 400*Math.random() ); h = w; g.drawoval(x,y,w,h); Circle

11 Zeichnen in Java: Kreis int x0, y0; // Mittelpunkt int d; // Durchmesser int r; // Radius x0 = 300; y0 = 300; for (int i=0; i<10; i++) // Verschieben d = (int) ( 400*Math.random() ); r = d >> 1; g.drawoval(x0-r,y0-r,d,d); Circle2 21 Zeichnen in Java: Kreis int x, y; // Mittelpunkt int d; // Durchmesser int r; // Radius x = 300; y = 300; for (int i=0; i<10; i++) // Verschieben d = (int) ( 400*Math.random() ); r = d >> 1; g.drawoval(x-r,y-r,d,d); Circle

12 Zeichnen mit eine eigenen Klasse Ableiten von Canvas oder JPanel Implementieren der paint-methode this.paintcomponents(g); g.setcolor(color.white); g.fillrect(0,0, this.getwidth(), this.getheight()); g.setcolor( Color.blue ); g.drawline(10,10, getwidth()-10,getheight()-10) ; // paint 23 Methode drawstring drawstring(string s, int x, int y); Abmessungen Klasse FontMetrics: this.paintcomponents(g); Beispiel: Font f1 = new Font("Courier New", Font.PLAIN, size); FontMetrics fontmetrics = g.getfontmetrics(f1); int rowheight = fontmetrics.getheight(); int margin = fontmetrics.stringwidth("xxxx"); 24 12

13 Klasse Font Font[] ff = java.awt.graphicsenvironment.getallfonts(); 25 Font myfont=new Font("Arial", Font.ITALIC Font.PLAIN, 18); String s="abcghi"; // holen der Daten für den Font und des Strings LineMetrics lm = myfont.getlinemetrics( s, new FontRenderContext( new AffineTransform(), true, //antialiased true //use fractional metrics? ) ); // Abmessungen für ausgeben: System.out.println("String: "+s); System.out.println("Schriftart: "+myfont.getfontname()); System.out.println("Schriftgröße: "+myfont.getsize()); System.out.println(" "); System.out.println("Ascent: "+lm.getascent()); System.out.println("+Descent: "+lm.getdescent()); System.out.println("+Leading: "+lm.getleading()); System.out.println("=Height: "+lm.getheight()); 26 13

14 AttributedCharacterIterator (String02) Aliasing an: Graphics2D g2d=(graphics2d)g; g2d.setrenderinghint( RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON ); 27 AttributedCharacterIterator (String03) Ausgabe mit Attributen addattribute( AttributedCharacterIterator.Attribute attribute, Object value, // z. B. 1) int beginindex, int endindex ) 1) GradientPaint TextAttribute.UNDERLINE_LOW_DASHED TextAttribute.SWAP_COLORS_ON 28 14

15 AttributedCharacterIterator (String03) 29 Font f1 = new Font("Arial", Font.PLAIN, 36); Font f2 = new Font("Times New Roman", Font.PLAIN, 60); AttributedString as = new AttributedString("Informatik ist toll, aber auch Mathematik oder Sport"); as.addattribute( TextAttribute.FONT, f1 ); as.addattribute( TextAttribute.FOREGROUND, new GradientPaint( 0,0, Color.red, 0,10, Color.white,true ), 15,19); ( as.getiterator(), 30,100 ); 30 15

16 as.addattribute( TextAttribute.FONT, f2, 0, 4 ); as.addattribute( TextAttribute.FOREGROUND, new GradientPaint( 0,0, Color.blue, 10,0, Color.green,true ), 26,31); // "auch" setzen as.addattribute( TextAttribute.FONT, f2, 26, 31 ); as.addattribute( TextAttribute.UNDERLINE, TextAttribute.UNDERLINE_LOW_DASHED, 31,41 ); as.addattribute( TextAttribute.SWAP_COLORS, TextAttribute.SWAP_COLORS_ON, 22,27 ); g2d.drawstring( as.getiterator(), 30,100 ); 31 Dialog_2D: Strichstärken und Strichmuster int x = 80; Rectangle r = new Rectangle(); g.getclipbounds(r); Graphics2D g2 = (Graphics2D) g; float [] dashs = 40.0f, 5.0f; // Länge Strich, Pause // BasicStroke(float width, int cap, int join, float miterlimit, // float[] dash, float dash_phase) // 1.0f = miterlimit g.setcolor(color.white); g.fillrect(0,0, getwidth(), getheight() ); g2.setstroke( new BasicStroke(LineWidth, BasicStroke.CAP_BUTT, BasicStroke.JOIN_MITER, 1.0f, dashs, 0.0f ) ); g.setcolor(color.red); for (int i=10; i< r.getwidth()-10; i++) x = (int) (6.0*Math.random()); if (x==2) g.drawline(i,20,i,(int) r.getheight()-10 ); // for // paint 32 16

17 33 Beispiele in Grafik2D: nikolaus1, nikolaus2, nikolaus

18 Dialog_Area_2D Dialog_Line_2D 35 Dialog_Picture2_2D 36 18

19 Dialog_Transform1_2D: Transformation, Skalierung und Scherung 37 MemoryMonitor 38 19