3. Thinking in components

What you’ll learn: Component as the base of everything, the lifecycle, composition, and how to create a reusable component. Prerequisites: Windows and navigation.

Complete example (copy, paste, and run)

A reusable component (CardTarefa) built once in onAdd and re-bound to data via bind(...). The window creates three cards with different data. Compiles as is.

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;

public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      CardTarefa c1 = new CardTarefa(); add(LAY_AUTO, c1); c1.bind(new Tarefa("Comprar pão"));
      CardTarefa c2 = new CardTarefa(); add(LAY_AUTO, c2); c2.bind(new Tarefa("Pagar conta"));
      CardTarefa c3 = new CardTarefa(); add(LAY_AUTO, c3); c3.bind(new Tarefa("Estudar CrossFly"));
   }
}

class Tarefa                                             // minimal model
{
   final String titulo;
   Tarefa(String titulo) { this.titulo = titulo; }
}

class CardTarefa extends Component
{
   private final Label titulo = new Label();

   @Override
   public void onAdd(boolean firstTime) throws Exception  // builds the structure ONCE
   {
      super.onAdd(firstTime);
      setLayout(new HorizontalLayout());
      add(LAY_FILL, titulo);
   }

   public void bind(Tarefa t)                             // re-binds by data (cheap)
   {
      titulo.setText(t.titulo);
      repaint();
   }
}

The snippets below show only the core (what goes inside onShow()). To run them, put them in the MainWindow skeleton above.

Everything is a `Component`, container = Component + Layout

A Label is a Component. A Button is a Component. Any Component becomes a container when it receives a Layout, and add(...) delegates the arrangement to the layout.

Component painel = new Component();
painel.setLayout(new VerticalLayout());
painel.add(LAY_AUTO, new Label("Título"));

Lifecycle

Hook	When	Use
`onAdd(boolean firstTime)`	on entering the tree	initialize (resources only on the 1st time → `firstTime`)
`onRemove()`	on leaving	release timers/listeners

Reusable component with `bind(...)`

The recyclable “card” pattern: build the structure once (in onAdd) and re-bind to data:

public class CardTarefa extends Component {
   private final Label titulo = new Label();
   @Override public void onAdd(boolean firstTime) throws Exception {
      super.onAdd(firstTime);
      setLayout(new HorizontalLayout());
      add(LAY_FILL, titulo);
   }
   public void bind(Tarefa t) {      // re-binds by data (cheap, called many times)
      titulo.setText(t.titulo);
      repaint();
   }
}

This is exactly the pattern VirtualListView uses to recycle views (see Loading data).

What you build in this step

The reusable CardTarefa component — built once, re-bound per task.

Recap

Component is the base; container = Component + Layout; initialize in onAdd(firstTime), release in onRemove(); custom components separate building (once) from binding (bind, many times).

Next steps

→ Layouts