Algorithmen und Datenstrukturen CS1017 Th. Letschert TH Mittelhessen Gießen University of Applied Sciences Datenabstraktionen und GUIs MVC-Muster MVC mit Beobachtbaren Datenstrukturen
GUIs und Datenabstraktionen Graphische Oberflächen und Objektorientierung GUIs sind die Königsdisziplin der Objektorientierten Programmierung. (Erst) Mit der Einführung der graphischen Benutzeroberflächen wurde das Konzept der Objektorientierung als sinnvoll erachtet, ernst genommen und populär. Grund: In der Objektorientierung geht es nicht um Tiere, Katzen und Hunde, sondern darum, wie komplexer Code strukturiert werden kann. GUIs sind wirklich komplex und ohne eine gute Organisation des Codes nicht zu beherrschen. Seite 2
GUIs und Datenabstraktionen GUIs und Objektorientierung: Das Problem In Anwendungen mit GUI stoßen zwei Strukturierungen zusammen die Struktur der GUI an der Graphik-Designer arbeiten ( ich hasse schlecht angezogene Nerds ) die Struktur der (nicht graphischen) Anwendungslogik. an der hard-core Entwickler arbeiten ( ich verachte die Pixel-Schubser in ihren DesignerJeans ) Beispiel Tic-Tac-Toe GUI-Sicht Ein Board ist ein JavaFx-Widget in dem man herum-klicken kann und das sich dann verändert Anwendungs-Sicht Ein Board ist eine Datenabstraktion mit klar definierter Schnittstelle und privater (geheimer) Implementierung Seite 3
GUIs und Datenabstraktionen Tic-Tac-Toe-Board GUI-Sicht import javafx.scene.layout.stackpane; public class TicTacToe_App extends Application{ GUI Sicht: Ein Board ist ein 2dimensionales Array von FX-Widgets in dem man klicken kann. private class Field extends StackPane { setonmouseclicked( event -> { ); private Field[][] board = new Field[3][3]; private Pane root = new Pane(); @Override public void start(stage primarystage) throws Exception { primarystage.setscene(); primarystage.show(); public static void main(string[] args) { launch(args); Seite 4
GUIs und Datenabstraktionen Tic-Tac-Toe-Board Applikations-Sicht public class Board { private int[] board = new int[3*3]; Ein Board ist etwas auf dem sich Spielfiguren befinden, die sich beeinflussen (schlagen), das durch eine Zug verändert werden kann, etc.. private int turn = +1; private Stack<Integer> moves = new Stack<>(); public List<Integer> listmoves() { return IntStream.range(0, board.length).filter( i -> board[i] == 0).boxed().collect(Collectors.toList()); public void makemove(int pos) { if (! (board[pos]==0) ) throw new IllegalArgumentException(); board[pos] = turn; moves.push(pos); turn = -turn; Seite 5
GUIs und Datenabstraktionen Entwickler- und GUI-Sicht zusammen bringen Hobby-Programmierer-Variante Code zusammen mischen Einfach auf den ersten Blick Langfristig / bei komplexen Anwendungen Entwickler-Alptraum Insgesamt: Naheliegend aber schlecht für komplexe Anwendungen an denen mehr als ein Entwickler länger als einen Monat arbeiten. Profi-Variante Code getrennt halten Schwierig auf den ersten Blick Langfristig / bei komplexen Anwendungen sinnvolle Maßnahme gegen Entwickler-Alpträume Insgesamt: Nicht naheliegend aber für komplexe Anwendungen an denen mehrere Entwickler arbeiten und / oder an denen länger als einen Monat gearbeitet wird. Seite 6
GUIs und Datenabstraktionen Entwickler- und GUI-Sicht: So getrennt wie möglich, so eng zusammen wie nötig Entkopplung: Grundprinzip der SW-Entwicklung: Komponenten: so weit zusammen wie unbedingt nötig, und so weit getrennt wie möglich Entkopplung von GUI und Anwendungslogik GUI-Code sollte stets so weit wie möglich vom Rest (den Daten, der Geschäftslogik ) getrennt werden. das macht die Anwendung übersichtlicher und damit leichter wartbar denn GUI und Geschäftslogik können unabhängig voneinander unterschiedliche Entwickler erstellt und unabhängig von einander ausgetauscht werden MVC-Muster Für Anwendungen mit GUI gibt es diverse Gestaltungsmöglichkeiten oft als Muster (Pattern) (Gestaltungsrichtlinie) bezeichnet Das bekannteste Muster ist MVC Model View Controler Seite 7
MVC View MVC Model View Control Drei Komponenten Model: Daten und Zustand der Anwendung View: Model Darstellung / GUI-Code Control: Benutzerführung, Interpretation der Benutzeraktionen Control Model, View und Control können beispielsweise als jeweils eine Klasse / ein Objekt realisiert werden. Beispiel Tic-Tac-Toe Model: View: Das Board aus Entwickler-Sicht, Das Board als Instanz einer Unterklasse von Javafx-StackPane Control: Interaktion der Sichten Kontrollieren Z.B.: Ein Knopf wurde gedrückt, ist der klickende Spieler überhaupt dran,. Seite 8
MVC MVC Mini-Anwendung Tic-Tac-Toe Mini-Anwendung Tic-Tac-Toe: Benutzer gibt per Klick Spielzüge ein, Anwendung zeigt Brett. Model Board mit Setzungen (Zügen) Frei / Belegt mit Was? View Sichtbares 3x3 Board, zeigt Belegung an Rechts-Klick: Schwarz setzt, Link-Klick: Weiss setzt Control Kontrolle von Aktionen und Situationen Klick erlaubt? Seite 9
MVC Mini-Anwendung Addierer Model public class TicTacToe_Model { private Board<TicTacToeToken> board = Board.mkBoard(TicTacToeToken.X, 3); private ObservableMap<Position, Optional<Move<TicTacToeToken>>> observableboard = FXCollections.observableMap(board); das Spielfeld: eine beobachtbare Abbildung von Positionen auf Spielsteine. public void addboardobserver(mapchangelistener<position, Optional<Move<TicTacToeToken>>> boardobserver) { observableboard.addlistener(boardobserver); Einen Beobachter des Spielfeldes hinzufügen. public Position mkposition(int x, int y) { return board.mkposition(x, y); public void move(position position, Player player) { TicTacToeToken token = (player == Player.WHITE)? TicTacToeToken.X : TicTacToeToken.O; observableboard.put(position, Optional.of(new Move<TicTacToeToken>(player, token))); Einen Spielzug machen. Dabei den Spielstein aus dem Spieler ableiten. Das Model: Wissen: Es beinhaltet die Daten die die aktuelle Situation repräsentieren. Es weiss, dass der Spieler Weiss immer mit X zieht und Schwarz mit O. Können: Es kann Spielzüge in der aktuellen Situation ausführen. Seite 10
MVC Mini-Anwendung Addierer Control Control ist die Komponente zwischen View und Model. Sie ist verantwortlich dafür dass die richtige Reaktion auf Benutzereingaben erfolgt, dass in der richtigen Art auf Änderungen des Models reagiert wird. Es gibt keine festen Vorgaben für die Interaktion der Control-Komponente mit Model und View Änderungen am Model können beispielsweise direkt von der View verarbeitet werden, oder erst an Control gemeldet werden. Die Kontrolle der Benutzereingabe kann in der View oder erst in Control erfolgen Seite 11
MVC Mini-Anwendung Addierer Control prüft ob der Spieler an der Reihe ist. public class Board_Control { private TicTacToe_Model model; private Board_View view; private int turn = 1; public Board_Control(TicTacToe_Model model) { this.model = model; Verknüpfung mit den Partnern View und Model herstellen public void setview(board_view view) { this.view = view; this.model.addboardobserver(view); public void movewhite(int x, int y) { if (turn!= 1) { view.setmsg("it is not White's turn!"); else { Position position = model.mkposition(x, y); model.move(position, Player.WHITE); view.setmsg("it is Black's turn"); turn = -turn; Wert-Änderung verarbeiten: Model informieren, oder Fehlermeldung im View. public void moveblack(int x, int y) { entsprechend Seite 12
MVC Mini-Anwendung Addierer View nimmt Benutzereingaben entgegen und zeigt Infos (von Model und/oder Control) an. public class Board_View extends Pane implements MapChangeListener<Position, Optional<Board.Move<TicTacToeToken>>> { private class Field extends StackPane { Typ der klickbaren Felder private Field[][] fields = new Field[3][3]; Die Spielfelder private Label msglabel = new Label("It is White's turn"); Ein Label für Nachrichten an den Benutzer private Board_Control control; public void setcontrol(board_control control) { this.control = control; Verbindung zur Control-Komponente public Board_View() { setprefsize(600, 700); for (int i = 0; i<3; i++) { for (int j = 0; j<3; j++) { Konstruktor: GUI erzeugen. fields[i][j] = new Field(i, j); fields[i][j].settranslatex(j*200); fields[i][j].settranslatey(i*200); getchildren().add(fields[i][j]); msglabel.settranslatey(620); msglabel.settranslatex(50); msglabel.setfont(font.font ("Verdana", FontPosture.ITALIC, 18)); getchildren().add(msglabel); Seite 13
MVC Mini-Anwendung Addierer View fortgesetzt @Override public void onchanged( javafx.collections.mapchangelistener.change<?? Position position = change.getkey(); Optional<Board.Move<TicTacToeToken>> move = int x = position.getx(); int y = position.gety(); String mark = (! move.ispresent() )? " " : fields[x][y].text.settext(mark); extends Position, extends Optional<Board.Move<TicTacToeToken>>> change) { change.getvalueadded(); (move.get().getplayer() == Player.WHITE)? "X" : "O"; Auf Änderungen im Model reagieren. public void setmsg(string msg) { msglabel.settext(msg); Model ist eine Map: Position ~> Spielstein. Änderungen sind Änderungen in dieser Abbildung. Nachrichten an den Benutzer anzeigen. Seite 14
MVC Mini-Anwendung Addierer View fortgesetzt public class Board_View extends Pane implements MapChangeListener<Position, Optional<Board.Move<TicTacToeToken>>> { private class Field extends StackPane { private Text text = new Text(); private int xcoord; private int ycoord; public Field (int x, int y) { this.xcoord = x; Die links (Weiss zieht) und rechts (Schwarz zieht) this.ycoord = y; klickbaren Felder. Rectangle border = new Rectangle(200, 200); border.setfill(null); border.setstroke(color.black); text.setfont(font.font(72)); setalignment(pos.center); getchildren().addall(border, text); setonmouseclicked( event -> { if (event.getbutton() == MouseButton.PRIMARY) { control.movewhite(xcoord, ycoord); else if (event.getbutton() == MouseButton.SECONDARY) { control.moveblack(xcoord, ycoord); ); Seite 15
MVC Mini-Anwendung Addierer Model View Control: Alles zusammen gebaut package tac_tac_toe_mvc; import import import import import import javafx.application.application; javafx.scene.scene; javafx.stage.stage; tac_tac_toe_mvc.control.board_control; tac_tac_toe_mvc.model.tictactoe_model; tac_tac_toe_mvc.view.board_view; public class Tic_Tac_Toe_App extends Application { @Override public void start(stage primarystage) throws Exception { primarystage.settitle("tic Tac Toe"); Board_View view = new Board_View(); TicTacToe_Model model = new TicTacToe_Model(); Board_Control control = new Board_Control(model); control.setview(view); model.addboardobserver(view); view.setcontrol(control); Komponenten erzeugen und verknüpfen. Scene scene = new Scene(view); primarystage.setscene(scene); primarystage.show(); public static void main(string[] args) { launch(args); Seite 16
MVC Übersicht Model: Inhaltliches Modell der Anwendung, das was der Benutzer erwartet, was passiert, wenn er mit der Anwendung umgeht. View: Reagiert auf Benutzereingaben und leitet sie an Control weiter, reagiert (direkt oder indirekt über Control) auf Änderungen im Model, Control: Steuert die Interaktion mit dem Benutzer. prüft Eingaben, gibt Informationen an Model weiter, leitet Information von Model an View weiter. Model Control MVC-Entwurf Welche Komponente ist für was verantwortlich (Können und Wissen ~> Verantwortung) Wer erzeugt wen, wer kennt wen? Welche Interaktionen soll es geben? Welche Ereignisse werden von wem an wen gemeldet? GUI-Anwendungen sind ereignisgesteuert Observer- / Beobachter-Konzept (-Muster) ist von zentraler Bedeutung: Ereignisse können definiert werden, später und an anderer Stelle kann auf einfache Art gesagt werden, wer wie darauf reagieren soll Seite 17 View
FXML FXML und Annotationen FXML: Beschreibung der GUI durch XML-Datei Annotationen: Verknüpfung der Komponenten via Reflection Die Verknüpfungen ( Beobachtungsverhältnisse ) der Komponenten werden nicht im Programmcode fest codiert, sondern zur Laufzeit durch JavaFX-Code erzeugt, der gesteuert wird durch die XML-Datei und Annotationen im Controller hergestellt. Insgesamt: Vereinfachte GUI-Erzeugung basierend auf dem MVC-Muster. Siehe Literatur! Seite 18