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.
Lekcja 9
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.
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>
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();
}
}
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) */
}
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">
Nadaj styl etykietom formularza (Label).
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 */
}
Zaproponuj stylowanie dla okna kalkulatora.