Standard-Elemente
Text
Zeigt einen Text an, der mit Hilfe von Attributen formatiert werden kann.
Beispiel
<Text Weight="0.45" Content="Hello World" Style="InfoLabelStyle" BackgroundColor="gray.darker"/>
Textformatierung
Es ist möglich, den Inhalt des Textelements mit Hilfe einer begrenzten Anzahl von HTML-Tags zu formatieren. Die folgende Liste enthält alle Attribute, die nützliche Auswirkungen auf die Formatierung haben:
Attribute
Hier sind die möglichen .html-Formate
für Texte, die in Smart Glasses angezeigt werden, wenn sie konfiguriert sind:
- <b>: Ermöglicht es Ihnen, einen Text fett zu markieren.
- <u>: Ermöglicht es Ihnen, einen Text zu unterstreichen.
- <br>: Ermöglicht es, einen Zeilenumbruch zu machen.
Hinweis: Der Standardwert des Attributs MaxLines des Layoutobjekts muss auf einen Wert größer als 1 überschrieben werden.
- <del>, <s>: Ermöglicht es Ihnen, einen Text durchzustreichen.
- <dfn>, <em>, <i>: Ermöglicht es, einen Begriff zu markieren.
- <h1-6>: Ermöglicht es Ihnen, die Größe der Überschrift festzulegen, wobei 1 die größte und 6 die kleinste ist.
- <hr>: Ermöglicht es Ihnen, eine thematische Änderung in der Textstruktur zu definieren und diese entsprechend zu formatieren.
- <li>: Ermöglicht die Erstellung einer Liste mit Aufzählungspunkten, die in
<ul>-Umgebungen
verwendet werden kann, aber nicht in <ol>-Umgebungen
. - <klein>: Ermöglicht es Ihnen, den Text stärker als üblich zu verkleinern.
- <strong>: Ermöglicht es Ihnen, einen wichtigen Text zu markieren.
- <sub>: Ermöglicht die Formatierung eines Textes als tiefgestelltes Zeichen.
- <sup>: Ermöglicht die Formatierung eines Textes als hochgestellte Schrift.
- <ul>: Ermöglicht Ihnen eine Umgebung, um eine Liste mit Aufzählungspunkten mit
<li>
zu erstellen.
⇒ Auch andere .
html-Tags können ausprobiert werden, allerdings sind die meisten Tags entweder veraltet oder werden nicht wie in normalen Browsern gerendert (z. B. Formulare, Bilder, Audio). Diese fehlenden Möglichkeiten werden durch die Workflow-Engine selbst implementiert.
Schaltfläche
Zeigt eine Schaltfläche auf dem Bildschirm an. Die Schaltfläche kann durch Gesten oder Navigationssteuerungen auf Ihrem Gerät ausgewählt werden. Wenn sie ausgewählt wird, löst sie ein Ereignis aus, das innerhalb des Workflows verarbeitet wird.
Beispiel
<Button Name="BtnQuit" FocusOrder="1" Weight="0.3" FocusStyle="PART_1">
<Image Weight="0.6" Content="§{quit.png}§" Padding="4,4,4,4"/>
<Text Weight="0.4" Name="Settings" Content="Quit" Gravity="Center" Padding="4,4,4,4" TextGroup="Options"/>
</Button>
Attribute
- RedeBefehl
- FocusOrder
- FocusStyle
- InitialButtonStatus
Bild
Dieses Element zeigt ein definiertes Bild an.
Beispiel
<Image Name="ICON" Weight="0.1" Margin="0,0,0,0" Content="§{icon.png}§"/>
Attribute
Liste
Zeigt die verfügbaren Inhalte in Form einer Liste an.
Beispiel
<List Name="SELF_MENU_TABLE_MENU"
FocusOrder="0"
TextStyle="LIST_ITEM_STYLE"
PageIndicatorStyle="PAGE_INDICATOR_STYLE"
EntriesPerPage="5"
Border="0,gray.dark,black"
/>
Attribute
Form
Definiert eine generische grafische Form.
Beispiel
<Shape Weight="0.05" StartColor="red.dark" EndColor="#00000000" Angle="0"/>
Attribute
Kamera
Die Kamerafunktion zeigt den Sucher auf Ihrem Gerät an. Die Kamera muss manuell mit einer Aktion aktiviert werden, um das Bild zu sehen.
Beispiel
<Camera>
<MaskOverlay/>
<RectangleOverlay/>
<AROverlay/>
</Camera>
Text bearbeiten
Ein Texteingabefeld, das es dem Benutzer ermöglicht, einen zuvor eingegebenen Text zu ändern.
Beispiel
<EditText Name="COMMENT_FIELD"
Padding="10,10,10,10"
CursorVisible="true"
MaxSize="40"
MaxLines="10"
Hint="No comment yet"
Gravity="Left,Top"/>
Attribute
Animation
Beispiel
<Animation Weight="0.5" Margin="20,0,20,0" Content="ANDRRES_bluetooth_connection" Loop="true" Control="Start" ColorFilter="gray"/>
Attribute
- Stil
- Marge
- Gewicht
- Schleife
- Kontrolle
- FarbFilter
Struktur-Elemente
Panel
Ein Wrapper zur Strukturierung Ihrer Layouts.
Beispiel
<Panel Weight="1" Orientation="Horizontal">
<Panel Weight="0.5" Orientation="Vertical">
[...]
</Panel>
<Panel Weight="0.5" Orientation="Vertical">
[...]
</Panel>
</Panel>
StackLayout
Enthält mehrere Elemente, die übereinander gestapelt sind. Dadurch kann sich das oberste sichtbare Stapelobjekt mit den anderen darunter befindlichen überlappen.
Beispiel
<StackLayout>
<StackItem>
<Image Name="Background" ScaleType="CenterCrop" IMAGE_POST_PROCESS="TRUE"/>
</StackItem>
<StackItem>
<Panel BackgroundColor="#66000000"/>
</StackItem>
[...]
<StackItem>
</StackLayout>
StackItem
Zeigt einen Text an, der mit Attributen formatiert werden kann.
Beispiel
<StackItem>
<Panel BackgroundColor="#77000000"/>
</StackItem>
Attribute
Platzhalter
Mit diesem Widget können Sie verschiedene Teilevorlagen dynamisch in Ihr Layoutmodell integrieren. Es ermöglicht Ihnen die Anzeige eines Wagens oder Regals zur grafischen Darstellung in einem Kommissionier-Workflow.
Beispiel
Definieren einer Teilevorlage
<PartTemplate Name="CartInsertPick">
<Panel Orientation="Vertical" Weight="1">
<Panel Border="2,gray.dark," Orientation="Horizontal" Weight="0.5">
<Text Name="1.1" Border="2,gray.dark," Gravity="Center" Weight="0.33" Margin="2,2,2,2"/>
<Text Name="1.2" Border="2,gray.dark," Gravity="Center" Weight="0.33" Margin="2,2,2,2"/>
<Text Name="1.3" Border="2,gray.dark," Gravity="Center" Weight="0.33" Margin="2,2,2,2"/>
</Panel>
</Panel>
</PartTemplate>
Importieren einer Vorlage in das Layoutmodell
<WildcardWidget Name="CARTplace" PartTemplateName="CartInsertPick" Weight="0.4"/>
Verwendung
Wildcards können sowohl für die Bauteilvorlage als auch für den Inhalt dynamisch geändert werden.
Dynamisch:
<ui_update id="update_shelf">
<widget_params>
<ui_element name="SHELF">
Bei der Kartierung:
<ui_element name="SHELF">
Ändern einer Teilevorlage
Eine Rückgabezeichenfolge, die mit dem Namen der Teilevorlage übereinstimmt. Beachten Sie, dass in Q3 die Teilevorlagen global definiert sind.
Eine Bauteilvorlage kann nur durch Verweis auf den Namen geändert werden, ein Einfügen von Objekten ist nicht möglich.
<param name="PARTTEMPLATENAME"><![CDATA[?{pickOrder.groups[activeGroup].picks[0].destination.structure.split('.')[0]}?]]></param>
Ändern des Inhalts
Um den Inhalt einer Teilvorlage zu ändern, setzen Sie den Inhalt mit einem Objekt der folgenden Struktur über die ui_update-Aktion
oder das Mapping:
{
1.1: {CONTENT: 3, BACKGROUNDCOLOR: "blue", TEXTCOLOR: "red"}
1.2: {CONTENT: 2, BACKGROUNDCOLOR: "blue", TEXTCOLOR: "red"}
}
Wie oben zu sehen ist, werden die inneren Objekte nach dem zu bearbeitenden UI-Element benannt (in diesem Fall die <Text>-Elemente
mit den Namen "1.1" und "1.2" aus der oben erwähnten CartInsertPick-Teilvorlage
). Die bearbeitbaren UI-Element-Attribute sind CONTENT
, BACKGROUNDCOLOR
und TEXTCOLOR
.
Das entsprechende verschachtelte Objekt kann mit Javascript erzeugt werden. Weitere Informationen entnehmen Sie bitte dem folgenden Beispiel.
Beispiel
<param name="TEMPLATE_CONTENT">
<![CDATA[?{
var result = {};
pickOrder.groups[activeGroup].picks.forEach((pick) => {
var amount = 0;
var shelfBox = pick.destination.structure.split('.').slice(2,4).join('.');
if (result[shelfBox]) {
amount = result[shelfBox].CONTENT
}
if (pick.attributes.place) {
result[shelfBox] = {
CONTENT:amount + pick.amountOpen,
TEXTCOLOR:"blue",
BACKGROUNDCOLOR:"black",
}
} else {
result[shelfBox] = {
CONTENT:amount + pick.amountOpen,
BACKGROUNDCOLOR:"blue",
TEXTCOLOR:"red",
}
}
});
result
}?]]>
</param>
Attribute
Status-Widget
Akku-Status
Zeigt den aktuellen Zustand des Geräteakkus an. Sie zeigt den Ladezustand des Akkus in Prozent an und gibt an, ob der Akku gerade geladen wird.
Beispiel
<BatteryStatus Weight="0.05" Padding="1,1,1,1"/>
Attribute
Bluetooth-Scanner
Zeigt an, ob derzeit ein externer Barcode-Scanner an das Gerät angeschlossen ist.
Beispiel
<BTSCANNER_WIDGET Name="BTSCANNER_WIDGET" Weight="0.05" Content="ANDRRES_ic_31barcode" Padding="1,1,1,1" Visibility="Gone"/>
Attribute
Mikrofon-Sprachrückkopplung
Ein Wrapper, der zur Strukturierung Ihrer Layouts verwendet wird.
Beispiel
<MicrophoneSpeechFeedback Weight="0.05" Padding="1,1,1,1" Margin="2,0,2,0" PositiveNotifications="true" NegativeNotifications="true"/>
Fortschrittsanzeige
Zeigt eine visuelle Darstellung der aktuell erledigten Aufgaben im Verhältnis zu den verbleibenden Aufgaben an.
Beispiel
<PROGRESSBAR Name="PROCESS_PROGRESSBAR" Weight="0.65" Padding="0,5,0,5" BackgroundColor="#00000000" scale_y="2" progress_color="gray" progress_overlay_text_color="#FFFFFF"/>
Attribute
- progress_color
- progress_overlay_text_color
Status der Fackel
Zeigt den aktuellen Status der Taschenlampe Ihres Geräts an (ob sie gerade ein- oder ausgeschaltet ist).
Beispiel
<TorchStatus Weight="0.05" Padding="1,1,1,1"/>
Wi-Fi-Status
Zeigt an, ob das Gerät mit einem Wi-Fi-Netzwerk verbunden ist.
Beispiel
<WiFiStatus Weight="0.05" Padding="1,1,1,1"/>
Attribute
xBand Widget
Zeigt an, ob ein xBand mit dem Gerät verbunden ist. Wenn ein xBand angeschlossen ist, wird auch dessen Batteriestatus angezeigt.
Beispiel
<XBAND_WIDGET Name="XBAND_WIDGET" Weight="0.05" Content="ANDRRES_ic_13xBand" Padding="1,1,1,1" Visibility="Gone"/>
Attribute
- batterie_warnung_percnet
- FarbFilter
- FocusStyle
MQTT-Status
Zeigt an, ob das am Kopf getragene Gerät eine Verbindung zum Frontline Command Center hat.
Beispiel
<MqttStatus Weight="0.05" Padding="1,1,1,1"/>