Informatik 10

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== Vererbung ======
Wir haben Klassen bisher als Mittel zur Schaffung übersichtlichen Codes kennengelernt: Mit ihrer Hilfe werden zusammmengehörige Daten gebündelt und mit den Methoden verwoben, die auf ihnen operieren. In diesem Kapitel lernen wir, wie Klassen uns helfen, Doppelungen im Code zu vermeiden. Sie helfen uns, bereits existierenden Code - auch den anderer Programmierer - einfach zu erweitern.

====== Beispiel 1: Erweiterung der Buntstift-Klasse ======
Erinnert Ihr Euch an die Buntstift-Klasse aus dem [[wiederholung:konstruktoren|Kapitel über Konstruktoren]]? Wir wollen eine ''StiftNeu''-Klasse erstellen, die nicht nur farbig schreiben kann, sondern - wahlweise - auch in Großschrift. Dazu wollen wir die Klasse ''Buntstift'' verwenden, ohne sie zu verändern. 

{{ youtube>pJqKvdgpv7c?large }}
 \\ \\ 

<WRAP center round info 60%>
Warum stellen wir die erschwerende Forderung an uns, die Klasse ''Buntstift'' nicht zu verändern? Das wäre doch der einfachste Weg!
  - Oft haben wir den Quelltext für existierende Klassen nicht, da sie Bestandteil großer kommerzieller Bibliotheken sind oder zur API der Programmiersprache gehören und vielleicht in einer anderen (maschinnennaheren und damit schnelleren) Programmiersprache implementiert sind.
  - Selbst wenn wir den Quelltext einer Bibliothek haben, möchten wir in ihn nicht eingreifen, da wir sonst im Falle eines Updates der Bibliothek deren neuen Quelltext wieder von Neuem verändern müssten.
  - Stellt Euch vor, wir wollen zusätzlich zur Klasse ''Buntstift'' zwei verschiedene erweiterte Klassen erstellen. Dann haben wir im fertigen Programm den Programmcode der Klasse ''Buntstift'' dreimal in sehr ähnlicher Ausprägung im Arbeitsspeicher. Und falls im Programmcode der Klasse ''Buntstift'' ein Fehler gefunden wird, müssten wir ihn an drei verschiedenen Stellen verbessern.  
</WRAP>

In einem ersten Schritt erstellen wir die Klasse ''StiftNeu'' ohne Inhalt, geben bei der Klassendefinition aber an: 
<code learnj>
class StiftNeu extends Buntstift {
}
</code>


<HTML>

<div class="java-online" style="height: 400px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Vererbung1'}">

<script type="text/plain" title="Buntstift.java">
StiftNeu stift = new StiftNeu(Color.red);
stift.schreibe("Hallo Welt");

class StiftNeu extends Buntstift {

}

class Buntstift {

   Color farbe;

   public Buntstift(Color farbe1) {
      farbe = farbe1;
   }

   public void schreibe(String text) {
      println(text, farbe);
   }

}</script>

</div>

</HTML>
  * Führe das Programm Schrittweise mit "step into ({{:klassen2:constructors:step-into-dark.png?nolink|}})" aus. Wieso führt der Aufruf ''stift.schreibe("Hallo Welt!")'' nicht zu einem Fehler, obwohl die Klassendefinition der Klasse ''StiftNeu'' (Zeile 4 - 6) doch ganz leer ist?
  * Lass die Maus auf den Bezeichner ''StiftNeu'' im Programm kurz verharren bis sich der Tooltip mit der Klassendefinition öffnet. Woher kommen die ganzen Attribute und Methoden?

