Mashup Builder > Widgets > Widgets estándar > Widget de fichas (con temas)
Widget de fichas (con temas)
El widget de ficha permite organizar el contenido del mashup en vistas separadas. Cada vista es una ficha con un rótulo que se puede definir mediante las propiedades del widget. En tiempo de ejecución, solo se abre una ficha a la vez y la ficha actual se realza con un subrayado. El widget de fichas es un widget dinámico que crece y se reduce según el tamaño de su contenedor. El widget se puede definir con un ancho o una altura fijos mediante el control de las cotas del contenedor o mediante las propiedades Width y Height del widget.
* 
El widget de fichas está disponible como widget estándar en la plataforma y como componente Web que se puede importar desde un SDK.
El widget se puede configurar de las siguientes maneras:
Especificar el número de fichas y sus rótulos.
Especificar la ficha por defecto que se debe abrir cuando el mashup se visualiza en tiempo de ejecución.
Definir un ancho máximo para los rótulos de ficha.
Activar y configurar la carga diferida para los contenedores de fichas.
Uso de la carga diferida en el widget de fichas
Por defecto, todas las fichas del widget se cargan al abrir el mashup. Los servicios enlazados a un widget en una ficha se ejecutan cuando los eventos, como el evento Loaded del mashup, se activan en tiempo de ejecución. La ejecución de servicios y la carga de widgets en fichas de segundo plano pueden reducir el rendimiento cuando el widget de fichas contiene múltiples visualizaciones complejas en las que se incluye una recopilación grande de widgets. La carga diferida se puede configurar para aplazar la carga de fichas no visibles hasta que se necesiten en tiempo de ejecución, lo que mejora el rendimiento del mashup y de la red. Al configurar la carga diferida en el widget, es necesario asegurarse de excluir la ficha por defecto de la carga diferida, ya que se muestra instantáneamente cuando se abre el mashup. Para activar la carga diferida de una ficha del widget, realice los siguientes pasos:
1. En Mashup Builder, seleccione una ficha del widget para mostrar su contenido.
2. Seleccione el contenedor en la ficha. Las propiedades del contenedor se enumeran en el panel Propiedades.
3. En el panel Propiedades, establezca la propiedad LazyLoading en Verdadero. Se muestran las propiedades, los servicios y los eventos adicionales de la carga diferida.
Para obtener más información sobre las propiedades de carga diferida, los servicios y los eventos, consulte Uso de la carga diferida en un mashup.
4. Enlace el evento Loaded del contenedor para ejecutar cualquier servicio de datos que esté enlazado a los widgets dentro del contenedor de carga diferida.
* 
Evite el uso del evento Loaded del mashup para ejecutar servicios de un contenedor cargado en modo diferido. Los datos devueltos de los servicios solo se muestran cuando se abre la ficha o se carga el contenedor mediante el servicio LoadContainer.
5. Repita los pasos anteriores para activar la carga diferida de cualquier ficha adicional en el widget.
6. Pulse en Guardar y, a continuación, en Ver mashup.
En tiempo de ejecución, las fichas cargadas de forma diferida se cargan automáticamente al abrir la ficha. Cuando la propiedad EnableContainerUnload está activada para un contenedor de ficha, el contenedor se descarga automáticamente para liberar recursos del sistema y mejorar el rendimiento cuando no está visible. Cuando se cambia de nuevo a una ficha descargada, la ficha se vuelve a cargar automáticamente. Se pueden crear enlaces adicionales a los servicios de carga diferida de una ficha para cargar y descargar contenido manualmente mediante otros eventos del mashup, como el evento Clicked de un widget de botón.
Configuración del estilo de ficha
El estilo de ficha se puede configurar mediante la propiedad del widget TabStyle. Esta propiedad soporta dos opciones:
Sin marco: los nombres de las fichas se muestran sin bordes. (Por defecto)
Con marco: se muestra un borde alrededor del nombre de la ficha y el área de contenido. Utilice la propiedad HideContentAreaBorder para controlar la visibilidad del borde alrededor del área de contenido.
Adición de iconos a nombres de ficha
Al utilizar fichas con marco, se puede personalizar el aspecto de los nombres de ficha mediante la propiedad TabMode. Los nombres de ficha pueden mostrar un rótulo, un icono o ambos, en función del contenido y la experiencia de usuario que se desee proporcionar. Para cada ficha, se puede definir un rótulo de texto, hacer referencia a una entidad multimedia o especificar un icono SVG.
En la siguiente imagen se muestran dos fichas con un rótulo y un icono. El uso de rótulos e iconos puede mejorar la claridad para los nuevos usuarios.
En la siguiente imagen se muestran las fichas solo con iconos. El uso de iconos puede ayudar a los usuarios a identificar rápidamente el propósito de cada pestaña, especialmente cuando el espacio en pantalla es limitado.
Para personalizar el tamaño del icono, utilice la propiedad TabIconSize del widget.
* 
Los iconos no se soportan con el estilo de ficha sin marco por defecto.
Configuración de la posición de las fichas
Al utilizar fichas con marco, se puede configurar el widget para que se muestren horizontal o verticalmente mediante la propiedad TabsPosition. Las fichas se pueden mostrar horizontalmente en la parte superior o inferior, o verticalmente en el lado izquierdo o derecho del área de contenido. Para utilizar fichas verticales, realice los siguientes pasos:
1. Seleccione el widget de fichas en el lienzo o utilice el panel Explorador.
2. En el panel Propiedades, defina la propiedad TabStyle en Fichas con marco.
* 
Las fichas verticales no se soportan con el estilo de ficha sin marco por defecto.
3. Defina la propiedad TabsPosition en Izquierda o Derecha.
4. Guarde y visualice el mashup.
En el siguiente ejemplo se muestra un estilo de marco con fichas alineadas verticalmente a la izquierda.
Configuración del ancho de ficha
Por defecto, las fichas están configuradas para aumentar o reducirse con el fin de ajustarse al contenido del nombre de la ficha, en función del espacio disponible. Utilice la propiedad TabWdithConfig para distribuir el espacio disponible uniformemente entre todas las fichas o para definir un ancho fijo. La distribución uniforme solo se soporta cuando las fichas se muestran horizontalmente.
Propiedades de los widgets
* 
Todas las propiedades específicas de ficha, como Tab1Name, Tab1Value, Tab1Visible y Tab1Disabled, están disponibles por defecto para cada ficha. Por ejemplo, la propiedad Tab1Name de la primera ficha aparece como propiedad Tab2Name de la segunda ficha y como propiedad Tab3Name de la tercera ficha.
Nombre de la propiedad
Descripción
Tipo base
Valor por defecto
¿Es enlazable? (Sí/No)
¿Es localizable? (Sí/No)
SelectedTabValue
El valor de la ficha seleccionada.
STRING
n/d
S
N
Disabled
Esta propiedad se utiliza para desactivar el widget en el mashup. El widget se muestra en el mashup, pero no se puede pulsar en él.
BOOLEAN
Falso
S
N
SelectedTabName
El nombre de la ficha seleccionada.
STRING
n/d
S
N
CustomClass
Permite definir la CSS en el elemento div superior del widget. Pueden introducirse varias clases, separadas por un espacio.
STRING
n/d
S
N
TabSequence
La secuencia en la que se realzan los widgets cuando el usuario pulsa la tecla del tabulador.
NUMBER
n/d
N
N
TabStyle
Permite definir el estilo de tabulación. Se puede seleccionar un estilo con marco con un borde y un color de fondo, o un estilo sin marco solo con el nombre de la ficha.
STRING
Fichas sin marco
N
N
TabMode
Permite controlar el tipo de contenido que se debe mostrar dentro de las fichas. Solo se soporta para fichas con marco. Opciones: Rótulo, Icono, Icono + rótulo
STRING
Rótulo
S
N
TabWidthConfig
Permite controlar la configuración del ancho de las fichas. Opciones. Automático: permite definir el ancho dinámicamente en función del ancho del rótulo. Uniforme: permite distribuir el ancho disponible para el widget de manera uniforme entre las fichas. Fijo: permite definir un ancho fijo para cada ficha mediante la propiedad TabWidth. Solo se soporta para fichas con marco.
STRING
Automático
N
N
TabsPosition
Permite definir la posición del grupo de fichas en relación con el área de contenido. El grupo se puede mostrar horizontalmente en la parte superior o inferior, o verticalmente a la izquierda o derecha del área de contenido.
* 
Esta propiedad está disponible cuando TabStyle se define en Fichas con marco.
STRING
Arriba
N
N
TabIconPosition
Permite definir la posición de los iconos de ficha en relación con el rótulo.
STRING
Izquierda
N
N
TabIconSize
Permite definir el tamaño del icono dentro de las fichas.
NUMBER
24
N
N
TabSelected
Un evento que se activa cuando se selecciona una ficha.
STRING
Evento
S
N
NumberOfTabs
Permite definir el número total de fichas.
El número máximo de fichas que se puede definir es 16 y el mínimo es 1 ficha.
NUMBER
2
No
N
DefaultTabNumber
Permite seleccionar la ficha que desea mostrar en tiempo de ejecución cuando el mashup se carga inicialmente. Para todas las cargas de mashup posteriores, se muestra la última ficha seleccionada por el usuario en tiempo de ejecución.
NUMBER
n/d
S
N
TabMode
Permite controlar si se debe mostrar un rótulo, un icono o ambos para los nombres de ficha. Opciones: Rótulo, Icono, Icono + rótulo
STRING
Rótulo
N
N
TabNameHeight
Permite definir la altura del área de nombre de ficha. Para ocultar el área de nombre de ficha, defina esta propiedad en 0.
NUMBER
34 px
S
N
OverflowButtonLabel
Permite definir el rótulo del botón de menú que se muestra cuando los nombres de ficha desbordan el espacio disponible para el widget.
STRING
Más
S
S
Tab1Name
El nombre de la primera ficha.
STRING
Nombre de ficha 1
S
S
Tab1Icon
Permite definir el icono que se debe mostrar para la ficha 1. Solo tablas con marco.
Entidad multimedia
N/D
N
N
Tab1SVGIcon
Permite definir el icono SVG que se mostrará para la ficha 1 desde la biblioteca de iconos SVG. Solo tablas con marco.
Icono SVG
N/D
N
N
Tab1Value
El valor de la primera ficha.
STRING
Valor de ficha 1
S
N
Tab1Visible
Permite definir la primera ficha como visible.
BOOLEAN
True
N
Tab1Disabled
Esta propiedad se utiliza para desactivar la primera ficha del mashup. La ficha se muestra en el mashup, pero no se puede pulsar en ella.
BOOLEAN
Falso
S
N
Tab2Name
El nombre de la segunda ficha.
STRING
Nombre de ficha 2
S
S
Tab2Icon
Permite definir el icono que se debe mostrar para la ficha 2. Solo tablas con marco.
Entidad multimedia
N/D
N
N
Tab2SVGIcon
Permite definir el icono SVG que se mostrará para la ficha 2 desde la biblioteca de iconos SVG. Solo tablas con marco.
Icono SVG
N/D
N
N
Tab2Value
El valor de la segunda ficha.
STRING
Valor de ficha 2
S
N
Tab2Visible
Permite definir la segunda ficha como visible.
BOOLEAN
True
N
Tab2Disabled
Esta propiedad se utiliza para desactivar la segunda ficha del mashup. La ficha se muestra en el mashup, pero no se puede pulsar en ella.
BOOLEAN
Falso
S
N
SelectDefaultTab
Un servicio enlazable para volver a seleccionar la ficha por defecto que se ha configurado para este widget.
n/d
n/d
S
N
HideContentAreaBorder
Permite ocultar los bordes alrededor del área de contenido cuando se utilizan fichas con marco.
BOOLEAN
Falso
N
N
ResetInputsToDefaultValue
Permite restaurar los valores por defecto de todos los widgets contenidos.
n/d
n/d
S
N
TabNameMaxWidth
Permite definir un ancho máximo para los nombres de ficha. Los caracteres sobrantes se truncan en el nombre de la ficha.
NUMBER
n/d
S
N
SwitchTabOnFocus
Permite cambiar automáticamente a la ficha enfocada al utilizar las teclas de flecha para cambiar el foco.
BOOLEAN
Falso
S
N
¿Fue esto útil?