2.1 Wir programmieren ein Bild

In den Übungen der Folge 1 haben Sie die Methoden der Klassen Circle, Square und Triangle mithilfe der rechten Maustaste aus einem Kontextmenü ausgewählt. Wenn Sie die Farbe des Circle-Objektes sonne verändern wollten, mussten Sie erst die Methode changeColor() mit der Maus anwählen und dann in das Dialogfenster den Wert des Parameters eingeben: "yellow". Ähnlich mussten Sie bei der Änderung der Größe, der Änderung der Position und so weiter verfahren. In dieser Folge werden Sie eine völlig andere Verfahrensweise kennen lernen, mit der Sie das Gleiche sehr viel eleganter erreichen können. Sie werden programmieren!

Schritt 1 - Neue Klasse erzeugen

Öffnen Sie das Projekt "shapes" und speichern Sie mit "Speichern unter" eine Kopie des Projektes unter dem Namen "Zeichnung01" ab.

Achtung: Sie können nur auf einem Laufwerk speichern, auf dem Sie Schreibzugriff haben. Am besten nehmen Sie dafür Ihren eigenen USB-Stick oder das von den Administratoren zugewiesene Laufwerk bzw. Verzeichnis!

Klicken Sie nach dem erfolgreichen Speichern den Button Neue Klasse zur Erzeugung einer neuen Klasse an. Sie werden aufgefordert, der Klasse einen Namen zu geben und einen Typ zuzuweisen. Wählen Sie als Name Zeichnung und als Typ Class bzw. Klasse, so wie in der folgenden Abbildung gezeigt.

Erstellung einer neuen Klasse in BlueJ

Schritt 2 - Quelltext eingeben

Doppelklicken Sie auf die Klasse Zeichnung.

Es öffnet sich ein Editor-Fenster mit dem Quelltext der Klasse Zeichnung. Die Programmierer von BlueJ haben Ihnen in gut gemeinter Absicht schon viel Arbeit abgenommen und viele Kommentare in den Quelltext eingebaut. Am besten lernen Sie Java jedoch, wenn Sie den von BlueJ erzeugten Quelltext komplett löschen (Strg-A, Entf) und dann folgenden eigenen Quelltext in das Editor-Fenster eintippen:

		public class Zeichnung
		{
			public Zeichnung()  // der Konstruktor
			{
			}
		}

Dieser Quelltext besteht aus zwei Teilen, einem äußeren und einem inneren. Der äußere Teil des Quelltextes definiert die neue Klasse Zeichnung. Der innere Teil des Quelltextes definiert den Konstruktor der Klasse Zeichnung. Allerdings ist dieser Konstruktor noch leer, er besteht nur aus den beiden geschweiften Klammern mit nichts drin.

Wenn Sie mehr über Konstruktoren wissen wollen, klicken Sie auf den Lernbaustein "Konstruktoren".

Schritt 3 - Methoden

Neben dem Konstruktor haben Klassen normalerweise weitere Methoden. Das haben wir ja in den Workshops der Folge 1 gesehen, als wir die Klassen Circle, Square und Triangle untersucht haben. Was gab es da nicht alles an Methoden!

Wir wollen die Klasse Zeichnung jetzt um eine Methode namens makeVisible() ergänzen:

		public class Zeichnung
		{
			public Zeichnung()
			{
			}

			public void makeVisible()
			{
			}
		}

Kompilieren Sie den Quelltext, erzeugen Sie ein Objekt bild der Klasse Zeichnung, und klicken Sie dann mit der rechten Maustaste auf den roten Kasten für das Objektbild.

Tatsächlich taucht jetzt die neue Methode makeVisible im Kontextmenü des Objektes bild auf. Allerdings passiert nichts, wenn Sie auf die Methode klicken. Das ist aber auch kein Wunder, schließlich haben Sie noch keine Befehle in die Methode hineingeschrieben.

Schritt 4 - Zwei Kreise erzeugen

