شرح الكلاس RadioButton
الكلاس RadioButton يستخدم لإضافة (Radio Button) في واجهة المستخدم.
الـ RadioButton يستخدم في العادة عند وضع عدة خيارات ( Options ) للمستخدم و تجبره على إختيار واحدة منهم.
لوضع مجموعة من الـ RadioButton و جعل RadioButton واحد يمكن إختياره في نفس الوقت, عليك وضعهم ضمن مجموعة واحدة.
لا تقلق ستفهم المقصود لاحقاً من الأمثلة.
بناء الكلاس RadioButton
public class RadioButton extends ToggleButton
كونستركتورات الكلاس RadioButton في جافاfx
الجدول التالي يحتوي على كونستركتورات الكلاس RadioButton.
| الكونستركتور مع تعريفه | |
|---|---|
public RadioButton()
ينشئ كائن من الكلاس RadioButton يمثل Radio Button لا يوجد بجانبه نص. |
|
public RadioButton(String text)
ينشئ كائن من الكلاس RadioButton يمثل Radio Button بجانبه نص.مكان الباراميتر text نمرر النص الذي نريد وضعه بجانب الـ Radio Button. |
|
دوال الكلاس RadioButton في جافاfx
الجدول التالي يحتوي على دوال الكلاس RadioButton الأكثر إستخداماً.
| الدالة مع تعريفها | |
|---|---|
public String getText()
ترجع نص كائن الـ RadioButton الذي قام بإستدعائها كنص. |
|
public void setText(String text)
تستخدم لتبديل نص كائن الـ RadioButton الذي قام بإستدعائها.مكان الباراميتر text نضع النص الجديد. |
|
public final void setTextFill(Paint value)
تستخدم لتحديد لون نص كائن الـ RadioButton الذي قام بإستدعائها.مكان الباراميتر value نضع كائن من إحدى الكلاسات التي ترث من الكلاس Paint و التي يمكن إستخدامها لتحديد درجة اللون. |
|
public final void setBackground(Background value)
تستخدم لوضع لون أو صورة كخلفية لكائن الـ RadioButton الذي قام بإستدعائها.مكان الباراميتر value نضع كائن من الكلاس Background يشير إلى درجة اللون أو الصورة التي سيتم وضعها كخلفية. |
|
public final void setFont(Font newFont)
تستخدم لتحديد حجم و نوع خط كائن الـ RadioButton الذي قام بإستدعائها.مكان الباراميتر newFont نضع كائن من الكلاس Font يمثل خصائص الخط الجديد. |
|
public final void setTranslateX(double value)
تستخدم لتحديد مكان الـ RadioButton الذي قام باستدعائها أفقياً.مكان الباراميتر value نضع رقم يمثل كم Pixel سيتم إزاحته من اليسار إلى اليمين. |
|
public final void setTranslateY(double value)
تستخدم لتحديد مكان الـ RadioButton الذي قام باستدعائها عامودياً.مكان الباراميتر value نضع رقم يمثل كم Pixel سيتم إزاحته من الأعلى إلى الأسفل. |
|
public void setPrefSize(double prefWidth, double prefHeight)
تستخدم لتحديد حجم الـ RadioButton الذي قام باستدعائها.
|
|
public final void setContentDisplay(ContentDisplay value)
تستخدم لتحديد مكان ظهور الأيقونة التي تم إضافتها لكائن الـ RadioButton الذي قام باستدعائها.مكان الباراميتر value نضع إحدى ثوابت الكلاس ContentDisplay:
|
|
public final void setDisable(boolean value)
تستخدم لجعل نص كائن الـ RadioButton الذي قام باستدعائها يبدو غير مفعّل, أي يصبح لونه باهتاً و غير قابل للنقر عليه.مكان الباراميتر value نضع القيمة true لجعله غير مفعّل. |
|
public final void setOnAction(EventHandler<ActionEvent> e)
تستخدم لتنفيذ أوامر معينة عند النقر على كائن الـ RadioButton الذي قام بإستدعائها. |
|
public final boolean isSelected()
تستخدم لمعرفة إذا تم إختيار كائن الـ RadioButton الذي قام بإستدعائها, أي كان ظاهراً أنه منقور عليه أم لا.ترجع true إذا كان يبدو أنه منقور عليه و ترجع false إذا كان لا يبدو كذلك. |
|
public final void setSelected(boolean value)
تستخدم لإختيار أو إلغاء إختيار الكائن الـ RadioButton الذي قام بإستدعائها.مكان الباراميتر value نضع true إذا أردنا جعله مختاراً, و نضع false إذا لم نرد جعله كذلك. |
|
public final void setStyle(String value)
تستخدم لتعديل تصميم الـ RadioButton الذي قام بإستدعائها.مكان الباراميتر value يمكنك تمرير إسم و قيمة أي خاصية تريد تعديلها في كائن الـ RadioButton بأسلوب لغة CSS لإظهاره بالشكل الذي تريده. |
|
أمثلة شاملة في الكلاس RadioButton
طريقة إنشاء كائن من الكلاس RadioButton و إضافته في النافذة
المثال التالي يعلمك طريقة إنشاء كائن من الكلاس RadioButton و إضافته في النافذة.
مثال طريقة إنشاء كائن من الكلاس RadioButton و إضافته في النافذة
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.RadioButton;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثل الزر الذي نريد إضافته في النافذة RadioButton هنا قمنا بإنشاء كائن من الكلاس
RadioButton radioButton = new RadioButton("RadioButton");
// في النافذة radioButton هنا قمنا بتحديد مكان ظهور الكائن
radioButton.setTranslateX(155);
radioButton.setTranslateY(105);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن radioButton هنا قمنا بإضافة الكائن
root.getChildren().add(radioButton);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX RadioButton");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة تغيير نوع و حجم و لون خط الـ RadioButton
المثال التالي يعلمك طريقة تغيير نوع و حجم و لون خط الـ RadioButton.
مثال طريقة تغيير نوع و حجم و لون خط الـ RadioButton.
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.RadioButton;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثل الزر الذي نريد إضافته في النافذة RadioButton هنا قمنا بإنشاء كائن من الكلاس
RadioButton radioButton = new RadioButton("RadioButton");
// في النافذة radioButton هنا قمنا بتحديد مكان ظهور الكائن
radioButton.setTranslateX(140);
radioButton.setTranslateY(100);
// radioButton هنا قمنا بتغيير نوع و حجم خط الكائن
radioButton.setFont(new Font("Arial", 18));
// radioButton هنا قمنا بتغيير لون خط الكائن
radioButton.setTextFill(Color.RED);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن radioButton هنا قمنا بإضافة الكائن
root.getChildren().add(radioButton);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX RadioButton");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة جعل المستخدم قادر على إختيار RadioButton واحد ضمن مجموعة من الـ RadioButton
المثال التالي يعلمك طريقة جعل المستخدم قادر على إختيار RadioButton واحد ضمن مجموعة من الـ RadioButton.
مثال طريقة جعل المستخدم قادر على إختيار RadioButton واحد ضمن مجموعة من الـ RadioButton.
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.RadioButton;
import javafx.scene.control.ToggleGroup;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في النافذة
Label label = new Label("Select your language");
RadioButton rb1 = new RadioButton("Arabic");
RadioButton rb2 = new RadioButton("English");
RadioButton rb3 = new RadioButton("French");
// هنا قمنا بتحديد مكان ظهور جميع الأشياء التي نريد إضافتها في النافذة
label.setTranslateX(40);
label.setTranslateY(50);
rb1.setTranslateX(40);
rb1.setTranslateY(80);
rb2.setTranslateX(40);
rb2.setTranslateY(110);
rb3.setTranslateX(40);
rb3.setTranslateY(140);
// و هكذا أصبح يمكن إختيار واحد منهم في كل مرة rb3 و rb2 و rb1 و ربطنا فيه الكائناتToggleGroup هنا قمنا بإنشاء كائن من الكلاس
ToggleGroup group = new ToggleGroup();
rb1.setToggleGroup(group);
rb2.setToggleGroup(group);
rb3.setToggleGroup(group);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root هنا قمنا بإضافة جميع الأشياء في الكائن
root.getChildren().add(label);
root.getChildren().add(rb1);
root.getChildren().add(rb2);
root.getChildren().add(rb3);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 220);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX RadioButton");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة معرفة ال RadioButton الذي تم اختياره عند النقر على button
مثال
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.RadioButton;
import javafx.scene.control.ToggleGroup;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في النافذة
Label label = new Label("Select your language");
RadioButton rb1 = new RadioButton("Arabic");
RadioButton rb2 = new RadioButton("English");
RadioButton rb3 = new RadioButton("French");
Button button = new Button("Get selected language");
Label resultLabel = new Label();
// هنا قمنا بتحديد مكان ظهور جميع الأشياء التي نريد إضافتها في النافذة
label.setTranslateX(40);
label.setTranslateY(20);
rb1.setTranslateX(40);
rb1.setTranslateY(50);
rb2.setTranslateX(40);
rb2.setTranslateY(80);
rb3.setTranslateX(40);
rb3.setTranslateY(110);
button.setTranslateX(40);
button.setTranslateY(150);
resultLabel.setTranslateX(40);
resultLabel.setTranslateY(185);
// و هكذا أصبح يمكن إختيار واحد منهم في كل مرة rb3 و rb2 و rb1 و ربطنا فيه الكائنات ToggleGroup هنا قمنا بإنشاء كائن من الكلاس
ToggleGroup group = new ToggleGroup();
rb1.setToggleGroup(group);
rb2.setToggleGroup(group);
rb3.setToggleGroup(group);
// يتم النقر عليه و التي يمكننا من خلالها معرفة آخر واحد تم إختياره RadioButton هنا قمنا بتحديد المعلومة التي سيرسلها كل
rb1.setUserData("Arabic");
rb2.setUserData("English");
rb3.setUserData("French");
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root هنا قمنا بإضافة جميع الأشياء في الكائن
root.getChildren().add(label);
root.getChildren().add(rb1);
root.getChildren().add(rb2);
root.getChildren().add(rb3);
root.getChildren().add(button);
root.getChildren().add(resultLabel);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 220);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX RadioButton");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
// button هنا قمنا بتحديد ماذا سيحدث عند النقر على الكائن
button.setOnAction((ActionEvent e) -> {
// resultLabel الذي تم إختياره كنص للكائن RadioButton عند النقر على الزر سيتم وضع نص الـ
resultLabel.setText(group.getSelectedToggle().getUserData().toString());
});
// مختاراً بشكل إفتراضي عند تشغيل التطبيق rb1 هنا جعلنا الـ
rb1.setSelected(true);
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة تنفيذ أوامر عند النقر على الـ RadioButton
المثال التالي يعلمك طريقة تنفيذ أوامر عند النقر على الـ RadioButton.
فعلياً, ستتعلم طريقة عرض صورة عند النقر على الـ RadioButton.
ملاحظة: عليك إنشاء مجلد و وضع الصور فيه كما في الصورة التالية.
الصورة توضح أننا أضفنا مجلد إسمه images و وضعنا فيه ثلاث صور إسمهم bird.png و cat.png و dog.png.
مثال طريقة تنفيذ أوامر عند النقر على الـ RadioButton.
import javafx.application.Application;
import javafx.beans.value.ObservableValue;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.RadioButton;
import javafx.scene.control.Toggle;
import javafx.scene.control.ToggleGroup;
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) {
// هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في النافذة
RadioButton rb1 = new RadioButton("Cat");
RadioButton rb2 = new RadioButton("Dog");
RadioButton rb3 = new RadioButton("Bird");
ImageView imageView = new ImageView();
// هنا قمنا بتحديد مكان ظهور جميع الأشياء التي نريد إضافتها في النافذة
rb1.setTranslateX(40);
rb1.setTranslateY(50);
rb2.setTranslateX(40);
rb2.setTranslateY(90);
rb3.setTranslateX(40);
rb3.setTranslateY(130);
imageView.setTranslateX(130);
imageView.setTranslateY(30);
// و هكذا أصبح يمكن إختيار واحد منهم في كل مرة rb3 و rb2 و rb1 و ربطنا فيه الكائنات ToggleGroup هنا قمنا بإنشاء كائن من الكلاس
ToggleGroup group = new ToggleGroup();
rb1.setToggleGroup(group);
rb2.setToggleGroup(group);
rb3.setToggleGroup(group);
// يتم النقر عليه RadioButton هنا قمنا بتحديد المعلومة التي سيرسلها كل
// فعلياً جعلنا كل واحد منهم يرسل إسم الصورة التي يجب أن يتم عرضها
rb1.setUserData("/images/cat.png");
rb2.setUserData("/images/dog.png");
rb3.setUserData("/images/bird.png");
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root هنا قمنا بإضافة جميع الأشياء في الكائن
root.getChildren().add(rb1);
root.getChildren().add(rb2);
root.getChildren().add(rb3);
root.getChildren().add(imageView);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 300, 200);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX RadioButton");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
// group تابع للمجموعة RadioButton هنا قمنا بتحديد ماذا سيحدث عند النقر على أي
group.selectedToggleProperty().addListener((ObservableValue<? extends Toggle> ov, Toggle toggle, Toggle new_toggle) -> {
// RadioButton مختار سيتم عرض صورة بناءاً على الرابط الذي تم إرساله من قبل الـ RadioButton هنا قلنا أنه إذا كان يوجد أي
if(group.getSelectedToggle() != null)
imageView.setImage(new Image(getClass().getResourceAsStream(group.getSelectedToggle().getUserData().toString())));
});
// مختاراً بشكل إفتراضي حتى يتم إظهار صورة القطة عند تشغيل التطبيق rb1 هنا جعلنا الـ
rb1.setSelected(true);
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
