Graphische Benutzeroberflächen
Vierte Doppelstunde — Graphische Benutzeroberflächen
Ziele
- Java: Erstellung einer Oberfläche mit dem Scene Builder, Erstellen einer Controller-Klasse, Umgang mit Klassen und Objekten
- Konzeptwissen: Trennung in Model-View und Controller (MVC-Modell1), Layout-Konzept mit automatisch wachsenden Elementen.
Didaktische Überlegungen
In den wenigen zur Verfügung stehenden Stunden ist es unmöglich, die Erstellung von graphischen Benutzeroberflächen (GUI) in Java erschöpfend zu behandeln. Daher wird hier eine kurze Einführung in die GUI-Erstellung und Implementation eines Controllers anhand eines einzigen Beispiels - des Bildbearbeitungsprogramms gegeben. Dies kann als Grundlage für eine weitere Beschäftigung der SuS mit der GUI-Programmierung außerhalb des Unterrichts dienen. Der Informatikunterricht in der Schule darf die GUI-Programmierung nicht in den Vordergrund stellen, da hier viele Spezialitäten der Programmiersprache statt grundlegenden Konzepten erlernt werden.
Da es sehr schwer ist, ausreichend präzise das Vorgehen im Scene Builder zu beschreiben, erhalten die SuS Videos, die die entscheidenden Schritte vorführen. Anhand dieser Videos sollten die SuS selbstständig die GUI erstellen können. Dies kann auch als vorbereitende Hausaufgabe erfolgen, um für die Programmierung mehr Unterrichtszeit zur Verfügung zu haben.
Die Erstellung des Controllers findet dann im Unterricht statt. Auch hier steht ein Video als Anleitung zur Verfügung. Sobald die erste Action-Methode implementiert wurde, können weitere nach dem gleichen Schema erstellt werden. Wichtig ist immer das gleiche Vorgehen: Auslesen der notwendigen GUI-Elemente, Berechnungen durchführen und dann die Ergebnisse in der GUI anzuzeigen1.
Da die erstellten Bildbearbeitungsalgorithmen in eigenen Klassen implementiert sind, ist es sehr einfach, von verschiedenen SuS erstellete Klassen in einer einzigen GUI zu verwenden. Um ein recht komplexes Bildbearbeitungsprogramm mit vielen Operationen zu erstellen, ist es daher möglich, die SuS kollaborativ an einem Programm arbeiten zu lassen.
Als Differenzierung bietet es sich hier an, dass schnellere SuS weitere Bildbearbeitungsmethoden implementieren und in ihre GUI einbinden.
1 Das MVC-Modell sieht eigentlich vor, dass die GUI-Elemente als "Beobachter" von Datenobjekten eingetragen werden. Sobald sich ein Datenobjekt ändert, informiert es alle eingetragenen Beobachter darüber, dass eine Änderung stattgefunden hat. Das View-Element (GUI-Element) sollte daraufhin die benötigten Daten vom Datenobjekt abfragen. In der Schule muss dieses (aufwändige) Verfahren aber nicht umgesetzt werden.
Fünfte Doppelstunde — Graphische Benutzeroberflächen
Ziel
Java: Auslesen von Werten aus GUI-Elementen
Didaktische Überlegungen
In der 4. Doppelstunde wurden vom Benutzer Eingaben nur in Form der Auswahl eines Menüpunktes oder Drücken eines Buttons verlangt. Üblicherweise muss er aber auch Werte in Eingabefelder eintragen. Der Controller muss diese Werte dann auslesen und verarbeiten.
Dies wird in dieser Stunde mit der Methode farbaenderung(...) genutzt, um dem Benutzer die Möglichkeit zu geben, eine Bildverbesserung durch eine Anpassung der drei Farbkomponenten durchzuführen.
Neue Konzepte kommen kaum hinzu. Die Umsetzung erfordert allerdings wieder einige Java-spezifischen Befehle, die von den SuSn nur übernommen werden können. Das Konzept ist so angelegt, dass weitere ähnliche Dialoge analog eingefügt werden können und das Bildbearbeitungsprogramm daher sehr gut erweitert werden kann.
Die SuS sollten als Abschluss einen weiteren Bildbearbeitungsalgorithmus implementieren, ein Optionsmenü erstellen und den Algorithmus in der GUI nutzen. Dabei können die SuS durchaus sehr unterschiedliche Algorithmen umsetzen. Eine Auswahl steht als Arbeitsblätter zur Verfügung. Da sie unterschiedlich schwer sind, ist auch hier wieder eine Differenzierung möglich.
Unterrichtsverlauf: Herunterladen [odt][154 KB]
Unterrichtsverlauf: Herunterladen [pdf][233 KB]
Weiter zu Erweiterung: Weitere Bildbearbeitungsalgorithmen