Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing

JavaFXطريقة جعل المستخدم قادر على إضافة و حذف و تعديل بيانات الـTableView

المثال التالي يعلمك طريقة جعل المستخدم قادر على إضافة و حذف و تعديل بيانات الـ TableView.


مثال

User.java
import javafx.beans.property.SimpleStringProperty;
public class User {
SimpleStringProperty name;
SimpleStringProperty role;
SimpleStringProperty email;
public User() {
this.name = new SimpleStringProperty("");
this.role = new SimpleStringProperty("");
this.email = new SimpleStringProperty("");
}
public User(String name, String role, String email) {
this.name = new SimpleStringProperty(name);
this.role = new SimpleStringProperty(role);
this.email = new SimpleStringProperty(email);
}
public String getName() {
return name.getValue();
}
public void setName(String name) {
this.name = new SimpleStringProperty(name);
}
public String getRole() {
return role.getValue();
}
public void setRole(String role) {
this.role = new SimpleStringProperty(role);
}
public String getEmail() {
return email.getValue();
}
public void setEmail(String email) {
this.email = new SimpleStringProperty(email);
}
}
import javafx.beans.property.SimpleStringProperty; public class User { SimpleStringProperty name; SimpleStringProperty role; SimpleStringProperty email; public User() { this.name = new SimpleStringProperty(""); this.role = new SimpleStringProperty(""); this.email = new SimpleStringProperty(""); } public User(String name, String role, String email) { this.name = new SimpleStringProperty(name); this.role = new SimpleStringProperty(role); this.email = new SimpleStringProperty(email); } public String getName() { return name.getValue(); } public void setName(String name) { this.name = new SimpleStringProperty(name); } public String getRole() { return role.getValue(); } public void setRole(String role) { this.role = new SimpleStringProperty(role); } public String getEmail() { return email.getValue(); } public void setEmail(String email) { this.email = new SimpleStringProperty(email); } }