Wir wollen auf unserer noch leeren Zeichenfläche jetzt zwei Objekte sichtbar machen, eine Sonne und einen Mond, so ähnlich wie in dem Workshop der Folge 1. Dazu müssen wir der Klasse Zeichnung erst einmal mitteilen, dass wir zwei Objekte der Klasse Circle benötigen, die sonne und mond heißen sollen.

Ergänzen Sie den Quelltext der Klasse Zeichnung wie folgt:

		public class Zeichnung
		{
			Circle sonne, mond;

			public Zeichnung()
			{
				sonne = new Circle();
				mond  = new Circle();
			}

			public void makeVisible()
			{
				sonne.makeVisible();
				mond.makeVisible();
			}
		}

Mit der Zeile

Circle sonne, mond;

bewirken wir, dass alle Objekte der Klasse Zeichnung zwei Objekte der Klasse Circle haben, nämlich sonne und mond. Solch eine Beziehung zwischen Objekten nennt man HAT-Beziehung.

Diesen Begriff überträgt man auch auf die Klassen, von denen die Objekte abgeleitet wurden. Zwischen den Klassen Zeichnung und Circle besteht also auch eine HAT-Beziehung.

Die Hat-Beziehung als Klassendiagramm

Die Abbildung zeigt ein Klassendiagramm. Klassendiagramme veranschaulichen die Beziehung zwischen zwei oder mehreren Klassen. Bei der Darstellung im Hauptarbeitsbereich von BlueJ handelt es sich auch um solche Klassendiagramme. Die HAT-Beziehung wird durch einen Pfeil dargestellt, der von der übergeordneten Klasse auf die eingebundende Klasse zeigt.

Wenn nun ein neues Objekt der Klasse Zeichnung erzeugt wird, wird automatisch der Konstruktor aufgerufen. Der Konstruktor der Klasse Zeichnungwiederum ruft zweimal den Konstruktor der Klasse Circle auf und erzeugt dadurch zwei Circle-Objekte namens sonne und mond:

		sonne = new Circle();
		mond  = new Circle();

Das Klassendiagramm in Abbildung 2 zeigt die Beziehung zwischen den Klassen Zeichnung und Circle. Wollen wir graphisch darstellen, dass die Objekte der Klasse Zeichnung zwei Objekte der Klasse Circle besitzen, verwendet man ein sogenanntes Objektdiagramm.

Die Hat-Beziehung als Objektdiagramm

Das Objektdiagramm ist so zu lesen: Ein Objekt bild der Klasse Zeichnung besitzt zwei Objekte sonne und mond der Klasse Circle.

Schritt 5 - Das Bild sichtbar machen

Im letzten Workshop haben Sie die Circle-Objekte noch erzeugt, indem Sie mit der rechten Maustaste auf den "Klassenkasten" für Circle geklickt und dann den Befehl new Circle() ausgewählt haben.

Jetzt programmieren Sie jedoch richtig. Das heißt, Sie müssen den Befehl new Circle() in den Quelltext des Konstruktors einbauen, und zwar zweimal: Einmal für die Erzeugung des Circle-Objektes sonne, und dann noch einmal für die Erzeugung des Circle-Objektes mond.

Die neue Methode makeVisible() der Klasse Zeichnung bekommt jetzt auch Arbeit. Sie ruft nämlich die makeVisible()-Methoden der beiden Objekte auf:

		sonne.makeVisible();
		mond.makeVisible();

Durch diese beiden Befehle (Aufträge) werden die Objekte auf der Zeichenfläche sichtbar gemacht.

Aufruf von makeVisible() nach Erzeugung eines Objektes der Klasse Zeichnung

Leider verläuft diese Sichtbarmachung nicht ganz so wie geplant. Man sieht nicht zwei Kreise, etwa einen großen gelben und einen kleinen blauen, sondern nur einen Kreis, nämlich einen kleinen blauen:

