Como criar um card clicável

Propósito. Criar um “cartão” (um Component com fundo, borda arredondada e conteúdo interno) que reage ao toque, aplicando destaque visual ao ser pressionado e disparando uma ação. Use para itens de lista, tiles de dashboard, atalhos etc.

APIs usadas

new Component() — tudo no CrossFly é Component; um card é apenas um Component com estilo e layout.
component.style(ComponentStyle s) — aplica o estilo (fundo, borda, raio). Retorna <T extends Component> para encadear.
ComponentStyle.pressable() — marca o estilo como Pressable.YES: o componente recebe destaque ao ser pressionado e passa a receber eventos de toque.
component.setLayout(Layout l) — define o gerenciador de layout do conteúdo interno (ex.: new GridLayout(...)).
component.add(Object... params) — adiciona filhos conforme o layout ativo.
component.onAction(Component.Action action) — registra o callback disparado no toque (só funciona se o estilo for pressable).
Styles.component() — retorna um ComponentStyle base do Skin ativo para você customizar.

Exemplo completo (copiar, colar e rodar)

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;

/** Tela principal executável. Aponte o launcher (classname) e rode: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // Estilo do card: fundo branco, cantos arredondados, clicável
      ComponentStyle cardStyle = Styles.component()
         .backColor(0xFFFFFFFF)
         .borderColor(0xFFE0E0E0)
         .borderRadius(0.5f)   // raio em unidades de fonte
         .ingap(Gap.ofFont(0.8f))
         .pressable();         // ← torna o card sensível ao toque

      Component card = new Component()
         .style(cardStyle);

      // Conteúdo interno em coluna (título + subtítulo)
      card.setLayout(new GridLayout(Position.START, Position.CENTER));
      card.add(new Label("Pedido #1234"));
      card.add(new Label("Entregue hoje"));

      // Ação ao tocar
      card.onAction(origin -> abrirDetalhe(1234));

      // Adiciona o card à tela/container atual
      add(card);
   }

   private void abrirDetalhe(int pedido)
   {
      // ... abrir a tela de detalhe do pedido ...
   }
}

O trecho abaixo mostra só o miolo. Para rodar, coloque-o no esqueleto MainWindow acima.

Trecho mínimo

// Estilo do card: fundo branco, cantos arredondados, clicável
ComponentStyle cardStyle = Styles.component()
   .backColor(0xFFFFFFFF)
   .borderColor(0xFFE0E0E0)
   .borderRadius(0.5f)   // raio em unidades de fonte
   .ingap(Gap.ofFont(0.8f))
   .pressable();         // ← torna o card sensível ao toque

Component card = new Component()
   .style(cardStyle);

// Conteúdo interno em coluna (título + subtítulo)
card.setLayout(new GridLayout(Position.START, Position.CENTER));
card.add(new Label("Pedido #1234"));
card.add(new Label("Entregue hoje"));

// Ação ao tocar
card.onAction(origin -> abrirDetalhe(1234));

// Adiciona o card à tela/container atual
add(card);

Nota de verificação (código 2026). Confirmado na fonte: Component.style(ComponentStyle) retorna <T extends Component> T (fluente), ComponentStyle.pressable() seta Pressable.YES, e Component.onAction(Action) marca hasAction(true). O destaque de pressionado usa os estilos por estado (default/pressed) resolvidos pelo Skin — veja Capítulo 10 só se precisar customizar o estado pressed. Sem pressable(), o onAction não dispara porque o componente não é alvo de toque.

Aprofunde-se

Catálogo de widgets: Widget Catalog