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.
Lesson 9
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.
Save it in your resource catalog with a name LoginWindow.fxml.
<?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="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>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 {
Parent root = FXMLLoader.load(getClass().getResource("/LoginWindow.fxml"));
Scene scene = new Scene(root, 450, 275);
stage.setTitle("PJAIT Login");
stage.setScene(scene);
stage.show();
}
}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).
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 */
}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">
Set style for Labels (Label).
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 */
}Propose a styling for windows created on the previous lesson.