شرح الكلاس ListView
الكلاس ListView يستخدم لإضافة قائمة ( List ) عامودية أو أفقية في واجهة المستخدم.
بناء الكلاس ListView
@DefaultProperty(value="items") public class ListView<T> extends Control
معلومة تقنية ListView
كل كائن ListView تنشئه يتم ربطه بكائن من كلاس إسمه ObservableList.
كائن الـ ObservableList هو الذي تتخزن فيه الخيارات التي تظهر في الـ ListView.
لهذا السبب, سيكون عليك إنشاء كائن من الكلاس ObservableList و تمرر له العناصر التي تريدها أن تظهر في كائن الـ ListView.
بعدها تقوم برط كائن الـ ObservableList بكائن الـ ListView بواسطة الدالة setItems().
لا تقلق ستفهم كل شيء من الأمثلة.
كونستركتورات الكلاس ListView
الجدول التالي يحتوي على كونستركتورات الكلاس ListView.
| الكونستركتور مع تعريفه | |
|---|---|
public ListView()
ينشئ كائن من الكلاس ListView يمثل List فارغة عامودية, أي لا تحتوي أي عنصر. |
|
public ListView(ObservableList<T> items)
ينشئ كائن من الكلاس ListView يمثل List عامودية فيها خيارات جاهزة.مكان الباراميتر items نمرر كائن من الكلاس ObservableList من أي نوع مثل String, Integer إلخ..عناصر هذا الكائن هي التي ستظهر كخيارات في القائمة. |
|
دوال الكلاس ListView
الجدول التالي يحتوي على بعض دوال الكلاس ListView.
| الدالة مع تعريفها | |
|---|---|
public final void setTranslateX(double value)
تستخدم لتحديد مكان الـ ListView الذي قام باستدعائها أفقياً.مكان الباراميتر value نضع رقم يمثل كم Pixel سيتم إزاحته من اليسار إلى اليمين. |
|
public final void setTranslateY(double value)
تستخدم لتحديد مكان الـ ListView الذي قام باستدعائها عامودياً.مكان الباراميتر value نضع رقم يمثل كم Pixel سيتم إزاحته من الأعلى إلى الأسفل. |
|
public void setPrefSize(double prefWidth, double prefHeight)
تستخدم لتحديد حجم كائن الـ ListView الذي قام باستدعائها.
|
|
public final void setDisable(boolean value)
تستخدم لجعل كائن الـ ListView الذي قام باستدعائها يبدو غير مفعّل, أي يصبح لونه باهتاً و غير قابل للنقر عليه.مكان الباراميتر value نضع القيمة true لجعله غير مفعّل. |
|
public final MultipleSelectionModel<T> getSelectionModel()
ترجع كائن من الكلاس MultipleSelectionModel يمثل الخيار أو مجموعة الخيارات التي تم النقر عليها بداخل كائن الـ ListView.من خلال الكائن الذي ترجعه هذه الدالة يمكنك معرفة قيمة و index كل خيار تم إختياره في الـ ListView, بالإضافة إلى معرفة عدد الخيارات التي تم تحديدها. |
|
public final void setItems(ObservableList<T> value)
تستخدم لإضافة العناصر ( الخيارات ) لكائن الـ ListView الذي قام باستدعائها.مكان الباراميتر value نمرر مصفوفة من القيم نوعها مطابق لنوع القيم التي يمكن أن يحتويها كائن الـ ListView. |
|
public final ObservableList<T> getItems()
ترجع كائن الـ ObservableList المرتبط بكائن الـ ListView الذي قام باستدعائها.من خلال الكائن الذي ترجعه هذه الدالة يمكنك معرفة عدد الخيارات الموجودة في الـ ListView, إضافة خيار أو أكثر فيه, حذف خيار أو أكثر منه, البحث فيه, فلترة الخيارات التي نريدها أن تظهر إلخ.. |
|
public final void setEditable(boolean value)
تستخدم لجعل المستخدم قادر على تحديث قيم الكائن الـ ListView الذي قام باستدعائها.مكان الباراميتر value نضع القيمة true لجعله المستخدم قادر على تحديث القيم بداخله.ملاحظة: تحتاج أيضاً أن تستدعي دالة إسمها setCellFactory() و التي من خلالها نقوم بتحديد كيف يمكن تحديث القيم. |
|
public final void setStyle(String value)
تستخدم لتعديل تصميم كائن الـ ListView الذي قام بإستدعائها.مكان الباراميتر value يمكنك تمرير إسم و قيمة أي خاصية تريد تعديلها في كائن الـ ListView بأسلوب لغة CSS لإظهاره بالشكل الذي تريده. |
|
أمثلة شاملة في الكلاس ListView
في جميع الأمثلة سنتعامل مع القائمة ListView كالتالي :
سنقوم بتعريف كائن من الكلاس
ListViewو الذي بدوره يمثل القائمة التي ستظهر في واجهة المستخدم.سنقوم بتعريف كائن من الكلاس
ObservableListو الذي سنستخدمه لتخزين العناصر التي ستظهر في القائمة.سنقوم بربط كائن الـ
ListViewبكائن الـObservableListبواسطة الدالةsetItems().
طريقة إنشاء كائن من الكلاس ListView
هذا المثال يعلمك طريقة إنشاء كائن من الكلاس ListView يحتوي على عناصر.
مثال
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ListView;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثل القائمة التي نريد إضافتها في النافذة ListView هنا قمنا بإنشاء كائن من الكلاس
ListView<String> listView = new ListView<>();
// يمثل مجموعة العناصر التي ستظهر في القائمة ObservableList هنا قمنا بإنشاء كائن من الكلاس
ObservableList<String> items = FXCollections.observableArrayList(
"red", "blue", "green", "yellow", "orange", "brown", "pink", "purple", "gray", "black", "white"
);
// listView كعناصر للكائن items هنا قمنا بوضع عناصر الكائن
listView.setItems(items);
// في النافذة listView هنا قمنا بتحديد حجم الـ
listView.setPrefSize(100, 190);
// في النافذة listView هنا قمنا بتحديد مكان ظهور الكائن
listView.setTranslateX(150);
listView.setTranslateY(30);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن listView هنا قمنا بإضافة الكائن
root.getChildren().add(listView);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX ListView");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل و التي يمكنك إختيار عنصر واحد منها في كل مرة.
طريقة عرض عناصر الـ ListView بشكل أفقي
هذا المثال يعلمك عرض عناصر الـ ListView بشكل أفقي, أي ستتعلم كيف تنشئ Horizontal List View.
مثال
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Orientation;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ListView;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثل القائمة التي نريد إضافتها في النافذة ListView هنا قمنا بإنشاء كائن من الكلاس
ListView<String> listView = new ListView<>();
// يمثل مجموعة العناصر التي ستظهر في القائمة ObservableList هنا قمنا بإنشاء كائن من الكلاس
ObservableList<String> items = FXCollections.observableArrayList(
"red", "blue", "green", "yellow", "orange", "brown", "pink", "purple", "gray", "black", "white"
);
// listView كعناصر للكائن items هنا قمنا بوضع عناصر الكائن
listView.setItems(items);
// تعرض بشكل أفقي listView هنا جعلنا عناصر الـ
listView.setOrientation(Orientation.HORIZONTAL);
// في النافذة listView هنا قمنا بتحديد حجم الـ
listView.setPrefSize(300, 50);
// في النافذة listView هنا قمنا بتحديد مكان ظهور الكائن
listView.setTranslateX(50);
listView.setTranslateY(100);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن listView هنا قمنا بإضافة الكائن
root.getChildren().add(listView);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX ListView");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل و التي يمكنك إختيار عنصر واحد منها في كل مرة.
طريقة معرفة العنصر الذي قام المستخدم باختياره من ضمن العناصر الموجودة في ListView
هذا المثال يعلمك طريقة معرفة العنصر الذي قام المستخدم باختياره من ضمن العناصر الموجودة في ListView.
ملاحظة: هنا النتيجة تتغير مباشرةً أثناء إختيار العناصر من القائمة.
مثال
import javafx.application.Application;
import javafx.beans.value.ObservableValue;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في النافذة
Label label = new Label("Selected color:");
ListView<String> listView = new ListView<>();
// يمثل مجموعة العناصر التي ستظهر في القائمة ObservableList هنا قمنا بإنشاء كائن من الكلاس
ObservableList<String> items = FXCollections.observableArrayList(
"red", "blue", "green", "yellow", "orange", "brown", "pink", "purple", "gray", "black", "white"
);
// listView كعناصر للكائن items هنا قمنا بوضع عناصر الكائن
listView.setItems(items);
// هنا قمنا بتحديد حجم الأشياء التي سنضيفها في النافذة
label.setPrefSize(200, 30);
listView.setPrefSize(120, 250);
// هنا قمنا بتحديد مكان ظهور الأشياء التي سنضيفها في النافذة
label.setTranslateX(150);
label.setTranslateY(110);
listView.setTranslateX(0);
listView.setTranslateY(0);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root هنا قمنا بإضافة جميع الأشياء في الكائن
root.getChildren().add(label);
root.getChildren().add(listView);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX ListView");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
// listView هنا قمنا بتحديد ماذا سيحدث عند النقر على أي عنصر موجود في الـ
listView.getSelectionModel().selectedItemProperty().addListener(
(ObservableValue<? extends String> ov, String old_val, String new_val) -> {
// label هنا قلناأنه سيتم وضع إسم العنصر الذي تم إختياره كنص للكائن
label.setText("Selected color: " + new_val);
});
// هنا جعلنا العنصر الأول في القائمة مختاراً بشكل إفتراضي عند تشغيل التطبيق
listView.getSelectionModel().select(0);
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة معر فة العنصر الذي قام المستخدم باختياره ضمن ListView
هذا المثال يعلمك طريقة معرفة العنصر الذي قام المستخدم باختياره من ضمن العناصر الموجودة في ListView عند النقر على Button.
مثال
import javafx.application.Application;
import javafx.collections.FXCollections;
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.ListView;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في النافذة
Button button = new Button("Get Selected Color");
Label label = new Label();
ListView<String> listView = new ListView<>();
// يمثل مجموعة العناصر التي ستظهر في القائمة ObservableList هنا قمنا بإنشاء كائن من الكلاس
ObservableList<String> items = FXCollections.observableArrayList(
"red", "blue", "green", "yellow", "orange", "brown", "pink", "purple", "gray", "black", "white"
);
// listView كعناصر للكائن items هنا قمنا بوضع عناصر الكائن
listView.setItems(items);
// هنا قمنا بتحديد حجم الأشياء التي سنضيفها في النافذة
button.setPrefSize(150, 30);
label.setPrefSize(150, 30);
listView.setPrefSize(120, 250);
// هنا قمنا بتحديد مكان ظهور الأشياء التي سنضيفها في النافذة
button.setTranslateX(150);
button.setTranslateY(90);
label.setTranslateX(150);
label.setTranslateY(140);
listView.setTranslateX(0);
listView.setTranslateY(0);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root هنا قمنا بإضافة جميع الأشياء في الكائن
root.getChildren().add(button);
root.getChildren().add(label);
root.getChildren().add(listView);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX ListView");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
// button هنا قمنا بتحديد ماذا سيحدث عند النقر على الكائن
button.setOnAction((ActionEvent e) -> {
// label إذا لم يتم إختيار أي عنصر بعد, سيتم وضع النص التالي للـ
if(listView.getSelectionModel().isEmpty()) {
label.setText("No color selected!");
}
// label سيتم وضعه كنص للـ listView إذا كان هناك عنصر مختار في الـ
else {
label.setText("Selected color: " + listView.getSelectionModel().getSelectedItem());
}
});
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة جعل المستخدم قادر على إختيار أكثر من عنصر في الـ ListView
هذا المثال يعلمك طريقة جعل المستخدم قادر على إختيار أكثر من عنصر في الـ ListView و عرض إسم و عدد العناصر التي قام باختيارها.
ملاحظة: هنا النتيجة تتغير مباشرةً أثناء إختيار العناصر من القائمة.
مثال
import javafx.application.Application;
import javafx.beans.value.ObservableValue;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.control.SelectionMode;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في النافذة
Label totalSelected = new Label("Total selected: 0");
Label selectedItems = new Label("Selected colors:");
ListView<String> listView = new ListView<>();
// يمثل مجموعة العناصر التي ستظهر في القائمة ObservableList هنا قمنا بإنشاء كائن من الكلاس
ObservableList<String> items = FXCollections.observableArrayList(
"red", "blue", "green", "yellow", "orange", "brown", "pink", "purple", "gray", "black", "white"
);
// listView كعناصر للكائن items هنا قمنا بوضع عناصر الكائن
listView.setItems(items);
// listView هنا جعلنا المستخدم قادر على إختيار أكثر من قيمة في الـ
listView.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
// هنا قمنا بتحديد حجم الأشياء التي سنضيفها في النافذة
listView.setPrefSize(120, 250);
totalSelected.setPrefSize(250, 30);
selectedItems.setPrefSize(250, 30);
// هنا قمنا بتحديد مكان ظهور الأشياء التي سنضيفها في النافذة
totalSelected.setTranslateX(150);
totalSelected.setTranslateY(90);
selectedItems.setTranslateX(150);
selectedItems.setTranslateY(120);
listView.setTranslateX(0);
listView.setTranslateY(0);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root هنا قمنا بإضافة جميع الأشياء في الكائن
root.getChildren().add(totalSelected);
root.getChildren().add(selectedItems);
root.getChildren().add(listView);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX ListView");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
// listView هنا قمنا بتحديد ماذا سيحدث عند النقر على أي عنصر موجود في الـ
listView.getSelectionModel().selectedItemProperty().addListener(
(ObservableValue<? extends String> ov, String old_val, String new_val) -> {
// label هنا قلناأنه سيتم وضع إسم العنصر الذي تم إختياره كنص للكائن
totalSelected.setText("Total selected: " + listView.getSelectionModel().getSelectedItems().size());
selectedItems.setText("Selected colors: " + listView.getSelectionModel().getSelectedItems());
});
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
•لإختيار أكثر من عنصر, أبقي إصبعك على الزر Ctrl أثناء إختيار العناصر.
طريقة جلب جميع العناصر التي قام المستخدم باختيارها في أكثر من ListView
هذا المثال يعلمك طريقة جلب جميع العناصر التي قام المستخدم باختيارها في أكثر من ListView.
ملاحظة: القائمة الأولى يمكن إختيار عنصر واحد منها في كل مرة, القائمة الثانية يمكن اختيار أكثر من قيمة فيها.
مثال
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.geometry.Pos;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.control.SelectionMode;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في النافذة
ListView<String> listView_1 = new ListView<>();
ListView<String> listView_2 = new ListView<>();
Button button = new Button("Get Selected Language and Levels");
Label label_1 = new Label("Select Language");
Label label_2 = new Label("Select Level(s)");
Label label_result = new Label();
// listView_1 يمثل مجموعة العناصر التي ستظهر في الـ ObservableList هنا قمنا بإنشاء كائن من الكلاس
ObservableList<String> items_1 = FXCollections.observableArrayList(
"Java", "C", "C++", "C#", "VB"
);
// listView_2 يمثل مجموعة العناصر التي ستظهر في الـ ObservableList هنا قمنا بإنشاء كائن من الكلاس
ObservableList<String> items_2 = FXCollections.observableArrayList(
"Beginner", "Intermediate", "Advanced"
);
// listView_2 في الـ items_2 و عناصر الـ listView_1 في الـ items_1 هنا قمنا بوضع عناصر الـ
listView_1.setItems(items_1);
listView_2.setItems(items_2);
// listView_2 هنا جعلنا المستخدم قادر على إختيار أكثر من قيمة في الـ
listView_2.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
// يظهر في الوسط label_result هنا جعلنا أي نص يتم عرضه في الـ
label_result.setAlignment(Pos.CENTER);
// هنا قمنا بتحديد حجم الأشياء التي سنضيفها في النافذة
listView_1.setPrefSize(130, 120);
listView_2.setPrefSize(130, 120);
button.setPrefSize(300, 30);
label_1.setPrefSize(150, 20);
label_2.setPrefSize(150, 20);
label_result.setPrefSize(400, 20);
// هنا قمنا بتحديد مكان ظهور الأشياء التي سنضيفها في النافذة
button.setTranslateX(50);
button.setTranslateY(190);
label_1.setTranslateX(50);
label_1.setTranslateY(15);
label_2.setTranslateX(220);
label_2.setTranslateY(15);
label_result.setTranslateX(0);
label_result.setTranslateY(230);
listView_1.setTranslateX(50);
listView_1.setTranslateY(45);
listView_2.setTranslateX(220);
listView_2.setTranslateY(45);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root هنا قمنا بإضافة جميع الأشياء في الكائن
root.getChildren().add(listView_1);
root.getChildren().add(listView_2);
root.getChildren().add(button);
root.getChildren().add(label_1);
root.getChildren().add(label_2);
root.getChildren().add(label_result);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 280);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX ListView");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
// button هنا قمنا بتحديد ماذا سيحدث عند النقر على الكائن
button.setOnAction((ActionEvent e) -> {
// label_result سيتم وضع النص التالي للـ listView_1 إذا لم يتم إختيار أي عنصر بعد من الـ
if(listView_1.getSelectionModel().isEmpty()) {
label_result.setText("Please select a languge first!");
}
// label_result سيتم وضع النص التالي للـ listView_2 إذا لم يتم إختيار أي عنصر بعد من الـ
else if(listView_2.getSelectionModel().isEmpty()) {
label_result.setText("Please select at least one level!");
}
// label سيتم وضعه كنص للـ listView إذا كان هناك عنصر مختار في الـ
else {
label_result.setText(
"Language = "
+ listView_1.getSelectionModel().getSelectedItem()
+ " Levels = "
+ listView_2.getSelectionModel().getSelectedItems()
);
}
});
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
•لإختيار أكثر من عنصر من القائمة الثانية, أبقي إصبعك على الزر Ctrl أثناء إختيار العناصر.
طريقة جعل المستخدم يقوم بإضافة أو حذف عناصر في كائن الـ ListView
هذا المثال يعلمك طريقة جعل المستخدم يقوم بإضافة أو حذف عناصر في كائن الـ ListView.
بالإضافة إلى إظهار عدد جميع العناصر الموجودة فيه.
مثال
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.ListView;
import javafx.scene.control.TextField;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في النافذة
TextField textField = new TextField();
ListView listView = new ListView();
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);
listView.setPrefSize(120, 130);
counterLabel.setPrefSize(120, 30);
// هنا قمنا بتحديد مكان ظهور الأشياء التي سنضيفها في النافذة
textField.setTranslateX(20);
textField.setTranslateY(50);
addButton.setTranslateX(140);
addButton.setTranslateY(50);
removeButton.setTranslateX(20);
removeButton.setTranslateY(100);
removeAllButton.setTranslateX(20);
removeAllButton.setTranslateY(150);
listView.setTranslateX(260);
listView.setTranslateY(50);
counterLabel.setTranslateX(20);
counterLabel.setTranslateY(200);
// في النافذة 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(listView);
root.getChildren().add(counterLabel);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX listView");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
// addButton هنا قمنا بتحديد ماذا سيحدث عند النقر على الكائن
addButton.setOnAction((ActionEvent e) -> {
// textField إذا كان يوجد نص بداخل الـ
if( !textField.getText().equals("") ) {
// listView كعنصر في الـ textField ستيم إضافة النص المدخل في الـ
listView.getItems().add(textField.getText());
// مختاراً listView بعدها سيتم جعل آخر عنصر تم إدخاله في الـ
listView.getSelectionModel().selectLast();
// counterLabel الجديد كنص للـ listView بعدها سيتم وضع عدد عناصر الـ
counterLabel.setText("Total Items: " + listView.getItems().size());
// textField بعدها سيتم مسح النص المدخل في الـ
textField.setText("");
}
});
// removeButton هنا قمنا بتحديد ماذا سيحدث عند النقر على الكائن
removeButton.setOnAction((ActionEvent e) -> {
// فارغاً listView إذا لم يكن الـ
if( !listView.getSelectionModel().isEmpty() ) {
// المعطى له بشكل تلقائي index و سيتم ذلك بناءاً على رقم الـ listView سيتم حذف العنصر المختار في الـ
listView.getItems().remove(listView.getSelectionModel().getSelectedIndex());
// counterLabel الجديد كنص للـ listView بعدها سيتم وضع عدد عناصر الـ
counterLabel.setText("Total Items: " + listView.getItems().size());
}
});
// removeAllButton هنا قمنا بتحديد ماذا سيحدث عند النقر على الكائن
removeAllButton.setOnAction((ActionEvent e) -> {
// listView سيتم حذف جميع العناصر الموجودة في الـ
listView.getItems().clear();
// counterLabel الجديد كنص للـ listView بعدها سيتم وضع عدد عناصر الـ
counterLabel.setText("Total Items: " + listView.getItems().size());
});
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة جعل المستخدم قادر على تعديل نص عناصر الـ ListView
هذا المثال يعلمك طريقة جعل المستخدم قادر على تعديل نص عناصر الـ ListView .
مثال
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ListView;
import javafx.scene.control.cell.TextFieldListCell;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثل القائمة التي نريد إضافتها في النافذة ListView هنا قمنا بإنشاء كائن من الكلاس
ListView<String> listView = new ListView<>();
// يمثل مجموعة العناصر التي ستظهر في القائمة ObservableList هنا قمنا بإنشاء كائن من الكلاس
ObservableList<String> items = FXCollections.observableArrayList(
"click ENTER or double click to change the text",
"click ENTER or double click to change the text",
"click ENTER or double click to change the text",
"click ENTER or double click to change the text",
"click ENTER or double click to change the text",
"click ENTER or double click to change the text",
"click ENTER or double click to change the text",
"click ENTER or double click to change the text",
"click ENTER or double click to change the text"
);
// listView كعناصر للكائن items هنا قمنا بوضع عناصر الكائن
listView.setItems(items);
// قابل للتعديل listView هنا قمنا بجعل نص عناصر الـ
listView.setEditable(true);
// لإدخال القيمة الجديدة TextField سيتم إظهار ,ListView هنا قلنا أنه عند محاولة تعديل نص أي عنصر في الـ
listView.setCellFactory(TextFieldListCell.forListView());
// في النافذة listView هنا قمنا بتحديد حجم الـ
listView.setPrefSize(300, 190);
// في النافذة listView هنا قمنا بتحديد مكان ظهور الكائن
listView.setTranslateX(50);
listView.setTranslateY(30);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن listView هنا قمنا بإضافة الكائن
root.getChildren().add(listView);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX ListView");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل و التي يمكنك إختيار عنصر واحد منها في كل مرة.
طريقة إنشاء ListView لإختيار الألوان
هذا المثال يعلمك طريقة إنشاء ListView لإختيار الألوان.
مثال
import javafx.scene.control.ListCell;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
// ListView هنا قمنا بإنشاء كلاس خاص يعطينا شكل مستطيل يمكن وضعه كعنصر في كائن من الكلاس
public class ColorRectCell extends ListCell<String> {
@Override
public void updateItem(String item, boolean empty) {
// هنا قمنا باستدعاء دالة تحديث شكل العنصر الجاهزة لأننا على أساسها سنضيف مستطيل مربع مكان العنصر
super.updateItem(item, empty);
// هنا قمنا بتحديد حجم المستطيل
Rectangle rect = new Rectangle(122, 20);
// عند ربطهما ببعض ListView هنا قمنا بتحديد أن لون المستطيل سيتم أخذه من إسم عنصر كائن
if (item != null) {
rect.setFill(Color.web(item));
setGraphic(rect);
}
else {
setGraphic(null);
}
}
}
import javafx.application.Application;
import javafx.beans.value.ObservableValue;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
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) {
// هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في النافذة
Label label = new Label();
ListView<String> listView = new ListView<>();
// يمثل مجموعة العناصر التي ستظهر في القائمة ObservableList هنا قمنا بإنشاء كائن من الكلاس
ObservableList<String> items = FXCollections.observableArrayList(
"red", "blue", "green", "yellow", "orange", "brown", "pink", "purple", "gray", "black", "white"
);
// listView كعناصر للكائن items هنا قمنا بوضع عناصر الكائن
listView.setItems(items);
// أي إلى مستطيل لونه من إسمه ColorRectCell إلى كائن من الكلاس listView هنا قمنا بتحويل كل عنصر في الـ
listView.setCellFactory((ListView<String> ol) -> new ColorRectCell());
// هنا قمنا بتحديد حجم الأشياء التي سنضيفها في النافذة
label.setPrefSize(200, 30);
listView.setPrefSize(152, 250);
// هنا قمنا بتحديد مكان ظهور الأشياء التي سنضيفها في النافذة
label.setTranslateX(180);
label.setTranslateY(110);
listView.setTranslateX(0);
listView.setTranslateY(0);
label.setFont(new Font("Arial", 22));
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root هنا قمنا بإضافة جميع الأشياء في الكائن
root.getChildren().add(label);
root.getChildren().add(listView);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX ListView");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
// listView هنا قمنا بتحديد ماذا سيحدث عند النقر على أي عنصر موجود في الـ
listView.getSelectionModel().selectedItemProperty().addListener(
(ObservableValue<? extends String> ov, String old_val, String new_val) -> {
// label هنا جعلنا إسم العنصر الذي تم إختياره يوضع كنص للكائن
label.setText(new_val);
// label هنا جعلنا إسم العنصر الذي تم إختياره يوضع كلون خط للكائن
label.setTextFill(Color.web(new_val));
});
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
