Widget Pulsante menu (con tema applicato)
Il widget Pulsante menu mostra un pulsante che apre un menu con un elenco di voci che è possibile definire utilizzando i dati dell'infotable. È possibile associare i dati della voce selezionata o gli eventi su cui si fa clic per ciascuna voce, a seconda della configurazione del menu. Utilizzare questo widget quando lo spazio disponibile in un layout è limitato e si desidera nascondere le opzioni che non vengono utilizzate di frequente. È possibile creare più livelli di navigazione per raggruppare le voci di menu sotto un'etichetta comune.
Pulsante menu standard
Pulsante menu con un'etichetta
L'immagine seguente mostra le varianti disponibili per il pulsante di menu da sinistra a destra. È possibile utilizzare la proprietà ButtonType per impostare la variante del pulsante su Principale, Secondario, Terziario, Avviso di pericolo o Trasparente. Per default, il pulsante viene visualizzato utilizzando lo stile Terziario.
Anatomia
1. Pulsante menu
2. Menu
3. Menu di secondo livello
Scelta della direzione del layout
È possibile aprire il menu in direzione orizzontale o verticale utilizzando la proprietà MenuDirection.
Verticale (default) - Apre il menu sotto il pulsante. Utilizzare questa modalità per ridurre lo spazio orizzontale necessario per visualizzare il pulsante. Ad esempio, quando il pulsante viene visualizzato in una barra degli strumenti.
Orizzontale - Apre il menu a lato del pulsante. Utilizzare questa modalità quando il pulsante viene visualizzato in un pannello laterale.
Formato dati
È possibile creare i dati dell'infotable per il widget utilizzando la data shape MenuEntry. Per ulteriori informazioni, vedere Utilizzo della data shape MenuEntry.
L'immagine seguente mostra il risultato di un'infotable che visualizza un menu semplice utilizzando la data shape MenuEntry.
 |
