如何在linkki-framework中向ContainerPmo定义的表格传递行数据？

Hey there! I get it—setting up tables with Linkki's ContainerPmo can feel a bit tricky when you're first figuring out how to feed your row data into it. Let's walk through the exact steps and key concepts you need to know to make this work smoothly.

Core Concepts to Remember #

First, let's clarify the two main PMO types involved here:

• ContainerPmo: Acts as the "wrapper" for your table. It's responsible for providing the collection of data items that will become table rows.
• RowPmo: Represents a single row in the table. Each instance maps to one data item from your collection, and defines how that item's properties are displayed in the table columns.

Step 1: Implement Your ContainerPmo #

The critical part here is overriding the getItems() method—this is where you pass your row data to the table. Your ContainerPmo should hold a reference to your data collection (like a list of entities or DTOs) and return it via this method.

Here's a quick example:

import org.linkki.core.ui.table.ContainerPmo;
import java.util.List;

public class OrderTablePmo implements ContainerPmo<OrderRowPmo> {

    private final List<Order> orders;

    // Inject or pass your data collection via constructor
    public OrderTablePmo(List<Order> orders) {
        this.orders = orders;
    }

    @Override
    public List<OrderRowPmo> getItems() {
        // Convert each Order data item to a corresponding RowPmo
        return orders.stream()
                     .map(OrderRowPmo::new)
                     .toList();
    }

    // Optional: Define table-level settings (like caption)
    @Override
    public String getCaption() {
        return "Customer Orders";
    }
}

Step 2: Create Your RowPmo #

Each RowPmo wraps a single data item and defines the table columns using Linkki's annotations. This is where you map your data's properties to table cells.

Example OrderRowPmo:

import org.linkki.core.ui.element.annotation.UITextField;
import org.linkki.core.ui.table.annotation.UITableColumn;

public class OrderRowPmo {

    private final Order order;

    public OrderRowPmo(Order order) {
        this.order = order;
    }

    // Map Order's ID to a table column
    @UITextField(position = 10, label = "Order ID")
    @UITableColumn(width = 100)
    public String getOrderId() {
        return order.getId();
    }

    // Map Order's customer name to another column
    @UITextField(position = 20, label = "Customer")
    @UITableColumn(width = 200)
    public String getCustomerName() {
        return order.getCustomer().getName();
    }

    // Add more columns for other properties as needed
    @UITextField(position = 30, label = "Total Amount")
    @UITableColumn(width = 150)
    public String getTotalAmount() {
        return String.format("$%.2f", order.getTotalAmount());
    }
}

Step 3: Bind the ContainerPmo to the Table in Your UI #

Once your PMOs are set up, you just need to bind the ContainerPmo to a Linkki table component in your UI code. For example, in a Vaadin-based setup:

import org.linkki.core.ui.component.table.LinkkiTable;

// In your view class
public class OrderView extends VerticalLayout {

    public OrderView(List<Order> orders) {
        // Create the ContainerPmo with your data
        OrderTablePmo tablePmo = new OrderTablePmo(orders);
        
        // Create Linkki table and bind it to the ContainerPmo
        LinkkiTable<OrderRowPmo> orderTable = new LinkkiTable<>(tablePmo);
        
        add(orderTable);
    }
}

Key Notes #

• Data Updates: If your underlying data collection changes (e.g., new orders added), you can refresh the table by calling orderTable.getDataProvider().refreshAll() after updating the data in your ContainerPmo.
• Customization: You can add sorting, filtering, or editable columns by adding additional annotations to your RowPmo methods or configuring the LinkkiTable directly.
• Type Safety: Linkki uses the generic type in ContainerPmo (ContainerPmo<OrderRowPmo>) to ensure type safety between the container and row PMOs.

That's all there is to it! The ContainerPmo acts as the bridge between your raw data and the table, while the RowPmo handles how each data item is rendered as a row.

内容的提问来源于stack exchange，提问作者sami haidar