Building Reusable UI Components

One of Oorian's greatest strengths is the ability to use standard Java OOP for UI development. This tutorial covers patterns for building reusable components that you can share across your application.

Component Basics

A reusable component is simply a class that extends an Oorian element:

public class AlertBox extends Div
{
    public AlertBox(String message)
    {
        setBackgroundColor("#fef3c7");
        setBorderLeft("4px solid #f59e0b");
        setPadding("16px");
        setBorderRadius("4px");
        setText(message);
    }
}

Configurable Components

Add configuration options with fluent setters:

public class AlertBox extends Div
{
    public static final String TYPE_INFO = "info";
    public static final String TYPE_SUCCESS = "success";
    public static final String TYPE_WARNING = "warning";
    public static final String TYPE_ERROR = "error";

    public AlertBox(String message)
    {
        setText(message);
        setType(TYPE_INFO);
    }

    public AlertBox setType(String type)
    {
        switch (type)
        {
            case TYPE_SUCCESS:
                setBackgroundColor("#d1fae5");
                setBorderLeft("4px solid #10b981");
                break;
            case TYPE_WARNING:
                setBackgroundColor("#fef3c7");
                setBorderLeft("4px solid #f59e0b");
                break;
            case TYPE_ERROR:
                setBackgroundColor("#fee2e2");
                setBorderLeft("4px solid #dc2626");
                break;
            default:
                setBackgroundColor("#dbeafe");
                setBorderLeft("4px solid #2563eb");
        }
        return this;
    }
}

// Usage
body.addElement(new AlertBox("Operation successful!")
    .setType(AlertBox.TYPE_SUCCESS));

Components with Children

public class Card extends Div
{
    private Div header;
    private Div body;
    private Div footer;

    public Card()
    {
        setBackgroundColor("#ffffff");
        setBorderRadius("8px");
        addStyleAttribute("box-shadow", "0 2px 4px rgba(0,0,0,0.1)");

        header = new Div();
        header.setPadding("16px");
        header.setBorderBottom("1px solid #e5e7eb");
        addElement(header);

        body = new Div();
        body.setPadding("16px");
        addElement(body);

        footer = new Div();
        footer.setPadding("16px");
        footer.setBorderTop("1px solid #e5e7eb");
    }

    public Card setTitle(String title)
    {
        header.setText(title);
        header.setFontWeight("600");
        return this;
    }

    public Card addToBody(Element element)
    {
        body.addElement(element);
        return this;
    }

    public Card addToFooter(Element element)
    {
        if (!getElements().contains(footer))
        {
            addElement(footer);
        }
        footer.addElement(element);
        return this;
    }
}

Components with Events

public class ConfirmDialog extends Div
{
    public interface ConfirmListener
    {
        void onConfirm();
        void onCancel();
    }

    private ConfirmListener listener;

    public ConfirmDialog(String message, ConfirmListener listener)
    {
        this.listener = listener;

        P messageEl = new P();
        messageEl.setText(message);
        addElement(messageEl);

        Div buttons = new Div();
        buttons.setDisplay(Display.FLEX);
        buttons.addStyleAttribute("gap", "10px");

        Button confirmBtn = new Button("Confirm");
        confirmBtn.registerListener(this::handleConfirm, MouseClickedEvent.class);
        buttons.addElement(confirmBtn);

        Button cancelBtn = new Button("Cancel");
        cancelBtn.registerListener(this::handleCancel, MouseClickedEvent.class);
        buttons.addElement(cancelBtn);

        addElement(buttons);
    }

    private void handleConfirm(MouseClickedEvent event)
    {
        if (listener != null) listener.onConfirm();
    }

    private void handleCancel(MouseClickedEvent event)
    {
        if (listener != null) listener.onCancel();
    }
}

Conclusion

Reusable components in Oorian leverage standard Java patterns: inheritance, composition, and interfaces. Build a library of components tailored to your application's needs and watch your development speed increase.