# Ventanas y navegación

> Window, onShow(), la pila LIFO (show/hide), pasar datos por el constructor y retornar valores.

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

# 2. Ventanas y navegación

> **Lo que vas a aprender:** la unidad de pantalla (`Window`), dónde montar la UI y el modelo de navegación
> por pila. **Prerrequisitos:** [El panorama](/docs/learn/big-picture).

## Ejemplo completo (copiar, pegar y ejecutar)
Dos pantallas navegando por pila (push/hide), con datos pasados por el constructor. `MainWindow` es la lista;
`TelaDetalhe` es el detalle. Compila tal cual.
```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: apila el detalle
      add(LAY_AUTO, abrir);
   }
}

class TelaDetalhe extends Window
{
   private final int id;

   public TelaDetalhe(int id) { this.id = id; }          // datos por el constructor

   @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: desapila, vuelve a la lista
      add(LAY_AUTO, voltar);
   }
}
```
> Los fragmentos de abajo muestran **solo el núcleo** (lo que va dentro de `onShow()`). Para ejecutar, colócalos en el esqueleto `MainWindow` de arriba.

## `Window` y `onShow()`
Cada pantalla es una subclase de `Window` (que es un `Component`). Monta la UI en **`onShow()`** — con
`super.onShow()` — donde los bounds ya son válidos (nunca en el constructor).

## La pila de navegación (LIFO)
`show()` **apila** (push) una ventana; `hide()` **desapila** (pop). La ventana del tope recibe el 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; }          // datos por el constructor
   @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);
   }
}
```

## Pasar datos y retornar valores
- **Ir a una pantalla con datos:** por el **constructor** (`new TelaDetalhe(42).show()`).
- **Retornar un valor:** los [pickers](/docs/ui/widgets/picker) usan `show(onAnswer)`; las pantallas comunes
  usan un **callback por el constructor**; los diálogos (`Alert`) responden por `buttonAction` (ver
  [Retornar valores](/docs/ui/navigation/returning-results)).

## Construyes en este paso
El esqueleto de **dos pantallas** de la app hilo conductor: **lista → detalle**, navegando entre sí.

## Recapitulando
Pantalla = `Window`; UI en `onShow()`+`super.onShow()`; `show()`/`hide()` = push/pop; datos por el constructor.

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

## Ver también
- [Navegación (ui)](/docs/ui/navigation) · Concepto: [El ciclo de vida](/docs/concepts/lifecycle)