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