Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing

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

المثال التالي يعلمك كيف يمكن الإستفادة من الكلاس Separator لتحسين التصميم.

ملاحظة: عليك إنشاء مجلد إسمه css. ثم إنشاء ملف إسمه my-style.css بداخله لتضع فيه كود التصميم.
و عليك أيضاً إنشاء مجلد إسمه images لتضع الصور بداخله كما في الصورة التالية.

⇓ تحميل مجلد الصور


مثال

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

Main.java
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);
    }
 
}

ستظهر لك النافذة التالية عند التشغيل.

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