أهلا بكم

لكلاس TableView يستخدم لإضافة جدول (Table) في واجهة المستخدم.

هذا الجدول يوفر لك ميزات مهمة جداً مثل:

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

         أي بمجرد أن تنقر على إسم العامود ستجد أنه قد تم ترتيب كل أسطر الجدول.

كيفية إنشائة

1_استيراد المكتبة التى تحتوى على عناصر واجهة المستخدام الرسومية وتحدديد الكلاس TableView الذى من خلالة نستطيع انشاء الجدول و الكلاس   TableColumn الذى من خلالة نستطيع انشاء اعمد الجدول على النحو التالى :

الكود:


import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;


2_إنشاء كائن جديد من الكلاس TableView  يمثل الجدول الذي نريد إضافته في النافذة

الكود:

TableView table = new TableView();

3_ إنشاء كلاس جديد من TableColumn و التى تمثل الاعمدة ...فى مثالنا هذا سوف نقوم بانشاء ثلاث كائنات

الكود:

TableColumn columnFirstName = new TableColumn("First Name");
        TableColumn columnLastName  = new TableColumn("Last Name");
        TableColumn columnEmail     = new TableColumn("Email");

4_إضافة كائنات الاعمدة الى كائن الجدول

الكود:

table.getColumns().addAll(columnFirstName, columnLastName, columnEmail);

الكود:

import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.stage.Stage;
 
public class Main extends Application {
 
    @Override
    public void start(Stage stage) {
 
        // يمثل الجدول الذي نريد إضافته في النافذة TableView هنا قمنا بإنشاء كائن من الكلاس
        TableView table = new TableView();
 
        // table تمثل الأعمدة التي سنضيفها في الكائن TableColumn هنا قمنا بإنشاء ثلاث كائنات
        TableColumn columnFirstName = new TableColumn("First Name");
        TableColumn columnLastName  = new TableColumn("Last Name");
        TableColumn columnEmail     = new TableColumn("Email");
 
        // table هنا وضعنا الأعمدة الثلاثة في الكائن
        table.getColumns().addAll(columnFirstName, columnLastName, columnEmail);
 
        // في النافذة table هنا قمنا بتحديد حجم الكائن
        table.setPrefSize(440, 300);
 
        // حتى نستغل كل الحجم الذي حجزناه له table هنا قمنا بتحديد عرض كل عامود بداخل الكائن
        columnFirstName.setPrefWidth(120);
        columnLastName.setPrefWidth(120);
        columnEmail.setPrefWidth(200);
 
        // في النافذة table هنا قمنا بتحديد مكان ظهور الكائن
        table.setTranslateX(10);
        table.setTranslateY(10);
 
        // في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
        Group root = new Group();
 
        // list و بالتالي أصبح أي شيء نريد إضافته نضيفه في الكائن list مرتبط بالكائن root هنا جعلنا الكائن
        ObservableList list = root.getChildren();
 
        // group و الذي بدوره سيضاف أيضاً في الكائن list في الكائن table هنا قمنا بإضافة الكائن
        list.add(table);
 
        // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
        Scene scene = new Scene(root, 460, 320);
 
        // هنا وضعنا عنوان للنافذة
        stage.setTitle("JavaFX TableView");
 
        // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
        stage.setScene(scene);
 
        // هنا قمنا بإظهار النافذة
        stage.show();
    }
 
    // هنا قمنا بتشغيل التطبيق
    public static void main(String[] args) {
        launch(args);
    }
 
}


إنشاء أعمدة متداخلة

المثال بالاعلى اعطاك فكرة عن كيفية انشاء جدول مع بعض الاعمدة لكن احيانا هيكل البيانات تكون أكثر تعقيدًا ، بحيث تتطلب إنشاء أعمدة متداخلة.

على سبيل المثال ، افترض أن جهات الاتصال الموجودة في دفتر العناوين لديها حسابين للبريد الإلكتروني. ثم تحتاج إلى عمودين لإظهار عناوين البريد الإلكتروني الأساسية والثانوية ...بمعني يتطلب إنشاء أعمدة متداخلة يمكنك فعل ذلك على النحو التالى :

الكود:


TableColumn firstEmailCol = new TableColumn("Primary");
TableColumn secondEmailCol = new TableColumn("Secondary");

emailCol.getColumns().addAll(firstEmailCol, secondEmailCol);



فرز البيانات في الأعمدة

توفر فئة TableView إمكانيات مضمنة لفرز البيانات في الأعمدة. حيث يمكن للمستخدمين تغيير ترتيب البيانات عن طريق النقر فوق رؤوس الأعمدة. تتيح النقرة الأولى ترتيب الفرز التصاعدي ، وتمكّن النقرة الثانية ترتيب الفرز التنازلي ، وتعطّل النقرة الثالثة الفرز. بشكل افتراضي لا يتم تطبيق أي فرز.
المثال التالي يعلمك طريقة عرض و فرز البيانات في TableView.

