شرح الكلاس ChoiceBox
الكلاس ChoiceBox يستخدم لإضافة قائمة منسدلة ( Choice Box ) في واجهة المستخدم.
هذه القائمة تظهر فقط الخيار الذي قام المستخدم بإختياره منها.
ملاحظة: في حال لم تقم بتحديد أي عنصر سيظهر أنه مختاراً فيها بشكل إفتراضي فإنها ستظهر لك أنه لم يتم إختيار أي عنصر منها بعد.
بناء الكلاس ChoiceBox
@DefaultProperty(value="items") public class ChoiceBox<T> extends Control
معلومة تقنية ChoiceBox
كل كائن ChoiceBox تنشئه يتم ربطه بكائن من كلاس إسمه ObservableList.
كائن الـ ObservableList هو الذي تتخزن فيه الخيارات التي تظهر عند فتح الـ ChoiceBox.
إذاً عند النقر على الـ ChoiceBox فإنه يظهر العناصر المخزنة في كائن الـ ObservableList المرتبط به.
لهذا السبب عندما تريد أن تتعامل مع محتوى الـ ChoiceBox عليك أن تتعامل مع الـ ObservableList الخاصة به.
كونستركتورات الكلاس ChoiceBox
الجدول التالي يحتوي على كونستركتورات الكلاس ChoiceBox.
| الكونستركتور مع تعريفه | |
|---|---|
public ChoiceBox()
ينشئ كائن من الكلاس ChoiceBox يمثل Choice Box فارغة, أي لا تحتوي أي عنصر. |
|
public ChoiceBox(ObservableList<E> items)
ينشئ كائن من الكلاس ChoiceBox يمثل Choice Box فيها خيارات جاهزة.مكان الباراميتر items نمرر كائن من الكلاس ObservableList.عناصر الكائن ObservableList هي التي ستظهر كخيارات في القائمة. |
|
دوال الكلاس ChoiceBox
الجدول التالي يحتوي على دوال الكلاس ChoiceBox الأكثر إستخداماً.
| الدالة مع تعريفها | |
|---|---|
public final void setTranslateX(double value)
تستخدم لتحديد مكان كائن الـ ChoiceBox الذي قام باستدعائها أفقياً.مكان الباراميتر value نضع رقم يمثل كم Pixel سيتم إزاحته من اليسار إلى اليمين. |
|
public final void setTranslateY(double value)
تستخدم لتحديد مكان كائن الـ ChoiceBox الذي قام باستدعائها عامودياً.مكان الباراميتر value نضع رقم يمثل كم Pixel سيتم إزاحته من الأعلى إلى الأسفل. |
|
public void setPrefSize(double prefWidth, double prefHeight)
تستخدم لتحديد حجم كائن الـ ChoiceBox الذي قام باستدعائها.
|
|
public final void setDisable(boolean value)
تستخدم لجعل كائن الـ ChoiceBox الذي قام باستدعائها يبدو غير مفعّل, أي يصبح لونه باهتاً و غير قابل للنقر عليه.مكان الباراميتر value نضع القيمة true لجعله غير مفعّل. |
|
public final SingleSelectionModel<T> getSelectionModel()
ترجع كائن من الكلاس SingleSelectionModel يمثل الخيار الذي تم النقر عليه بداخل كائن الـ ChoiceBox.من خلال الكائن الذي ترجعه هذه الدالة يمكنك معرفة الخيار المختار في كائن الـ ChoiceBox, معرفة رقم الـ index الخاص به, معرفة الخيار التالي بعده في كائن الـ ChoiceBox, معرفة أول و آخر عنصر في كائن الـ ChoiceBox, معرفة ما إذا كان كائن الـ ChoiceBox فارغ, تحديد خيار آخر غير الذي قام المستخدم باختياره إلخ.. |
|
public final ObservableList<T> getItems()
ترجع كائن الـ ObservableList المرتبط بكائن الـ ChoiceBox الذي قام باستدعائها.من خلال الكائن الذي ترجعه هذه الدالة يمكنك معرفة عدد الخيارات الموجودة في كائن الـ ChoiceBox, إضافة خيار أو أكثر فيه, حذف خيار أو أكثر منه, البحث فيه, فلترة الخيارات التي نريدها أن تظهر إلخ.. |
|
public final void setStyle(String value)
تستخدم لتعديل تصميم كائن الـ ChoiceBox الذي قام بإستدعائها.مكان الباراميتر value يمكنك تمرير إسم و قيمة أي خاصية تريد تعديلها في كائن الـ ChoiceBox بأسلوب لغة CSS لإظهاره بالشكل الذي تريده. |
|
أمثلة شاملة في الكلاس ChoiceBox
طريقة إنشاء كائن من الكلاس ChoiceBox
المثال التالي يعلمك طريقة إنشاء كائن من الكلاس ChoiceBox و إضافته في النافذة.
مثال
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ChoiceBox;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثل القائمة المنسدلة التي نريد إضافتها في النافذة ChoiceBox هنا قمنا بإنشاء كائن من الكلاس
ChoiceBox choiceBox = new ChoiceBox();
// في النافذة choiceBox هنا قمنا بتحديد مكان ظهور الكائن
choiceBox.setTranslateX(150);
choiceBox.setTranslateY(110);
// في النافذة choiceBox هنا قمنا بتحديد حجم الـ
choiceBox.setPrefSize(100, 30);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
//
//
// root في الكائن choiceBox هنا قمنا بإضافة الكائن
root.getChildren().add(choiceBox);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX ChoiceBox");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة إضافة عناصر في ال ChoiceBox في javafx
المثال التالي يعلمك طريقة إنشاء كائن من الكلاس ChoiceBox يحتوي على عناصر.
ملاحظة: هنا عند تشغيل البرنامج, كائن الـ ChoiceBox تظهر فارغة إلى أن يقوم المستخدم بالنقر على أي خيار موجود فيها.
مثال
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ChoiceBox;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثل قائمة منسدلة فارغة ChoiceBox هنا قمنا بإنشاء كائن من الكلاس
ChoiceBox choiceBox = new ChoiceBox();
// choiceBox هنا قمنا بإضافة مجموعة من العناصر للكائن
choiceBox.getItems().addAll("Option 1", "Option 2", "Option 3");
// في النافذة choiceBox هنا قمنا بتحديد مكان ظهور الكائن
choiceBox.setTranslateX(150);
choiceBox.setTranslateY(110);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
//
//
// root في الكائن choiceBox هنا قمنا بإضافة الكائن
root.getChildren().add(choiceBox);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX ChoiceBox");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة جعل أول عنصر في كائن الـ ChoiceBox مختاراً بشكل إفتراضي
المثال التالي يعلمك طريقة جعل أول عنصر في كائن الـ ChoiceBox مختاراً بشكل إفتراضي.
ستتعلم أيضاً كيف تضيف خط فاصل بين العناصر.
ملاحظة: هنا عند تشغيل البرنامج, سيظهر في كائن الـ ChoiceBox أول خيار موجود فيها.
مثال
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ChoiceBox;
import javafx.scene.control.Separator;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثل قائمة منسدلة فارغة ChoiceBox هنا قمنا بإنشاء كائن من الكلاس
ChoiceBox choiceBox = new ChoiceBox();
// choiceBox هنا قمنا بإضافة مجموعة من العناصر للكائن
choiceBox.getItems().addAll("Option 1", "Option 2", "Option 3", new Separator(), "Option 4");
// يظهر مختاراً بشكل إفتراضي عند تشغيل التطبيق choiceBox هنا جعلنا أول عنصر في الـ
choiceBox.getSelectionModel().selectFirst();
// في النافذة choiceBox هنا قمنا بتحديد مكان ظهور الكائن
choiceBox.setTranslateX(150);
choiceBox.setTranslateY(60);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
//
//
// root في الكائن choiceBox هنا قمنا بإضافة الكائن
root.getChildren().add(choiceBox);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX ChoiceBox");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة معرفة العنصر الذي قام المستخدم باختياره من ضمن العناصر الموجودة في ChoiceBox عند النقر على Button
المثال التالي يعلمك طريقة معرفة العنصر الذي قام المستخدم باختياره من ضمن العناصر الموجودة في ChoiceBox عند النقر على Button.
مثال
import javafx.application.Application;
import javafx.collections.ObservableList;
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.ChoiceBox;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في النافذة
ChoiceBox choiceBox = new ChoiceBox();
Button button = new Button("Get Selected Car");
Label label = new Label();
// choiceBox هنا قمنا بإضافة مجموعة من العناصر للكائن
choiceBox.getItems().addAll("Ferrari", "Mercedes", "Camarro", "Nissan", "Mazda");
// هنا قمنا بتحديد حجم الأشياء التي سنضيفها في النافذة
choiceBox.setPrefSize(120, 30);
button.setPrefSize(120, 30);
label.setPrefSize(120, 30);
// هنا قمنا بتحديد مكان ظهور الأشياء التي سنضيفها في النافذة
choiceBox.setTranslateX(140);
choiceBox.setTranslateY(70);
button.setTranslateX(140);
button.setTranslateY(115);
label.setTranslateX(140);
label.setTranslateY(160);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
//
//
// root هنا قمنا بإضافة جميع الأشياء في الكائن
root.getChildren().add(choiceBox);
root.getChildren().add(button);
root.getChildren().add(label);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX choiceBox");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
// button هنا قمنا بتحديد ماذا سيحدث عند النقر على الكائن
button.setOnAction((ActionEvent e) -> {
// label إذا لم يتم إختيار أي عنصر بعد, سيتم وضع النص التالي للـ
if(choiceBox.getSelectionModel().isEmpty()) {
label.setText("No car selected");
}
// label سيتم وضعها كنص للـ choiceBox إذا كان هناك عنصر مختار في الـ
else {
label.setText(choiceBox.getSelectionModel().getSelectedItem().toString());
}
});
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة تنفيذ أوامر عند تغيير القيمة المختارة في كائن الـ ChoiceBox
المثال التالي يعلمك طريقة تنفيذ أوامر عند تغيير القيمة المختارة في كائن الـ ChoiceBox.
مثال
import javafx.application.Application;
import javafx.beans.value.ObservableValue;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ChoiceBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في النافذة
ChoiceBox choiceBox = new ChoiceBox();
Label label = new Label();
// choiceBox هنا قمنا بإضافة مجموعة من العناصر للكائن
choiceBox.getItems().addAll("English", "العربية", "Français");
// ChoiceBox هنا قمنا بإنشاء مصفوفة تحتوي على كلمة مرحباً بثلاث لغات و هي موضوعة بشكل متوازي مع عناصر الكائن
String[] greetings = {"Hello", "مرحباً", "Salut"};
// label هنا قمنا بتغيير نوع و حجم خط الكائن
label.setFont(new Font("Tahoma", 24));
// هنا قمنا بتحديد حجم الأشياء التي سنضيفها في النافذة
choiceBox.setPrefSize(100, 30);
label.setPrefSize(100, 30);
// هنا قمنا بتحديد مكان ظهور الأشياء التي سنضيفها في النافذة
choiceBox.setTranslateX(100);
choiceBox.setTranslateY(100);
label.setTranslateX(230);
label.setTranslateY(100);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
//
//
// root هنا قمنا بإضافة جميع الأشياء في الكائن
root.getChildren().add(choiceBox);
root.getChildren().add(label);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX choiceBox");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
// choiceBox هنا قمنا بتحديد ماذا سيحدث عند تغيير القيمة المختارة في الـ
choiceBox.getSelectionModel().selectedIndexProperty().addListener(
// يمثل القيمة القديمة old_val يمثل القيمة الجديدة و كائن الـ new_val كائن الـ
(ObservableValue<? extends Number> ov, Number old_val, Number new_val) -> {
// label كنص للكائن new_val هنا وضعنا القيمة الجديدة المخزنة في الكائن
label.setText(greetings[new_val.intValue()]);
});
// مختاراً بشكل إفتراضي حتى يتم عرض كلمة مرحباً باللغة الإنجليزية عند تشغيل التطبيق choiceBox هنا جعلنا العنصر الأول في الـ
choiceBox.getSelectionModel().selectFirst();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة جعل المستخدم يقوم بإضافة أو حذف عناصر في كائن الـ ChoiceBox
المثال التالي يعلمك طريقة جعل المستخدم يقوم بإضافة أو حذف عناصر في كائن الـ ChoiceBox.
بالإضافة إلى إظهار عدد جميع العناصر الموجودة فيه.
مثال
import javafx.application.Application;
import javafx.collections.ObservableList;
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.ChoiceBox;
import javafx.scene.control.TextField;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في النافذة
TextField textField = new TextField();
ChoiceBox choiceBox = new ChoiceBox();
Button addButton = new Button("Add Item");
Button removeButton = new Button("Remove Selected Item");
Button removeAllButton = new Button("Remove All Items");
Label counterLabel = new Label("Total items = 0");
// هنا قمنا بتحديد حجم الأشياء التي سنضيفها في النافذة
textField.setPrefSize(100, 30);
addButton.setPrefSize(100, 30);
removeButton.setPrefSize(220, 30);
removeAllButton.setPrefSize(220, 30);
choiceBox.setPrefSize(120, 30);
counterLabel.setPrefSize(120, 30);
// هنا قمنا بتحديد مكان ظهور الأشياء التي سنضيفها في النافذة
textField.setTranslateX(20);
textField.setTranslateY(60);
addButton.setTranslateX(140);
addButton.setTranslateY(60);
removeButton.setTranslateX(20);
removeButton.setTranslateY(110);
removeAllButton.setTranslateX(20);
removeAllButton.setTranslateY(160);
choiceBox.setTranslateX(260);
choiceBox.setTranslateY(60);
counterLabel.setTranslateX(260);
counterLabel.setTranslateY(110);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
//
//
// root هنا قمنا بإضافة جميع الأشياء في الكائن
root.getChildren().add(textField);
root.getChildren().add(addButton);
root.getChildren().add(removeButton);
root.getChildren().add(removeAllButton);
root.getChildren().add(choiceBox);
root.getChildren().add(counterLabel);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX choiceBox");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
// addButton هنا قمنا بتحديد ماذا سيحدث عند النقر على الكائن
addButton.setOnAction((ActionEvent e) -> {
// textField إذا كان يوجد نص بداخل الـ
if( !textField.getText().equals("") ) {
// choiceBox كعنصر في الـ textField ستيم إضافة النص المدخل في الـ
choiceBox.getItems().add(textField.getText());
// مختاراً choiceBox بعدها سيتم جعل آخر عنصر تم إدخاله في الـ
choiceBox.getSelectionModel().selectLast();
// counterLabel الجديد كنص للـ choiceBox بعدها سيتم وضع عدد عناصر الـ
counterLabel.setText("Total Items: " + choiceBox.getItems().size());
}
});
// removeButton هنا قمنا بتحديد ماذا سيحدث عند النقر على الكائن
removeButton.setOnAction((ActionEvent e) -> {
// فارغاً choiceBox إذا لم يكن الـ
if( !choiceBox.getSelectionModel().isEmpty() ) {
// المعطى له بشكل تلقائي index و سيتم ذلك بناءاً على رقم الـ choiceBox سيتم حذف العنصر المختار في الـ
choiceBox.getItems().remove(choiceBox.getSelectionModel().getSelectedIndex());
// counterLabel الجديد كنص للـ choiceBox بعدها سيتم وضع عدد عناصر الـ
counterLabel.setText("Total Items: " + choiceBox.getItems().size());
}
});
// removeAllButton هنا قمنا بتحديد ماذا سيحدث عند النقر على الكائن
removeAllButton.setOnAction((ActionEvent e) -> {
// choiceBox سيتم حذف جميع العناصر الموجودة في الـ
choiceBox.getItems().clear();
// counterLabel الجديد كنص للـ choiceBox بعدها سيتم وضع عدد عناصر الـ
counterLabel.setText("Total Items: " + choiceBox.getItems().size());
});
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
