1. Laboraufgabe. Grafische Nutzerschnittstellen. Studiengang I / IEA / SAT

Transkript

1 1. Laboraufgabe Grafische Nutzerschnittstellen Studiengang I / IEA / SAT FB Automatisierung und Informatik: Grafische Nutzerschnittstellen 1

2 1. Laboraufgabe: Die Aufgabe lautet, ein Javaprogramm zu schreiben, dass eine gegebene Bilddatei (*.grf) einliest und grafisch ausgibt. Die grafische Objekte sind in der binären Datei abgespeichert. Das Format ist durch eine Spezifikation bekannt. Aufbau der Datei: Header 1. Grafisches Element 2. Grafisches Element 3. Grafisches Element n. Grafisches Element Endemarke FB Automatisierung und Informatik: Grafische Nutzerschnittstellen 2

3 Aufbau der Datei: Header 1. Grafikelement 2. Grafikelement 3. Grafikelement FB Automatisierung und Informatik: Grafische Nutzerschnittstellen 3

4 Schema der Speicherung der Objekte: Header Kennung des 1. Objektes (2 Byte) Datensatz des 1. Objektes Kennung des 2. Objektes (2 Byte) Datensatz des 2. Objektes Kennung des 3. Objektes (2 Byte) Datensatz des 3. Objektes Kennung des n. Objektes (2 Byte) Datensatz des n. Objektes Kennung 0 DATENSATZENDE FB Automatisierung und Informatik: Grafische Nutzerschnittstellen 4

5 Aufbau des Headers: Byte Bedeutung 0-1 Dateikennung KI (Kommunikations-Informatik) 2-3 Version Breite der Grafik Höhe der Grafik 0 Gesamtlänge: 12 Byte FB Automatisierung und Informatik: Grafische Nutzerschnittstellen 5

6 Aufbau der grafischen Elemente: Konstanten: 1: Linie x1, y1 x2,y2 2: Rechteck x1, y1 x2,y2 3: Kreis x,y Radius 4: Dreieck x1,y1, x2,y2, x3,y3 5: Polylinie x1,y1,, xn,yn FB Automatisierung und Informatik: Grafische Nutzerschnittstellen 6

7 Aufbau des Linienobjektes (MyLine) Bytes Type 0-1 Kennung (1) 2-5 x1 6-9 y x y Farbe Strichstärke FB Automatisierung und Informatik: Grafische Nutzerschnittstellen 7

8 Aufbau des Rechteckobjektes (MyRect): Bytes Type 0-1 Kennung (2) 2-5 x1 6-9 y x y Farbe FB Automatisierung und Informatik: Grafische Nutzerschnittstellen 8

9 Aufbau des Kreisobjektes (MyCircle): Bytes Type 0-1 Kennung (3) 2-5 x 6-9 y Radius Farbe FB Automatisierung und Informatik: Grafische Nutzerschnittstellen 9

10 Aufbau des Dreieckobjektes (MyTriangle) Bytes Type 0-1 Kennung (4) 2-5 x1 6-9 y x y x y Farbe FB Automatisierung und Informatik: Grafische Nutzerschnittstellen 10

11 Aufbau des Polylineobjektes (MyPolylinie): Bytes Type 0-1 Kennung (5) 2-5 Farbe 6-7 Kennung 1=kein Ende 8-11 x y Kennung 1=kein Ende x y Kennung 0=Ende FB Automatisierung und Informatik: Grafische Nutzerschnittstellen 11

12 Aufbau des Polylineobjektes (Beispiel): Bytes Type 0-1 Kennung (5) 2-5 Farbe 6-11 Anzahl der Koordinaten: x y x y x y3 FB Automatisierung und Informatik: Grafische Nutzerschnittstellen 12

13 Beispiel für die Objekte (interne Darstellung): Bytes Inhalt Type Kennung x y x y Farbe Strichstärke Kennung x y x y Farbe FB Automatisierung und Informatik: Grafische Nutzerschnittstellen 13

14 Folgende Klassen müssen entwickelt werden My JInternalFrame (JInternalFrame) erweitern Middleware MyHeader liest und speichert den Header MyCanvas zeichnet die Grafikelemente erweitern MyLine liest und speichert eine Linie MyRect liest und speichert ein Rechteck MyCircle liest und speichert einen Kreis MyTriangle liest und speichert ein Dreieck MyPolyline liest und speichert eine Polylinie FB Automatisierung und Informatik: Grafische Nutzerschnittstellen 14

15 Klasse ArrayList: Die Klasse ArrayList speichert beliebige Objekte in einer Liste. Eintragen mit: myliste.add(object) Aus der Liste: obj = myliste.get(i) // i von 0 bis n-1 Anzahl: anz = myliste.size(); Deklaration und Erzeugen eines Vector: ArrayList liste1 = new ArrayList(); // speichert beliebige Objekte ArrayList <Circle> liste2 = new ArrayList <Circle>();// speichert nur Kreise Element aus der Liste holen: Object obj = liste1.get(2); Circle c = (Circle) obj; // expliziter Cast Circle c = liste2.get(2); // automatischer Cast FB Automatisierung und Informatik: Grafische Nutzerschnittstellen 15