الكود:

public class Product {
 
    String name;
    double price;
    int quantity;
 
    public Product() {
        this.name = "";
        this.price = 0.0;
        this.quantity = 0;
    }
 
    public Product(String name, double price, int quantity) {
        this.name = name;
        this.price = price;
        this.quantity = quantity;
    }
 
    public String getName() {
        return name;
    }
 
    public void setName(String name) {
        this.name = name;
    }
 
    public double getPrice() {
        return price;
    }
 
    public void setPrice(double price) {
        this.price = price;
    }
 
    public int getQuantity() {
        return quantity;
    }
 
    public void setQuantity(int quantity) {
        this.quantity = quantity;
    }
 
}


يرجي ملاحظة : أننا قمنا بتجهيز كلاس إسمه Product يمثل بيانات أي منتج سيتم عرضه في الجدول.إذاً الكلاس Product سيحتوي على ثلاث خصائص و هي الإسم (name), السعر (price) و الكمية (quantity) مع دوال الـ Setter و الـ Getter التي تتيح الوصول لهذه الخصائص.

الكود:

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.stage.Stage;
 
public class Main extends Application {
 
    @Override
    public void start(Stage stage) {
 
        // يمثل الجدول الذي نريد إضافته في النافذة TableView هنا قمنا بإنشاء كائن من الكلاس
        TableView table = new TableView();
 
        // يمثل مجموعة البيانات التي ستظهر في الجدول ObservableList هنا قمنا بإنشاء كائن من الكلاس
        // Product كل سطر في هذا الجدول يمثل كائن من الكلاس
        ObservableList<Product> data = FXCollections.observableArrayList(
            new Product("Laptop", 800.00, 3),
            new Product("Camera", 199.99, 12),
            new Product("Hard Disk", 79.99, 8),
            new Product("Projector", 240.55, 7),
            new Product("PC Screen", 120.00, 6),
            new Product("Speakers", 33.00, 10),
            new Product("Headphones", 12.50, 4),
            new Product("Microphone", 24.75, 5)
        );
 
        // table تمثل الأعمدة التي سنضيفها في الكائن TableColumn هنا قمنا بإنشاء ثلاث كائنات
        TableColumn columnName = new TableColumn("Name");
        TableColumn columnPrice = new TableColumn("Price ($)");
        TableColumn columnQuantity = new TableColumn("Quantity");
 
        // table هنا وضعنا الأعمدة الثلاثة في الكائن
        table.getColumns().addAll(columnName, columnPrice, columnQuantity);
 
        // table في الكائن data هنا قمنا بوضع بيانات الكائن
        table.setItems(data);
 
        // تم إضافته في الجدول Product الموجودة في كل كائن name سيُعرض فيه قيم الـ columnName هنا قلنا أن العامود
        columnName.setCellValueFactory( new PropertyValueFactory<>("name") );
 
        // تم إضافته في الجدول Product الموجودة في كل كائن price سيُعرض فيه قيم الـ columnPrice هنا قلنا أن العامود
        columnPrice.setCellValueFactory( new PropertyValueFactory<>("price") );
 
        // تم إضافته في الجدول Product الموجودة في كل كائن quantity سيُعرض فيه قيم الـ columnQuantity هنا قلنا أن العامود
        columnQuantity.setCellValueFactory( new PropertyValueFactory<>("quantity") );
 
        // في النافذة table هنا قمنا بتحديد حجم الكائن
        table.setPrefSize(440, 300);
 
        // حتى نستغل كل الحجم الذي حجزناه له table هنا قمنا بتحديد عرض كل عامود بداخل الكائن
        columnName.setPrefWidth(144);
        columnPrice.setPrefWidth(144);
        columnQuantity.setPrefWidth(150);
 
        // في النافذة table هنا قمنا بتحديد مكان ظهور الكائن
        table.setTranslateX(10);
        table.setTranslateY(10);
 
        // في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
        Group root = new Group();
 
        // list و بالتالي أصبح أي شيء نريد إضافته نضيفه في الكائن list مرتبط بالكائن root هنا جعلنا الكائن
        ObservableList list = root.getChildren();
 
        // group و الذي بدوره سيضاف أيضاً في الكائن list في الكائن table هنا قمنا بإضافة الكائن
        list.add(table);
 
        // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
        Scene scene = new Scene(root, 460, 320);
 
        // هنا وضعنا عنوان للنافذة
        stage.setTitle("JavaFX TableView");
 
        // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
        stage.setScene(scene);
 
        // هنا قمنا بإظهار النافذة
        stage.show();
    }
 
    // هنا قمنا بتشغيل التطبيق
    public static void main(String[] args) {
        launch(args);
    }
 
}