El TableView componente es uno de los componentes versátiles que se utilizan con frecuencia en el desarrollo de aplicaciones JavaFX. Permite organizar visualmente los datos rápidamente. Un espectador puede captar rápidamente incluso la información implícita prevista por la información con su representación tabular. Este artículo explora este componente desde el punto de vista de la organización de datos y cómo se puede usar de manera efectiva en la programación Java.
Vista de tabla
El TableView El control proporciona una funcionalidad casi equivalente a Jtable de Swing. componente. Está diseñado para representar un número ilimitado de filas de datos, segmentados en columnas. En JavaFX, hay otro componente, llamado ListView , que es parecido. La única diferencia es que TableView admite múltiples columnas mientras que ListView tiene una sola columna. Las características de TableView control son los siguientes:
- Debido a que una tabla se compone de un número de columnas, cada columna está representada por la TableColumn clase. Esta clase proporciona un control más preciso sobre la columna. Una instancia de esta clase es responsable de mostrar y modificar el contenido de esa columna. Por lo tanto, contiene una serie de propiedades ajustables. Por ejemplo,
- Se puede cambiar el tamaño con la propiedad de ancho (minWidth, maxWidth, prefWidth, width ).
- La visibilidad de la columna se puede alternar con la visibilidad propiedad.
- Existen métodos setter y getter para el encabezado de columna y las propiedades de texto.
- Puede mostrar columnas anidadas.
- Hay un menú contextual en el que el usuario puede hacer clic derecho en el área del encabezado de la columna.
- El contenido se puede ordenar (usando comparador) , ordenable , tipo de ordenación ).
- Existen políticas de cambio de tamaño para la tabla que determinan el estado de la tabla cuando el usuario cambia el tamaño de la columna.
- Proporciona soporte para ordenar varias columnas.
Crear una TableView
Vamos a crear una aplicación de ejemplo para demostrar cómo TableView en JavaFX puede ser utilizado. En primer lugar, presentemos lo básico de JavaFX TableView en codigo. Debido a que una tabla muestra datos, crearemos una clase que contenga los datos.
package sample;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
public class Employee {
private StringProperty name;
private StringProperty phone;
private StringProperty email;
private IntegerProperty salary;
public Employee(String name, String phone, String email,
Integer salary) {
setName(name);
setPhone(phone);
setEmail(email);
setSalary(salary);
}
public StringProperty nameProperty(){
if(name == null)
name = new SimpleStringProperty();
return name;
}
public StringProperty phoneProperty() {
if(phone == null)
phone = new SimpleStringProperty();
return phone;
}
public StringProperty emailProperty() {
if(email == null)
email = new SimpleStringProperty();
return email;
}
public IntegerProperty salaryProperty() {
if(salary == null)
salary = new SimpleIntegerProperty();
return salary;
}
public void setName(String name)
{ nameProperty().setValue(name); }
public String getName()
{ return nameProperty().get(); }
public void setPhone(String phone)
{phoneProperty().setValue(phone);}
public String getPhone()
{ return phoneProperty().get(); }
public void setEmail(String email)
{ emailProperty().setValue(email);}
public String getEmail()
{ return emailProperty().get(); }
public void setSalary(Integer salary)
{ salaryProperty().setValue(salary);}
public Integer getSalary()
{ return salaryProperty().get(); }
}
Ahora, vamos a crear el diseño de la aplicación y poner el TableView como el único componente en la escena.
package sample;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class AppMain extends Application {
@Override
public void start(Stage primaryStage)
throws Exception {
BorderPane root = new BorderPane();
root.setPrefSize(600,400);
final TableView<Employee> employeeTableView =
new TableView<>();
employeeTableView.setPrefWidth(500);
employeeTableView.setItems(dummyEmployees());
TableColumn<Employee, String> nameCol =
new TableColumn<>("Name");
nameCol.setCellValueFactory(
new PropertyValueFactory<Employee,
String>("Name"));
TableColumn<Employee, String> phoneCol =
new TableColumn<>("Phone");
phoneCol.setCellValueFactory(
new PropertyValueFactory<Employee,
String>("Phone"));
TableColumn<Employee, String> emailCol =
new TableColumn<>("Email");
emailCol.setCellValueFactory(
new PropertyValueFactory<Employee,
String>("Email"));
TableColumn<Employee, Integer> salaryCol =
new TableColumn<>("Salary");
salaryCol.setCellValueFactory(
new PropertyValueFactory<Employee,
Integer>("Salary"));
employeeTableView.getColumns().addAll(nameCol,phoneCol,
emailCol,salaryCol);
root.setCenter(employeeTableView);
Scene scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.setTitle("JavaFX TableView Demonstration");
primaryStage.show();
}
private static ObservableList<Employee> dummyEmployees() {
ObservableList<Employee> employees =
FXCollections.observableArrayList();
employees.add(new Employee("Arko Bannerjee",
"9876543210","[email protected]", 5600));
employees.add(new Employee("Subir Sha",
"8109276354","[email protected]",7200));
employees.add(new Employee("Karoline Bhatt",
"638374642","[email protected]",3600));
employees.add(new Employee("Vikas Verma",
"425637772","[email protected]",7800));
employees.add(new Employee("Gurmeet Singh",
"9876543210","[email protected]",8900));
employees.add(new Employee("Partho Goel",
"837743636","[email protected]",5644));
employees.add(new Employee("Hanish Jaiswal",
"826355343","[email protected]",6500));
employees.add(new Employee("Preety Ahuja",
"9298366454","[email protected]",7800));
employees.add(new Employee("Sandip Paul",
"82773554536","[email protected]",8600));
employees.add(new Employee("Sudipto Sarkar",
"73664552542","[email protected]",8200));
employees.add(new Employee("Bikash Panda",
"6365344245","[email protected]",8400));
employees.add(new Employee("Abhronil Sahu",
"7829293663","[email protected]",8000));
employees.add(new Employee("Dilip Das",
"9283665455","[email protected]",8100));
return employees;
}
public static void main(String[] args) {
launch(args);
}
}
La tabla se crea con el siguiente código:
final TableView<Employee> employeeTableView = new TableView<>();
El contenido de la tabla está representado por las columnas añadidas. Cada columna también debe tener un encabezado para designar visualmente el contenido de la columna. En este ejemplo, hemos establecido cuatro columnas (designadas por la propiedad definida en el Employee clase).
TableColumn<Employee, String> nameCol =
new TableColumn<>("Name");
nameCol.setEditable(true);
nameCol.setCellValueFactory(
new PropertyValueFactory<Employee,
String>("Name"));
Salida
Figura 1: El contenido de la tabla
A continuación, hemos establecido esto como el componente principal del diseño. Eso es todo lo que tenemos que hacer para mostrar algo de contenido en TableView . Las funciones como ordenar el contenido no requieren ningún manejo especial/adicional porque el componente las proporciona como una función predeterminada. Además, se puede realizar una clasificación múltiple manteniendo presionada la tecla MAYÚS del teclado mientras se seleccionan las columnas con un clic del mouse.
Columnas editables en una tabla
Si queremos crear una tabla que tenga una columna editable, podemos hacerlo muy fácilmente. Cuando hacemos doble clic en la columna editable, aparece un cuadro de texto donde podemos editar el valor. Para que el cambio sea permanente, debemos presionar la tecla Intro del teclado.
Aquí hay otro ejemplo con columnas editables.
package sample;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
public class PhoneBook {
private StringProperty name;
private StringProperty phone;
public PhoneBook(String name, String phone) {
setName(name);
setPhone(phone);
}
public StringProperty nameProperty(){
if(name == null)
name = new SimpleStringProperty();
return name;
}
public StringProperty phoneProperty(){
if(phone == null)
phone = new SimpleStringProperty();
return phone;
}
public void setName(String name)
{ nameProperty().setValue(name); }
public String getName()
{ return nameProperty().get(); }
public void setPhone(String phone)
{ phoneProperty().setValue(phone);}
public String getPhone()
{ return phoneProperty().get(); }
@Override
public String toString() {
return getName()+" : "+getPhone();
}
}
package sample;
import javafx.application.*;
import javafx.beans.value.*;
import javafx.collections.*;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.control.cell.*;
import javafx.scene.layout.*;
import javafx.scene.text.*;
import javafx.stage.*;
public class PhoneBookTable extends Application {
private TableView<PhoneBook> table;
private ObservableList data;
private Text txtStatus;
@Override
public void start(Stage primaryStage) {
primaryStage.setTitle("Table View Demonstration.");
HBox hb = new HBox();
hb.setAlignment(Pos.CENTER);
table = new TableView<>();
data = dummyData();
table.setItems(data);
TableColumn<PhoneBook,String> nameCol = new
TableColumn<>("Name");
nameCol.setCellValueFactory(new
PropertyValueFactory<>("name"));
TableColumn<PhoneBook,String> phoneCol = new
TableColumn("Phone");
phoneCol.setCellValueFactory(new
PropertyValueFactory<>("phone"));
table.getColumns().setAll(nameCol, phoneCol);
table.setPrefWidth(400);
table.setPrefHeight(250);
table.setColumnResizePolicy(TableView.
CONSTRAINED_RESIZE_POLICY);
table.getSelectionModel().selectedIndexProperty().
addListener(
new RowChangeHandler());
table.setEditable(true);
phoneCol.setCellFactory(TextFieldTableCell.
forTableColumn());
phoneCol.setOnEditCommit(event -> (event.getTableView().
getItems().get(event.getTablePosition().getRow())).
setPhone(event.getNewValue()));
txtStatus = new Text();
VBox vbox = new VBox(20);
vbox.setPadding(new Insets(20, 20, 20, 20));;
vbox.getChildren().addAll(hb, table, txtStatus);
// W x H
Scene scene = new Scene(vbox, 450, 375);
primaryStage.setScene(scene);
primaryStage.show();
table.getSelectionModel().select(0);
PhoneBook pb = table.getSelectionModel().
getSelectedItem();
txtStatus.setText(pb.toString());
}
private class RowChangeHandler implements
ChangeListener {
@Override
public void changed(ObservableValue ov, Object oldVal,
Object newVal) {
int val = ((Number)newVal).intValue();
if (data.size()<=0) {
return;
}
PhoneBook pb= (PhoneBook) data.get(val);
txtStatus.setText(pb.toString());
}
}
public ObservableList<PhoneBook> dummyData() {
ObservableList<PhoneBook> records =
FXCollections.observableArrayList();
records.add(new PhoneBook("Mickey Mouse",
"7894561230"));
records.add(new PhoneBook("Donald Duck",
"1234567890"));
records.add(new PhoneBook("Alladin",
"7418529630"));
records.add(new PhoneBook("Zairo",
"9638527410"));
records.add(new PhoneBook("Batman",
"7894561230"));
records.add(new PhoneBook("Spiderman",
"852478930"));
return records;
}
public static void main(String [] args) {
Application.launch(args);
}
}
Salida
Figura 2: Un registro extraído de la tabla
Conclusión
El TableView El componente es bastante útil en el diseño de UI, especialmente cuando hacemos programación de bases de datos. JavaFX ha hecho que este componente sea versátil, aunque existen algunas fallas en la implementación de representaciones tabulares complejas. Por supuesto, la facilidad de uso que se muestra aquí es solo un rasguño. Se puede lograr más con TableView , como veremos en próximos artículos.
