# Janelas e navegação

> Window, onShow(), a pilha LIFO (show/hide), passar dados pelo construtor e retornar valores.

Source: https://crossfly.dev/pt/docs/learn/windows-and-navigation — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# 2. Janelas e navegação

> **O que você vai aprender:** a unidade de tela (`Window`), onde montar a UI e o modelo de navegação
> por pilha. **Pré-requisitos:** [O panorama](/docs/learn/big-picture).

## Exemplo completo (copiar, colar e rodar)
Duas telas navegando por pilha (push/hide), com dados passados pelo construtor. `MainWindow` é a lista;
`TelaDetalhe` é o detalhe. 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());

      add(LAY_AUTO, new Label("Minhas tarefas"));

      Button abrir = new Button("Abrir tarefa 42");
      abrir.onAction(c -> new TelaDetalhe(42).show());   // push: empilha o detalhe
      add(LAY_AUTO, abrir);
   }
}

class TelaDetalhe extends Window
{
   private final int id;

   public TelaDetalhe(int id) { this.id = id; }          // dados pelo construtor

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

      add(LAY_AUTO, new Label("Tarefa " + id));

      Button voltar = new Button("Voltar");
      voltar.onAction(c -> hide());                       // pop: desempilha, volta à lista
      add(LAY_AUTO, voltar);
   }
}
```
> Os trechos abaixo mostram **só o miolo** (o que vai dentro de `onShow()`). Para rodar, coloque-os no esqueleto `MainWindow` acima.

## `Window` e `onShow()`
Cada tela é uma subclasse de `Window` (que é um `Component`). Monte a UI em **`onShow()`** — com
`super.onShow()` — onde os bounds já são válidos (nunca no construtor).

## A pilha de navegação (LIFO)
`show()` **empilha** (push) uma janela; `hide()` **desempilha** (pop). A janela do topo recebe o input.
```java
public class TelaLista extends Window {
   @Override public void onShow() throws Exception {
      super.onShow();
      setLayout(new VerticalLayout());
      Button abrir = new Button("Abrir tarefa 42");
      abrir.onAction(c -> new TelaDetalhe(42).show());   // push
      add(LAY_AUTO, abrir);
   }
}

public class TelaDetalhe extends Window {
   private final int id;
   public TelaDetalhe(int id) { this.id = id; }          // dados pelo construtor
   @Override public void onShow() throws Exception {
      super.onShow();
      setLayout(new VerticalLayout());
      add(LAY_AUTO, new Label("Tarefa " + id));
      Button voltar = new Button("Voltar");
      voltar.onAction(c -> hide());                       // pop
      add(LAY_AUTO, voltar);
   }
}
```

## Passar dados e retornar valores
- **Ir para uma tela com dados:** pelo **construtor** (`new TelaDetalhe(42).show()`).
- **Retornar um valor:** os [pickers](/docs/ui/widgets/picker) usam `show(onAnswer)`; telas comuns
  usam um **callback pelo construtor**; diálogos (`Alert`) respondem por `buttonAction` (ver
  [Retornar valores](/docs/ui/navigation/returning-results)).

## Constrói neste passo
O esqueleto de **duas telas** do app-fio-condutor: **lista → detalhe**, navegando entre si.

## Recapitulando
Tela = `Window`; UI em `onShow()`+`super.onShow()`; `show()`/`hide()` = push/pop; dados pelo construtor.

## Próximos passos
→ [Pensando em componentes](/docs/learn/thinking-in-components)

## Veja também
- [Navegação (ui)](/docs/ui/navigation) · Conceito: [O ciclo de vida](/docs/concepts/lifecycle)