Lekcja 9

CSS

Wygląd aplikacji, jej estetyka, to ważna składowa produktu końcowego. Chcemy uzyskiwać potrzebne efekty szybko, jednocześnie zachowując zasady pisania dobrego kodu.

I. Przygotowanie pliku .fxml


Zadanie 0

Zapisz poniższą treść jako LoginWindow.fxml do nowego projektu do katalogu resources.


<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.PasswordField?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.text.Text?>

<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.Button?>
<GridPane alignment="center"
            hgap="10" vgap="10"
            maxHeight="-Infinity" maxWidth="-Infinity"
            minHeight="-Infinity" minWidth="-Infinity"
            prefHeight="275.0" prefWidth="450.0"
            xmlns="http://javafx.com/javafx/9"
            xmlns:fx="http://javafx.com/fxml/1">

    <padding>
        <Insets bottom="10" left="25" right="25" top="25" />
    </padding>
    
    <Text
        text="Witamy"
        GridPane.columnIndex="0"
        GridPane.columnSpan="2"
        GridPane.rowIndex="0" />

    <Label
        text="Nazwa użytkownika PJATK:"
        GridPane.columnIndex="0"
        GridPane.rowIndex="1" />

    <TextField
        GridPane.columnIndex="1"
        GridPane.rowIndex="1" />

    <Label
        text="Hasło:"
        GridPane.columnIndex="0"
        GridPane.rowIndex="2" />

    <PasswordField
        GridPane.columnIndex="1"
        GridPane.rowIndex="2" />

    <HBox spacing="10" alignment="bottom_right"
            GridPane.columnIndex="1" GridPane.rowIndex="4">
        <Button text="Logowanie" />
    </HBox>

</GridPane>
Zadanie 1

Stwórz aplikację, która pokaże widok przygotowany w poprzednim kroku.

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {

    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("/LoginWindow.fxml"));

        Scene scene = new Scene(root, 450, 275);

        stage.setTitle("Logowanie do PJATK");
        stage.setScene(scene);
        stage.show();
    }

}

II. Pliki CSS


Zadanie 2

Aktualnie aplikacja nie nadaje się na pokazanie światu. Aby nadać formatowanie będziemy korzystać z reguł zebranych w pliku Kaskadowych Arkuszy Stylów (CSS).

Zapisz poniższy kod do pliku "style.css", a następnie uruchom aplikację.


/* W css działają tylko komentarze zapisane w ten sposób */

/* "Dla każdego elementu Text:" */
Text {
    /* klucz: wartość; */
    -fx-font: 25px Tahoma;   /* Ustawiamy font Tahoma wysokości 25px */
    -fx-fill: rgb(20,20,20); /* Zmieniamy kolor na ciemny, ale nie czarny */
    -fx-stroke: black;       /* Niech obramowanie będzie czarne, */
    -fx-stroke-width: 2;     /* a grubość obramowania to 2px (pixele) */
}
Zadanie 3

Dodaj wartość "stylesheets" do GridPane w pliku fxml, aby ten zaczął wyświetlać stylowanie.


<GridPane alignment="center"
    hgap="10" vgap="10"
    maxHeight="-Infinity" maxWidth="-Infinity"
    minHeight="-Infinity" minWidth="-Infinity"
    prefHeight="275.0" prefWidth="450.0"
    xmlns="http://javafx.com/javafx/9"
    xmlns:fx="http://javafx.com/fxml/1"
    stylesheets="@style.css">
                
Zadanie 4

Nadaj styl etykietom formularza (Label).

III. O klasach raz jeszcze


Klasa w CSS to zbiór reguł o przypisanej arbitralnie nazwie. Możemy taką nazwę przypisać dowolnemu elementowi, pomijając jego typ.



/* Kropka przed nazwą tworzy klasę */
.Zatwierdzenie {

    -fx-background-color: 
        #000000,
        linear-gradient(#7ebcea, #2f4b8f),
        linear-gradient(#426ab7, #263e75),
        linear-gradient(#395cab, #223768);
    -fx-background-insets: 0,1,2,3;
    -fx-background-radius: 3,2,2,2;
    -fx-padding: 12 30 12 30;
    -fx-text-fill: white;
    -fx-font-size: 12px;

}

Nazwę klasy należy przypisać określonemu elementowi.


<Button text="Logowanie" styleClass="Zatwierdzenie" />

Wskazówka: Klasa może mieć inne reguły dla różnych elementów.


Button.Zatwierdzenie {
    /* Reguły dla przycisku z klasą zatwierdzenie */
}
Text.Zatwierdzenie {
    /* Reguły dla tekstu z klasą zatwierdzenie */
}
Zadanie 5

Zaproponuj stylowanie dla okna kalkulatora.