Widget "Menüschaltfläche" (mit Thema versehen)
Das Widget "Menüschaltfläche" zeigt eine Schaltfläche an, über die ein Menü mit einer Liste von Elementen geöffnet wird, die Sie mithilfe von Infotable-Daten definieren können. Abhängig von der Menükonfiguration können Sie die ausgewählten Elementdaten oder die angeklickten Ereignisse jeder Menüoption binden. Verwenden Sie dieses Widget, wenn der verfügbare Platz in einem Layout begrenzt ist und Sie Optionen, die nicht häufig verwendet werden, ausblenden möchten. Sie können mehrere Navigationsebenen erstellen, um Menüoptionen unter einer gemeinsamen Beschriftung zu gruppieren.
Standard-Menüschaltfläche
Menüschaltfläche mit Beschriftung
Die folgende Abbildung zeigt die verfügbaren Varianten für die Menüschaltfläche von links nach rechts. Sie können die Eigenschaft ButtonType verwenden, um die Schaltflächenvariante auf Primär, Sekundär, Tertiär, Gefahr oder Transparent festzulegen. Standardmäßig wird die Schaltfläche mit dem Stil Tertiär angezeigt.
Anatomie
1. Menüschaltfläche
2. Menü
3. Menü der zweiten Ebene
Layout-Richtung wählen
Sie können das Menü mithilfe der Eigenschaft MenuDirection in horizontaler oder vertikaler Richtung öffnen.
Vertikal (Standardeinstellung) – Öffnet das Menü unter der Schaltfläche. Verwenden Sie diesen Modus, um den horizontalen Platz, der zum Anzeigen der Schaltfläche erforderlich ist, zu verringern. Beispielsweise wenn die Schaltfläche in einer Symbolleiste angezeigt wird.
Horizontal – Öffnet das Menü neben der Schaltfläche. Verwenden Sie diesen Modus, wenn die Schaltfläche in einem Seitenbereich angezeigt wird.
Datenformat
Mithilfe des Data Shape MenuEntry können Sie Infotable-Daten für das Widget erstellen. Weitere Informationen finden Sie unter Data Shape "MenuEntry" verwenden.
Die folgende Abbildung zeigt ein Infotable-Ergebnis, das ein einfaches Menü mit dem Data Shape MenuEntry anzeigt.
 |