Man sieht nur einen blauen Kreis, obwohl zwei Kreis-Objekte erzeugt wurden

Das liegt daran, dass die beiden Objekte absolut gleiche Attributwerte haben. Das wiederum liegt an dem Konstruktor der Klasse Circle. In diesem Konstruktor werden die Attribute auf bestimmte vordefinierte Werte gesetzt (siehe Lernbaustein "Konstruktoren").

Wer's nicht glaubt, kann ja mal auf den roten Kasten "zeichnung1" doppelklicken:

Der Objektinspektor von BlueJ zeigt die Attribute des Zeichnungs-Objektes "zeichnung1"

Durch einen Doppelklick auf den roten Objektkasten öffnet sich der Objektinspektor von BlueJ. Der Objektinspektor zeigt alle Attribute des Objektes an und sogar auch die aktuellen Attributwerte. Die Attribute sonne und mond sind Objekte der Klasse Circle. Die Attributwerte dieser Objekte sind recht komplex, darum werden in den weißen Kästchen nur Pfeile angezeigt, keine Werte. Man kann auf diese Pfeile aber doppelklicken:

Hier sehen wir die Attribute des Circle-Objektes sonne

Der Objektinspektor zeigt uns nun die Attribute und Attributwerte des Objektes sonne. Der Kreis hat einen Durchmesser von 30 Pixeln und befindet sich an der Position (20/60) auf der Zeichenfläche. Die Farbe ist "blue", und er ist sichtbar.

Klickt man nun auf den zweiten Pfeil, dann zeigt der Objektinspektor die Attribute und Attributwerte des Objektes mond. Wir stellen dann fest, dass die Attributwerte übereinstimmen. Das mond-Objekt befindet sich an der gleichen Position wie das sonne-Objekt und hat auch den gleichen Durchmesser.

Schritt 6 - Einen der beiden Kreise bewegen

Als Sie noch nicht programmierten, haben Sie in Folge 1, Workshop 1.2 ein Circle-Objekt bewegt, indem Sie aus dem Kontextmenü eine geeignete Methode aufgerufen haben.

Die Methode moveHorizontal() würde sich zum Beispiel gut zum horizontalen Bewegen des Kreises um eine bestimmte Pixelzahl eignen, die als Parameter übergeben wird.

Bauen Sie einen solchen Befehl in die Methode makeVisible() ein:

			public void makeVisible()
			{
				sonne.makeVisible();
				mond.makeVisible();
				mond.moveHorizontal(100);
			}

Kompilieren Sie die Klasse Zeichnung, erzeugen Sie ein Objekt dieser Klasse und führen Sie dann mit der rechten Maustaste den makeVisible()-Befehl Ihres Objektes aus.

Wenn Sie alles richtig gemacht haben, müssten Sie jetzt zwei kleine blaue Kreise auf der Zeichenfläche sehen.

Schritt 7 - Ein kleines Refactoring

Unter dem Begriff Refactoring versteht man ein "Umbauen" des Quelltextes, so dass er übersichtlicher und damit leichter verständlich wird. Die Methode makeVisible() soll ja eigentlich nur das machen, was sie verspricht, nämlich die enthaltenen Objekte sichbar zu machen. Das horizontale Bewegen eines Objektes gehört eigentlich nicht mehr in die Methode makeVisible() sondern in eine neue Methode, die wir beispielsweise draw() nennen können. Der Quelltext sähe dann so aus:

			public void makeVisible()
			{
				sonne.makeVisible();
				mond.makeVisible();
			}

			public void draw()
			{
				mond.moveHorizontal(100);
				sonne.changeColor("yellow")
			}
			

Wenn Sie nun ein Objekt der Klasse Zeichnung erzeugen und dann mit der rechten Maustaste zuerst die Methode makeVisible() und dann die Methode draw() aufrufen, erscheinen zwei Kreise in der Anwendung, links ein kleiner gelber, und rechts ein kleiner blauer.

Übungen