La prima riga dell'infotable viene utilizzata come radice e non viene visualizzata come voce di menu. È necessario definire le voci di menu di livello superiore con un parentMenuId che corrisponde al menuId della radice.
|
Aggiunta di descrizioni comandi personalizzate alle voci di menu
È possibile visualizzare le descrizioni comandi per ogni voce di menu aggiungendo le colonne tooltip e tooltipIcon nei dati dell'infotable. Nell'immagine seguente viene visualizzata una descrizione comando personalizzata per una voce di menu.
Configurazione dei dati di menu mediante un'infotable
1. In Composer creare un servizio che restituisca i dati dell'infotable definiti utilizzando la data shape MenuEntry. Per ulteriori informazioni, vedere Widget Barra dei menu.
2. In Mashup Builder aggiungere il servizio di menu utilizzando il pannello Dati.
3. Associare la proprietà All Data dell'infotable del servizio alla proprietà Data del widget Pulsante menu.
4. Fare clic su Salva per salvare le modifiche apportate al mashup.
In alternativa, è possibile definire manualmente i dati dell'infotable senza utilizzare un servizio tramite la finestra di dialogo di configurazione dell'infotable in Mashup Builder.
1. In Mashup Builder selezionare il widget Pulsante menu.
2. Nel pannello Proprietà, accanto alla proprietà Data, fare clic su Aggiungi. Viene visualizzata una finestra di dialogo in cui è possibile aggiungere righe per definire i dati dell'infotable per il widget.
3. Fare clic su Aggiungi, quindi definire i dati di riga per la voce di menu.
4. Fare clic su Aggiungi per aggiungere la riga all'infotable.
5. Fare clic su Salva per salvare i dati dell'infotable.
Le voci di menu definite nell'infotable vengono visualizzate in fase di esecuzione.
Configurazione delle voci di menu mediante le proprietà del widget
Per default, il widget è configurato per utilizzare i dati dell'infotable per definire le voci di menu. È possibile utilizzare l'evento SelectedDataChanged e la proprietà SelectedData del servizio per trasferire la voce selezionata a un altro servizio. Per configurare le voci di menu utilizzando le proprietà del widget, utilizzare invece la proprietà ItemConfigurationMode. Quando si imposta questa proprietà su Proprietà widget, nel pannello Proprietà vengono aggiunti un evento Clicked e le proprietà che consentono di configurare lo stato di visibilità e disattivazione per ogni voce di menu. È possibile associare queste proprietà per controllare dinamicamente lo stato di singole voci di menu in base a eventi specifici nel mashup. In questo modo è possibile personalizzare le interazioni con i menu, semplificando la gestione della visibilità e delle funzionalità di ogni voce di menu.
1. In Mashup Builder associare un'origine dati dell'infotable ai dati per definire gli ID e le etichette dei menu.
2. Selezionare il widget Pulsante menu quindi, nel pannello Proprietà, impostare la proprietà ItemConfigurationMode su Proprietà widget.
3. Configurare o associare le proprietà riportate di seguito per ogni voce di menu.
◦ <Item_Name>_Clicked - Evento che viene attivato quando si fa clic sulla voce di menu.
◦ <Item_Name>_Disabled - Disattiva la voce di menu.
◦ <Item_Name>_Visible - Nasconde la voce di menu.
4. Fare clic su Salva.
Applicazione di stili al widget Pulsante menu
È possibile applicare stili al widget Pulsante menu nei modi riportati di seguito.
• A livello di widget, utilizzando le proprietà di stile disponibili nel pannello Proprietà stile.
È possibile modificare gli stili del pulsante e del menu in qualsiasi stato, ad esempio Disattivato o Al passaggio del mouse.
• A livello di tema di stile in > .
Per ulteriori informazioni sulla personalizzazione dei temi di stile, vedere Personalizzazione dei temi di stile con la scheda Stili.
Proprietà del widget
|
Nome proprietà
|
Descrizione
|
Tipo di base
|
Valore di default
|
Associabile (<-, ->)
|
Localizzabile? (Y/N)
|
|
|---|---|---|---|---|---|---|
|
Data
|
Associare un'infotable per definire le voci di menu. È necessario formattare l'infotable utilizzando la data shape MenuEntry
|
INFOTABLE
|
Y
|
N
|
||
|
SelectedData
|
Infotable contenente i dati dell'ultima voce di menu selezionata.
|
INFOTABLE
|
Y
|
N
|
||
|
SelectedDataChanged
|
Evento che viene attivato quando viene selezionata una voce di menu.
|
Evento
|
Y
|
N
|
||
|
MenuOffset
|
Lo spazio tra il pulsante e il menu quando il menu è aperto.
|
NUMBER
|
8
|
N
|
N
|
|
|
ButtonType
|
Impostare il tipo di pulsante per il pulsante di menu. Ogni tipo ha stili diversi. Opzioni: Principale, Secondario Terziario, Avviso di pericolo, Trasparente
|
STRING
|
Terziario
|
Y
|
N
|
|
|
TooltipField
|
Visualizza una descrizione comando quando si passa il mouse sul widget Pulsante menu.
|
STRING
|
Y
|
Y
|
||
|
TooltipIcon
|
Imposta l'immagine di un'icona per la descrizione comando del widget Pulsante menu.
|
MEDIA
|
N
|
N
|
||
|
Disabled
|
Disattiva il pulsante di menu
|
BOOLEAN
|
False
|
Y
|
N
|
|
|
SVGIcon
|
Selezionare un'icona SVG da visualizzare nel widget Pulsante menu. Per visualizzare un'entità multimediale, utilizzare la proprietà Icona.
|
MEDIALINK
|
N
|
N
|
||
|
ButtonIcon
|
Selezionare l'immagine di un'icona da visualizzare nel widget Pulsante menu. Questa proprietà sostituisce la proprietà SVGIcon.
|
MEDIA
|
N
|
N
|
||
|
ButtonIconPosition
|
Impostare la posizione dell'icona a sinistra o a destra dell'etichetta del pulsante. Opzioni: A sinistra, A destra, In alto, In basso
|
STRING
|
A destra
|
N
|
N
|
|
|
ButtonClicked
|
Evento che si attiva quando si fa clic sul pulsante e non viene definita alcuna voce di menu per il widget.
|
Evento
|
Y
|
N
|
||
|
ButtonMaxWidth
|
Impostare una larghezza massima per il pulsante.
|
NUMBER
|
N
|
N
|
||
|
ButtonLabelAlignment
|
Allinea l'etichetta del pulsante a sinistra, a destra o al centro. Opzioni: A sinistra, A destra, Al centro
|
STRING
|
Al centro
|
N
|
N
|
|
|
ButtonLabel
|
Specifica il testo dell'etichetta del pulsante.
|
STRING
|
Y
|
Y
|
||
|
ButtonSize
|
Imposta la dimensione del pulsante. Opzioni: Standard, Media, Grande, Extra-grande, Riempimento
|
STRING
|
Standard
|
N
|
N
|
|
|
DisplayMenuIcons
|
Se il valore è false, le icone per le voci di menu sono nascoste.
|
BOOLEAN
|
False
|
N
|
N
|
|
|
AllowMissingIcons
|
Se l'impostazione è false e DisplayMenuIcons è true, viene visualizzata un'icona di default accanto alle voci di menu senza un'icona specificata nei dati dell'infotable.
|
BOOLEAN
|
False
|
N
|
N
|
|
|
MenuMinWidth
|
Imposta la larghezza minima espressa in pixel alla quale è possibile ridurre i menu e i sottomenu. Se il valore è vuoto, la larghezza del menu viene adattata alla voce più ampia.
|
Number
|
N
|
N
|
||
|
MenuMaxWidth
|
Imposta la larghezza massima espressa in pixel di espansione dei menu e dei sottomenu. Se il valore è vuoto, la larghezza del menu viene adattata alla voce più ampia.
|
Number
|
N
|
N
|
||
|
MenuMaxItems
|
Impostail numero massimo di voci visibili nel menu e nei relativi sottomenu. Quando i dati contengono più voci del massimo consentito, le voci vengono nascoste in un sottomenu con l'etichetta Altro.
|
Number
|
5
|
Y
|
N
|
|
|
MenuDirection
|
Imposta la direzione di apertura del menu rispetto al pulsante. Opzioni: Verticale Orizzontale
|
STRING
|
Verticale
|
Y
|
N
|
|
|
ItemConfigurationMode
|
Modalità Dati infotable - Configurare la visibilità e lo stato di ogni voce di menu utilizzando i dati dell'infotable. È possibile utilizzare l'evento SelectedDataChanged e la proprietà SelectedData del servizio per trasferire la voce selezionata a un altro servizio.
Modalità Proprietà widget - Configurare manualmente la visibilità e lo stato di ogni voce di menu utilizzando le proprietà del widget o dinamicamente utilizzando le associazioni. È necessario associare l'evento Clicked delle voci di menu per passare la proprietà SelectedData a un altro servizio. Opzioni: Dati infotable, Proprietà widget
|
STRING
|
Dati infotable
|
Y
|
N
|
|
|
<Item_Name>_Clicked
|
Evento che viene attivato quando si fa clic sulla voce di menu.
|
Evento
|
Y
|
N
|
||
|
<Item_Name>_Disabled
|
Disattiva la voce di menu.
|
BOOLEAN
|
True
|
Y
|
N
|
|
|
<Item_Name>_Visible
|
Controlla la visibilità della voce di menu.
|
BOOLEAN
|
True
|
Y
|
N
|