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.

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.

Ejemplo: navegar a la siguiente pestaña

Este ejemplo muestra cómo navegar a la siguiente pestaña de un control Pestañas.

1. En tu aplicación, añade un control Pestañas y hazlo Estático. Creaba automáticamente 3 pestañas: "Pestaña 1", Pestaña 2" y "Pestaña 3".
2. Añade dos nuevas páginas y un control de Botón en cada una. Nombra los botones "Pestaña 1 -> Siguiente" y "pestaña 2 -> Siguiente", respectivamente.
3. Para la "Pestaña 1", en el campo Fuente de la página, haz referencia a la página añadida anteriormente que tiene el botón "Pestaña 1 -> Siguiente".
4. Para la "Pestaña 2", en el campo Fuente de página, haz referencia a la página añadida anteriormente que tiene el botón "Pestaña 2-> Siguiente". Tu aplicación debería verse como en la siguiente imagen:
   
5. Crea una regla para cada control de Botón. La regla indica a la aplicación que navegue a la siguiente pestaña al hacer clic en el botón.
6. Crea una variable de aplicación de tipo Int32 y nómbrala "var_tab_index".
7. Selecciona el control Pestañas y asigna la variable var_tab_index al campo Índice de la pestaña activa.
   
8. Selecciona la página principal que contiene el control Pestañas, navega a la pestaña Eventos y crea una regla para el evento Cargado.
   1. Añade la regla Establecer valor y configúrala de la siguiente manera:
      • Elemento a establecer - var_tab_index
      • Valor: 0, que es el índice de la pestaña 1.
9. Selecciona la página que contiene el control Botón llamado "Pestaña 1-> Siguiente", navega a la pestaña Eventos y crea una regla para el evento Tras hacer clic.
   1. Añade la regla Establecer valor y configúrala de la siguiente manera:
      • Elemento a establecer - var_tab_index
      • Valor: 1, que es le índice de la pestaña 2.
10. Selecciona la página que contiene el control Botón llamado "Pestaña 2-> Siguiente", navega a la pestaña Eventos y crea una regla para el evento Al hacer clic.
    1. Añade la regla Establecer valor y configúrala de la siguiente manera:
       • Elemento a establecer - var_tab_index
       • Valor: 2, que es el índice de la pestaña 3.

Cuando previsualices la aplicación, haz clic en el botón de la "Pestaña 1" y te desplazará a la "Pestaña 2", y así sucesivamente.

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.