<WRAP center round info 60%>
Mithilfe des Schlüsselwortes ''extends'' kann man eine neue Klasse erstellen, die **alle Methoden und Attribute** einer anderen Klasse **"erbt"**. Im Beispiel sorgt die Definition
<code learnj [enable_line_numbers="true", start_line_numbers_at="4"]>
class StiftNeu extends Buntstift {

}
</code>
dafür, dass die Klasse ''StiftNeu'' alle Methoden und Attribute der Klasse ''Buntstift'' enthält. \\ \\ 
Die neue Klasse, die von der bestehenden Klasse erbt, nennt man **Unterklasse**, die andere **Oberklasse**. Wegen er englischen Fachbegriffe **child class** und **parent class** sind auch die Begriffe **Kindklasse** und **Elternklasse** gebräuchlich.
</WRAP>

Wir haben bisher also eine "Kopie" der Klasse ''Bunstift'' erstellt. Jetzt wird's interessant: Wir erweitern die Klasse ''StiftNeu'', indem wir in die Klassendefinition zusätzliche Attribute und Methoden setzen:

<HTML>
<div class="java-online" style="height: 400px; width: 100%" data-java-online="{'withBottomPanel': true, 'id': 'Vererbung2'}">
<script type="text/plain" title="StiftNeu.java">
StiftNeu stiftGroß = new StiftNeu(Color.red, true);
stiftGroß.schreibe("Hallo Welt");

StiftNeu stiftKlein = new StiftNeu(Color.lime, false);
stiftKlein.schreibe("Hallo Welt");

class StiftNeu extends Buntstift {
   
   boolean großschreibung;

   public StiftNeu(Color farbe, boolean großschreibung) {
      super(farbe);
      this.großschreibung = großschreibung;
   }

   public void schreibe(String text) {
      if(großschreibung) {
         text = text.toUpperCase();
      }
      super.schreibe(text);
   }
}
</script>
<script type="text/plain" title="Buntstift.java">
class Buntstift {

   Color farbe;

   public Buntstift(Color farbe1) {
      farbe = farbe1;
   }

   public void schreibe(String text) {
      println(text, farbe);
   }

}</script>

</div>

</HTML>
Da hab' ich Euch jetzt viel Neues zugemutet. Wir gehen alles schrittweise durch:

==== Aufruf des Konstruktors der Oberklasse ====
Schauen wir uns den Konstruktor der Klasse ''StiftNeu'' an:
<code learnj [enable_line_numbers="true", start_line_numbers_at="11"]>
   public StiftNeu(Color farbe, boolean großschreibung) {
      super(farbe);
      this.großschreibung = großschreibung;
   }
</code>
Da ''StiftNeu'' alle Methoden und Attribute (also die gesamte Funktionalität) der Klasse ''Buntstift'' erbt, muss sichergestellt werden, dass beim Erzeugen von ''StiftNeu''-Objekten immer ein Konstruktor der Klasse ''Buntstift'' aufgerufen wird. Das erledigen wir durch den Aufruf ''super(farbe)''. ''super'' steht dabei immer für die gleichnamige Methode der Oberklasse.
<WRAP center round info 60%>
In Java **muss** jeder Konstruktor einer Unterklasse als **erste** Anweisung den Aufruf eines Konstruktors der Oberklasse enthalten. Dies wird mithilfe des Schlüsselwortes ''super'' erreicht.
</WRAP>

==== Überschreiben von Methoden ====
{{ :wiederholung:pasted:20221210-195623.png}}
Die Methode ''public void schreibe(String text)'' hat **dieselbe Signatur** (d.h. Bezeichner, Parametertypen und Typ des Rückgabeparameters) **wie die gleichnamige Methode der Oberklasse** ''Buntstift''. Nach außen hin ist daher nur noch diese neue Methode sichtbar, nicht mehr die der Klasse ''Buntstift''. Man sagt: Die Methode **überschreibt** die gleichnamige Methode der Oberklasse. In der Methode selbst können wir die gleichnamige Methode der Oberklasse aber durchaus aufrufen. Dazu benutzen wir wieder das Schlüsselwort ''super'':

