Pestañas

General

El control de pestañas te permite dividir la información de tu aplicación por pestañas. El comportamiento del control de pestaña difiere en función del modo seleccionado: Estático o Dinámico.

Pestañas estáticas

Cuando añades el control Pestaña, se muestran tres pestañas de forma predeterminada (Pestaña 1, Pestaña 2, Pestaña 3). Expandir cada pestaña dentro del control expone las siguientes propiedades:

• Nombre de la pestaña : el nombre para mostrar de la pestaña.
• Página : la página de Apps a importar dentro de esta pestaña.
• Oculto: si es verdadero, oculta el control en tiempo de ejecución.
• Deshabilitado: si es verdadero, deshabilita el control en el tiempo de ejecución.

Las siguientes propiedades se aplican a todo el control Pestaña.

• Añadir nueva pestaña:añade una nueva pestaña a tus datos haciendo clic en el icono más "+".
• Índice de pestaña activa : navega a una pestaña específica utilizando esta propiedad. El índice comienza en 0. Por ejemplo, si tienes cuatro pestañas consecutivas llamadas "Pestaña1", "Pestaña2", "Pestaña3" y "Pestaña4", entonces "Pestaña1" tiene el índice 0, "Pestaña2" tiene el índice 1, "Tab3" tiene el índice 2 y "Tab4" tiene el índice 3.
• Oculto : si es verdadero, oculta el control en tiempo de ejecución.
• Deshabilitado : si es verdadero, deshabilita el control en tiempo de ejecución.

Pestañas dinámicas

Las pestañas dinámicas se generan en tiempo de ejecución a partir de un origen de datos de lista. Para utilizar esta característica, selecciona el modo Dinámico para tus pestañas. Esto es útil cuando el número de pestañas que necesitas varía y depende de los elementos de una lista.

Puedes configurar las siguientes propiedades:

• Origen de la lista : el origen de los elementos que se mostrarán como pestañas. Los tipos de datos válidos incluyen matrices de String, Integer o DateTime, DataTable o matrices de un objeto.
• Columna : cuando el origen de la lista es de tipo TablaDeDatos o una matriz de un Objeto, selecciona la columna específica (para tipos de datos TablaDeDatos) o la propiedad específica (para matrices de Objetos).
• Origen de la página : la página de la aplicación que se utilizará en todas las pestañas dinámicas.
• Índice de pestaña activa : navega a una pestaña específica utilizando esta propiedad. El índice comienza en 0. Por ejemplo, si tienes cuatro pestañas consecutivas llamadas "Pestaña1", "Pestaña2", "Pestaña3" y "Pestaña4", entonces "Pestaña1" tiene el índice 0, "Pestaña2" tiene el índice 1, "Tab3" tiene el índice 2 y "Tab4" tiene el índice 3.

Por ejemplo, puedes utilizar pestañas dinámicas con entidades de Data Service, de la siguiente manera:

• La propiedad Fuente de la lista para las pestañas dinámicas es una entidad en Data Service, por ejemplo, "Departamento":

  Fetch(of TPDepartment)(Nothing, Nothing, Nothing, Nothing, New ExpansionFieldOption(){addExpansionFieldOption("CreatedBy", New String(){"Id","Name"}), addExpansionFieldOption("UpdatedBy", New String(){"Id","Name"})})

• La propiedad Columna para las pestañas dinámicas es un campo de la entidad de Data Service seleccionada, por ejemplo "Nombre".
  Nota: En tiempo de ejecución, verás tantas pestañas como registros haya en el campo de entidad seleccionado. El control se limita a mostrar 50 registros de tu entidad. Si tienes más de 50 registros, se muestran los primeros 50.
• Para Origen de la página, puedes configurar una página para mostrar una tabla que se actualice en función de la pestaña seleccionada.

En tiempo de ejecución, las pestañas que ves son los registros en el campo Nombre de la entidad Departamento. Al cambiar de pestaña se actualiza el contenido de la tabla.

Events

• Valor cambiado : configura lo que sucede cuando se cambia el valor.

Estilo

• Alineación de control : de forma predeterminada, está establecido en Estirar. Se puede establecer una alineación diferente.

  Nota: la alineación depende del diseño seleccionado para el elemento principal (Vertical vs Horizontal).
• Estilo : el estilo de las pestañas activas e inactivas:
  • Predeterminado : las pestañas tienen el estilo de las pestañas clásicas del navegador.
  • Píldoras:las pestañas son redondeadas en ambos extremos, con forma de píldora.
  • Color de pestaña : el color del texto para pestañas inactivas.
  • Color de la pestaña activa : el color del texto de las pestañas activas.
  • Fondo de pestaña : el color de fondo para las pestañas inactivas.
  • Fondo de la pestaña activa : el color de fondo de las pestañas de píldora activas.
  • Pestañas grandes : si se selecciona, las pestañas se amplían.

• Borde : el borde del control. Puede configurar el grosor, el color y el radio del borde.

• Fuente : los atributos de fuente para el texto de la pestaña, como la familia de fuentes, el tamaño o el color. De forma predeterminada, el control hereda la familia de fuentes del contenedor principal inmediato, que se indica con la palabra clave "heredada".

• Margen : el margen del control. De forma predeterminada, se establece un margen de 4px. Se combinan las propiedades de los márgenes superior/inferior e izquierdo/derecho . Para establecer valores diferentes y separados para los márgenes Superior, Inferior, Izquierdo y Derecho , selecciona el botón Enlace en la parte derecha de la sección Margen .

• Tamaño : la anchura y la altura del control. De forma predeterminada, el tamaño está establecido en auto. Para establecer valores mínimos o máximos, selecciona los tres puntos (...). Si el tamaño del control es menor que las opciones, se muestra una barra de desplazamiento.

Propiedades VB

Propiedad VB	Tipo de datos	Descripción
ActiveTabIndex	Entero	Índice de la pestaña actualmente activa.
ActiveTabName	Cadena	Nombre de la pestaña actualmente activa.
Hidden	Booleano	Si es verdadero, oculta el control en tiempo de ejecución.
Disabled	Booleano	Si es verdadero, deshabilita el control en tiempo de ejecución.
SelectedItem	Apps.Controls.TabularInitClass	La pestaña actualmente seleccionada en el control Pestañas .

Importante:

Para el modo estático , SelectedItem y ActiveTabName son lo mismo.

Para el modo dinámico :

• Si el origen de datos utiliza tipos primitivos, SelectedItem y ActiveTabName son lo mismo.
• Si el origen de datos es una tabla de datos o una lista de objetos, SelectedItem contiene el registro completo seleccionado. ActiveTabName muestra solo el nombre visible en la pestaña.

Atajos del teclado

Para mejorar la accesibilidad, puedes usar los siguientes atajos de teclado en la lista de pestañas de la pestaña General del panel de configuración:

• Teclas de flecha arriba y abajo para cambiar la pestaña seleccionada.
• Alt+ tecla de flechaarriba para mover la pestaña seleccionada hacia arriba.
• Alt+ tecla de flechahacia abajo para mover la pestaña seleccionada hacia abajo.