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

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

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

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

أهلا بكم

الكلاس TreeView يستخدم لإضافة قائمة شجرية (Tree) في واجهة المستخدم.وهذه القائمة تظهر ما بداخلها عند النقر عليه.

المقصود من كلمة شجرية هو أن كل كائن بداخلها يمكنه أيضاً إحتواء عدد غير محدد من الكائنات بداخله, و كل كائن يظهر ما بداخله عند النقر عليه.

مميزات الـ TreeView


  • يضيف Scroll Bar أفقي و عامودي بشكل تلقائي عند الحاجة.
  • إمكانية تعديل القيم مباشرةً عليه مع ضمان أن يكون نوع البيانات المدخل صحيح.
  • توفير أكثر من طريقة لتعديل القيم بشكل مباشر عليه.
  • لا يحتل مساحة كبيرة في النافذة, حيث أنه بإمكان المستخدم النقر على أي عنصر في القائمة ليرى ما بداخله و يمكنه أن ينقر عليه من جديد لإخفاء ما بداخله.
  • يمكن وضع أيقونات للعناصر.


وقبل البدء فى كيفية إنشاءة يجب ان تتعرف على المصطلحات التالية :


  1. Root Node      تعني أعلا كائن يظهر في الـ Tree.
  2. Parent Node   تعني كائن يحتوي على كائن أو أكثر بداخله, و هو يظهرهم عند النقر عليه.
  3. Leaf Node      تعني كائن لا يحتوي على كائن بداخله.


كيفية إنشائة

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

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

2_ إنشاء كائن من الكلاس  TreeItem و الذى سنجعلة كائن الجزر Root Item للقائمة الشجرية TreeView

الكود:
TreeItem<String> rootItem = new TreeItem<> ("Root");

3_إنشاء كائن من الكلاس  TreeView يمثل القائمة الشجرية التي نريد إضافتها في النافذة و وضعنا فيها الكائن rootItem كأول عنصر فيه

الكود:
TreeView<String> treeView = new TreeView<(rootItem);

4_إضافة عناصر القائمة

الكود:
rootItem.getChildren().add(new TreeItem("Item 0"));
        rootItem.getChildren().add(new TreeItem("Item 1"));
        rootItem.getChildren().add(new TreeItem("Item 2"));


المثال التالي يعلمك طريقة إنشاء كائن من الكلاس TreeView و إضافته في النافذة

الكود:
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeView;
import javafx.stage.Stage;
 
public class Main extends Application {
 
    @Override
    public void start(Stage stage) {

        // TreeView في الـ Root Item و الذي سنضعه كـ TreeItem هنا قمنا بإنشاء كائن من الكلاس
        TreeItem<String> rootItem = new TreeItem<> ("Root");
        
        // كأول عنصر فيها rootItem يمثل القائمة الشجرية التي نريد إضافتها في النافذة و وضعنا فيها الكائن TreeView هنا قمنا بإنشاء كائن من الكلاس
        TreeView<String> treeView = new TreeView<(rootItem);

        // rootItem تحت الكائن TreeItem هنا قمنا بإضافة ثلاث كائنات
        rootItem.getChildren().add(new TreeItem("Item 0"));
        rootItem.getChildren().add(new TreeItem("Item 1"));
        rootItem.getChildren().add(new TreeItem("Item 2"));
        
        // rootItem الثالث بالنسبة للكائن TreeItem تحت الكائن TreeItem هنا قمنا بإضافة كائنين
        rootItem.getChildren().get(2).getChildren().add(new TreeItem("Item 2-0"));
        rootItem.getChildren().get(2).getChildren().add(new TreeItem("Item 2-1"));
        
        // في النافذة و جعلنا حجمها يساوي حجم النافذة لأننا لا ننوي إضافة شيء آخر في النافذة treeView هنا قمنا بتحديد حجم الـ
        treeView.setPrefSize(400, 250);

        // في النافذة treeView هنا قمنا بتحديد مكان ظهور الكائن
        treeView.setTranslateX(0);
        treeView.setTranslateY(0);
 
        // في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
        Group root = new Group();
 
        // list و بالتالي أصبح أي شيء نريد إضافته نضيفه في الكائن list مرتبط بالكائن root هنا جعلنا الكائن
        ObservableList list = root.getChildren();
 
        // group و الذي بدوره سيضاف أيضاً في الكائن list في الكائن treeView هنا قمنا بإضافة الكائن
        list.add(treeView);
 
        // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
        Scene scene = new Scene(root, 400, 250);
 
        // هنا وضعنا عنوان للنافذة
        stage.setTitle("JavaFX TreeView");
 
        // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
        stage.setScene(scene);
 
        // هنا قمنا بإظهار النافذة
        stage.show();
    }
 
    // هنا قمنا بتشغيل التطبيق
    public static void main(String[] args) {
        launch(args);
    }
 
}

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


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


وضع أيقونات لعناصر الـ TreeView

المثال التالي يعلمك طريقة وضع أيقونة للـ TreeView و يفضل أن يكون حجمها 16×16 بيكسل.بالإضافة لجعله مفتوحاً بشكل إفتراضي عند تشغيل التطبيق.

ملاحظة: عليك إنشاء مجلد و وضع الصور فيه كما في الصورة التالية.

تعلم JavaFx ..مقال 15_ واجهة المستخدم الرسومية _ الكلاس TreeView Example-2-project-structure

الصورة توضح أننا أضفنا مجلد إسمه images و وضعنا فيه أربع صور.

الكود:
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeView;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.stage.Stage;

