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

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;
}
/* بشكل إفتراضي لنجعل لونه أزرق و سمكه يساوي 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);
}
}
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

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة