تخصيص حجم ولون الفاصل (Separator) في JavaFX

يوضح هذا المقال كيفية تعديل حجم ولون مكون الفاصل (Separator) في تطبيقات JavaFX من خلال استخدام ملفات التنسيق (CSS).

---

يوضح هذا المثال كيفية تعديل خصائص الحجم واللون لمكون الفاصل (Separator) ضمن تطبيقات JavaFX. يتطلب هذا الإجراء إنشاء مجلد باسم css، ومن ثم ملف تنسيق my-style.css بداخله لوضع شيفرة التنسيق كما هو موضح في هيكل المشروع التالي:

محتوى ملف my-style.css:

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

محتوى ملف Main.java:

import javafx.application.Application;
import javafx.geometry.Orientation;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Separator;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage stage) {
        // يمثل الخط العامودي الذي نريد إضافته في النافذة Seperator هنا قمنا بإنشاء كائن من الكلاس
        Separator separator_1 = new Separator(Orientation.VERTICAL);

        // يمثل الخط العامودي الذي نريد إضافته في النافذة Seperator هنا قمنا بإنشاء كائن من الكلاس
        Separator separator_2 = new Separator(Orientation.HORIZONTAL);

        // في النافذة seperator_1 هنا قمنا بتحديد مكان ظهور الكائن
        separator_1.setTranslateX(50);
        separator_1.setTranslateY(50);

        // في النافذة seperator هنا قمنا بتحديد مكان ظهور الكائن
        separator_2.setTranslateX(100);
        separator_2.setTranslateY(125);

        // separator_1 هنا قمنا بتحديد طول الخط
        separator_1.setPrefHeight(150);

        // separator_2 هنا عرض بتحديد طول الخط
        separator_2.setPrefWidth(200);

        // في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
        Group root = new Group();

        // group و الذي بدوره سيضيفهما أيضاً في الكائن في الكائن separator_2 و seperator_1 هنا قمنا بإضافة الكائنين
        root.getChildren().add(separator_1);
        root.getChildren().add(separator_2);

        // فيها و تحديد حجمها 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);
    }
}

عند تشغيل التطبيق، ستظهر النافذة التالية: