# Thinking in components

> Component as the base, lifecycle (onAdd/onRemove), composition, and a custom component with bind.

Source: https://crossfly.dev/docs/learn/thinking-in-components — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# 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](/docs/learn/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.
```java
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.
```java
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:
```java
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](/docs/learn/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](/docs/learn/layouts)

## See also
- Concept: [Everything is a Component](/docs/concepts/everything-is-a-component) · [Lifecycle](/docs/concepts/lifecycle)