Lesson 9

CSS

Application design, its esthetics, are important for a final product. We want to gain desirable effect fast while keeping rules of writing a good code. zachowując zasady pisania dobrego kodu.

I. Preparing .fxml file


Task 0

View components are saved in .xml file (for JavaFX needs this file extension is .fxml but this is just a cosmetology).

Save it in your IDE catalog, where you have your source files (.java) with a name LoginWindow.fxml.



<?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="Welcome"
        GridPane.columnIndex="0"
        GridPane.columnSpan="2"
        GridPane.rowIndex="0" />

    <Label
        text="PJATK user name:"
        GridPane.columnIndex="0"
        GridPane.rowIndex="1" />

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

    <Label
        text="Passowrd:"
        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="Log in" />
    </HBox>

</GridPane>
Task 1

Execution of a JavaFX application is done without main method! It is there but it is delivered by extending Application class.

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 {
        // We are loading a soruce file which represents our window
        Parent root = FXMLLoader.load(getClass().getResource("LoginWindow.fxml"));

        // Let's say that Scene is similar to JFrame in Swing
        // Scene in JavaFX is responsible for contents
        // We pass contents (root), width (450) and height (275)
        Scene scene = new Scene(root, 450, 275);

        // Setting a title for a main window
        stage.setTitle("Logowanie do PJATK");
        // Setting a scene for a main window
        stage.setScene(scene);
        // When everything is done, we can show our window to a user
        stage.show();
    }

}

II. CSS files


Task 2

Currently, application is not good enough to show it to the world. To add formatting we are going to use rules found in Cascading Style Sheets (CSS). Kaskadowych Arkuszy Stylów (CSS).

Save the code below in "style.css" file, next execute an application.


/* This is a comment in CSS */

/* "For each Text element:" */
Text {
    /* key: value; */
    -fx-font: 25px Tahoma;   /* We are setting font Tahoma height 25px */
    -fx-fill: rgb(20,20,20); /* We are changing color to dark but not black */
    -fx-stroke: black;       /* Let a border be black */
    -fx-stroke-width: 2;     /* A thickness of a border is 2px */
}
Task 3

Add content to GridPane in fxml file, so it will show styling.


<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">
                
Task 4

Set style for Labels (Label).

III. About classes one more time


A class in CSS is a set of rules assigned to a name chosen by a programmer. We can assing our class to any element, omitting its type.



/* Dot before a name creates a class */
.Approval {

    -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;

}

A name of a class has to be assigned to a specific element.


<Button text="Logging in" styleClass="Approval" />

Hint: Class can have different rules for different components.


Button.Approval {
    /* Rules for Button with Approval class */
}
Text.Approval {
    /* Rules for Text with Approval class */
}
Task 5

Propose a styling for windows created on the previous lesson.