Main.java
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Alert;
import javafx.scene.control.Alert.AlertType;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.SelectionMode;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableColumn.CellEditEvent;
import javafx.scene.control.TableView;
import javafx.scene.control.TextField;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.control.cell.TextFieldTableCell;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// الذين سنضيفهم في النافذة Labels هنا قمنا بإنشاء جميع الـ
Label labelName = new Label("Name");
Label labelRole = new Label("Role");
Label labelEmail = new Label("Email");
Label labelTotalUsers = new Label("To Users: 0");
// الذين سنضيفهم في النافذة Buttons هنا قمنا بإنشاء جميع الـ
Button buttonAdd = new Button("Add Record");
Button buttonDelete = new Button("Delete Selected");
Button buttonDeleteAll = new Button("Delete All");
// الذين سنضيفهم في النافذة TextFields هنا قمنا بإنشاء جميع الـ
TextField fieldName = new TextField();
TextField fieldRole = new TextField();
TextField fieldEmail = new TextField();
// يمثل الجدول الذي نريد إضافته في النافذة TableView هنا قمنا بإنشاء كائن من الكلاس
TableView<User> table = new TableView();
// يمثل مجموعة البيانات التي ستظهر في الجدول Observableهنا قمنا بإنشاء كائن من الكلاس
// User كل سطر في هذا الجدول يمثل كائن من الكلاس
ObservableList<User> data = FXCollections.observableArrayList();
// فقط String هنا قمنا بإنشاء العامود الذي سيظهر أسماء المستخدمين و حددنا أنه يقبل قيم من النوع
TableColumn<User, String> columnName = new TableColumn<>("Name");
// تم إضافته في الجدول User الموجودة في كل كائن name سيُعرض فيه قيم الـ columnName هنا قلنا أن العامود
columnName.setCellValueFactory( new PropertyValueFactory<>("name") );
// يتيح لك إدخال قيمة جديدة TextField سيتم إظهار columnName عند النقر على أي قيمة موجودة في العامود
columnName.setCellFactory(TextFieldTableCell.forTableColumn());
// String سيتم حفظ القيمة الجديدة في حال كان نوعها Enter عند النقر على الزر
columnName.setOnEditCommit((CellEditEvent<User, String> t) -> {
((User) t.getTableView()
.getItems()
.get(t.getTablePosition().getRow()))
.setName(t.getNewValue());
});
// فقط String هنا قمنا بإنشاء العامود الذي سيظهر أدوار المستخدمين و حددنا أنه يقبل قيم من النوع
TableColumn<User, String> columnRole = new TableColumn<>("Role");
// تم إضافته في الجدول User الموجودة في كل كائن role سيُعرض فيه قيم الـ columnRole هنا قلنا أن العامود
columnRole.setCellValueFactory( new PropertyValueFactory<>("role") );
// يتيح لك إدخال قيمة جديدة TextField سيتم إظهار columnRole عند النقر على أي قيمة موجودة في العامود
columnRole.setCellFactory(TextFieldTableCell.forTableColumn());
// String سيتم حفظ القيمة الجديدة في حال كان نوعها Enter عند النقر على الزر
columnRole.setOnEditCommit((CellEditEvent<User, String> t) -> {
((User) t.getTableView()
.getItems()
.get(t.getTablePosition().getRow()))
.setRole(t.getNewValue());
});
// فقط String هنا قمنا بإنشاء العامود الذي سيظهر البريد الإلكتروني للمستخدمين و حددنا أنه يقبل قيم من النوع
TableColumn<User, String> columnEmail = new TableColumn<>("Email");
// تم إضافته في الجدول User الموجودة في كل كائن role سيُعرض فيه قيم الـ columnEmail هنا قلنا أن العامود
columnEmail.setCellValueFactory( new PropertyValueFactory<>("email") );
// يتيح لك إدخال قيمة جديدة TextField سيتم إظهار columnEmail عند النقر على أي قيمة موجودة في العامود
columnEmail.setCellFactory(TextFieldTableCell.forTableColumn());
// String سيتم حفظ القيمة الجديدة في حال كان نوعها Enter عند النقر على الزر
columnEmail.setOnEditCommit((CellEditEvent<User, String> t) -> {
((User) t.getTableView()
.getItems()
.get(t.getTablePosition().getRow()))
.setEmail(t.getNewValue());
});
// قابلة للتعديل table هنا جعلنا بيانات الجدول
table.setEditable(true);
// table هنا وضعنا الأعمدة الثلاثة في الكائن
table.getColumns().addAll(columnName, columnRole, columnEmail);
// table في الكائن data هنا قمنا بوضع بيانات الكائن
table.setItems(data);
// table هنا جعلنا المستخدم قادر على تحديد أكثر من سطر بداخل الـ
table.getSelectionModel().setSelectionMode( SelectionMode.MULTIPLE );
// في النافذة table هنا قمنا بتحديد حجم الكائن
table.setPrefSize(500, 200);
columnName.setPrefWidth(120);
columnRole.setPrefWidth(180);
columnEmail.setPrefWidth(200);
labelName.setPrefSize(50, 30);
labelRole.setPrefSize(50, 30);
labelEmail.setPrefSize(50, 30);
fieldName.setPrefSize(180, 30);
fieldRole.setPrefSize(180, 30);
fieldEmail.setPrefSize(180, 30);
buttonAdd.setPrefSize(230, 30);
labelTotalUsers.setPrefSize(230, 30);
buttonDelete.setPrefSize(180, 30);
buttonDeleteAll.setPrefSize(180, 30);
// في النافذة table هنا قمنا بتحديد مكان ظهور الكائن
table.setTranslateX(280);
table.setTranslateY(25);
labelName.setTranslateX(20);
labelName.setTranslateY(45);
labelRole.setTranslateX(20);
labelRole.setTranslateY(85);
labelEmail.setTranslateX(20);
labelEmail.setTranslateY(125);
fieldName.setTranslateX(70);
fieldName.setTranslateY(45);
fieldRole.setTranslateX(70);
fieldRole.setTranslateY(85);
fieldEmail.setTranslateX(70);
fieldEmail.setTranslateY(125);
buttonAdd.setTranslateX(20);
buttonAdd.setTranslateY(175);
labelTotalUsers.setTranslateX(20);
labelTotalUsers.setTranslateY(250);
buttonDelete.setTranslateX(330);
buttonDelete.setTranslateY(250);
buttonDeleteAll.setTranslateX(540);
buttonDeleteAll.setTranslateY(250);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن table هنا قمنا بإضافة الكائن
root.getChildren().add(table);
root.getChildren().add(labelName);
root.getChildren().add(labelRole);
root.getChildren().add(labelEmail);
root.getChildren().add(fieldName);
root.getChildren().add(fieldRole);
root.getChildren().add(fieldEmail);
root.getChildren().add(buttonAdd);
root.getChildren().add(labelTotalUsers);
root.getChildren().add(buttonDelete);
root.getChildren().add(buttonDeleteAll);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 800, 300);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX TableView");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
// buttonAdd هنا قمنا بتحديد ماذا سيحدث عند النقر على الزر
buttonAdd.setOnAction(Action -> {
// email و role و name هنا قمنا بتخزين النصوص المدخلة في الحقول في المتغيرات
String name = fieldName.getText();
String role = fieldRole.getText();
String email = fieldEmail.getText();
// غير فارغة - أي فيها نص email و role و name هنا قلنا إذا كانت المتغيرات
if (!name.equals("") && !role.equals("") && !email.equals("") ) {
// سيتم إضافتها على سطر جديد في الجدول
// labelTotalUsers ثم تحديث عدد المستخدمين الموجودين في الجدول و الذي يتم عرضه على الكائن
// بعدها سيتم مسح النص المدخل في الحقول
data.add(new User(name, role, email));
labelTotalUsers.setText("Total Users: " + table.getItems().size());
fieldName.setText("");
fieldRole.setText("");
fieldEmail.setText("");
}
else {
// فارغاً سيتم إظهار رسالة تنبيه أمام المستخدم email و role و name إذا كان واحد من المتغيرات
new Alert(AlertType.WARNING, "Name, Role and Email fields cannot be empty!").show();
}
});
// buttonDelete هنا قمنا بتحديد ماذا سيحدث عند النقر على الزر
buttonDelete.setOnAction(Action -> {
// سيتم حذف أي سطر تم تحديده
table.getItems().removeAll( table.getSelectionModel().getSelectedItems() );
// labelTotalUsers ثم تحديث عدد المستخدمين الموجودين في الجدول و الذي يتم عرضه على الكائن
labelTotalUsers.setText("Total Users: " + table.getItems().size());
});
// buttonDeleteAll هنا قمنا بتحديد ماذا سيحدث عند النقر على الزر
buttonDeleteAll.setOnAction(Action -> {
// سيتم حذف جميع الأسطر في الجدول
table.getItems().clear();
// labelTotalUsers ثم تحديث عدد المستخدمين الموجودين في الجدول و الذي يتم عرضه على الكائن
labelTotalUsers.setText("Total Users: " + table.getItems().size());
});
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
import javafx.application.Application; import javafx.collections.FXCollections; import javafx.collections.ObservableList; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.control.Alert; import javafx.scene.control.Alert.AlertType; import javafx.scene.control.Button; import javafx.scene.control.Label; import javafx.scene.control.SelectionMode; import javafx.scene.control.TableColumn; import javafx.scene.control.TableColumn.CellEditEvent; import javafx.scene.control.TableView; import javafx.scene.control.TextField; import javafx.scene.control.cell.PropertyValueFactory; import javafx.scene.control.cell.TextFieldTableCell; import javafx.stage.Stage; public class Main extends Application { @Override public void start(Stage stage) { // الذين سنضيفهم في النافذة Labels هنا قمنا بإنشاء جميع الـ Label labelName = new Label("Name"); Label labelRole = new Label("Role"); Label labelEmail = new Label("Email"); Label labelTotalUsers = new Label("To Users: 0"); // الذين سنضيفهم في النافذة Buttons هنا قمنا بإنشاء جميع الـ Button buttonAdd = new Button("Add Record"); Button buttonDelete = new Button("Delete Selected"); Button buttonDeleteAll = new Button("Delete All"); // الذين سنضيفهم في النافذة TextFields هنا قمنا بإنشاء جميع الـ TextField fieldName = new TextField(); TextField fieldRole = new TextField(); TextField fieldEmail = new TextField(); // يمثل الجدول الذي نريد إضافته في النافذة TableView هنا قمنا بإنشاء كائن من الكلاس TableView<User> table = new TableView(); // يمثل مجموعة البيانات التي ستظهر في الجدول Observableهنا قمنا بإنشاء كائن من الكلاس // User كل سطر في هذا الجدول يمثل كائن من الكلاس ObservableList<User> data = FXCollections.observableArrayList(); // فقط String هنا قمنا بإنشاء العامود الذي سيظهر أسماء المستخدمين و حددنا أنه يقبل قيم من النوع TableColumn<User, String> columnName = new TableColumn<>("Name"); // تم إضافته في الجدول User الموجودة في كل كائن name سيُعرض فيه قيم الـ columnName هنا قلنا أن العامود columnName.setCellValueFactory( new PropertyValueFactory<>("name") ); // يتيح لك إدخال قيمة جديدة TextField سيتم إظهار columnName عند النقر على أي قيمة موجودة في العامود columnName.setCellFactory(TextFieldTableCell.forTableColumn()); // String سيتم حفظ القيمة الجديدة في حال كان نوعها Enter عند النقر على الزر columnName.setOnEditCommit((CellEditEvent<User, String> t) -> { ((User) t.getTableView() .getItems() .get(t.getTablePosition().getRow())) .setName(t.getNewValue()); }); // فقط String هنا قمنا بإنشاء العامود الذي سيظهر أدوار المستخدمين و حددنا أنه يقبل قيم من النوع TableColumn<User, String> columnRole = new TableColumn<>("Role"); // تم إضافته في الجدول User الموجودة في كل كائن role سيُعرض فيه قيم الـ columnRole هنا قلنا أن العامود columnRole.setCellValueFactory( new PropertyValueFactory<>("role") ); // يتيح لك إدخال قيمة جديدة TextField سيتم إظهار columnRole عند النقر على أي قيمة موجودة في العامود columnRole.setCellFactory(TextFieldTableCell.forTableColumn()); // String سيتم حفظ القيمة الجديدة في حال كان نوعها Enter عند النقر على الزر columnRole.setOnEditCommit((CellEditEvent<User, String> t) -> { ((User) t.getTableView() .getItems() .get(t.getTablePosition().getRow())) .setRole(t.getNewValue()); }); // فقط String هنا قمنا بإنشاء العامود الذي سيظهر البريد الإلكتروني للمستخدمين و حددنا أنه يقبل قيم من النوع TableColumn<User, String> columnEmail = new TableColumn<>("Email"); // تم إضافته في الجدول User الموجودة في كل كائن role سيُعرض فيه قيم الـ columnEmail هنا قلنا أن العامود columnEmail.setCellValueFactory( new PropertyValueFactory<>("email") ); // يتيح لك إدخال قيمة جديدة TextField سيتم إظهار columnEmail عند النقر على أي قيمة موجودة في العامود columnEmail.setCellFactory(TextFieldTableCell.forTableColumn()); // String سيتم حفظ القيمة الجديدة في حال كان نوعها Enter عند النقر على الزر columnEmail.setOnEditCommit((CellEditEvent<User, String> t) -> { ((User) t.getTableView() .getItems() .get(t.getTablePosition().getRow())) .setEmail(t.getNewValue()); }); // قابلة للتعديل table هنا جعلنا بيانات الجدول table.setEditable(true); // table هنا وضعنا الأعمدة الثلاثة في الكائن table.getColumns().addAll(columnName, columnRole, columnEmail); // table في الكائن data هنا قمنا بوضع بيانات الكائن table.setItems(data); // table هنا جعلنا المستخدم قادر على تحديد أكثر من سطر بداخل الـ table.getSelectionModel().setSelectionMode( SelectionMode.MULTIPLE ); // في النافذة table هنا قمنا بتحديد حجم الكائن table.setPrefSize(500, 200); columnName.setPrefWidth(120); columnRole.setPrefWidth(180); columnEmail.setPrefWidth(200); labelName.setPrefSize(50, 30); labelRole.setPrefSize(50, 30); labelEmail.setPrefSize(50, 30); fieldName.setPrefSize(180, 30); fieldRole.setPrefSize(180, 30); fieldEmail.setPrefSize(180, 30); buttonAdd.setPrefSize(230, 30); labelTotalUsers.setPrefSize(230, 30); buttonDelete.setPrefSize(180, 30); buttonDeleteAll.setPrefSize(180, 30); // في النافذة table هنا قمنا بتحديد مكان ظهور الكائن table.setTranslateX(280); table.setTranslateY(25); labelName.setTranslateX(20); labelName.setTranslateY(45); labelRole.setTranslateX(20); labelRole.setTranslateY(85); labelEmail.setTranslateX(20); labelEmail.setTranslateY(125); fieldName.setTranslateX(70); fieldName.setTranslateY(45); fieldRole.setTranslateX(70); fieldRole.setTranslateY(85); fieldEmail.setTranslateX(70); fieldEmail.setTranslateY(125); buttonAdd.setTranslateX(20); buttonAdd.setTranslateY(175); labelTotalUsers.setTranslateX(20); labelTotalUsers.setTranslateY(250); buttonDelete.setTranslateX(330); buttonDelete.setTranslateY(250); buttonDeleteAll.setTranslateX(540); buttonDeleteAll.setTranslateY(250); // في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس Group root = new Group(); // root في الكائن table هنا قمنا بإضافة الكائن root.getChildren().add(table); root.getChildren().add(labelName); root.getChildren().add(labelRole); root.getChildren().add(labelEmail); root.getChildren().add(fieldName); root.getChildren().add(fieldRole); root.getChildren().add(fieldEmail); root.getChildren().add(buttonAdd); root.getChildren().add(labelTotalUsers); root.getChildren().add(buttonDelete); root.getChildren().add(buttonDeleteAll); // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن Scene scene = new Scene(root, 800, 300); // هنا وضعنا عنوان للنافذة stage.setTitle("JavaFX TableView"); // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ stage.setScene(scene); // هنا قمنا بإظهار النافذة stage.show(); // buttonAdd هنا قمنا بتحديد ماذا سيحدث عند النقر على الزر buttonAdd.setOnAction(Action -> { // email و role و name هنا قمنا بتخزين النصوص المدخلة في الحقول في المتغيرات String name = fieldName.getText(); String role = fieldRole.getText(); String email = fieldEmail.getText(); // غير فارغة - أي فيها نص email و role و name هنا قلنا إذا كانت المتغيرات if (!name.equals("") && !role.equals("") && !email.equals("") ) { // سيتم إضافتها على سطر جديد في الجدول // labelTotalUsers ثم تحديث عدد المستخدمين الموجودين في الجدول و الذي يتم عرضه على الكائن // بعدها سيتم مسح النص المدخل في الحقول data.add(new User(name, role, email)); labelTotalUsers.setText("Total Users: " + table.getItems().size()); fieldName.setText(""); fieldRole.setText(""); fieldEmail.setText(""); } else { // فارغاً سيتم إظهار رسالة تنبيه أمام المستخدم email و role و name إذا كان واحد من المتغيرات new Alert(AlertType.WARNING, "Name, Role and Email fields cannot be empty!").show(); } }); // buttonDelete هنا قمنا بتحديد ماذا سيحدث عند النقر على الزر buttonDelete.setOnAction(Action -> { // سيتم حذف أي سطر تم تحديده table.getItems().removeAll( table.getSelectionModel().getSelectedItems() ); // labelTotalUsers ثم تحديث عدد المستخدمين الموجودين في الجدول و الذي يتم عرضه على الكائن labelTotalUsers.setText("Total Users: " + table.getItems().size()); }); // buttonDeleteAll هنا قمنا بتحديد ماذا سيحدث عند النقر على الزر buttonDeleteAll.setOnAction(Action -> { // سيتم حذف جميع الأسطر في الجدول table.getItems().clear(); // labelTotalUsers ثم تحديث عدد المستخدمين الموجودين في الجدول و الذي يتم عرضه على الكائن labelTotalUsers.setText("Total Users: " + table.getItems().size()); }); } // هنا قمنا بتشغيل التطبيق public static void main(String[] args) { launch(args); } }

ستظهر لك النافذة التالية عند التشغيل.

إذا أردت مسح أكثر من سطر, عليك إبقاء إصبعك على الزر ctrl حتى تستطيع تحديد أكثر من سطر في الجدول.

طريقة جعل المستخدم قادر على إضافة و حذف و تعديل بيانات ال TableView في javafx