JavaFX von der IDE bis zur Auslieferung Teil 3: Die Oberfläche

 Beim letzten Teil haben wir die Applikation zum ersten Mal starten können. Das Fenster, das sich geöffnet hat sah aber noch ziemlich leer aus, das wollen wir nun ändern.

 

 

 

 

 

 

 

 

 

Dazu öffnen wir die Datei Main.fxml, welche sich im resources-Ordner befindet. Sie können nun auf 2 Wege Leben in den Dialog füllen. Wenn Sie sich auskennen, können Sie die XML-Dateien direkt ändern, andernfalls wechseln Sie in den Scene-Builder und können dort Ihre Schaltflächen, in die Oberfläche ziehen. Falls Sie den Scene-Builder noch nicht genutzt haben, müssen Sie diesen zuerst installieren 

 

 

 

 

 

 

 

 

Das Fenster des Scene-Builder ist in 3 Teile eingeteilt. Im linken Teil können Sie neue Komponenten per Drag und Drop auf das Formular ziehen, welche sich in der Mitte befindet. Im rechten Teil befinden sich die Eigenschaften der entsprechenden Komponenten.

 

 

 

 

 

 

 

 

 

 

 

Das Eigenschafts-Fenster ist wiederum in 3 Bereiche eingeteilt. Zum einen gibt es der Bereich in denen Sie Eigenschaften ändern können, die sich von Komponente zu Komponenten unterscheiden. Bei einem Textfeld ist das zum Beispiel der Prompt-Text, welcher angezeigt wird, wenn das Feld leer ist und als Beschreibung dient.

 

 

 

 

 

 

 

 

 

 

 

Der nächste Bereich ist für das Layout bestimmt, hier kann man zum Beispiel die Größe des Feldes ändern. Es gibt 3 Arten, die aktuelle Größe, die minimale und die maximale Größe. Außerdem kann man auch die Positionierung ändern, wie dies funktioniert unterscheidet sich von Container zu Container. In dem Fall eines Anker-Panels, welches standardmäßig als leere Oberfläche von JavaFX gewählt wird, muss man die Entfernung zur Seitenkante angeben. Wenn man Links 10 angibt heißt es, dass das Feld 10 Pixel von der linken Kante entfernt ist.

 

 

 

 

 

 

 

 

 

 

 

Im letzten Bereich kann man Informationen, welche den Code betreffen, angeben. Zum Beispiel kann man hier eine ID angeben, über die man im Code auf das Element zugreifen kann.

Nun aber in die Praxis. Ziehen Sie die Elemente in das Formular und ordnen Sie diese so an, damit sie ein Taschenrechner ergeben. Sie können auch, falls Sie es nicht hinbekommen in das GitHub-Repository schauen.

 

 

 

 

 

 

 

 

 

 

Falls irgendetwas nicht so geklappt haben sollte, wie Sie es gerne hätten, können Sie gerne im Github-Repository nachschauen oder über einen Kommentar fragen.

Fortsetzung folgt...