vaadin-component-design

Vaadin Component Design Skill

Purpose

Create maintainable, responsive Vaadin UI components with proper lifecycle and data binding.

When to Use

• ✅ Creating new UI views
• ✅ Designing forms and data grids
• ✅ Implementing user interactions
• ✅ Building responsive layouts

Component Patterns

@SpringView(name = PoliticianView.NAME)
@Secured({"ROLE_USER", "ROLE_ADMIN"})
public class PoliticianView extends VerticalLayout implements View {
    public static final String NAME = "politicians";

private final PoliticianService service;
private final Grid<Politician> grid = new Grid<>(Politician.class);

public PoliticianView(PoliticianService service) {
    this.service = service;
    setSizeFull();
    configureGrid();
    add(createToolbar(), grid);
    updateList();
}

private void configureGrid() {
    grid.setSizeFull();
    grid.setColumns("firstName", "lastName", "party", "district");
    grid.addColumn(p -> p.getVotingRecords().size())
        .setCaption("Total Votes");
    grid.getColumns().forEach(col -> col.setExpandRatio(1));
}

private Component createToolbar() {
    TextField searchField = new TextField();
    searchField.setPlaceholder("Search...");
    searchField.addValueChangeListener(e -> updateList());
    
    Button addButton = new Button("Add Politician");
    addButton.addClickListener(e -> addPolitician());
    
    return new HorizontalLayout(searchField, addButton);
}

}

## Data Binding
```java
public class PoliticianForm extends FormLayout {
    TextField firstName = new TextField("First Name");
    TextField lastName = new TextField("Last Name");
    ComboBox<Party> party = new ComboBox<>("Party");
    
    Binder<Politician> binder = new Binder<>(Politician.class);
    
    public PoliticianForm() {
        binder.forField(firstName)
            .asRequired("First name is required")
            .withValidator(name -> name.length() >= 2, "Name too short")
            .bind(Politician::getFirstName, Politician::setFirstName);
        
        add(firstName, lastName, party);
    }
}

References

• Vaadin: https://vaadin.com/docs
• citizen-intelligence-agency/src/main/java/com/hack23/cia/web/