Styles erstellen und bearbeiten

Sie können Web UI Steuerelemente mit Hilfe von Eigenschaften stylen und diesen Style auf andere Steuerelemente desselben Typs anwenden.

Zur Erstellung und Bearbeitung eines neuen Styles für einen Steuerelementtyp steht in der Entwicklungsumgebung der Style-Editor zur Verfügung.

Platzieren Sie zunächst ein Steuerelement auf einer Page im Designer oder markieren Sie ein bereits vorhandenes Steuerelement. Um einen neuen Style für diesen Steuerelementtyp anzulegen, haben Sie folgende Möglichkeiten:

Klicken Sie mit der rechten Maustaste und wählen Sie Style bearbeitenWKopie bearbeiten oder Style bearbeitenWNeuen erstellen aus dem Kontextmenü. Geben Sie den Namen für den neuen Style ein.
Expandieren Sie im Menüband die Gruppe "Style" und wählen Sie Kopie bearbeiten oder Neuen erstellen. Geben Sie einen Namen für den neuen Style ein.

Unterschied zwischen "Kopie bearbeiten" und "Neuen erstellen":

Kopie bearbeiten

Es wird ein neuer Style angelegt. Die Eigenschaften des Styles, der im selektierten Steuerelement in der Eigenschaft "Style" angegeben ist, werden übernommen, können aber bearbeitet werden.

Neuen erstellen

Es wird ein neuer Style angelegt. Alle Eigenschaftswerte sind zurückgesetzt, d. h. es sind Standardwerte des Controls (Style = Default).

Style-Editor

Ist der Style-Editor geöffnet, können Sie im Eigenschaftenfenster die gewünschten Eigenschaften für den soeben angelegten Style festlegen. Die Auswirkungen können Sie am Steuerelement im Style-Editor sehen. Welche Eigenschaften im Style festgelegt sind, können Sie am schwarzen Kästchensymbol hinter der jeweiligen Eigenschaft erkennen.

Zudem können Sie festlegen, welche Eigenschaften editierbar sein sollen, wenn dieser Style für ein Steuerelement dieses Typs ausgewählt wird. Eigenschaften, bei denen kein Häkchen gesetzt ist, sind in diesem Style nicht editierbar und werden im Eigenschaftenfenster im Designmodus nicht angezeigt.

Beispiel: Die Eigenschaften "Width" und "Height" im Bild oben sind editierbar (Kontrollkästchen hinter den Eigenschaften sind aktiviert), d. h. sie werden im Designmodus editierbar sein, wenn Sie diesen Style auf ein Steuerelement anwenden.

Um den Style zu speichern und zum Designmodus zurückzukehren, schließen Sie den Style-Editor, indem Sie auf das Kreuzsymbol des Tabs klicken. Styles, die Sie selbst erstellen, werden in der Datei "HMIstyles.json" im Projektverzeichnis unter resourcesWstyles gespeichert.

Um den Style auf ein anderes Steuerelement desselben Typs anzuwenden, wählen Sie den Style in der Eigenschaft Style des Steuerelements aus.

Wenn Sie einen im Projekt angelegten Style für einen Steuerelementtyp überarbeiten wollen, gehen Sie folgendermaßen vor:

Markieren Sie ein Steuerelement dieses Typs im Designer oder in der Dokumentgliederung, wählen Sie in der Eigenschaft "Style" den Style aus, den Sie bearbeiten wollen.
Wählen Sie entweder im Kontextmenü des Steuerelements in der Gruppe "Style bearbeiten" oder über das Menüband in der Gruppe "Style" die Funktion "Aktuellen bearbeiten" aus.

Der Style-Editor wird geöffnet und Sie können den Style wie unter Style bearbeiten beschrieben editieren.