Component-Based Architecture

Build your UI with composable, reusable Java components using true object-oriented design—inheritance, encapsulation, and polymorphism.

First-Class Objects

Every HTML element is a real Java object with methods, fields, and type safety. No string concatenation or template magic.

Composition over Templates

Build complex UIs by composing smaller components. Nest them, pass them around, and reuse them across pages.

Encapsulation

Each component owns its structure, styling, and behavior. Internal details stay hidden behind a clean public API.

Reusable Components

Write a component once and use it everywhere. Extend it for variations. Share it across projects.

Type-Safe Properties

Configure components with type-checked setters. The compiler catches mistakes before they reach production.

IDE Support

Full autocomplete, go-to-definition, and refactoring for every component. Your IDE understands your entire UI.

Building a Reusable Component

Create custom components by extending element classes. Define fields for child elements, configure them in initialize(), and expose a clean public API for consumers.

Java
public class StatusCard extends Div
{
    private Div iconContainer;
    private H3 titleLabel;
    private P descriptionLabel;
    private Span badge;

    private String iconName;
    private String title;
    private String description;
    private String badgeText;
    private String accentColor = "#2563eb";

    public StatusCard()
    {
        super();
    }

    @Override
    protected void initialize()
    {
        super.initialize();

        setBackgroundColor("#ffffff");
        setBorderRadius("12px");
        setPadding("24px");
        setBorderLeft("4px solid " + accentColor);

        iconContainer = new Div();
        iconContainer.setMarginBottom("16px");
        FaIcon icon = new FaIcon(FaIcon.SOLID, iconName);
        icon.setColor(accentColor);
        iconContainer.addElement(icon);
        addElement(iconContainer);

        titleLabel = new H3();
        titleLabel.setText(title);
        titleLabel.setMargin("0 0 8px 0");
        addElement(titleLabel);

        if (badgeText != null)
        {
            badge = new Span();
            badge.setText(badgeText);
            badge.setPadding("4px 12px");
            badge.setBorderRadius("12px");
            badge.setFontSize("12px");
            addElement(badge);
        }

        descriptionLabel = new P();
        descriptionLabel.setText(description);
        descriptionLabel.setColor("#6b7280");
        addElement(descriptionLabel);
    }

    public StatusCard setIconName(String iconName)
    {
        this.iconName = iconName;
        return this;
    }

    public StatusCard setTitle(String title)
    {
        this.title = title;
        return this;
    }

    public StatusCard setDescription(String description)
    {
        this.description = description;
        return this;
    }

    public StatusCard setBadgeText(String badgeText)
    {
        this.badgeText = badgeText;
        return this;
    }

    public StatusCard setAccentColor(String accentColor)
    {
        this.accentColor = accentColor;
        return this;
    }
}

// Usage - clean, readable, type-safe
StatusCard card = new StatusCard();
card.setIconName(FaIconName.CHECK);
card.setTitle("Build Successful");
card.setDescription("All 247 tests passed.");
card.setBadgeText("Production");
card.setAccentColor("#22c55e");
container.addElement(card);

Why Component Architecture

Refactoring Safety

Rename a component class or method and your IDE updates every reference automatically. No broken templates or missing includes to track down.

Inheritance & Polymorphism

Extend base components to create specialized variants. Override behavior selectively. Use polymorphism to swap implementations at runtime.

Self-Contained Components

Each component manages its own structure, styling, and event handling. Move it to another page or project and it just works.

No Template Language

No special syntax to learn, no expression language quirks, no template inheritance rules. Just Java—a language you already know.

Testable Components

Unit test your UI components with standard Java testing frameworks. Verify structure, test configuration, and assert behavior with familiar tools.