Das Element <input> fügt ein einfaches Eingabefeld, eine dropDown-Liste, ein Optionsfeld, ein Kontrollkästchen oder eine Schaltfläche mit Toggle-Funktion ein, das zur Eingabe oder Auswahl dient.
Bei der verdeckten Passworteingabe (type="password") wird statt eines eingegebenen Zeichens ein Stern (*) dargestellt.
Der Text kann auch als Link erstellt werden. Solche Links sind nicht, wie üblich, in blauer unterstrichener Schrift ausgeführt und der Link ist nur erreichbar, wenn die Taste [Alt] gedrückt wird.
Der Inhalt des Felds kann mit Hilfe der Formelsprache berechnet werden. Eingaben von Integer- oder Double-Werten werden eingeschränkt um Fehleingaben einzuschränken. Andere Zeichen außer den Folgenden können nicht eingegeben werden:
- Integer: +/-, nur Zahlen ohne Dezimaltrennzeichen
- Double: +/-, Zahlen, Dezimaltrennzeichen, e
Attributname | Verwendung | Attributwerte | Defaultwert | Beschreibung |
---|---|---|---|---|
autoselect | optional, nur für type = combo | true, false | false | Steht für das dropDown-Listenfeld nur ein Wert zur Verfügung, kann dieser automatisch gesetzt werden. Bedingungen: Attribut editable = false und es ist kein Defaultwert gesetzt. true = ist nur ein Wert verfügbar, wird dieser eingesetzt und kursiv dargestellt false = ist nur ein Wert verfügbar, muss dieser manuell eingesetzt werden |
bColor | optional | 0,0,0 bis 255,255,255 | Systemfarbe | Hintergrundfarbe als RGB-Wert |
editable | optional, nur für type = combo | true, false | true = zu den vorhandenen Werten kann ein beliebiger Wert hinzugefügt werden false = nur die vorgegebenen Werte können ausgewählt werden |
|
font | optional | Schriftart-Schnitt-Höhe | Systemfont | Schriftart, -schnitt und -höhe für die Textdarstellung |
hSize | optional | Breite des Elements EEC = Breite in Zeichen Web-Applikation = Breite in Pixel |
||
hSizeMax | optional | maximale Breite des Elements EEC = Breite in Zeichen Web-Applikation = Breite in Pixel |
||
hSizeMaxPx | optional | maximale Breite des Elements EEC = Breite in Pixel Web-Applikation = Breite in Pixel |
||
hSizeMin | optional | minimale Breite des Elements EEC = minimale Breite in Zeichen Web-Applikation = minimale Breite in Pixel |
||
hSizeMinPx | optional | minimale Breite des Elements EEC = minimale Breite in Pixel Web-Applikation = minimale Breite in Pixel |
||
hSizePx | optional | Breite des Elements EEC = Breite in Pixel Web-Applikation = Breite in Pixel |
||
id | benötigt | beliebig | eindeutige ID, auf die Bezug genommen wird | |
img | nur für type = toggle | png, gif, jpg | weist dem Element ein anderes Bild zu | |
key | optional | Feld aus dem der Wert des EOs gelesen wird | ||
link | optional | Formel zum Objekt des Navigationsziels | ||
readonly | optional | true, false | true = Feld kann nur gelesen werden. Bei type = combo kann die Liste nicht aufgeklappt werden. false = Feld kann auch geschrieben werden. Bei type = combo kann die Liste aufgeklappt und ein Wert ausgewählt werden. |
|
receiver | benötigt | Formel zum Objekt | ||
style | nur für type = text und radio | multi, right, center, left, horizontal, vertical, wrap | definiert das Attribut type genauer, für type="text" sind Kombinationen möglich. Hier werden nur die sinnvollen Kombinationen gelistet multi = mehrzeiliges Textfeld multi right = mehrzeiliges Textfeld mit rechtsbündigem Text multi right vertical = mehrzeiliges Textfeld mit rechtsbündigem Text und vertikaler Bildlaufleiste wrap = mehrzeiliges Textfeld mit automatisch umbrechendem Text wrap right = mehrzeiliges Textfeld mit automatisch umbrechendem, rechtsbündigen Text wrap right vertical = mehrzeiliges Textfeld mit automatisch umbrechendem, rechtsbündigen Text und vertikaler Bildlaufleiste horizontal = horizontal angeordnete Optionsfelder vertical = vertikal angeordnete Optionsfelder |
|
text | nur für type = toggle | der anzuzeigende Text, dieser kann mit Hilfe der Formelsprache berechnet werden | ||
tooltip | optional | Text oder Form-UI des einzublendenden Tooltips (siehe tooltip) | ||
type | optional | text combo radio check password toggle |
text | Eingabefeldtyp: text = Textfeld (zulässig für pureTable) combo = dropDown-Listenfeld (zulässig für pureTable) radio = Optionsfeld check = Kontrollkästchen (zulässig für pureTable) password = verdeckte Passworteingabe toggle = Schaltfläche mit Toggle-Funktion |
values | nur für type = combo | Liste von Werten, die in einer Combobox angezeigt werden sollen. =List{Pair{1,'one'},Pair{2,'two'}} |
||
visible | optional | true = Element ist sichtbar false = Element ist unsichtbar |
||
visibleItemCount | optional, nur für type = combo | Anzahl der anzuzeigenden Elemente in einem dropDown-Listenfeld, ohne zu scrollen | ||
vSize | optional | Höhe des Elements EEC = Höhe in Zeichen Web-Applikation = Höhe in Pixel |
||
vSizeMax | optional | maximale Höhe des Elements EEC = maximale Höhe in Zeichen Web-Applikation = maximale Höhe in Pixel |
||
vSizeMaxPx | optional | maximale Höhe des Elements EEC = maximale Höhe in Pixel Web-Applikation = maximale Höhe in Pixel |
||
vSizeMin | optional | minimale Höhe des Elements EEC = minimale Höhe in Zeichen Web-Applikation = minimale Höhe in Pixel |
||
vSizeMinPx | optional | minimale Höhe des Elements EEC = minimale Höhe in Pixel Web-Applikation = minimale Höhe in Pixel |
||
vSizePx | optional | Höhe des Elements EEC = Höhe in Pixel Web-Applikation = Höhe in Pixel |
||
write | optional | Feld des EOs in das der Wert geschrieben wird |
Erlaubte Unterelemente | Anzahl |
---|---|
tooltip | 0..1 |
Hinweis:
Die Auswahlwerte in dropDown-Listenfeldern müssen immer eindeutig sein! Eine Unterscheidung der angezeigten Werte ist sonst nicht sichergestellt.
Hinweis:
Werden die Attribute hSizeMax und hSizeMaxPx gesetzt, wird hSizeMaxPx angewendet (hSizeMax wird somit ignoriert).
Hinweis:
Ein dropDown-Listenfeld, das nicht editierbar ist zeigt bei der Eingabe von Werten aus der Zwischenablage folgendes Verhalten:
Werte, die denen entsprechen, die in einer Liste vorgegeben sind (Attribut value), werden übernommen, davon abweichende Werte werden ignoriert.
Textfeld:
Das Textfeld wird als Kasten dargestellt, in dem sich ein Text befindet. Die Höhe und Breite des Feldes richtet sich nach dem Inhalt. In diesem Beispiel wird der Text angezeigt, der im Feld "Name" der Komponente gespeichert ist.
<input type="text" receiver="this" key="name"/>
Ergebnis:
Schreibgeschütztes Textfeld:
Das Textfeld wird als grauer Kasten dargestellt, in dem sich ein Text befindet. Durch das Ausgrauen wird angezeigt, dass der Text nicht geändert werden kann.
<input type="text" receiver="this" key="name" readonly="true"/>
Ergebnis:
Hinweis:
Unter Windows 7 variiert die Darstellung des schreibgeschützten Textfelds je nach gewähltem Design. Dies kann zu Darstellungen führen, die nur sehr schlecht lesbar sind.
Textfeld schreibt Kommentar:
Das Textfeld wird als Kasten dargestellt, in den ein Text eingegeben werden kann. In diesem Beispiel wird der eingegebene Text im Feld "Kommentar" des EOs gespeichert.
<input type="text" receiver="this" key="comment" write="comment"/>
Ergebnis:
Textfeld mit begrenzter Breite:
Das Textfeld wird als Kasten mit begrenzter Breite dargestellt, in dem sich der Text Dokumentation befindet. Durch die Begrenzung des Textfelds auf 25 Pixel wird der Text abgeschnitten.
<input hSizeMax="25" type="text" receiver="this" key="name"/>
Ergebnis:
Textfeld mit Link:
Das Textfeld speichert den Wert des Parameters Ort. Der darin befindliche Text wird mit dem Font Arial in der Größe 15 pt dargestellt. Mit gedrückter Taste [Alt] kann dem Link zum Parameter Place gefolgt werden.
<input link="parameter('Place')"
font="Arial-regular-15"
type="text"
receiver="parameter('Place')"/>
Ergebnis:
Mehrzeiliges Textfeld:
Das mehrzeilige Textfeld wird als Kasten dargestellt, in dem sich ein mehrzeiliger Text befindet. In diesem Beispiel wird der Text angezeigt, der im Feld "Kommentar" der Komponente gespeichert ist.
<input type="text"
receiver="this"
key="comment"/>
Ergebnis:
Mehrzeiliges Textfeld mit Link:
Das mehrzeilige Textfeld wird als Kasten dargestellt, in dem sich ein mehrzeiliger Text befindet. In diesem Beispiel wird der Text angezeigt, der im Feld Kommentar des EOs gespeichert ist. Mit gedrückter Taste [Alt] kann dem Link zum Parameter Place gefolgt werden.
<input type="text"
receiver="this"
key="comment"
link="parameter('Place')"/>
Ergebnis:
dropDown-Listenfeld:
Das dropDown-Listenfeld wird als Kasten mit seitlich angeordnetem Pfeilsymbol dargestellt. Durch klicken auf den Pfeil wird eine Liste aufgeklappt. Das Element der Liste, das mit der Maus markiert wird, erscheint anschließend im geschlossenen Listenfeld und wird darin gespeichert.
<input type="combo"
receiver="parameter('CardinalPoints')"/>
Ergebnis:
Editierbares dropDown-Listenfeld:
Das dropDown-Listenfeld wird als Kasten mit seitlich angeordnetem Pfeilsymbol dargestellt. Durch klicken auf den Pfeil wird eine Liste aufgeklappt. Das Element der Liste, das mit der Maus markiert wird, erscheint anschließend im geschlossenen Listenfeld und wird darin gespeichert. Außerdem kann ein beliebiger Wert eingegeben werden, der dann im geschlossenen Listenfeld gespeichert wird. Enthält das Listenfeld einen eingegebenen Wert, schlägt die Hintergrundfarbe des Listenfelds und aller Felder, die diesen Wert ebenfalls anzeigen, um zu gelb.
<input type="combo"
editable="true"
receiver="parameter('CardinalPoints')"/>
Ergebnis:
dropDown-Listenfeld mit Tooltip:
Wird der Mauszeiger über das dropDown-Listenfeld positioniert, erscheint ein Tooltip.
<input type="combo"
tooltip="Tooltip for combo box"
receiver="parameter('CardinalPoints')"/>
Ergebnis:
dropDown-Listenfeld mit vorgegebenen Elementen:
Die Elemente der Liste werden als Attribut values mit folgender Syntax definiert:
values="=List{Pair{angezeigterWert,gespeicherterWert}, Pair{angezeigterWert,gespeicherterWert}
<input type="combo"
values="=List{Pair{1,'eins'},Pair{2,'zwei'}}"
receiver="parameter('Ort')"/>
Ergebnis:
dropDown-Listenfeld mit fester Anzahl sichtbarer Elemente:
Das dropDown-Listenfeld zeigt mit dem Attribut visibleItemCount im aufgeklappten Zustand nur eine fest vorgegebene Anzahl von Elementen an. Durch scrollen gelangt man zu weiteren Elementen des dropDown-Listenfelds.
<input type="combo"
visibleItemCount="2"
receiver="parameter('CardinalPoints')"/>
Ergebnis:
dropDown-Listenfeld setzt den einzigen Wert automatisch ein:
Für einen Parameter kann per Formel nur ein Wert ermittelt werden. Durch Verwendung des Attributs autoselect="true" wird dieser Wert automatisch angezeigt.
<input receiver="=parameter('Test')"
values="=List{Pair{'one','1'}}"
type="combo"
autoselect="true" ></input>
Ergebnis:
dropDown-Listenfeld mit Referenzen auf Komponenten:
Das dropDown-Listenfeld speichert Referenzen auf mechatronische oder disziplinspezifische Komponenten. Die Elemente der Liste werden mit Hilfe der Formelsprache definiert.
<input type="combo"
values="=List{Pair{'Station', this},Pair{'Documentation', mc}}"
receiver="parameter('Component')"/>
Ergebnis:
Als Wert des Parameters wird eine, von EEC erzeugte, Formel eingesetzt, die prüft, ob die Komponente auch tatsächlich vorhanden ist (siehe Feld Wert in der obigen Abbildung). Ist die Komponente nicht vorhanden, wird durch die Formel der Wert null zurückgegeben.
Die von EEC erzeugte Formel (im Feld Wert des Parameters) für die im Beispiel ausgewählte Komponente ist:
=if existsRef('Dokumentation_UI_
Configuration.Mechatronic.Documentation.Station') then ref('Dokumentation_UI_
Configuration.Mechatronic.Documentation.Station') else null endif.
Hinweis:
Dieses Beispiel ist im Demo-Modell Dokumentation_UI_Konfiguration gespeichert. Es ist in Dokumentation_UI_Konfiguration.Mechatronik.Dokumentation.Station als Form-UI dropDown abgelegt.
Optionsfelder horizontal:
Optionsfelder werden defaultmäßig horizontal angeordnet. Um die horizontale Anordnung zu erzwingen wird das Attribut style mit dem Wert horizontal definiert.
Der angezeigte Wert und der Wert, der gespeichert wird, können unterschiedlich definiert werden. Dazu wird die folgende Syntax verwendet:
<input type="radio"
values="=List{Pair{X,Y},Pair{X,Y}, Pair{X,Y}}"
receiver="parameter('Component')"/>
X = Wert der angezeigt wird
Y = Wert der gespeichert wird
Optionsfelder mit gleichen Werten für Anzeige und Speichern:
Im folgenden Beispiel werden Optionsfelder definiert, die den gleichen Wert anzeigen, der vom Optionsfeld gespeichert wird. Die Anzahl der Optionsfelder richtet sich nach der Anzahl der möglichen Werte des Parameters. In diesem Beispiel sind für die Himmelsrichtungen vier Werte vorgegeben (North, East, South, West).
<input type="radio" receiver="parameter('CardinalPoints')"/>
Ergebnis:
Optionsfelder mit unterschiedlichen Werten für Anzeige und Speichern:
Das folgende Beispiel zeigt, wie Parameterpaare definiert werden, um die Werte 1, 2 und 3 anzuzeigen, aber die Werte one, two und three zu speichern.
<input type="radio"
values="=List{Pair{1,'one'},Pair{2,'two'}, Pair{3,'three'}}"
receiver="parameter('Place')"/>
Ergebnis:
Optionsfelder vertikal:
Für vertikal angeordnete Optionsfelder wird das Attribut style mit dem Wert vertical definiert.
<input type="radio" style="vertical" receiver="parameter('CardinalPoints')"/>
Ergebnis:
Kontrollkästchen:
Kontrollkästchen speichern den Wert eines Parameters vom Typ Boolean. Typischerweise wird der Parametername seitlich vom Kontrollkästchen dargestellt.
<line><input type="check" receiver="parameter('found')"/>
<label>found</label></line>
Ergebnis:
Schaltfläche mit Toggle-Funktion:
Eine Schaltfläche mit Toggle-Funktion (Einrast-Funktion) speichert den Wert eines Parameters vom Typ Boolean. Wird die Schaltfläche gedrückt, ist der Wert des Parameters true und die Schaltfläche behält ihr gedrücktes Aussehen. Durch erneuten Druck auf die Schaltfläche wechselt der Wert des Parameters zu false und die Schaltfläche nimmt wieder das Aussehen des Ausgangszustands an. Die beiden Zustände werden mit unterschiedlichen Bildern in der Schaltfläche angezeigt.
<input type="toggle"
receiver="parameter('found')"
img="=if $found = true
then type('Documentation_UI_Configuration.ProjectLibrary.HelpObjects.
Images.action').image
else type('Documentation_UI_Configuration.ProjectLibrary.HelpObjects.
Images.E_Mail').image
endif"/>
Ergebnis:
Mehr:
Anzeige von geänderten Parameterwerten in Options- und Dropdown-Listenfeldern