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.

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á.

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.

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 usam show(onAnswer); telas comuns usam um callback pelo construtor; diálogos (Alert) respondem por buttonAction (ver Retornar valores).

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

Veja também

• Navegação (ui) · Conceito: O ciclo de vida