public class Main extends Application {

    // و التي سنقصد بها الشركة Root Item الذي يمثل الـ TreeItem هنا قمنا بتعريف دالة ترجع الأيقونة التي سنضعها لكائن الـ
    public ImageView getRootIcon() {
        return new ImageView(new Image(getClass().getResourceAsStream("images/building-icon.png")));
    }

    // يمثل قسم في الشركة TreeItem هنا قمنا بتعريف دالة ترجع الأيقونة التي سنضعها لكل كائن
    public ImageView getDepartmentIcon() {
        return new ImageView(new Image(getClass().getResourceAsStream("images/department-icon.png")));
    }
    
    // يمثل موظف في الشركة TreeItem هنا قمنا بتعريف دالة ترجع الأيقونة التي سنضعها لكل كائن
    public ImageView getUserMaleIcon() {
        return new ImageView(new Image(getClass().getResourceAsStream("images/user-male-icon.png")));
    }
    
    // يمثل موظفة في الشركة TreeItem هنا قمنا بتعريف دالة ترجع الأيقونة التي سنضعها لكل كائن
    public ImageView getUserFemaleIcon() {
        return new ImageView(new Image(getClass().getResourceAsStream("images/user-female-icon.png")));
    }

    @Override
    public void start(Stage stage) {

        // getRootIcon() و مررنا له أيقونة المبنى التي سترجعها الدالة TreeView في الـ Root Item و الذي سنضعه كـ TreeItem هنا قمنا بإنشاء كائن من الكلاس
        TreeItem<String> rootItem = new TreeItem<>("Harmash", getRootIcon());
        
        // getDepartmentIcon() كل كائن منهم سنجعله يمثل إسم قسم في الشركة و بجانبه أيقونة القسم التي ترجعها الدالة .TreeView هنا قمنا بإنشاء 3 كائنات
        TreeItem dep_1 = new TreeItem("Research & Development", getDepartmentIcon());
        TreeItem dep_2 = new TreeItem("Accounting & Finance", getDepartmentIcon());
        TreeItem dep_3 = new TreeItem("Marketing", getDepartmentIcon());
        
        // كل كائن منهم سنجعله يمثل إسم موظف/موظفة في الشركة و TreeView هنا قمنا بإنشاء 6 كائنات
        // getUserFemaleIcon() و الدالة getUserMaleIcon() بجانبه أيقونة تمثل جنسه و التي ترجعها
        TreeItem user_1 = new TreeItem("Mhamad Harmush", getUserMaleIcon());
        TreeItem user_2 = new TreeItem("Youssef Jabber", getUserMaleIcon());
        TreeItem user_3 = new TreeItem("Hala Hassan", getUserFemaleIcon());
        TreeItem user_4 = new TreeItem("Rola Masri", getUserFemaleIcon());
        TreeItem user_5 = new TreeItem("Rim Ibrahim", getUserFemaleIcon());
        TreeItem user_6 = new TreeItem("Nader Bakir", getUserMaleIcon());
        
        // يظهر عند تشغيل البرنامج ( dep_3 و dep_2 و dep_1 أي الكائنات) rootItem موضوع مباشرةً تحت الـ TreeItem هنا جعلنا كل كائن
        rootItem.setExpanded(true);

        // كأول عنصر فيها rootItem يمثل القائمة الشجرية التي نريد إضافتها في النافذة و وضعنا فيها الكائن TreeView هنا قمنا بإنشاء كائن من الكلاس
        TreeView<String> treeView = new TreeView<>(rootItem);

        // الذي يمثل الشركة rootItem التي تمثل أقسام في الشركة تحت الكائن TreeItem هنا قمنا بإضافة كائنات الـ
        rootItem.getChildren().add(dep_1);
        rootItem.getChildren().add(dep_2);
        rootItem.getChildren().add(dep_3);
        
        // التي تمثل أقسام في الشركة TreeItem التي تمثل موظفين و موظفات تحت كائنات الـ TreeItem هنا قمنا بإضافة كائنات الـ
        dep_1.getChildren().add(user_1);
        dep_1.getChildren().add(user_2);
        dep_1.getChildren().add(user_3);
        dep_2.getChildren().add(user_4);
        dep_2.getChildren().add(user_5);
        dep_3.getChildren().add(user_6);
        
        // في النافذة treeView هنا قمنا بتحديد حجم الـ
        treeView.setPrefSize(400, 250);

        // في النافذة treeView هنا قمنا بتحديد مكان ظهور الكائن
        treeView.setTranslateX(0);
        treeView.setTranslateY(0);

        // في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
        Group root = new Group();

        // list و بالتالي أصبح أي شيء نريد إضافته نضيفه في الكائن list مرتبط بالكائن root هنا جعلنا الكائن
        ObservableList list = root.getChildren();

        // group و الذي بدوره سيضاف أيضاً في الكائن list في الكائن treeView هنا قمنا بإضافة الكائن
        list.add(treeView);

        // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
        Scene scene = new Scene(root, 400, 250);

        // هنا وضعنا عنوان للنافذة
        stage.setTitle("JavaFX TreeView");

        // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
        stage.setScene(scene);

        // هنا قمنا بإظهار النافذة
        stage.show();
    }

    // هنا قمنا بتشغيل التطبيق
    public static void main(String[] args) {
        launch(args);
    }

}


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



تعلم JavaFx ..مقال 15_ واجهة المستخدم الرسومية _ الكلاس TreeView Example-2
زهراء
زهراء
........
........

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

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

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

ََ

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


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