Saltar al contenido principal

TabbedPane

Abrir en ChatGPT
Sombra dwc-tabbed-pane 23.06
Java API

Se pueden organizar múltiples secciones de contenido bajo un solo TabbedPane, donde cada sección está vinculada a una Tab que se puede hacer clic. Solo una sección es visible a la vez, y las pestañas pueden mostrar texto, iconos o ambos para ayudar a los usuarios a navegar entre ellas.

Usos​

La clase TabbedPane ofrece a los desarrolladores una herramienta poderosa para organizar y presentar múltiples pestañas o secciones dentro de una interfaz de usuario. Aquí hay algunos escenarios típicos donde podrías utilizar un TabbedPane en tu aplicación:

  1. Visor de Documentos: Implementar un visor de documentos donde cada pestaña representa un documento o archivo diferente. Los usuarios pueden cambiar fácilmente entre documentos abiertos para realizar múltiples tareas de manera eficiente.

  2. Gestión de Datos:: Utilizar un TabbedPane para organizar tareas de gestión de datos, por ejemplo:

    • Diferentes conjuntos de datos para mostrar en una aplicación
    • Varios perfiles de usuario que se pueden mostrar en pestañas separadas
    • Diferentes perfiles en un sistema de gestión de usuarios

  3. Selección de Módulos: Un TabbedPane puede representar diferentes módulos o secciones. Cada pestaña puede encapsular las funcionalidades de un módulo específico, permitiendo a los usuarios centrarse en un aspecto de la aplicación a la vez.

  4. Gestión de Tareas: Las aplicaciones de gestión de tareas pueden usar un TabbedPane para representar varios proyectos o tareas. Cada pestaña podría corresponder a un proyecto específico, permitiendo a los usuarios gestionar y hacer seguimiento de las tareas por separado.

  5. Navegación de Programas: Dentro de una aplicación que necesita ejecutar varios programas, un TabbedPane podría:

    • Servir como una barra lateral que permite ejecutar diferentes aplicaciones o programas dentro de una sola aplicación, como lo que se muestra en la plantilla AppLayout
    • Crear una barra superior que puede cumplir un propósito similar, o representar sub-aplicaciones dentro de una aplicación ya seleccionada.

Pestañas​

Las pestañas son elementos de interfaz de usuario que se pueden agregar a los paneles de pestañas para organizar y cambiar entre diferentes vistas de contenido.

important

Las pestañas no están destinadas a ser utilizadas como componentes independientes. Se deben usar en conjunto con paneles de pestañas. Esta clase no es un Component y no debe usarse como tal.

Propiedades​

Las pestañas se componen de las siguientes propiedades, que se utilizan al agregarlas en un TabbedPane. Estas propiedades tienen métodos getters y setters para facilitar la personalización dentro de un TabbedPane.

  1. Key(Object): Representa el identificador único para la Tab.

  2. Text(String): El texto que se mostrará como título para la Tab dentro del TabbedPane. También se refiere a esto como el título a través de los métodos getTitle() y setTitle(String title).

  3. Tooltip(String): El texto del tooltip asociado con la Tab, que se mostrará cuando el cursor se desplace sobre la Tab.

  4. Enabled(boolean): Representa si la Tab está actualmente habilitada o no. Se puede modificar con el método setEnabled(boolean enabled).

  5. Closeable(boolean): Representa si la Tab se puede cerrar. Se puede modificar con el método setCloseable(boolean enabled). Esto añadirá un botón de cerrar en la Tab que puede ser clicado por el usuario y genera un evento de eliminación. El componente TabbedPane dicta cómo manejar la eliminación.

  6. Slot(Component): Los slots proporcionan opciones flexibles para mejorar la capacidad de una Tab. Puedes tener iconos, etiquetas, spinners de carga, capacidad de limpiar/restablecer, imágenes de perfil/avatar y otros componentes beneficiosos anidados dentro de una Tab para clarificar aún más el significado destinado a los usuarios. Puedes agregar un componente al slot prefix de una Tab durante la construcción. Alternativamente, puedes usar los métodos setPrefixComponent() y setSuffixComponent() para insertar varios componentes antes y después de la opción mostrada dentro de una Tab.

    TabbedPane pane = new TabbedPane();
    pane.addTab(new Tab("Documentos", TablerIcon.create("files")));

Manipulación de Tab​

