تعلم JavaFx ..مقال 12_ واجهة المستخدم الرسومية _ الكلاس ListView

اذهب الى الأسفل

تعلم JavaFx ..مقال 12_ واجهة المستخدم الرسومية _ الكلاس ListView Empty تعلم JavaFx ..مقال 12_ واجهة المستخدم الرسومية _ الكلاس ListView

مُساهمة من طرف زهراء في الخميس أكتوبر 18, 2018 9:09 am

أهلا بكم

الكلاس ListView يستخدم لإضافة قائمة (List) عامودية أو أفقية في واجهة المستخدم بحث تمكن المستخدم من اختيار عنصر أو عدة عناصر منها

كيفية إنشاء القائمة list

1_استيراد المكتبة التى تحتوى على عناصر واجهة المستخدام الرسومية وتحدديد الكلاس ListView  منها

الكود:
import javafx.scene.control.ListView;

2_إستيراد المكتبة التى تحتوي على هياكل البيانات collections و تحديد الفئة ObservableListFXCollections منها
الكود:

 import javafx.collections.FXCollections;
import javafx.collections.ObservableList;

في جميع الأمثلة سنتعامل مع القائمة كالتالي:


  • سنقوم بتعريف كائن من الكلاس ListView و الذي بدوره يمثل القائمة التي ستظهر في واجهة المستخدم.
  • سنقوم بتعريف كائن من الكلاس ObservableList و الذي سنستخدمه لتخزين العناصر التي ستظهر في القائمة.
  • سنقوم بربط كائن الـ ListView بكائن الـ ObservableList بواسطة الدالة setItems().


3__إنشاء كائن جديد من الكلاس  ListView  يمثل القائمة الذي نريد إضافتها في النافذة
الكود:
ListView<String> listView = new ListView<>()

4_إنشاء كائن الكلاس ObservableList يمثل مجموعة العناصر التي ستظهر في القائمة

الكود:
ObservableList<String> items = FXCollections.observableArrayList(
            "red", "blue", "green", "yellow", "orange", "brown", "pink", "purple", "gray", "black", "white"
        );

5_وضع العناصر حددناها بالاعلى الى القائمة list

الكود:
listView.setItems(items);

و الكود الكامل لانشاء القائمة list مع بعض العناصر على النحو التالى :

الكود:
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();
 
        // list و بالتالي أصبح أي شيء نريد إضافته نضيفه في الكائن list مرتبط بالكائن root هنا جعلنا الكائن
        ObservableList list = root.getChildren();
 
        // group و الذي بدوره سيضاف أيضاً في الكائن list في الكائن listView هنا قمنا بإضافة الكائن
        list.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);
    }
 
}

و النتيجة علىالنحو التالى :

تعلم JavaFx ..مقال 12_ واجهة المستخدم الرسومية _ الكلاس ListView Example-1


كما يمكنك جعل قائمة list بشكل افقي باستخدام الاسلوب setOrientation على النحو التالى :


الكود:
listView.setOrientation(Orientation.HORIZONTAL);

تعلم JavaFx ..مقال 12_ واجهة المستخدم الرسومية _ الكلاس ListView Example-2


المثال التالي يعلمك طريقة معرفة العنصر الذي قام المستخدم باختياره من ضمن العناصر الموجودة في 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();
 
        // list و بالتالي أصبح أي شيء نريد إضافته نضيفه في الكائن list مرتبط بالكائن root هنا جعلنا الكائن
        ObservableList list = root.getChildren();
 
        // group و الذي بدوره سيضيفهم أيضاً في الكائن list هنا قمنا بإضافة جميع الأشياء في الكائن
        list.add(label);
        list.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);
    }
 
}


و النتيجة على النحو التالى :

تعلم JavaFx ..مقال 12_ واجهة المستخدم الرسومية _ الكلاس ListView Example-3

 
زهراء
زهراء
........
........

تاريخ التسجيل : 18/02/2011
المساهمات : 406
النقاط : 691
التقيم : 55
الدولة : مصر
الجنس : انثى

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة

ََ

مواضيع ذات صلة


 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى