Widget de botón de menú (con tema)
En el widget de botón de menú se muestra un botón que permite abrir un menú con una lista de elementos que se pueden definir mediante datos de infotable. Se pueden enlazar los datos del elemento seleccionado o los eventos en los que se ha pulsado de cada elemento de menú, en función de la configuración del menú. Utilice este widget cuando el espacio disponible en un esquema sea limitado y desee ocultar las opciones que no se utilizan con frecuencia. Se pueden crear múltiples niveles de navegación para agrupar elementos de menú bajo un rótulo común.
Botón de menú estándar
Botón de menú con una etiqueta
En la siguiente imagen se muestran las variantes disponibles para el botón de menú de izquierda a derecha. Se puede utilizar la propiedad ButtonType para definir la variante del botón en Principal, Secundario, Terciario, Peligro o Transparente. Por defecto, el botón se muestra con un estilo Terciario.
Anatomía
1. Botón de menú
2. Menú
3. Menú de segundo nivel
Selección de la dirección del esquema
El menú se puede abrir en dirección horizontal o vertical mediante la propiedad MenuDirection.
Vertical (por defecto): permite abrir el menú debajo del botón. Utilice este modo para reducir la cantidad de espacio horizontal necesario para mostrar el botón. Por ejemplo, cuando el botón se muestra en una barra de herramientas.
Horizontal: permite abrir el menú al lado del botón. Utilice este modo cuando el botón se muestre en un panel lateral.
Formato de los datos
Se pueden crear datos de infotable para el widget mediante la definición de datos MenuEntry. Para obtener más información, consulte Uso de la definición de datos MenuEntry.
En la siguiente imagen se muestra un resultado de infotable que indica un menú simple mediante la definición de datos MenuEntry.
 |