Existen varios métodos que permiten a los desarrolladores agregar, insertar, eliminar y manipular diversas propiedades de elementos Tab dentro del TabbedPane.

Agregar una Tab​

Los métodos addTab() y add() existen en diferentes capacidades sobrecargadas para permitir a los desarrolladores flexibilidad al agregar nuevas pestañas al TabbedPane. Agregar una Tab la colocará después de cualquier pestaña existente previamente.

  1. addTab(String text) - Agrega una Tab al TabbedPane con el String especificado como el texto de la Tab.
  2. addTab(Tab tab) - Agrega la Tab proporcionada como un parámetro al TabbedPane.
  3. addTab(String text, Component component) - Agrega una Tab con el String dado como el texto de la Tab, y el Component proporcionado mostrado en la sección de contenido del TabbedPane.
  4. addTab(Tab tab, Component component) - Agrega la Tab proporcionada y muestra el Component proporcionado en la sección de contenido del TabbedPane.
  5. add(Component... component) - Agrega una o más instancias de Component al TabbedPane, creando una Tab discreta para cada una, con el texto establecido como el nombre del Component.
info

El add(Component... component) determina el nombre del Component pasado llamando a component.getName() en el argumento pasado.

Insertar una Tab​

Además de agregar una Tab al final de las pestañas existentes, también es posible crear una nueva en una posición designada. Para hacer esto, existen múltiples versiones sobrecargadas de insertTab().

  1. insertTab(int index, String text) - Inserta una Tab en el TabbedPane en el índice dado con el String especificado como el texto de la Tab.
  2. insertTab(int index, Tab tab) - Inserta la Tab proporcionada como parámetro al TabbedPane en el índice especificado.
  3. insertTab(int index, String text, Component component) - Inserta una Tab con el String dado como el texto de la Tab, y el Component proporcionado mostrado en la sección de contenido del TabbedPane.
  4. insertTab(int index, Tab tab, Component component) - Inserta la Tab proporcionada y muestra el Component proporcionado en la sección de contenido del TabbedPane.

Eliminar una Tab​

Para eliminar una sola Tab del TabbedPane, utiliza uno de los siguientes métodos:

  1. removeTab(Tab tab) - Elimina una Tab del TabbedPane pasando la instancia de Tab a eliminar.
  2. removeTab(int index) - Elimina una Tab del TabbedPane especificando el índice de la Tab a eliminar.

Además de los dos métodos anteriores para la eliminación de una sola Tab, utiliza el método removeAllTabs() para limpiar el TabbedPane de todas las pestañas.

info

Los métodos remove() y removeAll() no eliminan pestañas dentro del componente.

Asociación Tab/Component​

Para cambiar el Component que se mostrará para una Tab dada, llama al método setComponentFor() y pasa ya sea la instancia de la Tab, o el índice de esa Tab dentro del TabbedPane.

info

Si este método se usa en una Tab que ya está asociada con un Component, el Component previamente asociado será destruido.

Configuración y diseño​

La clase TabbedPane tiene dos partes constitutivas: una Tab que se muestra en una ubicación especificada, y un componente que se mostrará. Este puede ser un solo componente, o un componente Composite, permitiendo la visualización de componentes más complejos dentro de la sección de contenido de una pestaña.

Deslizamiento​

El TabbedPane admite la navegación a través de las diversas pestañas mediante el deslizamiento. Esto es ideal para una aplicación móvil, pero también se puede configurar a través de un método incorporado para admitir el deslizamiento del ratón. Tanto el deslizamiento como el deslizamiento del ratón están deshabilitados por defecto, pero se pueden habilitar con los métodos setSwipable(boolean) y setSwipableWithMouse(boolean), respectivamente.

Colocación de la pestaña​

Las Tabs dentro de un TabbedPane se pueden colocar en varias posiciones dentro del componente según la preferencia del desarrollador de la aplicación. Las opciones proporcionadas se establecen utilizando la enumeración proporcionada, que tiene los valores de TOP, BOTTOM, LEFT, RIGHT o HIDDEN. La configuración predeterminada es TOP.

Mostrar Código

Alineación​

Además de cambiar la colocación de los elementos de Tab dentro del TabbedPane, también es posible configurar cómo se alinearán las pestañas dentro del componente. Por defecto, la configuración AUTO está en efecto, lo que permite que la colocación de las pestañas dicte su alineación.

