User manual

Schritt-für-Schritt-Anleitung

3. Zunächst gilt es den Header der html-Datei zu erstellen. Neben dem Titel der Datei enthält er die

Formatanweisungen für die Tags und Klassen.

<head>

<title>rapidM2M UAPI SAMPLE for User Agents</title>

<style>

/* Body: gesamte Bereite des Browsersfensters nutzen, Schriftart "Monospace", kein Außenabstand */

body { width:100%;font-family:Monospace;margin:0}

/* Dashboard-Name: kein Außenabst., blauer Hintergrund, rechtsbündig, Innenabst. = 1x Schriftgr. */

h1 { margin:0;background:#30ACC0;color:white;text-align:right;padding:1em}

/* Master: aktiviert die Verwendung der Flex-Eigenschaften für die Unterelemente dieses Bereichs */

.master{ display:flex }

/* Spacer: Der Bereich nimmt mit dem Faktor 1 den verfügbaren verbleibenden Raum eines Bereichs ein */

.spacer{ flex-grow:1 }

/* Login-Page bzw. Content-Page: bei Initialisierung ausgeblendet, Breite = 50x Schriftgröße */

.page { display: none; width:50em}

/*Alle DIV's innerhalb der Login-Page bzw. Content-Page: Außenabstand = 2x Schriftgr. */

.page>div{ margin:2em }

/* Statusanzeige: weiße Schrift auf schwarzem Hintergrund, zentriert, Innenabst. = 1xSchriftgr. */

#uapi_msg{ background:#444;color:white;text-align:center;padding:1em}

/* Messwertanzeige: Schriftgröße = 2x Content-Page Standard-Schriftgröße, normaler Schriftstil */

em { font-size:2em;font-style:normal; }

</style>

</head>

Hinweis: Um den Inhalt der Login-Page bzw. Content-Page in der Mitte des Browserfensters darzustellen,

wird zunächst ein Bereich der Klasse "master" angelegt. Für diesen wird die Verwendung der Flex-

Eigenschaften für dessen Unterelemente aktiviert. Als Unterelement des "master" Bereichs werden der

Reihe nach ein Bereich der Klasse "spacer", zwei Bereiche der Klasse "page" (für Login-Page und

Content-Page, wobei immer nur eine der beiden eingeblendet wird) und abschließend wieder ein Bereich

der Klasse "spacer" angelegt. Für die Klasse "page" wurde eine feste Breite definiert. Mittels der

Eigenschaft "flex-grow:1" wurde für die Klasse "spacer" festgelegt, dass der verbleibende, verfügbare

Raum innerhalb des Bereichs "master" zwischen den beiden Bereichen der Klasse "spacer" gleichmäßig

aufgeteilt wird. Dadurch wird der Inhalt der Login-Page bzw. Content-Page immer automatisch mittig

ausgerichtet, auch wenn die Größe des Browserfensters verändert wird.

Ergänzende Erklärung zum Aufbau des Anzeigebereichs des Dashboards

1 Bereich der Klasse "master" 3 Bereich der Klasse "page"

2 Bereich der Klasse "spacer"

Rev. 01 39