La primera fila de la infotable se usa como raíz y no se muestra como elemento de menú. Se deben definir los elementos del menú de nivel superior con un elemento parentMenuId que coincida con el elemento menuId de la raíz.
|
Adición de sugerencias personalizadas a los elementos de menú
Para mostrar sugerencias de cada elemento de menú, añada las columnas tooltip y tooltipIcon en los datos de la infotable. En la siguiente imagen se muestra una sugerencia personalizada para un elemento de menú.
Configuración de los datos de menú mediante una infotable
1. En Composer, cree un servicio que devuelva datos de infotable definidos mediante la definición de datos MenuEntry. Para obtener más información, consulte Widget de barra de menús.
2. En Mashup Builder, añada el servicio de menú mediante el panel Datos.
3. Enlace la propiedad All Data de la infotable de servicio a la propiedad Data del widget de botón de menú.
4. Pulse en Guardar para guardar los cambios en el mashup.
Como alternativa, se pueden definir manualmente los datos de infotable sin utilizar un servicio mediante el cuadro de diálogo de configuración de infotable de Mashup Builder.
1. En Mashup Builder, seleccione el widget de botón de menú.
2. En el panel Propiedades, junto a la propiedad Data, pulse en Añadir. Se abre un cuadro de diálogo en el que se pueden añadir filas para definir datos de infotable para el widget.
3. Pulse en Añadir y, a continuación, defina los datos de fila para el elemento de menú.
4. Pulse en Añadir para añadir la fila a la infotable.
5. Pulse en Guardar para guardar los datos de la infotable.
Los elementos de menú que se definen en la infotable se muestran en tiempo de ejecución.
Configuración de elementos de menú mediante las propiedades del widget
Por defecto, el widget está configurado para utilizar datos de infotable para definir elementos de menú. Se puede utilizar el evento SelectedDataChanged y la propiedad SelectedData del servicio para pasar el elemento seleccionado a otro servicio. Para configurar elementos de menú mediante propiedades de widget en su lugar, utilice la propiedad ItemConfigurationMode. Cuando esta propiedad se define en Propiedades del widget, un evento Clicked y propiedades que permiten configurar la visibilidad y el estado desactivado de cada elemento de menú se añaden al panel Propiedades. Estas propiedades se pueden enlazar para controlar el estado de elementos de menú individuales de forma dinámica en función de eventos específicos del mashup. De este modo, se pueden personalizar las interacciones del menú, lo que facilita la gestión de la visibilidad y la funcionalidad de cada elemento del menú.
1. En Mashup Builder, enlace un origen de datos de infotable con datos para definir los ID de menú y los rótulos.
2. Seleccione el widget de botón de menú y, a continuación, en el panel Propiedades, defina ItemConfigurationMode en Propiedades del widget.
3. Configure o enlace las siguientes propiedades para cada elemento de menú:
◦ <Item_Name>_Clicked: un evento que se activa cuando se pulsa en el elemento de menú.
◦ <Item_Name>_Disabled: permite desactivar el elemento de menú.
◦ <Item_Name>_Visible: permite ocultar el elemento de menú.
4. Pulse en Guardar.
Estilo del botón de menú
Se puede aplicar estilo al widget de botón de menú de las siguientes maneras:
• En el nivel de widget, mediante las propiedades de estilo disponibles en el panel Propiedades de estilo.
Se pueden modificar los estilos de botón y menú en cualquier estado, como Desactivado o Pasar por encima.
• En un nivel de tema de estilo, en > .
Para obtener más información sobre la personalización de temas de estilo, consulte Personalización de temas de estilo mediante la ficha Estilos.
Propiedades de los widgets
|
Nombre de la propiedad
|
Descripción
|
Tipo base
|
Valor por defecto
|
Enlazable (<-, ->)
|
Localizable (Sí/No)
|
|
|---|---|---|---|---|---|---|
|
Data
|
Enlazar una infotable para definir los elementos de menú. La infotable se debe formatear con la definición de datos MenuEntry
|
INFOTABLE
|
Sí
|
No
|
||
|
SelectedData
|
Una infotable que contiene los datos del último elemento de menú seleccionado.
|
INFOTABLE
|
Sí
|
No
|
||
|
SelectedDataChanged
|
Un evento que se activa cuando se selecciona un elemento de menú.
|
Evento
|
Sí
|
No
|
||
|
MenuOffset
|
El espacio entre el botón y el menú cuando el menú está abierto.
|
NUMBER
|
8
|
No
|
No
|
|
|
ButtonType
|
Definir el tipo de botón para el botón de menú. Cada tipo tiene estilos diferentes. Opciones: Principal, Secundario, Terciario, Peligro, Transparente
|
STRING
|
Terciario
|
Sí
|
No
|
|
|
TooltipField
|
Permite mostrar un texto de sugerencia al pasar por encima del widget de botón de menú.
|
STRING
|
Sí
|
Sí
|
||
|
TooltipIcon
|
Permite definir una imagen de icono para la sugerencia del widget de botón de menú.
|
MEDIOS
|
No
|
No
|
||
|
Disabled
|
Permite desactivar el botón de menú.
|
BOOLEAN
|
Falso
|
Sí
|
No
|
|
|
SVGIcon
|
Seleccione un icono de SVG para mostrarlo dentro del widget de botón de menú. Para mostrar una entidad multimedia, utilice la propiedad de icono.
|
MEDIALINK
|
No
|
No
|
||
|
ButtonIcon
|
Seleccione una imagen de icono para mostrar dentro del widget de botón de menú. Esta propiedad sustituye a la propiedad SVGIcon.
|
MEDIOS
|
No
|
No
|
||
|
ButtonIconPosition
|
Definir la posición del icono a la izquierda o a la derecha del rótulo del botón. Opciones: Izquierda, Derecha, Arriba, Abajo
|
STRING
|
Derecha
|
No
|
No
|
|
|
ButtonClicked
|
Un evento que se activa cuando se pulsa en el botón y no se define ningún elemento de menú para el widget.
|
Evento
|
Sí
|
No
|
||
|
ButtonMaxWidth
|
Definir un ancho máximo para el botón.
|
NUMBER
|
No
|
No
|
||
|
ButtonLabelAlignment
|
Alinear el rótulo del botón a la izquierda, derecha o centro. Opciones: Izquierda, Derecha, Centro
|
STRING
|
Centro
|
No
|
No
|
|
|
ButtonLabel
|
Especificar el texto del rótulo del botón.
|
STRING
|
Sí
|
Sí
|
||
|
ButtonSize
|
Definir el tamaño del botón. Opciones: Estándar, Medio, Grande, Extragrande, Rellenar
|
STRING
|
Estándar
|
No
|
No
|
|
|
DisplayMenuIcons
|
Cuando es false, los iconos de los elementos de menú se ocultan.
|
BOOLEAN
|
Falso
|
No
|
No
|
|
|
AllowMissingIcons
|
Cuando es false y DisplayMenuIcons es true, se muestra un icono por defecto junto a los elementos de menú sin que se haya especificado un icono en los datos de la infotable.
|
BOOLEAN
|
Falso
|
No
|
No
|
|
|
MenuMinWidth
|
Definir el ancho mínimo al que se pueden reducir los menús y submenús, en píxeles. Cuando está vacío, el ancho del menú se define para ajustarse a su elemento más ancho.
|
Número
|
No
|
No
|
||
|
MenuMaxWidth
|
Definir el ancho máximo al que se pueden expandir los menús y submenús, en píxeles. Cuando está vacío, el ancho del menú se define para ajustarse a su elemento más ancho.
|
Número
|
No
|
No
|
||
|
MenuMaxItems
|
Definir el número máximo de elementos visibles en el menú y sus submenús. Cuando los datos contienen más elementos que el máximo, los elementos se ocultan en un submenú con el rótulo Más.
|
Número
|
5
|
Sí
|
No
|
|
|
MenuDirection
|
Definir la dirección en la que se abre el menú en relación con el botón. Opciones: Vertical, Horizontal
|
STRING
|
Vertical
|
Sí
|
No
|
|
|
ItemConfigurationMode
|
Modo Datos de infotable: permite configurar la visibilidad y el estado de cada elemento de menú mediante datos de infotable. Se puede utilizar el evento SelectedDataChanged y la propiedad SelectedData del servicio para pasar el elemento seleccionado a otro servicio.
Modo Propiedades del widget: permite configurar la visibilidad y el estado de cada elemento de menú manualmente mediante las propiedades del widget o dinámicamente mediante enlaces. Se debe enlazar el evento Clicked de los elementos de menú para pasar la propiedad SelectedData a otro servicio. Opciones: Datos de infotable, Propiedades del widget
|
STRING
|
Datos de infotable
|
Sí
|
No
|
|
|
<Item_Name>_Clicked
|
Un evento que se activa cuando se pulsa en el elemento de menú.
|
Evento
|
Sí
|
No
|
||
|
<Item_Name>_Disabled
|
Permite desactivar el elemento de menú.
|
BOOLEAN
|
True
|
Sí
|
No
|
|
|
<Item_Name>_Visible
|
Permite controlar la visibilidad del elemento de menú.
|
BOOLEAN
|
True
|
Sí
|
No
|