<code learnj [enable_line_numbers="true", highlight_lines_extra="5", start_line_numbers_at="16"]>
   public void schreibe(String text) {
      if(großschreibung) {
         text = text.toUpperCase();
      }
      super.schreibe(text);
   }
</code>

  * Führe das Programm oben wieder schrittweise mit "step into ({{:klassen2:constructors:step-into-dark.png?nolink|}})" aus und achte genau darauf, wann Code aus der Unterklasse ''StiftNeu'' ausgeführt wird und wann Code aus der Oberklasse ''Buntstift''.

==== UML-Diagramm ====
Rechts siehst Du das UML-Diagramm der Klassen. Die Vererbung wird durch eine Linie von ''StiftNeu'' zu ''Bunststift'' symbolisiert, die in einen "Pfeil" in Dreiecksform mündet.  \\  \\ 
**Erinnerung:** Die durch die Raute symbolisierte Relation von ''Buntstift'' zu ''Color'' ist eine Aggregation: Die Klasse ''Buntstift'' besitzt nämlich ein Attribut ''farbe'' der Klasse ''Color''.

====== Fachbegriffe ======
{{ youtube>m_w9cZf5Afk?large }}

====== Beispiel 2: Fliegende Rechtecke ======
{{ youtube>jG5qlZYm6W0?large }}
Starte das Programm und regle die Geschwindigkeit langsam hoch!
<HTML>

<div class="java-online" style="height: 400px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Vererbung3'}">

<script type="text/plain" title="FlyingRectangle.java">
new World(800, 800);
SystemTools.setSpeed(200);

while(true) {
   new FlyingRectangle();
}


class FlyingRectangle extends Rectangle {
   double vx;
   double vy;

   public FlyingRectangle() {
      super(360, 760 - 40, 80, 80);
      setFillColor(Color.randomColor(50));  // zufällige Farbe setzen
      setAlpha(Random.randdouble(0.2, 0.8)); // Zufällige opacity ("Undurchsichtigkeit") setzen

      vx = Random.randdouble(-5,5);       // Zufallszahl zwischen -5 und 5
      vy = Random.randdouble(-26, -6);    // Zufallszahl zwischen -26 und -6

   }

   public void act() {
      move(vx, vy);
      vy = vy + 0.2;
      if(getCenterY() > 900) {
         destroy();
      }
   }


}</script>

</div>

</HTML>

Damit die Seite nicht zu lange wird, findest Du die [[.flyingRectangle:start|ausführliche Erklärung dieses Programms auf einer extra Seite]].

=== UML-Diagramm zu "Fliegende Rechtecke" ===
{{ :wiederholung:pasted:20221210-195717.png}}
Auf dem nebenstehenden Diagramm habe ich die (sehr zahlreichen!) Attribute und Methoden der Klassen ''Rectangle'', ''FilledShape'', ''Shape'' und ''Actor'' ausgeblendet, damit es übersichtlich bleibt. Die Vererbungshierarchie ist schön zu sehen: 
  * ''FlyingRectangle'' ist Unterklasse von ''Rectangle''
  * ''Rectangle'' ist Unterklasse von ''FilledShape'' (wie bspw. auch ''Circle'' und ''Polygon'')
  * ''FilledShape'' ist Unterklasse von ''Shape''
  * ''Shape'' ist Unterklasse von ''Actor''

<HTML>
<div style="clear: both"></div>
</HTML>


====== Beispiel 3: Klasse "Raute" ======
Die Programmiersprache stellt bisher nur Objekte zum Zeichnen von Rechtecken, Kreisen, Polygonen und Sprites zur Verfügung. Ich zeige Dir, wie man durch Erweiterung der Klasse Polygon leicht weitere Objektklassen erstellen kann. Im Folgenden entwickeln wir eine Klasse "Raute".

==== Skizze: ====
{{ :wiederholung:pasted:20221210-195858.png?500 }}
<HTML>

