Cómo crear una card cliqueable

Propósito. Crear una “card” (un Component con fondo, borde redondeado y contenido interno) que reacciona al toque, aplicando un realce visual al ser presionada y disparando una acción. Úsalo para elementos de lista, tiles de dashboard, atajos, etc.

APIs usadas

• new Component() — todo en CrossFly es Component; una card es solo un Component con estilo y layout.
• component.style(ComponentStyle s) — aplica el estilo (fondo, borde, radio). Devuelve <T extends Component> para encadenar.
• ComponentStyle.pressable() — marca el estilo como Pressable.YES: el componente recibe realce al ser presionado y pasa a recibir eventos de toque.
• component.setLayout(Layout l) — define el gestor de layout del contenido interno (ej.: new GridLayout(...)).
• component.add(Object... params) — añade hijos según el layout activo.
• component.onAction(Component.Action action) — registra el callback disparado al toque (solo funciona si el estilo es pressable).
• Styles.component() — devuelve un ComponentStyle base del Skin activo para que lo personalices.

Ejemplo completo (copiar, pegar y ejecutar)

package com.exemplo;

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

/** Pantalla principal ejecutable. Apunta el launcher (classname) y corre: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // Estilo del card: fondo blanco, esquinas redondeadas, clicable
      ComponentStyle cardStyle = Styles.component()
         .backColor(0xFFFFFFFF)
         .borderColor(0xFFE0E0E0)
         .borderRadius(0.5f)   // radio en unidades de fuente
         .ingap(Gap.ofFont(0.8f))
         .pressable();         // ← hace el card sensible al toque

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

      // Contenido interno en columna (título + subtítulo)
      card.setLayout(new GridLayout(Position.START, Position.CENTER));
      card.add(new Label("Pedido #1234"));
      card.add(new Label("Entregue hoje"));

      // Acción al tocar
      card.onAction(origin -> abrirDetalhe(1234));

      // Añade el card a la pantalla/container actual
      add(card);
   }

   private void abrirDetalhe(int pedido)
   {
      // ... abrir la pantalla de detalle del pedido ...
   }
}

El fragmento de abajo muestra solo el núcleo. Para ejecutarlo, colócalo en el esqueleto MainWindow de arriba.

Fragmento mínimo

// Estilo del card: fondo blanco, esquinas redondeadas, clicable
ComponentStyle cardStyle = Styles.component()
   .backColor(0xFFFFFFFF)
   .borderColor(0xFFE0E0E0)
   .borderRadius(0.5f)   // radio en unidades de fuente
   .ingap(Gap.ofFont(0.8f))
   .pressable();         // ← hace el card sensible al toque

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

// Contenido interno en columna (título + subtítulo)
card.setLayout(new GridLayout(Position.START, Position.CENTER));
card.add(new Label("Pedido #1234"));
card.add(new Label("Entregue hoje"));

// Acción al tocar
card.onAction(origin -> abrirDetalhe(1234));

// Añade el card a la pantalla/container actual
add(card);

Nota de verificación (código 2026). Confirmado en la fuente: Component.style(ComponentStyle) devuelve <T extends Component> T (fluido), ComponentStyle.pressable() establece Pressable.YES, y Component.onAction(Action) marca hasAction(true). El realce de presionado usa los estilos por estado (default/pressed) resueltos por el Skin — consulta el Capítulo 10 solo si necesitas personalizar el estado pressed. Sin pressable(), el onAction no se dispara porque el componente no es objetivo de toque.

Profundiza

• Catálogo de widgets: Widget Catalog