Tutorial-Schritt 3: Anzeige eines Wertes

Nun wollen wir den Variablenwert in einer Schaltfläche anzeigen und der Hintergrund soll sich abhängig vom Variablenwert grün oder rot färben. Für dieses Ziel legen wir eine Schaltfläche wie folgt an:

Links in der Vorschau der Vorlage werden alle Bausteine der Vorlage an der gewählten Position in der konfigurierten Größe angezeigt, der aktuell ausgewählte Baustein ist dezent markiert.

Wird die Art eines Bausteins verändert so werden alle Einstellungen vollständig zurück gesetzt. Der Baustein erscheint links oben auf der Vorlage und seine Dimensionen erhalten der Art des Bausteins angemessene Voreinstellungen.

Dabei wird die Zeichengröße immer von der Vorlage übernommen. Für Textbausteine wie hier einen formatierten Wert ist die Breite auf das zehnfache der Zeichengröße voreingestellt, die Höhe auf das 2.4fache - dabei sind innere und äußere Schutzzonen entsprechend berücksichtigt.

Man beachte, dass die Position (links und oben) immer relativ zur Zeichengröße der Vorlage, die Größe (Breite und Höhe) aber relativ zur Zeichengröße des Bausteins verstehen. Wird also die Zeichengröße des Bausteins verändert, so skaliert dessen Größe entsprechend mit, die Position bleibt allerdings fixiert.

Ergänzend zur direkten Eingabe von Position und Größe können diese auch direkt mit Hilfe der Maus auf der Voransicht der Vorlage angepasst werden.

Schaltfläche formatieren

Um die Ecken abzurunden, fügt man eine CSS-Stilregel hinzu. Setze den Stil auf "borderRadius" und wähle einen beliebigen Wert; für dieses Tutorial verwenden wir "10px". Vergiss nicht die "px"-Einheit. Dieser Stil kann auf verschiedene Elemente angewendet werden (z. B. Schieberegler, Schaltflächen, Textschaltflächen usw.).

Um die Farbe der Schaltfläche so einzustellen, dass sie vom Wert der Variablen abhängt, die wir zuvor erstellt haben (WERT), müssen wir einen kleinen Javascript-Ausdruck verwenden, um die Bedingung anzugeben.

Um festzulegen, auf welche Variable sich die Schaltfläche beziehen soll, setzen wir den „Zustand“ auf WERT und bei „Abbildung des Wertes“ geben wir den Ausdruck „v < 300“ ein, wobei v den Wert unserer Variablen darstellt.

Nun setzen wir die „Abbildung des Wertes“ von „Aktiv“ auf „false“, damit die Schaltfläche nicht angeklickt werden kann, weil wir die Schaltfläche als Hintergrund verwenden. Dadurch sinkt die Deckkraft der Schaltfläche auf 50 %, was wir durch Hinzufügen eines neuen CSS-Stils „opacity“ und Setzen des Werts auf 1 ausgleichen können.

Um den Variablen-Wert anzuzeigen, fügt man ein neues Control hinzu - auf "Control hinzufügen" klicken und bei Art "Wert" auswählen und einen eindeutigen Namen eingeben.

Als Beschriftung des formatierten Textes kann nun der Parameter der Vorlage verwendet werden:

Falls die Variable hinter dem Parameter WERT (Tutorial.GanzeZahl.01) einen Wert hätte, würde man diesen nun sehen (man hätte bspw. einen Wert auch direkt setzen können beim Anlegen der Variablen, siehe Schritt 2). Da der Wert aber hier noch nicht existiert (NULL), wird noch kein Wert angezeigt.

Weiter: Ändern eines Wertes