<div class="java-online" style="height: 400px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Vererbung7'}">

<script type="text/plain" title="Raute.java">
new Raute(400, 300, 50, 100);
new Raute(200, 200, 100, 80);

class Raute extends Polygon {

   public Raute(double mitteX, double mitteY, 
                double diagonaleX, double diagonaleY) {
    
      super(true);

      addPoint(mitteX + diagonaleX/2, mitteY);   // rechter Eckpunkt      
      addPoint(mitteX, mitteY - diagonaleY/2);   // oberer Eckpunkt
      addPoint(mitteX - diagonaleX/2, mitteY);   // linker Eckpunkt
      addPoint(mitteX, mitteY + diagonaleY/2);   // unterer Eckpunkt

   }

}
</script>

</div>

</HTML>




====== Beispiel 4: Klasse "Stern" ======
Die Programmiersprache stellt bisher nur Objekte zum Zeichnen von Rechtecken, Kreisen, Polygonen und Sprites zur Verfügung. Ich zeige Dir, wie man durch Erweiterung der Klasse Polygon leicht weitere Objektklassen erstellen kann. Im Folgenden entwickeln wir eine Klasse "Stern".

==== Mathematische Grundlagen ====
{{ :wiederholung:pasted:20221210-195939.png?600}}

Wir wollen einen Stern mit $n$ Außenzacken zeichnen. Dazu brauchen wir die Koordinaten $(mitte_{x}, mitte_{y})$ seines Mittelpunkts, den Außenradius $r_{außen}$ (d.h. den Abstand der äußeren Zacken vom Mittelpunkt) und den Innenradius $r_{innen}$ (d.h. den Abstand der inneren Zacken des Sterns vom Mittelpunkt). \\
Im Beispiel oben hat der Stern 5 Außenzacken (d.h. $n = 5$). Denke Dir eine Halbgerade, die im Mittelpunkt des Sterns beginnt und nach rechts zeigt. Sie geht durch den ersten Außenzacken des Sterns. Drehen wir sie um den Mittelpunkt des Sterns nach links, so überstreicht sie nach $360°/10 = 36°$ den ersten Innenzacken, nach $2 \cdot 36° = 72°$ den zweiten Außenzacken usw. . \\ 
Der i-te Zacken erscheint also beim Winkel $i*36°$. Zur Berechnung seiner Koordinaten sieh' Dir oben das rechtwinklige Dreieck mit der roten und grünen Kathete an. Um die Koordinaten des zweiten Zackens zu berechnen muss die grüne Kathete zur x-Koordinate des Mittelpunkts addiert werden, die rote Kathete zur y-Koordinate:
$$ x = mitte_{x} + cos(i*36°)*radius $$
$$ y = mitte_{y} + sin(i*36°)*radius $$
Im Fall einer Außenzacke (gerades i, also ''i % 2 == 0'') setzen wir für $radius$ den Außenradius, im Fall einer Innenzacke den Innenradius. Die Zacken fügen wir dem Polygon mit der Methode ''addPoint'' hinzu.
 \\ 

<HTML>

<div class="java-online" style="height: 400px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Vererbung5'}">

<script type="text/plain" title="Stern.java">
new Stern(400, 300, 50, 150, 5);

class Stern extends Polygon {

   public Stern(double mitteX, double mitteY, 
   double rInnen, double rAußen, double zackenZahl) {
    
      super(true);
      
      for(int i = 0; i < 2 * zackenZahl; i++) {
         
         double r = rInnen;
         if(i % 2 == 0) r = rAußen;
         
         double winkel = Math.PI / zackenZahl * i;
         double x = mitteX + r * Math.cos(winkel);
         double y = mitteY + r * Math.sin(winkel);

         addPoint(x, y);

      }

      setFillColor(Color.yellow);
      
   }




}</script>

</div>

</HTML>

