JavaFX Hilfe beim Design eines Quiz

[Astobix]

Hallo,

ich fange gerade erst an, JavaFX kennenzulernen, und habe mir als kleines Projekt vorgenommen, ein Quiz zu programmieren. Die Funktionen, die das Quiz beinhalten soll, sind dabei kein Problem; diese sind entweder schon implementiert oder können sehr einfach implementiert werden.

Wo ich aber Hilfe bei gebrauchen könnte, ist das GUI. Konkreter geht es mir hauptsächlich um die Antwortfelder für den Nutzer (Es handelt sich um ein Multiple Choice Quiz, der Nutzer soll also auf eine von 4 Antworten klicken).
Zunächst stellt sich hierbei die Frage, welcher Control dafür am besten geeignet ist. Derzeit benutzte ich Labels mit einem Rand, angeordnet in einem Gridlayout ( Screenshot ). Die Labels waren bis jetzt nur eine Übergangslösung - jetzt würde ich gerne eine optisch ansprechendere Variante haben die im besten Fall folgende Bedingungen erfüllt:

1. Die 4 Felder sind alle gleich groß (unabhängig vom Inhalt) und stehen im Verhältnis zur Fenstergröße
2. Der Text in den Feldern muss die möglichkeit eines Zeilenumbruchs haben
3. Die Felder sollen dem Nutzer ein Feedback geben, wenn er sie klickt (Ändern der Farbe o.Ä. , quasi wie ein Button)
4. Die Felder sollen optisch eben zu einem Quiz passen.

Mir geht es hier jetzt nicht um ein perfektes Design, aber eben etwas, wo der Nutzer keinen Augenkrebs von bekommt. Da ich mich noch kaum mit JavaFX auskenne und bei den vielen verschiedenen Controls etwas den Überblick verliere, würde ich mich über ein paar Tipps sehr freuen!

Bei Bedarf und/oder Interesse kann ich natürlich die zum Programm gehörige FXML Datei als Anhang hochladen.

Liebe Grüße,
Astobix

 

[dzim]

1) Warum Labels und keine Buttons? (Über ein beim Start spezifiziertes CSS kannst du die Buttons auch gern "flach" designen und du sagst ja selbst: "quasi wie ein Button" - dann solltest du den auch verwenden!)
2) Warum die Grösse abhängig vom Fenster machen? Das sieht, meiner Meinung nach, eher komisch beim verändern des Fensters aus.
3) Minimale Grösse festlegen (minWidth und minHeight) und nach dem Festlegen der Daten (ich meine damit den Inhalt der Buttons), kannst du schauen, welches der grösste ist und die anderen entsprechend anpassen.
4) Frage: Willst du in den Fragen auch vorwärts und Rückwärts navigieren? Wenn ja, würde ich wahrscheinlich ein FXML mit den Layout für die Antworten erstellen (GridPane mit der Frage und den vier Buttons) und diese dann im Controller der "Eltern-Oberfläche" erstellen und mit Daten befüllen. Der Controller der jeweiligen Frage muss ja nicht so wahnsinnig viel machen...

Ich würde an deiner Stelle mal folgendes machen: Erstelle die FXML und einfache Controller, sowie ein CSS, und zeig uns dann mal dann, was du hast. Dann können wir dir vielleicht ein paar mehr Ratschläge geben.

Zum Thema CSS:
Schaue dir die Referenz bei Oracle an: https://docs.oracle.com/javase/jp/8/javafx/api/javafx/scene/doc-files/cssref.html
Unter Client Technologies: Java Platform, Standard Edition (Java SE) 8 Release 8 schaue dir das Tutorial zu CSS an: Part IV: Skinning JavaFX Applications with CSS (Release 8)
Mir hat auch immer ein Blick in die Basis-CSS der Platform geholfen: Im Verzeichnis von deinem JDK nach der jfxrt.jar suchen und entpacken. Dort dann die modena.css suchen. Da lernt man eigentlich das meiste (Standart-Farbe der Style-Klasse, diverse Pseudo-Klassen (:hover, ...), u.s.w.u.s.f.).

 

[Astobix]

Erstmal vielen Dank für die Antwort!

Ich habe zunächst Label benutzt, da ich einfach erstmal die Quizfragen aus einer XML laden und ausgeben wollte, ohne mich dabei groß um das Design zu kümmern. Ich werde dann mal versuchen, diese mit Buttons zu ersetzten.
Vielleicht war die Idee mit der Größenabhängigkeit zum Fenster hin eher unklug, da hast Du Recht. Auf jeden Fall möchte ich, dass alle 4 Buttons unabhängig von der länge des darin enthaltenen Texts gleich groß sind. Das kann ich natürlich nach dem größtem Button ausrichten.

Deine Frage bei 4) verstehe ich nicht ganz. Mit vorwärts und rückwärts navigieren meinst du quasi das vor und zurück, wie man es zum Beispiel aus dem Browser kennt?
Ich navigiere natürlich indirekt vorwärts, indem ich die nächste Frage lade. Bin mir hier jedoch nicht genau klar was du meinst, würde mich über eine Erläuterung freuen

Ich soll also deiner Meinung nach ungefähr das hier tun:
1. Erstellen einer eigenen FXML, die ein GridPane mit Frage und Antworten enthält
2. Dabei sind die Antworten mit css gestylte Buttons
3. Diese im Programm als Kind eines übergeordnetem Layouts erzeugen

Hoffe das habe ich jetzt richtig verstanden Jedenfalls danke für die Hilfe, ich werde mir die Tutorials zu CSS mal angucken und einen eigenen Versuch morgen hochladen.