16 Klasse MyHeader public class MyHeader { private String _sfilename; short _FileID; short _Version; int _Width; // 32 Bit int _Height; public MyHeader() { // setzen der Werte } // Methoden der Attribute public void setfileid( short FileID) {} public short getfileid() {} private void setversion( short Version) {} public short getversion() {} public void setwidth( int Width) {} public int getwidth() {} public void setheight( int Height) {} public int getheight() {} // Methoden der Aktionen public void LoadFromData(DataInputStream DataIn) throws IOException { // einlesen der Daten, ohne Schließen } // LoadFromData } kreis3 FB Automatisierung und Informatik: Grafische Nutzerschnittstellen 16

17 Klasse MyHeader public class MyHeader { private String _sfilename; short _FileID; short _Version; int _Width; // 32 Bit int _Height; public MyHeader() { // setzen der Werte } // Methoden der Attribute public void setfileid( short FileID) {} public short getfileid() {} private void setversion( short Version) {} public short getversion() {} public void setwidth( int Width) {} public int getwidth() {} public void setheight( int Height) {} public int getheight() {} // Methoden der Aktionen public boolean LoadFromData(DataInputStream DataIn) { // einlesen der Daten, ohne Schließen } // LoadFromData } FB Automatisierung und Informatik: Grafische Nutzerschnittstellen 17

18 Klasse MyLine public class MyLine { // Attribute der Klasse private int x1; int y1; int x2; int y2; Color color; public MyLine() { setx1(0); sety1(0); setx2(0); sety2(0); setcolor( Color.blue ); } // line public setx1(int value) { x1 = value; } public getx1() { return x1; } public sety1(int value) { y1 = value; } public gety1() { return y1; } public setcolor( Color color) { this.color = color; } public getcolor() { return color; } } // class line kreis3 FB Automatisierung und Informatik: Grafische Nutzerschnittstellen 18

19 Ablauf beim Aufruf Open-File-Event: Create JInternalFrame Create Middleware, jede grf-datei hat ihre eigene Middleware readfile lesen des Headers (loadfromdata) Schleife lesen alle Objekte (loadfromdata) Show Windows FB Automatisierung und Informatik: Grafische Nutzerschnittstellen 19

20 Ablauf beim Aufruf: Middleware readfile in der Klasse Middleware: Read Header Read Objekt-Kennung, korrekter Typ? While(...) { Abfrage bezüglich der Objekt-Kennung Create Objekt Read Objekt Insert Objekt Read Objekt-Kennung, korrekter Typ? } FB Automatisierung und Informatik: Grafische Nutzerschnittstellen 20

21 Ablauf beim Aufruf: MyCanvas paint.routine in MyCanvas } For all Object in this.liste { Referenziere Objekt g.draw () // Polymorphismus FB Automatisierung und Informatik: Grafische Nutzerschnittstellen 21

22 Ablauf beim Aufruf: Speichern-Klassen Klasse Header Private Attribute Set / get -Methoden loadfromdata(... ) Klasse MyLine / MyCircle / MyTriangle / MyPolyline Private Attribute Set / get -Methoden draw() FB Automatisierung und Informatik: Grafische Nutzerschnittstellen 22

23 Klasse MyCanvas: Paint (nicht ok) public void paint (Graphics g) { Object obj; MyLine line; // Ausgabe der normalen Grafik (Menüs, Schalterleisten, etc). this.paintcomponents(g); for (int i=0; i<_liste.size(); i++) { obj = _liste.elementat(i); if ( obj instanceof MyLine ) { line = (MyLine) obj; g.setcolor( line.getcolor() ); g.drawline(line.getx1(), line.gety1(), line.getx2(), line.gety2()); } // if } // for } // paint FB Automatisierung und Informatik: Grafische Nutzerschnittstellen 23

24 Klasse Aufgabe1: Paint (nicht ok) public void paint (Graphics g) { mygeo obj; MyLine line; // Ausgabe der normalen Grafik (Menüs, Schalterleisten, etc). this.paintcomponents(g); for (int i=0; i<_liste.size(); i++) { obj = (mygeo) _liste.elementat(i); switch (obj.typ) { case 1: line = (MyLine) obj; g.setcolor( line.getcolor() ); g.drawline(line.getx1(), line.gety1(), line.getx2(), line.gety2()); break; } // if } // for } // paint FB Automatisierung und Informatik: Grafische Nutzerschnittstellen 24

25 Klasse Aufgabe1: Paint (nicht ok) public void paint (Graphics g) { mygeo obj; MyLine line; // Ausgabe der normalen Grafik (Menüs, Schalterleisten, etc). this.paintcomponents(g); for (int i=0; i<_liste.size(); i++) { obj = (myobject) _liste.elementat(i); switch (obj.typ) { case 1: line = (MyLine) obj; linie.draw(g); break; } // if } // for } // paint FB Automatisierung und Informatik: Grafische Nutzerschnittstellen 25