=== UML-Diagramm zu "Stern" ===
{{ :wiederholung:pasted:20221210-200031.png}}
Auf dem nebenstehenden Diagramm habe ich die (sehr zahlreichen!) Attribute und Methoden der Klassen ''Polygon'', ''FilledShape'', ''Shape'' und ''Actor'' ausgeblendet, damit es übersichtlich bleibt. Die Vererbungshierarchie ist schön zu sehen: 
  * ''Stern'' ist Unterklasse von ''Polygon''
  * ''Rectangle'' ist Unterklasse von ''FilledShape'' (wie bspw. auch ''Circle'' und ''Polygon'')
  * ''FilledShape'' ist Unterklasse von ''Shape''
  * ''Shape'' ist Unterklasse von ''Actor''


=== Viele Sterne ===
Jetzt wollen wir unsere neue Klasse natürlich "richtig" anwenden und viele Sterne zeichnen:
<HTML>

<div class="java-online" style="height: 400px; width: 70%" data-java-online="{'withBottomPanel': true, 'id': 'Vererbung6'}">

<script type="text/plain" title="Hauptprogramm.java">
for(int i = 0; i < 15; i++) {

   double x = 100 + i * 50;
   double y = 600 - i *50;
   Stern s = new Stern(x, y, 10 + i, 30 + 3 * i, 5);
   s.rotate(i * 30, x, y);
   s.setAlpha(0.5);

}
</script>

<script type="text/plain" title="Stern.java">
class Stern extends Polygon {

   public Stern(double mitteX, double mitteY, 
   double rInnen, double rAußen, double zackenZahl) {
    
      super(true);
      
      for(int i = 0; i < 2 * zackenZahl; i++) {
         
         double r = rInnen;
         if(i % 2 == 0) r = rAußen;
         
         double winkel = Math.PI / zackenZahl * i;
         double x = mitteX + r * Math.cos(winkel);
         double y = mitteY + r * Math.sin(winkel);

         addPoint(x, y);

      }

      setFillColor(Color.yellow);
      
   }




}</script>

</div>

</HTML>

====== Beispiel 5: Feuerwerk ======
Dieses Beispiel habe ich als Wiederholungsübung für meine zehnten Klassen im Schuljahr 2020/21 geschrieben. Damals war wegen er Corona-Epidemie das Sylvesterfeuerwerk ausgefallen.
{{ youtube>4OY-p4M4hpY?large }}
<HTML>
<div class="java-online" style="height: 600px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Feuerwerk', 'speed': 'max'}">
<script type="text/plain" title="Feuerwerk.java">
new Feuerwerk();

class Feuerwerk extends Actor {
   
   public void act() {
      if(Math.random() < 0.03) {
         
         int funkenzahl = Math.floor(Math.random() * 50 + 30);
         int farbe = Color.randomColor(128);

         double x = Math.random() * 400 + 200;
         double y = Math.random() * 600;
         double lebensdauer = 60 + Math.random() * 60;
         for(int i = 0; i < funkenzahl; i++) {
            new Funke(x, y, farbe, lebensdauer);
         }
         Sound.playSound(Sound.cannon_boom);

      }
   }

}

class Funke extends Circle {
   double vx;
   double vy;
   double lebensdauer;           // lebensdauer in 1/30 s

   Funke(double x, double y, int farbe, double lebensdauer) {
      super(x, y, 4);
      double winkel = Math.random() * 2 * Math.PI;
      double v = Math.random() * 15 + 5;
      vx = v * Math.cos(winkel);
      vy = v * Math.sin(winkel);
      setFillColor(farbe);
      this.lebensdauer = lebensdauer;
   }

   public void act() {
      lebensdauer--;
      move(vx, vy);
      vy = vy + 0.2;
      if(lebensdauer < 30) {
         setAlpha(lebensdauer / 30);
      }
      if(isOutsideView() || lebensdauer < 0) {
         destroy();
      }
   }

}
</script>
</div>
</HTML>