شرح الكلاس Separator
الكلاس Separator يستخدم لإضافة خط فاصل ( Separator ) بين الأشياء التي نضيفها في واجهة المستخدم.
هذا الخط يمكن إظهاره بشكل أفقي أو عامودي, و يمكن تعديل تصميمه و خصائص ظهوره بالشكل الذي تريده.
إفتراضياً, عند إضافة Separator في واجهة المستخدم فإنه يظهر بشكل أفقي و لونه رمادي.
بناء الكلاس Separator
public class Separator extends Control
كونستركتورات الكلاس Separator
الجدول التالي يحتوي على كونستركتورات الكلاس Separator.
| الكونستركتور مع تعريفه | |
|---|---|
public Separator()
ينشئ كائن من الكلاس Separator يمثل خط أفقي. |
|
public Separator(Orientation orientation)
ينشئ كائن من الكلاس Separator يمثل خط مع تحديد ما إذا كان أفقي أو عامودي.مكان الباراميتر orientation نضع إحدى الثوابت الموجودة في الكلاس Orientation و التي تحدد طريقة ظهوره.الثوابت التي يسمح باستخدامها هي:
إفتراضياً, الـ Separator يستخدم الثابت Orientation.HORIZONTAL. |
|
دوال الكلاس Separator
الجدول التالي يحتوي على دوال الكلاس Separator الأكثر إستخداماً.
| الدالة مع تعريفها | |
|---|---|
public final void setOrientation(Orientation orientation)
تستخدم لتحديد ما إذا كان كائن الـ Separator الذي قام بإستدعائها سيظهر بشكل أفقي أو عامودي.مكان الباراميتر orientation نضع إحدى الثوابت الموجودة في الكلاس Orientation و التي تحدد طريقة ظهوره.الثوابت التي يسمح باستخدامها هي:
|
|
public final void setRotate(double degree)
تستخدم لإدارة نص كائن الـ Separator الذي قام بإستدعائها.مكان الباراميتر degree نضع رقم يمثل درجة الدوران. |
|
public final void setTranslateX(double value)
تستخدم لتحديد مكان كائن الـ Separator الذي قام باستدعائها أفقياً.مكان الباراميتر value نضع رقم يمثل كم Pixel سيتم إزاحته من اليسار إلى اليمين. |
|
public final void setTranslateY(double value)
تستخدم لتحديد مكان كائن الـ Separator الذي قام باستدعائها عامودياً.مكان الباراميتر value نضع رقم يمثل كم Pixel سيتم إزاحته من الأعلى إلى الأسفل. |
|
public void setPrefHeight(double prefHeight)
تستخدم لتحديد طول كائن الـ Separator الذي قام باستدعائها.مكان الباراميتر prefHeight نضع رقم يمثل طول الـ Separator بالـ Pixel. |
|
public void setPrefWidth(double prefWidth)
تستخدم لتحديد عرض كائن الـ Separator الذي قام باستدعائها.مكان الباراميتر prefWidth نضع رقم يمثل عرض الـ Separator بالـ Pixel. |
|
public void setPrefSize(double prefWidth, double prefHeight)
تستخدم لتحديد حجم كائن الـ Separator الذي قام باستدعائها.
|
|
public final void setScaleX(double value)
تستخدم لتمطيط حجم كائن الـ Separator الذي قام باستدعائها بشكل أفقي.مكان الباراميتر value نضع رقم يمثل كم مرة سيتم مضاعفة حجمه أفقياً. |
|
public final void setScaleY(double value)
تستخدم لتمطيط حجم كائن الـ Separator الذي قام باستدعائها بشكل عامودي.مكان الباراميتر value نضع رقم يمثل كم مرة سيتم مضاعفة حجمه عامودياً. |
|
public final void setStyle(String value)
تستخدم لتعديل تصميم كائن الـ Separator الذي قام بإستدعائها.مكان الباراميتر value يمكنك تمرير إسم و قيمة أي خاصية تريد تعديلها في كائن الـ Separator بأسلوب لغة CSS لإظهاره بالشكل الذي تريده. |
|
أمثلة شاملة في الكلاس Separator
طريقة إنشاء كائن من الكلاس Separator
المثال التالي يعلمك طريقة إنشاء كائن من الكلاس Separator يظهر بشكل أفقي و إضافته في النافذة.
مثال
import javafx.application.Application;
import javafx.collections.ObservableList;
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 = new Separator();
// في النافذة seperator هنا قمنا بتحديد مكان ظهور الكائن
separator.setTranslateX(100);
separator.setTranslateY(124);
// هنا قمنا بتحديد عرض الخط
separator.setPrefWidth(200);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن seperator هنا قمنا بإضافة الكائن
root.getChildren().add(separator);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX Separator");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة إنشاء Separator عامودي و إضافته في النافذة
المثال التالي يعلمك طريقة إنشاء Separator عامودي و إضافته في النافذة.
مثال
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 = new Separator(Orientation.VERTICAL);
// في النافذة seperator هنا قمنا بتحديد مكان ظهور الكائن
separator.setTranslateX(200);
separator.setTranslateY(50);
// هنا قمنا بتحديد طول الخط
separator.setPrefHeight(150);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن seperator هنا قمنا بإضافة الكائن
root.getChildren().add(separator);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX Separator");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة تغيير نوع و حجم و لون خط الـ Separator
المثال التالي يعلمك طريقة تغيير نوع و حجم و لون خط الـ Separator.
مثال
/* بشكل إفتراضي لنجعل لونه أزرق و سمكه يساوي 1 بيكسل Separator الذي يستخدمه الكلاس line هنا قمنا بتعديل كلاس التصميم
يضاف فيها ليصبح لونه أزرق و سمكه يساوي 1 بيكسل Separator يتم ربطها بهذا الملف سيتم تعديل خصائص كل Scene إذاً أي
*/
.separator .line {
-fx-border-color: cadetblue;
-fx-border-width: 2;
}
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 و الذي بدوره سيضيفهما أيضاً في الكائن list في الكائن 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);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
كيف يمكن الإستفادة من الكلاس Separator لتحسين التصميم
المثال التالي يعلمك كيف يمكن الإستفادة من الكلاس 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);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
