# Pensando em componentes

> Component como base, ciclo de vida (onAdd/onRemove), composição e um componente custom com bind.

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

# 3. Pensando em componentes

> **O que você vai aprender:** `Component` como base de tudo, o ciclo de vida, composição e como criar
> um componente reutilizável. **Pré-requisitos:** [Janelas e navegação](/docs/learn/windows-and-navigation).

## Exemplo completo (copiar, colar e rodar)
Um componente reutilizável (`CardTarefa`) montado uma vez em `onAdd` e re-vinculado por dados via
`bind(...)`. A janela cria três cards com dados diferentes. Compila como está.
```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                                             // modelo mínimo
{
   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  // monta a estrutura UMA vez
   {
      super.onAdd(firstTime);
      setLayout(new HorizontalLayout());
      add(LAY_FILL, titulo);
   }

   public void bind(Tarefa t)                             // re-vincula por dados (barato)
   {
      titulo.setText(t.titulo);
      repaint();
   }
}
```
> Os trechos abaixo mostram **só o miolo** (o que vai dentro de `onShow()`). Para rodar, coloque-os no esqueleto `MainWindow` acima.

## Tudo é `Component`, container = Component + Layout
Um `Label` é um `Component`. Um `Button` é um `Component`. Qualquer `Component` vira **container** ao
receber um `Layout`, e `add(...)` delega o arranjo ao layout.
```java
Component painel = new Component();
painel.setLayout(new VerticalLayout());
painel.add(LAY_AUTO, new Label("Título"));
```

## Ciclo de vida
| Gancho | Quando | Uso |
|---|---|---|
| `onAdd(boolean firstTime)` | ao entrar na árvore | inicializar (recursos só na 1ª vez → `firstTime`) |
| `onRemove()` | ao sair | liberar timers/listeners |

## Componente reutilizável com `bind(...)`
O padrão de "card" reciclável: monte a estrutura **uma vez** (em `onAdd`) e **re-vincule** por dados:
```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-vincula por dados (barato, chamado muitas vezes)
      titulo.setText(t.titulo);
      repaint();
   }
}
```
Esse é exatamente o padrão que o `VirtualListView` usa para reciclar views (ver
[Carregando dados](/docs/learn/loading-data)).

## Constrói neste passo
O componente **`CardTarefa`** reutilizável — montado uma vez, re-vinculado por tarefa.

## Recapitulando
`Component` é a base; container = `Component` + `Layout`; inicialize em `onAdd(firstTime)`, libere em
`onRemove()`; componentes custom separam **montar** (uma vez) de **vincular** (`bind`, muitas vezes).

## Próximos passos
→ [Layouts](/docs/learn/layouts)

## Veja também
- Conceito: [Tudo é um Component](/docs/concepts/everything-is-a-component) · [Ciclo de vida](/docs/concepts/lifecycle)