JavaFXتحسين تصميم واجهة المستخدم باستخدام الكلاس Separator

/* بشكل إفتراضي لنجعل لونه أزرق و سمكه يساوي 1 بيكسل Separator الذي يستخدمه الكلاس line هنا قمنا بتعديل كلاس التصميم
   يضاف فيها ليصبح لونه أزرق و سمكه يساوي 1 بيكسل Separator يتم ربطها بهذا الملف سيتم تعديل خصائص كل Scene إذاً أي
*/
.separator .line {
    -fx-border-color: cadetblue;
    -fx-border-width: 1;    
}

import javafx.application.Application;
import javafx.geometry.Orientation;
import javafx.geometry.Pos;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Separator;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.stage.Stage;
 
public class Main extends Application {
 
    @Override
    public void start(Stage stage) {
        
        // تمثل الصور الثلاث التي سنضعها بجانب درجات الحرارة Image هنا قمنا بإنشاء 3 كائنات من الكلاس
        Image image_1 = new Image(getClass().getResourceAsStream("/images/status-weather-clear.png"));
        Image image_2 = new Image(getClass().getResourceAsStream("/images/status-weather-clouds.png"));
        Image image_3 = new Image(getClass().getResourceAsStream("/images/status-weather-showers-day.png"));
         
        // هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في النافذة
        Label label_title = new Label("Weather Forecast");
        Label label_mon = new Label("Monday");
        Label label_tue = new Label("Tuesday");
        Label label_wed = new Label("Wednesday");
        Label label_mon_temp = new Label("34", new ImageView(image_1));
        Label label_tue_temp = new Label("28", new ImageView(image_2));
        Label label_wed_temp = new Label("22", new ImageView(image_3));
        Separator horizontal_separator = new Separator(Orientation.HORIZONTAL);
        Separator vertical_separator_1 = new Separator(Orientation.VERTICAL);
        Separator vertical_separator_2 = new Separator(Orientation.VERTICAL);
        
        // هنا قمنا بتحديد مكان ظهور الأشياء التي سنضيفها في النافذة
        label_title.setTranslateX(50);
        label_title.setTranslateY(45);
        label_mon.setTranslateX(50);
        label_mon.setTranslateY(85);
        label_tue.setTranslateX(150);
        label_tue.setTranslateY(85);
        label_wed.setTranslateX(250);
        label_wed.setTranslateY(85);
        label_mon_temp.setTranslateX(50);
        label_mon_temp.setTranslateY(110);
        label_tue_temp.setTranslateX(150);
        label_tue_temp.setTranslateY(110);
        label_wed_temp.setTranslateX(250);
        label_wed_temp.setTranslateY(110);
        horizontal_separator.setTranslateX(50);
        horizontal_separator.setTranslateY(80);
        vertical_separator_1.setTranslateX(150);
        vertical_separator_1.setTranslateY(80);
        vertical_separator_2.setTranslateX(250);
        vertical_separator_2.setTranslateY(80);
        
        // هنا قمنا بتحديد حجم الأشياء التي سنضيفها في النافذة
        label_title.setPrefSize(300, 30);
        label_mon.setPrefSize(100, 30);
        label_tue.setPrefSize(100, 30);
        label_wed.setPrefSize(100, 30);
        label_mon_temp.setPrefSize(100, 30);
        label_tue_temp.setPrefSize(100, 30);
        label_wed_temp.setPrefSize(100, 30);
        horizontal_separator.setPrefWidth(300);
        vertical_separator_1.setPrefHeight(100);
        vertical_separator_2.setPrefHeight(100);
        
        // هنا قمنا بمضاعفة حجم خط جميع الأشياء التي سنضيفها في النافذة
        label_title.setStyle("-fx-font-weight: bold;");
        label_mon.setStyle("-fx-font-weight: bold;");
        label_tue.setStyle("-fx-font-weight: bold;");
        label_wed.setStyle("-fx-font-weight: bold;");
        label_mon_temp.setStyle("-fx-font-weight: bold;");
        label_tue_temp.setStyle("-fx-font-weight: bold;");
        label_wed_temp.setStyle("-fx-font-weight: bold;");

        // هنا جعلنا كل النصوص التي سنضيفها في النافذة تظهر في وسط المساحة التي خصصناها لها حتى لا تظهر ملاصقة للخطوط
        label_title.setAlignment(Pos.CENTER);
        label_mon.setAlignment(Pos.CENTER);
        label_tue.setAlignment(Pos.CENTER);
        label_wed.setAlignment(Pos.CENTER);
        label_mon_temp.setAlignment(Pos.CENTER);
        label_tue_temp.setAlignment(Pos.CENTER);
        label_wed_temp.setAlignment(Pos.CENTER);
        
        // في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
        Group root = new Group();
 
        // root هنا قمنا بإضافة جميع الأشياء في الكائن
        root.getChildren().add(horizontal_separator);
        root.getChildren().add(vertical_separator_1);
        root.getChildren().add(vertical_separator_2);
        root.getChildren().add(label_title);
        root.getChildren().add(label_mon);
        root.getChildren().add(label_tue);
        root.getChildren().add(label_wed);
        root.getChildren().add(label_mon_temp);
        root.getChildren().add(label_tue_temp);
        root.getChildren().add(label_wed_temp);
 
        // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
        Scene scene = new Scene(root, 400, 250);
        
        // لتطبيق الخصائص التي يحتويها على الأشياء الموجودة فيه scene بالكائن my-style.css هنا قمنا بربط ملف التصميم
        scene.getStylesheets().add("css/my-style.css");
 
        // هنا وضعنا عنوان للنافذة
        stage.setTitle("JavaFX Separator");
 
        // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
        stage.setScene(scene);
 
        // هنا قمنا بإظهار النافذة
        stage.show();

    }
 
    // هنا قمنا بتشغيل التطبيق
    public static void main(String[] args) {
        launch(args);
    }
 
}