Die erste Zeile der Infotable dient als Stamm und wird nicht als Menüoption angezeigt. Sie müssen die Menüoptionen der obersten Ebene mit einer parentMenuId definieren, die der menuId des Stamms entspricht.
|
Benutzerdefinierte Tooltips zu Menüoptionen hinzufügen
Sie können Tooltips für jede Menüoption anzeigen, indem Sie die Spalten tooltip und tooltipIcon in den Infotable-Daten hinzufügen. Die folgende Abbildung zeigt einen benutzerdefinierten Tooltip für eine Menüoption.
Menüdaten mithilfe einer Infotable konfigurieren
1. Erstellen Sie in Composer einen Dienst, der Infotable-Daten zurückgibt, die mit dem Data Shape MenuEntry definiert werden. Weitere Informationen finden Sie unter Widget "Menüleiste".
2. Fügen Sie den Menüdienst in Mashup Builder über den Fensterbereich Daten hinzu.
3. Binden Sie die Eigenschaft All Data der Dienst-Infotable an die Eigenschaft Data des Widgets "Menüschaltfläche".
4. Klicken Sie auf Speichern, um die Änderungen im Mashup zu speichern.
Alternativ können Sie die Infotable-Daten manuell definieren, ohne einen Dienst zu verwenden, indem Sie das Dialogfenster zur Infotable-Konfiguration in Mashup Builder verwenden.
1. Wählen Sie in Mashup Builder das Widget "Menüschaltfläche" aus.
2. Klicken Sie im Fensterbereich Eigenschaften neben der Eigenschaft Data auf Hinzufügen. Es wird ein Dialogfenster geöffnet, in dem Sie Zeilen hinzufügen können, um Infotable-Daten für das Widget zu definieren.
3. Klicken Sie auf Hinzufügen, und definieren Sie dann die Zeilendaten für die Menüoption.
4. Klicken Sie auf Hinzufügen, um die Zeile zur Infotable hinzuzufügen.
5. Klicken Sie auf Speichern, um die Infotable-Daten zu speichern.
Die in der Infotable definierten Menüoptionen werden zur Laufzeit angezeigt.
Menüoptionen mithilfe von Widget-Eigenschaften konfigurieren
Standardmäßig ist das Widget so konfiguriert, dass Infotable-Daten zum Definieren von Menüoptionen verwendet werden. Sie können das Ereignis SelectedDataChanged und die Eigenschaft SelectedData des Diensts verwenden, um das ausgewählte Element an einen anderen Dienst zu übergeben. Verwenden Sie die Eigenschaft ItemConfigurationMode, um Menüoptionen stattdessen mit Widget-Eigenschaften zu konfigurieren. Wenn Sie diese Eigenschaft auf Widget-Eigenschaften festlegen, werden dem Fensterbereich Eigenschaften ein Clicked-Ereignis und Eigenschaften hinzugefügt, mit denen Sie die Sichtbarkeit und den deaktivierten Status für jede Menüoption konfigurieren können. Sie können diese Eigenschaften binden, um den Status einzelner Menüoptionen dynamisch basierend auf bestimmten Ereignissen im Mashup zu steuern. Dies ermöglicht es Ihnen, Menüinteraktionen anzupassen, wodurch es einfacher wird, die Sichtbarkeit und Funktionalität der einzelnen Menüoptionen zu verwalten.
1. Binden Sie in Mashup Builder eine Infotable-Datenquelle an Daten, um die Menü-IDs und die Beschriftungen zu definieren.
2. Wählen Sie das Widget "Menüschaltfläche" aus, und legen Sie dann im Fensterbereich Eigenschaften die Eigenschaft ItemConfigurationMode auf Widget-Eigenschaften fest.
3. Konfigurieren oder binden Sie für jede Menüoption die folgenden Eigenschaften:
◦ <Item_Name>_Clicked – Ein Ereignis, das ausgelöst wird, wenn auf die Menüoption geklickt wird.
◦ <Item_Name>_Disabled – Deaktiviert die Menüoption.
◦ <Item_Name>_Visible – Blendet die Menüoption aus.
4. Klicken Sie auf Speichern.
Menüschaltfläche formatieren
Sie können das Widget "Menüschaltfläche" wie folgt formatieren:
• Auf Widget-Ebene mithilfe der verfügbaren Stileigenschaften im Fensterbereich Stileigenschaften.
Sie können den Schaltflächen- und Menüstil in jedem Status ändern, z.B. Deaktiviert oder Darauf zeigen.
• Auf Stilthema-Ebene unter > .
Weitere Informationen zum Anpassen von Stilthemen finden Sie unter Stilthemen mit der Registerkarte "Stile" anpassen.
Widget-Eigenschaften
|
Eigenschaftsname
|
Beschreibung
|
Basistyp
|
Standardwert
|
Bindung möglich (<-, ->)
|
Lokalisierbar (J/N)
|
|
|---|---|---|---|---|---|---|
|
Data
|
Binden Sie eine Infotable, um die Menüoptionen zu definieren. Sie müssen die Infotable mit dem Data Shape MenuEntry formatieren.
|
INFOTABLE
|
J
|
N
|
||
|
SelectedData
|
Eine Infotable, die die Daten für die zuletzt ausgewählte Menüoption enthält.
|
INFOTABLE
|
J
|
N
|
||
|
SelectedDataChanged
|
Ein Ereignis, das bei Auswahl einer Menüoption ausgelöst wird.
|
Ereignis
|
J
|
N
|
||
|
MenuOffset
|
Der Abstand zwischen der Schaltfläche und dem Menü, wenn das Menü geöffnet ist.
|
NUMBER
|
8
|
N
|
N
|
|
|
ButtonType
|
Legen Sie den Schaltflächentyp für die Menüschaltfläche fest. Jeder Typ hat einen eigenen Stil. Optionen: Primär, Sekundär Tertiär, Gefahr, Transparent
|
STRING
|
Tertiär
|
J
|
N
|
|
|
TooltipField
|
Zeigt einen Tooltip an, wenn mit der Maus auf das Menüschaltflächen-Widget gezeigt wird.
|
STRING
|
J
|
J
|
||
|
TooltipIcon
|
Legt ein Symbolbild für den Tooltip des Menüschaltflächen-Widgets fest.
|
MEDIA
|
N
|
N
|
||
|
Disabled
|
Deaktiviert die Menüschaltfläche.
|
BOOLEAN
|
Falsch
|
J
|
N
|
|
|
SVGIcon
|
Wählen Sie ein SVG-Symbol aus, das im Widget "Menüschaltfläche" angezeigt werden soll. Verwenden Sie die Symbol-Eigenschaft, um eine Medienentität anzuzeigen.
|
MEDIALINK
|
N
|
N
|
||
|
ButtonIcon
|
Wählen Sie ein Symbolbild aus, das im Widget "Menüschaltflächen" angezeigt werden soll. Diese Eigenschaft überschreibt die Eigenschaft SVGIcon.
|
MEDIA
|
N
|
N
|
||
|
ButtonIconPosition
|
Legen Sie die Symbolposition auf links oder rechts von der Schaltflächenbeschriftung fest. Optionen: Links, Rechts, Oben, Unten
|
STRING
|
Rechts
|
N
|
N
|
|
|
ButtonClicked
|
Ein Ereignis, das ausgelöst wird, wenn auf die Schaltfläche geklickt wird und keine Menüoptionen für das Widget definiert wurden.
|
Ereignis
|
J
|
N
|
||
|
ButtonMaxWidth
|
Legen Sie eine maximale Breite für die Schaltfläche fest.
|
NUMBER
|
N
|
N
|
||
|
ButtonLabelAlignment
|
Richtet die Schaltflächenbeschriftung links, rechts oder mittig aus. Optionen: Links, Rechts, Mitte
|
STRING
|
Mitte
|
N
|
N
|
|
|
ButtonLabel
|
Gibt den Text für die Beschriftung der Schaltfläche an.
|
STRING
|
J
|
J
|
||
|
ButtonSize
|
Legt die Größe der Schaltfläche fest. Optionen: Standard, Mittel, Groß, Sehr groß, Füllen
|
STRING
|
Standard
|
N
|
N
|
|
|
DisplayMenuIcons
|
Bei Einstellung auf "falsch" werden Symbole für Menüoptionen ausgeblendet.
|
BOOLEAN
|
Falsch
|
N
|
N
|
|
|
AllowMissingIcons
|
Wenn diese Eigenschaft "falsch" und DisplayMenuIcons "wahr" ist, wird ein Standardsymbol neben Menüoptionen angezeigt, für die in den Infotable-Daten kein Symbol angegeben ist.
|
BOOLEAN
|
Falsch
|
N
|
N
|
|
|
MenuMinWidth
|
Legt die minimale Breite, auf die Menüs und Untermenüs verkleinert werden können, in Pixeln fest. Wird dieser Wert leer gelassen, so wird die Menübreite unter Berücksichtigung des breitesten Elements festgelegt.
|
NUMBER
|
N
|
N
|
||
|
MenuMaxWidth
|
Legt die maximale Breite, auf die Menüs und Untermenüs erweitert werden können, in Pixeln fest. Wird dieser Wert leer gelassen, so wird die Menübreite unter Berücksichtigung des breitesten Elements festgelegt.
|
NUMBER
|
N
|
N
|
||
|
MenuMaxItems
|
Legt die maximale Anzahl sichtbarer Elemente im Menü und dessen Untermenüs fest. Wenn die Daten mehr Elemente als das Maximum enthalten, sind Elemente unter einem Untermenü mit der Beschriftung Mehr ausgeblendet.
|
NUMBER
|
5
|
J
|
N
|
|
|
MenuDirection
|
Legt die Richtung fest, in der das Menü relativ zur Schaltfläche geöffnet wird. Optionen: Vertikal, Horizontal
|
STRING
|
Vertikal
|
J
|
N
|
|
|
ItemConfigurationMode
|
Modus Infotable-Daten – Konfigurieren Sie die Sichtbarkeit und den Status jeder Menüoption mithilfe von Infotable-Daten. Sie können das Ereignis SelectedDataChanged und die Eigenschaft SelectedData des Diensts verwenden, um das ausgewählte Element an einen anderen Dienst zu übergeben.
Modus Widget-Eigenschaften – Konfigurieren Sie die Sichtbarkeit und den Status jeder Menüoption manuell mithilfe von Widget-Eigenschaften oder dynamisch mithilfe von Bindungen. Sie müssen das Ereignis Clicked von Menüoptionen binden, um die Eigenschaft SelectedData an einen anderen Dienst zu übergeben. Optionen: Infotable-Daten, Widget-Eigenschaften
|
STRING
|
Infotable-Daten
|
J
|
N
|
|
|
<Item_Name>_Clicked
|
Ein Ereignis, das ausgelöst wird, wenn auf die Menüoption geklickt wird.
|
Ereignis
|
J
|
N
|
||
|
<Item_Name>_Disabled
|
Deaktiviert die Menüoption.
|
BOOLEAN
|
Wahr
|
J
|
N
|
|
|
<Item_Name>_Visible
|
Steuert die Sichtbarkeit der Menüoption.
|
BOOLEAN
|
Wahr
|
J
|
N
|