Las otras opciones son START, END, CENTER, y STRETCH. Las tres primeras describen la posición relativa al componente, mientras que STRETCH hace que las pestañas llenen el espacio disponible.

Mostrar Código

Borde e indicador de actividad​

El TabbedPane tendrá un borde mostrado para las pestañas dentro de él por defecto, colocado dependiendo de qué Placement se haya configurado. Este borde ayuda a visualizar el espacio que ocupan las diversas pestañas dentro del panel.

Cuando se hace clic en una Tab, por defecto, se muestra un indicador de actividad cerca de esa Tab para ayudar a resaltar cuál es la Tab actualmente seleccionada.

Ambas opciones se pueden personalizar por un desarrollador cambiando los valores booleanos utilizando los métodos setter apropiados. Para cambiar si se muestra o no el borde, se puede usar el método setBorderless(boolean), con true ocultando el borde y false, el valor predeterminado, mostrando el borde.

info

Este borde no se aplica a la totalidad del componente TabbedPane, y simplemente sirve como un separador entre las pestañas y el contenido del componente.

Para establecer la visibilidad del indicador activo, se puede usar el método setHideActiveIndicator(boolean). Pasar true a este método ocultará el indicador activo debajo de una Tab activa, mientras que false, el valor predeterminado, mantendrá el indicador mostrado.

Mostrar Código

Modos de activación​

Para un control más fino sobre cómo se comporta el TabbedPane al navegar con el teclado, se puede establecer el modo de Activation para especificar cómo debería comportarse el componente.

  • Auto: Cuando se establece en automático, navegar por las pestañas con las teclas de flecha mostrará instantáneamente el componente de la pestaña correspondiente.

  • Manual: Cuando se establece en manual, la pestaña recibirá el foco pero no se mostrará hasta que el usuario presione espacio o enter.

Mostrar Código

Opciones de eliminación​

Los elementos individuales de Tab se pueden configurar para que sean cerrables. Las pestañas cerrables tendrán un botón de cerrar agregado a la pestaña, que genera un evento de cierre al ser clicado. El TabbedPane dicta cómo se maneja este comportamiento.

  • Manual: Por defecto, la eliminación se establece en MANUAL, lo que significa que se genera el evento, pero corresponde al desarrollador manejar este evento de la manera que elija.

  • Auto: Alternativamente, se puede usar AUTO, que generará el evento y también eliminará la Tab del componente para el desarrollador, eliminando la necesidad de que el desarrollador implemente manualmente este comportamiento.

Control de segmentos 26.00​

El TabbedPane se puede renderizar como un control de segmentos habilitando la propiedad segment con setSegment(true). En este modo, las pestañas se muestran con un indicador deslizante que resalta la selección activa, proporcionando una alternativa compacta a la interfaz de pestañas estándar.

Mostrar Código

Estilo​

Expansión y tema​

El TabbedPane viene con opciones de Expanse y Theme incorporadas similares a otros componentes de webforJ. Estos se pueden usar para agregar rápidamente estilos que transmiten varios significados al usuario final sin necesidad de estilizar el componente con CSS.

Mostrar Código

Loading...

Mejores prácticas​

Las siguientes prácticas se recomiendan para utilizar el TabbedPane dentro de las aplicaciones:

  • Agrupación Lógica: Utiliza pestañas para agrupar lógicamente contenido relacionado

    • Cada pestaña debe representar una categoría o funcionalidad distinta dentro de tu aplicación
    • Agrupa pestañas similares o lógicas cerca unas de otras

  • Pestañas Limitadas: Evita abrumar a los usuarios con demasiadas pestañas. Considera utilizar una estructura jerárquica u otros patrones de navegación donde sea aplicable para una interfaz limpia.

  • Etiquetas Claras: Etiqueta tus Pestañas de manera clara para un uso intuitivo

    • Proporciona etiquetas claras y concisas para cada pestaña
    • Las etiquetas deben reflejar el contenido o propósito, facilitando a los usuarios la comprensión
    • Utiliza iconos y colores distintos donde sea aplicable

  • Navegación con Teclado: Utiliza el soporte de navegación por teclado de webforJ para hacer que la interacción con el TabbedPane sea más fluida e intuitiva para el usuario final.

  • Pestaña Predeterminada: Si la pestaña predeterminada no se coloca al principio del TabbedPane, considera establecer esta pestaña como predeterminada para información esencial o de uso común.