portfolio.tex 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414
  1. % standard
  2. \documentclass[a4paper,11pt]{article}
  3. \usepackage[utf8]{inputenc}
  4. \usepackage[ngerman]{babel}
  5. \usepackage{titlesec}
  6. \usepackage{tocbibind}
  7. \renewcommand{\listoffigures}{\begingroup
  8. \tocsection
  9. \tocfile{\listfigurename}{lof}
  10. \endgroup}
  11. \setcounter{secnumdepth}{5}
  12. \setcounter{tocdepth}{5}
  13. \titleformat{\paragraph} {\normalfont\normalsize\bfseries}{\theparagraph}{1em}{}
  14. \titlespacing*{\paragraph}
  15. {0pt}{3.25ex plus 1ex minus .2ex}{1.5ex plus .2ex}
  16. %for linkt page numbers in table of content
  17. \usepackage[linktocpage=true]{hyperref}
  18. \usepackage{enumitem}
  19. \hypersetup{%
  20. unicode,pdffitwindow,
  21. pdfkeywords = {pdf, LaTeX, hyperref, thumbnails},
  22. bookmarksopen = true,
  23. bookmarksnumbered = true,
  24. pdfcenterwindow=true,
  25. pdffitwindow = true,
  26. pdfstartview=FitBV,
  27. pdfcreator = {pdflatex},
  28. colorlinks=true, breaklinks=true, %
  29. urlcolor=magenta, % color for \url
  30. filecolor=cyan, % color for file
  31. linkcolor=black, % color for \ref
  32. citecolor=magenta, %color for \cite
  33. menucolor=darkblue,
  34. breaklinks=true,anchorcolor=green
  35. }
  36. % geometry
  37. \usepackage{geometry}
  38. \geometry{ headsep=20pt,
  39. headheight=20pt,
  40. left=21mm,
  41. top=15mm,
  42. right=21mm,
  43. bottom=15mm,
  44. footskip=20pt,
  45. includeheadfoot}
  46. % for using wrapfigures
  47. \usepackage{wrapfig}
  48. % header and footer
  49. \usepackage{datetime}
  50. \newdateformat{dmy}{%
  51. \THEDAY.~\monthname[\THEMONTH] \THEYEAR}
  52. \usepackage{fancyhdr}
  53. \pagestyle{fancy}
  54. \lhead{Noah J. Vogt}
  55. \chead{}
  56. %\rhead{\dmy\today}
  57. \lfoot{}
  58. \cfoot{Gymnasium Kirschgarten, Basel (CH)}
  59. \rfoot{Seite \thepage}
  60. \renewcommand{\footrulewidth}{.4pt}
  61. % fix figure positioning
  62. \usepackage{float}
  63. % larger inner table margin
  64. \renewcommand{\arraystretch}{1.4}
  65. % no paragraph indent
  66. \setlength{\parindent}{0em}
  67. %for spacing
  68. \usepackage{setspace}
  69. %\renewcommand{\baselinestretch}{1.5}
  70. %\onehalfspacing
  71. % graphics package
  72. \usepackage{graphicx}
  73. % use sans serif font
  74. \usepackage{tgheros}
  75. \usepackage{mathptmx}
  76. \usepackage[font={small,it}]{caption}
  77. % for quotes
  78. \newenvironment{nicequote}[2]{
  79. \begin{center}\begin{quote}\textit{#1}\\\par\raggedleft--- {#2}
  80. }{
  81. \end{quote}\end{center}
  82. }
  83. % using \say{} for easier quoting
  84. \usepackage{dirtytalk}
  85. % for code snippits
  86. \usepackage{listings}
  87. \usepackage{color}
  88. \usepackage{xcolor}
  89. \usepackage{minted}
  90. \usemintedstyle{one-dark}
  91. \definecolor{dkgreen}{rgb}{0,0.6,0}
  92. \definecolor{gray}{rgb}{0.5,0.5,0.5}
  93. \definecolor{mauve}{rgb}{0.58,0,0.82}
  94. \definecolor{bg}{HTML}{282C34} % #282C34
  95. \definecolor{shpurple}{HTML}{C301FF} % #C301FF
  96. \definecolor{shgreen}{HTML}{3CFF00} % #3CFF00
  97. \definecolor{shred}{HTML}{EE0606} % #EE0606
  98. %\usepackage[backend=biber,style=apa]{biblatex}
  99. \usepackage[
  100. backend=biber,
  101. style=alphabetic,
  102. sorting=ynt,
  103. ]{biblatex}
  104. %\addbibresource{lit/refs.bib}
  105. \usepackage{csquotes}
  106. \begin{document}
  107. \begin{titlepage}
  108. \centering
  109. \vspace{5cm}
  110. \vspace{0.1cm}
  111. {\huge\bfseries Portfolioarbeit Ergänzungsfach Informatik \par}
  112. \vspace{0.5cm}
  113. {\Large eine Arbeit von \par}
  114. {\Large Noah J. Vogt \par}
  115. {\Large aus der Klasse 4cg \par}
  116. \vspace{0.5cm}
  117. \begin{figure}[H]
  118. \centering
  119. \includegraphics[width=.9\textwidth]{media/card-panel.jpg}
  120. \end{figure}
  121. \vspace{0.5cm}
  122. {\Large Fachlehrperson: Victor Yakhontov \par }
  123. \vspace{0.5cm}
  124. {\large Geschrieben im Jahr 2022 \par}
  125. {\large Gymnasium Kirschgarten, Basel-Stadt CH \par}
  126. \end{titlepage}
  127. \tableofcontents
  128. \pagebreak
  129. \section{Einleitung}
  130. \subsection{Darstellung}
  131. Das Produkt dieser Portfolioarbeit ist ein ausführbares Programm mit grafischer Oberfläche, welches ein volles Jass-Kartendeck - also 52 Karten - darstellt und eine Mischfunktion anbietet.\\
  132. \begin{figure}[H]
  133. \centering
  134. \includegraphics[width=.7\textwidth]{media/early-screenshot.jpg}
  135. \caption{Das Produkt}
  136. \end{figure}
  137. Zuerst sind die Karten in sortierter Reihenfolge dargestellt, sie werden erst durch das Drücken auf den \say{Misch}-Knopf gemischt. Dieser Vorgang lässt sich beliebig oft wiederholen durch erneutes Drücken des Knopfes durch den Nutzer. Um wieder zum sortierten Anfangszustand zurück zu gelangen, kann man den \say{Reset}-Button drücken.\\
  138. Da man die Karten alle relativ klein darstellen müsste, um das ganze Kartendeck gleichzeitig zeigen zu können, wurde sich entschieden, die Kartenanzeige in verschiedene Fenster einzuteilen. So gibt es drei Seiten, mit der man durch Anklicken der Arrowbuttons navigieren kann. Jede Seite besteht aus einem Rasterlayout bestehend aus je drei Reihen und sieben Spalten. Die Karten werden von oben links nach unten rechts gefüllt, doch dazu später mehr.\\
  139. \subsection{Abgrenzung}
  140. Es gibt einige Einschränkungen, welche den Rahmen dieser Arbeit setzen:
  141. \begin{itemize}
  142. \item \textbf{Die Grundbedingungen} Es sollen Abgabetermine und formale Vorgaben erfüllt werden, wie definiert im Arbeitsauftrag.
  143. \item \textbf{Die Aufgabestellung} Diese gilt zu beachten und soll erfüllt werden mit all ihren Teilaufgaben. Viel weiter darüber hinaus soll die App funktionstechnisch also nicht gehen, stattdessen soll vor dem Hinzufügen neuer Features sorgfältig abgewogen werden, ob diese zu weit gehen oder noch im Sinne der Aufgabenstellung zu verstehen sind und somit noch im Rahmen sind.
  144. \item \textbf{Die Programmiersprache} Zur Lösung der Aufgabestellung und Programmierung der App soll die altbekannte, oft geliebte und gehasste Programmiersprache \texttt{Java} verwendet werden. Davon ausgenommen ist hier aber das Buildscript (\texttt{build.sh}), welches das Programm kompiliert und eine \texttt{.jar}-Executable ausgibt.
  145. \end{itemize}
  146. \subsection{Vorausschau}
  147. Im darauffolgenden Hauptteil dieser Portfolioarbeit wird zuerst genauer auf die Aufgabestellung eingegangen, diese analysiert und interpretiert. Dies ist ein wichtiger Schritt, denn er soll den weiteren Ablauf des Projekts bestimmen.\\
  148. Als nächstes wird der grobe Lösungsansatz vorgestellt, und immer weiter vertieft. Dazu wird sich unter anderem auch reichlich bedient an Codebeispielen, Konzepten, Skizzen, Diagrammen und Screenshots, um durch die grafische Darstellung die Konzepte besser anschaulich zu machen.\\
  149. Abschliessend erfolgt der Rückblick auf das Projekt und der Autor bewertet die Erfahrungen, das Gelernte und die Resultate.
  150. \section{Hauptteil}
  151. \subsection{Aufgabestellung und Interpretation}
  152. \textit{\textbf{1a)} Implementieren Sie zunächst eine ausführbare (d.h. mit einer main()–Methode) Klasse Karten, welche die Karten des Kartenspiels erzeugen und grafisch (s. Abb. 1) auslegen kann.}
  153. \begin{figure}[H]
  154. \centering
  155. \includegraphics[width=.45\textwidth]{media/spielkarten.jpg}
  156. \caption{Spielkarten}
  157. \end{figure}
  158. Hier im Beispielbild wurde die Auslegung der Karten übereinanderliegend dargestellt, doch es wurde sich für eine nicht überlappende Darstellung der Karten entschieden, das die besser zu einem grafischen Programm passe aufgrund erhöhter Lesbarkeit und wesentlich geringerem Arbeitsaufwand.\\
  159. Es ist nicht klar gegeben, ob die ausführbare Klasse \texttt{Karten} mit \texttt{main()}-Methode als einzelnes Source File dastehen soll oder ob darin verwendete Module auch in anderen Source Files gespeichert werden können. Es wurde sich für diese Arbeit entschieden, das letztere zu wählen, um einen besser strukturierten Gesamtquellcode zu erreichen.\\
  160. \textit{\textbf{1b)} Für das Kartenspiel benötigen Sie auch eine Mischmaschine, welche die Karten mischen kann. Objekte der entsprechenden Klasse MischMaschine müssen in der Lage sein:
  161. \begin{enumerate}[label=\roman*.]
  162. \item Karten aufzunehmen,
  163. \item die enthaltenen Karten zu mischen,
  164. \item alle enthaltenen Karten zu durchlaufen.
  165. \end{enumerate}
  166. Sie lernen die Klasse \texttt{java.util.ArrayList} kennen und stellen dadurch fest, dass diese bereits die
  167. Anforderungen (i) und (iii) über die beiden Methoden \texttt{add()} und \texttt{Iterator()} erfüllt. Für die Realisierung der Klasse \texttt{MischMaschine} können Sie also grundsätzlich die Klasse \texttt{ArrayList} und das Konzept der Vererbung nutzen. Um die Anforderung (ii) zu implementieren, müssen Sie zusätzlich Ihre eigene Methode \texttt{mischen()} schreiben (s. die Methode \texttt{java.util.Collections.shuffle()} aus der Klasse \texttt{java.util.*}), die das Mischen tatsächlich realisiert, und zu Ihrer Klasse hinzufügen.
  168. Implementieren Sie auf dieser Weise die externe Klasse MischMaschine, die Objekte der Hauptklasse \texttt{Karten} aufnehmen, mischen und durchlaufen kann.}\\
  169. Dass Objekte der Klasse \texttt{MischMaschine} in der Lage sein sollen (i) - (iii) zu erfüllen ist verständlich, doch da jedoch die Klasse eine grafische Oberfläche starten soll, wird es als sinnvoller empfunden diese drei Punkte durch die Klasse resp. Datentyp-Klasse \texttt{KartenDeck} - welche wiederum Daten der Datentyp-Klasse \texttt{Karte} bearbeitet - zu realisieren. Dies wird hier nicht als Widerspruch zur Aufgabenstellung, sondern lediglich als Interpretation verstanden.\\
  170. \textit{\textbf{1c)}: Ändern Sie die Hauptklasse Karten so ab, dass sie alle erzeugten Karten des Kartenspiels an die Klasse MischMaschine übergibt. Die MischMaschine soll die Karten mischen und
  171. anschliessend sie an die Hauptklasse Karten in der gemischten Reihenfolge zurückgeben, wo sie schlussendlich auf den Bildschirm im grafischen Interface ausgelegt werden.}\\
  172. Hier macht es relativ wenig Sinn nach Ansicht des Autors dieser Arbeit, die Hauptklasse \texttt{Karten} direkt zu bearbeiten, um die im grafischen Interface abgebildeten Karten zu mischen. Denn solch eine Änderung sollte in der jeweiligen aus der Klasse \texttt{Karten} gecallten Klasse geschehen, im Falle der hier präsentierten Lösung ist das in der Klasse \texttt{MainWindow}.\\
  173. Auch dass die zur Mischung stehenden Karten an die Klasse \texttt{MischMaschine} abgegeben werden soll, erscheint auch nicht direkt sinnvoll. In dieser Lösung wird das Kartendeck im User Interface in einer Instanz der Klasse \texttt{KartenDeck} gespeichert und die Mischfunktion als Methode dieser Klasseninstanz einfach gecallt.
  174. \subsubsection{Bewertung}
  175. Vom Autor dieser Arbeit wird diese Aufgabe als doch recht sinnvoll angesehen. Einerseits ist das Handling eines Kartenspiels resp. eines Kartendecks ein recht passender Fall, wo man die Prinzipien der OOP-Konzepts (Objekt-Orientierten Programmierung) anwenden kann: So erschien es sinnvoll eine Klasse \texttt{Karte} zu schreiben um den Datentyp einer Karte als Objekt darzustellen inklusive Getter- und Settermethoden und passenden Attributen. Ein Kartendeck wäre dann eine Klasse welche eine \texttt{ArrayList} ist, welche Objekte der Klasse \texttt{Karte} aufnehmen, und passende Methoden zu deren Manipulation bieten (Karten hinzufügen, entfernen, mischen, etc.). Ein paar OOP-Konzepte wurden im Laufe des Unterrichts im Ergänzungsfach Informatik schon angeschnitten, weshalb es nach der Meinung des Autors auch schön ist, diese wiederverwenden zu können. \\
  176. Was auch im Unterricht behandelt wurde, sind simple grafische Interfaces mit der Flanagan-Bibliothek und der der \texttt{javax.swing}-Bibliothek. Nach der Erinnerung des Autors geschah dies in der Form von In- und Output Popup-Fenstern und Filepickern. Diese und die Swing-Bibliothek konnten auch wieder verwendet werden für die Erstellung der grafischen Oberfläche des Programmes.\\
  177. Auf die Schlussfolgerungen und Reflexionen auf die Arbeit als gesamtes wird noch später im letzten Punkt genauer eingegangen, doch die Arbeit erschien dem Autor ausgewogen bezüglich Machbarkeit, Aufwand, Themenbereichen (Karten Backend und GUI Frontend).
  178. \subsection{Lösungsansatz}
  179. \subsubsection{Übersicht}
  180. Zuerst hier eine kleine grafische Übersicht der verwendeten Klassen, ihrer kurzen Erklärung:
  181. \begin{figure}[H]
  182. \centering
  183. \includegraphics[width=\textwidth]{media/class-overview.png}
  184. \caption{Grobe Übersicht}
  185. \end{figure}
  186. Wie in der obigen Abbildung ersichtlich, wird als erstes die Hauptklasse \texttt{Karten} durch das \texttt{SwingUtilities.
  187. invokeLater()}-Environment ausgeführt, welches den einzigen Nutzen hat, das Grafikfenster zu starten, welches in der Klasse \texttt{MainWindow} geschrieben ist.\\
  188. Das Grafikfenster besteht aus verschiedenen Komponenten der AWT- und Swing-Library, doch darauf wird später im Text noch genauer eingegangen. Grob ist das Programm aber eingeteilt in ein Top-Panel, Bottom-Panel und eine Kartenansicht dazwischen.\\
  189. Um mit dem Kartendeck im Grafikfenster sinnvoll umgehen zu können, wurde ein Objekt resp. eine Klasse names \texttt{KartenDeck} erstellt, welche alle nötigen Methoden besitzt für die Manipulation seines Attributs, einer \texttt{ArrayList} des Typs \texttt{Karte}.
  190. \subsubsection{Grafisches Interface}
  191. Um ein Kartenspiel grafisch darzustellen wurde überlegt, es müsse ein Fenster her, das in der Lage ist alle 52 Karten des Decks darzustellen. Und das wie schon bei der Aufgabeninterpretation erwähnt, am besten ohne Überlappungen von Karten. Die hier sichtbare, ursprüngliche Bleistift-Skizze wurde fast eins zu eins umgesetzt und kaum umkonzipiert:
  192. \begin{figure}[H]
  193. \centering
  194. \includegraphics[width=.6\textwidth]{media/skizze.png}
  195. \caption{ursprüngliches Konzept}
  196. \end{figure}
  197. Um dieses Konzept umsetzen zu können, wurden verschiedene JComponents der SWING-Library eingesetzt welche folgendermassen organisiert sind in der Klasse \texttt{MainWindow}:
  198. \begin{figure}[H]
  199. \centering
  200. \includegraphics[width=.7\textwidth]{media/gui-overview.png}
  201. \caption{GUI Komponenten}
  202. \end{figure}
  203. \subsubsection{Datenklasse \texttt{Karte}}
  204. Um eine Sache in ein Datenobjekt zu übersetzen, muss man sich erst einmal überlegen, was für Eigenschaften eine Spielkarte so besitzt. Da wären zuerst die \textit{Kartenwerte} von \say{2} bis \say{Ass} und die sogenannten \textit{Kartenfarben} Pik, Karo, Herz und Kreuz. Mit diesen beiden Eigenschaften kann eine Karte \textit{eindeutig} definiert werden. Diese beiden Karteneigenschaften sollen dann dementsprechend Attribute der Klasse \texttt{Karte} sein.\\
  205. Da die Kartenfarbe nur vier feste, gleichwertige Werte annehmen kann, welche sich am besten durch ihren Namen referenzieren lassen, scheint hier die Nutzung eines \texttt{enum}s angebracht.\\
  206. Die Kartenwerte bestehen ja aus \say{2}, \say{3}, \say{4}, \say{5}, \say{6}, \say{7}, \say{8}, \say{9}, \say{10}, \say{Bauer}, \say{Dame}, \say{König}, \say{Ass}. Diese sind im Gegensatz zu den Karten nicht gleichwertig und lassen sich ganzzahligen Werten zuordnen. Für dieses Projekt sind diese wie folgt definiert:
  207. \begin{table}[H]
  208. \centering
  209. \begin{tabular}{|c|c|}
  210. \hline
  211. \textbf{Kartenwert} & \textbf{Integer Wert}\\
  212. \hline
  213. \say{1} & \texttt{1}\\
  214. \hline
  215. \say{2} & \texttt{2}\\
  216. \hline
  217. \say{3} & \texttt{3}\\
  218. \hline
  219. \say{4} & \texttt{4}\\
  220. \hline
  221. \say{5} & \texttt{5}\\
  222. \hline
  223. \say{6} & \texttt{6}\\
  224. \hline
  225. \say{7} & \texttt{7}\\
  226. \hline
  227. \end{tabular}
  228. \hspace{1cm}
  229. \begin{tabular}{|c|c|}
  230. \hline
  231. \textbf{Kartenwert} & \textbf{Integer Wert}\\
  232. \hline
  233. \say{8} & \texttt{8}\\
  234. \hline
  235. \say{9} & \texttt{9}\\
  236. \hline
  237. \say{10} & \texttt{10}\\
  238. \hline
  239. \say{Bauer} & \texttt{11}\\
  240. \hline
  241. \say{Dame} & \texttt{12}\\
  242. \hline
  243. \say{König} & \texttt{13}\\
  244. \hline
  245. \say{Ass} & \texttt{14}\\
  246. \hline
  247. \end{tabular}
  248. \end{table}
  249. Im Code wurden die Attribute der Klasse \texttt{Karte} wie folgt umgesetzt:
  250. \begin{listing}[H]
  251. \begin{minted}[bgcolor=bg]{java}
  252. public class Karte {
  253. public enum Farbe {
  254. KREUZ, PIK, KARO, HERZ;
  255. }
  256. private static final int MIN_WERT = 2;
  257. private static final int MAX_WERT = 14;
  258. private int wert;
  259. private Farbe farbe;
  260. \end{minted}
  261. \caption{Deklaration der Klasse \texttt{Karte} und deren Attributen}
  262. \label{lst:karte}
  263. \end{listing}
  264. \subsubsection{Datenklasse \texttt{KartenDeck}}
  265. Der Sinn dieser Klasse ist die Speicherung, Verwaltung und sonstige Manipulation seines einzigen Attributs, einer \texttt{ArrayList} bestehend aus Typen der Klasse \texttt{Karte}.
  266. \begin{listing}[H]
  267. \begin{minted}[bgcolor=bg]{java}
  268. public class KartenDeck {
  269. protected ArrayList<Karte> kartenListe = new ArrayList<Karte>();
  270. \end{minted}
  271. \caption{Deklaration der Klasse \texttt{KartenDeck} und seinem Attribut}
  272. \end{listing}
  273. Für die Verwaltung dieses Kartendecks bietet die Klasse einige nützliche, öffentliche Methoden wie zum anhängen und Löschen von Karten (\texttt{appendKarte(Karte karte)} und \texttt{removeKarte(Karte karte)}), dem generieren eines neuen Decks (\texttt{generateFullDeck()}), dem geordneten ausgeben aus der Kommandozeile (\texttt{print()}) und der Mischfunktion (\texttt{mischen()}). Auch zu erwähnen sind die Getter- und Settermethoden (\texttt{getDeck}, \texttt{getDeckSize()}, \texttt{setDeck()}).
  274. \subsection{Vorstellung und Erklärung}
  275. \subsubsection{Top Panel}
  276. \begin{figure}[H]
  277. \centering
  278. \includegraphics[width=.9\textwidth]{media/top-panel.jpg}
  279. \caption{Screenshot: Bottom Panel}
  280. \end{figure}
  281. Das Panel besteht aus einem \texttt{JComponent} des Typs \texttt{JPanel}. Beginnend von links nach rechts sieht man zuerst ein \texttt{JLabel} mit dem Titel der App, \say{Mischmaschine}. Zum JLabel wurde auch noch ein Shuffle-Logo angefügt, passend zur Funktion des Programmes - dem zufälligen Mischen.\\
  282. Als nächstes kommt der Misch-Button. Dieser sorgt dafür dass alle Karten - auch die welche sich auf einer anderen Seite befinden und somit nicht zu sehen sind - gemischt werden in dem die Funktion \texttt{KartenDeck.\\mischen()} aufgerufen wird. Dann wird der das Karten-Panel geupdated damit die Änderungen der Kartenreihenfolge sichtbar werden für den Nutzer.\\
  283. Der Reset-Button versetzt die App wieder in ihren Anfangszustand: Ein vollständiges, sortiertes Kartendeck wird angezeigt. Dazu wird das Kartendeck neu generiert mit der \texttt{KartenDeck.generateFullDeck()}-Methode, und schliesslich das Kartenpanel geupdated.
  284. \subsubsection{Bottom Panel}
  285. \begin{figure}[H]
  286. \centering
  287. \includegraphics[width=.9\textwidth]{media/bottom-panel.jpg}
  288. \caption{Screenshot: Bottom Panel}
  289. \end{figure}
  290. Das Bottom-Panel hat links und rechts zwei Arrow-Buttons - des Typs \texttt{JButton} - mit der man zwischen den verschiedenen Seiten des Kartenpanels wechseln kann. Doch bevor diese gewechselt werden, wird geprüft ob es überhaupt nötig ist: Denn wenn man schon auf Seite 3 von 3 ist und auch den Pfeil nach rechts klickt, macht es ja keinen Sinn zu berechnen was auf Seite 4 ist und auf diese nicht-existente Seite zu wechseln.\\
  291. Zwischen diesen beiden Knöpfen sind noch zwei \texttt{JLabel} welche die insgesamte Anzahl der Karten anzeigt und die aktuelle resp. letztmögliche Seitenanzahl der Kartenanzeige.
  292. \subsubsection{Card Panel}
  293. \begin{figure}[H]
  294. \centering
  295. \includegraphics[width=.9\textwidth]{media/card-panel.jpg}
  296. \caption{Screenshot: Card Panel}
  297. \end{figure}
  298. Das Card Panel ist für den Endnutzer eigentlich nichts mehr als ein Rasterlayout, in dem die Karten der aktuelle Seite angezeigt werden. Die Sortierung verfolgt immer diesem Schema: Zuerst wird die oberste Reihe von links nach rechts durchgegangen, dann wird eine Reihe runtergegangen und auch hier wird wieder von der linkesten bis zur rechtesten Spalte durchiteriert, und dass bis zur jeweils letzen Reihe der jeweiligen Seite. Wenn eine Seite weniger Karten als ihre maximal mögliche Kapazität anzeigen soll, wird der Rest des Platzes durch unsichtbare Platzhalter-Karten gefüllt.
  299. \subsubsection{Farbschema}
  300. Damit die Farben des User Interfaces einigermassen zusammenpassen vom Kontrast der Farbstärke usw. Anstatt einfach den Default-Look der verschiedenen \texttt{JComponent}s zu übernehmen, wurde sich entschieden ein recht bekanntes, beliebtes und etabliertes Farbschema zu nehmen namens \say{Nord}. Dieses wird oft verwendet um den Style seiner verschiedenen Desktopprogramme zu vereinheitlichen, oder um in seinem Terminalemulator und seinem Texteditor die gleichen Farben zu haben.\\
  301. So wurde den Knöpfen, Tool-Tips, Labels und Panel-Hintergründen eine der Farben aus dem Nord-Theme gegeben. Das einzige was nicht explizit an das Farbschema angepasst wurde, sind die Spielkarten. Diese passen nach der Meinung des Autors aber gut zum Rest des Programmes mit Nord-Theme. Mehr Informationen zu diesem Colorsheme sind erfassbar unter diesem Link: \url{https://www.nordtheme.com/}.
  302. \subsection{Abschluss / Rückblick}
  303. Dem Autor hat das Programmieren der App doch recht Spass gemacht. Er konnte eine neue GUI-Library kennenlernen, und sich in etwa drei bis vier Stunden in diese einarbeiten. Auch die Erstellung der Datenklasse empfand dieser als interessant.\\
  304. % cite uncle bob
  305. Es wurde versucht die Konzepte der OOP so gut wie möglich umzusetzen und sich an den Tipps und Tricks aus dem Buch \say{Clean Code} von Robert C. Martin zu orientieren und diese umzusetzen. Bekannt geworden ist Martin unter dem Spitznamen \say{Uncle Bob} für seine spannenden Präsentationen und seine \say{SOLID Principles} (Single Responsibility, Open/Closed Principle, Liskov Substitution, Dependency Inversion). SOLID wurde auch versucht zu befolgen, mit einer Ausnahme: Dependency Inversion. Denn dazu hätten noch viel mehr abstrakte Klassen resp. Interfaces erstellt werden müssen, z.B. hätte man anstatt die Jasskarten direkt in der Klasse \texttt{Karten} direkt zu implementieren daraus eine abstrakte Klasse machen müssen und eine Subclass für Jasskarten erstellen müssen mit einem Namen wie \texttt{JassKarten}.\\
  306. Mit dem Produkt - der MischMaschine mit .-jar-Executable - ist der Autor auch sehr zufrieden. Es kam ein wirklich sehr portables, intuitives und für ein JVM-Bytecode-Programm performantes Produkt mit einem grafisch ansprechenden Interface heraus. Natürlich hat das Programm in dieser Form keinen \say{Real-World-Use-Case}, aber man kann ja auch immer nicht alles haben.\\
  307. Man stellt sich natürlich auch die Frage, wie man das Programm erweitern könnte. Was naheliegend in den Sinn käme, wäre eine eine Möglichkeit Karten auszuwählen, um diese löschen zu können und ein Button, mit der man neue Karten der Kartenanzeige hinzufügen könnte. Ferner wäre es sinnvoll, das Programm so auszubauen, dass statt einer reinen mischbaren Kartenanzeige auch die Möglichkeit besteht, typische Kartenspiele wie z.B. Blackjack zu realisieren. Auch wäre es noch gut, selber andere Kartenformen als nur Jasskarten verwenden zu können, so beispielsweise Uno-Karten.\\
  308. Wie es auch sonst bei einigen Software-Projekten des Autors dieser Arbeit der Fall ist, ist auch dieses Programm online verfügbar auf GitHub. Der Source Code für die App und dieser Text sind einsehbar unter \url{https://github.com/noahvogt/kart/}.
  309. \end{document}