Cómo crear pestañas (TabBar)

Propósito. Organizar el contenido en páginas conmutables mediante una barra de pestañas, con indicador animado y deslizamiento horizontal entre páginas. Úsalo para secciones de nivel superior (Inicio / Buscar / Perfil) o para agrupar contenido relacionado sin navegación de pantalla.

APIs usadas

• new TabBar(TabBar.Tab... tabs) — crea la barra a partir de descriptores de pestaña.
• new TabBar.Tab(String text) — pestaña solo texto.
• new TabBar.Tab(Icon icon) — pestaña solo icono.
• new TabBar.Tab(String text, Icon icon) — pestaña con texto e icono (texto debajo del icono por defecto).
• tabBar.setContent(Component... contents) — define el contenido de cada pestaña; la cantidad debe coincidir con el número de pestañas (si no, lanza IllegalArgumentException).
• tabBar.onTabChanged(TabBar.TabChangedListener listener) — callback onTabChanged(int index) invocado cuando la pestaña activa cambia (por toque o por deslizamiento).
• tabBar.setActiveTab(int index) — cambia la pestaña programáticamente (anima el indicador y desplaza el contenido).
• tabBar.getActiveIndex() — índice de la pestaña activa.

Ejemplo completo (copiar, pegar y ejecutar)

package com.exemplo;

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

/** 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());

      // Pestañas solo texto (autónomas, sin depender de glyphs de MaterialIcon)
      TabBar tabBar = new TabBar(
         new TabBar.Tab("Início"),
         new TabBar.Tab("Buscar"),
         new TabBar.Tab("Perfil"));

      // Un Component de contenido por pestaña, en el MISMO orden que las pestañas
      Component telaInicio = new Label("Conteúdo: Início");
      Component telaBusca  = new Label("Conteúdo: Buscar");
      Component telaPerfil = new Label("Conteúdo: Perfil");

      tabBar.setContent(
         telaInicio,
         telaBusca,
         telaPerfil);

      tabBar.onTabChanged(index ->
      {
         // ej.: cargar datos bajo demanda cuando cambia la pestaña
         if (index == 1) carregarBusca();
      });

      add(LAY_FILL, tabBar);
   }

   private void carregarBusca()
   {
      // ... cargar datos de la pestaña Buscar bajo demanda ...
   }
}

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

Fragmento mínimo

TabBar tabBar = new TabBar(
   new TabBar.Tab("Início",  new MaterialIcon("")),
   new TabBar.Tab("Buscar",  new MaterialIcon("")),
   new TabBar.Tab("Perfil",  new MaterialIcon("")));

// Un Component de contenido por pestaña, en el MISMO orden que las pestañas
tabBar.setContent(
   telaInicio,
   telaBusca,
   telaPerfil);

tabBar.onTabChanged(index ->
{
   // ej.: cargar datos bajo demanda cuando cambia la pestaña
   if (index == 1) carregarBusca();
});

add(tabBar);

// Cambiar de pestaña por código, si hace falta:
tabBar.setActiveTab(2);   // va a "Perfil"

Nota de verificación (código 2026). Confirmado en la fuente: TabBar(Tab...), setContent(Component...), onTabChanged(TabChangedListener), setActiveTab(int). Detalles de comportamiento: la barra de pestañas se desliza horizontalmente cuando las pestañas no caben; deslizar el panel de contenido cambia la pestaña activa y mueve el indicador; el posicionamiento de las pestañas (arriba vs. abajo) y el estilo del indicador provienen de la TabBarStyle del Skin activo (ej.: IOSSkin coloca las pestañas abajo). Si setContent no se invoca, la barra muestra solo las pestañas sin panel de contenido.

Profundiza

• Página del widget: TabBar · Fuente canónica: Capítulo 14
• Navegación entre pantallas (alternativa a las pestañas): Navegación