class: center, middle, first # Software-Entwicklung 2 ### JavaFX: FXML & CSS --- # Fragen? > Fragen zur letzten Vorlesung? --- # Themen * FXML * CSS * Hinzufügen von Styles * Selectors und Properties * Hinzufügen von Styles im Code --- # FXML - Einführung * XML-basierte GUI-Sprache * Angelehnt an HTML * Trennt Code und Oberfläche * Einfache Wartung * Bekannt aus anderen Sprachen/Frameworks --- # FXML-Projekt **Besteht aus** * Start-Klasse * Einrichten des Fensters * Laden der FXML-Datei * FXML-Datei (XML) * Beschreibung der Oberfläche * Controller-Klasse (Java) * Event-Handling --- # Startklasse ```java public void start(Stage primaryStage) throws Exception { Parent root = FXMLLoader.load(getClass() .getResource("PFAD ZUR XML-DATEI")); Scene scene = new Scene(root); primaryStage.setTitle("FXML Welcome"); primaryStage.setScene(scene); primaryStage.show(); } ``` --- # FXML-Datei * Enthält Layout-Beschreibungen in XML * Normalfall: Root-Node besitzt `fx:controller` Attribut * Vollqualifizierter Pfad zur Controller-Klasse * Root-Node muss Namespace definieren: `xmlns:fx="http://javafx.com/fxml/1"` * Jedes UI-Control-Node besitzt gleichnamiges Tag in FXML: ```java Button b = new Button(); b.setText("Hallo"); ``` ```xml
``` --- # FXML-Datei * Soll auf ein UI-Control im Code zugegriffen werden, so muss eine ID vergeben werden: ```xml
``` * Hinzufügen von CSS: z.B. am Root-Node: ```xml
``` --- # FXML-Datei * XML-Attribute heißen meist wie `set...()`-Methoden, ohne "`set`" * Hinzufügen von Event-Handlern: Einfügen eines Attributs notwendig `onEventName="#handlerName"` Beispiel: ```xml
``` * Dokumentation: https://docs.oracle.com/javase/8/javafx/api/javafx/fxml/doc-files/introduction_to_fxml.html --- # Controller-Klasse * Referenziert UI-Controls: `@FXML TextField tfCalc;` Der Attributname muss einer ID in der FXML-Datei entsprechen! * Implementiert Event-Handler: ```java @FXML public void inputNumber(ActionEvent event){ //... } ``` Methodenname wird z.B. in `onAction`-Attribut der FXML-Datei referenziert. --- class: center, middle # CSS --- # Hinzufügen eines Stylesheets * Muss der Scene hinzugefügt werden * Pfadangabe ab dem `resource`-Ordner ```java Scene scene = new Scene(root); scene.getStylesheets().add(getClass().getClassLoader().getResource("styles.css").toExternalForm()); ``` --- # Style-Definitionen * Funktioniert ähnlich wie im Web * Sämtliche Eigenschaften beginnen mit `-fx-` * Style-Eigenschaften sind an HTML angelehnt * Können sämtlichen Nodes hinzugefügt werden * Auch Layouts! * Austausch zur Laufzeit möglich --- # Selektoren ### Class selectors ```css .button .check-box .scroll-bar ``` Beispiele für nachfolgende Klassen: ```css .check-box .label .check-box .box .radio-button .dot ``` --- # Selektoren ### ID selectors ```css #my-button #shaded-hbox ``` ### Pseudo-Klassen ```css .radio-button:focused .radio-button:hover .scroll-bar:vertical ``` --- # CSS Properties Beispiele: ```css .button{ -fx-background-color: #333333; -fx-text-fill: white; -fx-alignment: CENTER; } ``` Dokumentation: https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html --- # Root-Klasse * Wurzel-CSS-Klasse * Verhält sich ähnlich wenn `` Styles hinzugefügt werden * Definiert Styles, die von Sub-Elementen * Können aber überschrieben werden --- # Hinzufügen von Styles (Code) * Jedes UI-Control besitzt Default-Style, der überschrieben werden kann: `.button{...}` * Hinzufügen einer Klasse: ```java Button buttonAccept = new Button("Accept"); buttonAccept.getStyleClass().add("buttonGreen"); ``` * Setzen einer ID: ```java Button buttonFont = new Button("Font"); buttonFont.setId("font-button"); ``` --- class: center, middle # Fragen? [jfxtut01]: https://docs.oracle.com/javase/8/javafx/get-started-tutorial/jfx-architecture.htm [jfxtut02]: https://docs.oracle.com/javafx/2/get_started/hello_world.htm [jfxtut03]: https://docs.oracle.com/javase/8/javafx/user-interface-tutorial/slider.htm