Eingabefelder

Seit 2015 auf haben wir standardisierte Eingabefelder bei page4. Das sind kleine Bausteine, die in unseren Dialogen verwendet werden und dafür sorgen, dass du dich sehr schnell zurecht findest. Mit diesen Eingabefeldern kannst du Bilder einbinden, Links anlegen, Farben auswählen, Rahmen festlegen und vieles mehr. Nachfolgend eine Übersicht der aktuell verwendeten Bausteine. Die Abbildungen sind vergrößert dargestellt um Platz für die Nummerierung zu haben.

 

 

Du kannst mit page4 viele Parameter selbst einstellen. Für Zahlen haben wir spezielle Elemente gebaut, die überall gleich funktionieren. Es gibt Elemente, um reine Zahlen zu repräsentieren (1), wie zum Beispiel im Zähler die Vorgaben, die du machen kannst. Oder an verschiedenen Stellen kannst du eingeben, wie viele Pixel (px) "etwas" breit oder hoch sein soll (2). Die Maßeinheit px ist im Feld, kann aber nicht überschrieben werden. Du kannst daher einfach in das Feld klicken und eine Zahl eingeben. Dann gibt es noch ein Feld, um einen Prozentwert festzulegen (3). Das kann die Transparenz einer Farbe sein oder die relative Breite einer Spalte.

 

Diese Elemente können innerhalb einer Zeile zwischen anderen Angaben stehen (5) oder am Anfang einer Zeile (4), am Ende einer Zeile (2 oder 3) oder auch für sich alleine (1).

 

Jedes Element hat rechts einen blauen Bereich in dem sich zwei weisse Dreiecke befinden. Damit kann man den Wert im Feld per Mausklick erhöhen oder absenken. Je nach Art des Wertes ist die Laufweite dieser Schritte unterschiedlich. Manchmal wird der Wert jeweils um einen Zähler verändert, manchmal auch in 10er Schritten.

 

Jedes Element hat normalerweise auch einen fest vorgegebenen Bereich. Entweder festgelegt durch die Anzahl der Stellen. Zweistellige Felder können max. bis 99 anzeigen, dreistellige bis 999. Macnhmal wird der maximale und minimale Wert auch von uns vorgegeben.

 

 

Fast alle Bereiche kannst du bei page4 mit eigenen Farben hinterlegen. Je nach Bereich sieht das Element etwas anders aus. Im einfachsten Fall besteht das Element aus der Anzeige des Farbcodes, einem Vorschaufeld und dem Icon zum Aufrufen des Farbwählers (1). Bei vielen Bereichen kannst du zusätzlich noch die Transparenz einstellen. Dann ist ein Zahlenfeld mit Prozentwerten angehängt (2). Sollte es möglich sein, die Farbe eines Bereiches komplett zu löschen, findest du neben dem Icon zum Auswählen des Farbwählers (der Palette) noch einen Papierkorb, um die Farbe zu löschen (3). Du siehst, die Vorschau wird transparent, statt eines Farbcodes wird ein Strich angezeigt und natürlich hat in dem Fall auch der Wert für die Deckung keine Auswirkung mehr.

 

Farbelemente können allein stehen (1), am Ende einer Zeile (2,3,4), mitten in einer Zeile (5) oder am Anfang (6).

 

Hinweis: Du kannst den Farbcode nicht direkt eingeben. Dieses Feld dient nur zur Anzeige.

 

Transparenz: Manche Elemente wie Linien müssen zwingend eine Farbe haben, das ist so von der Programmierung her vorgesehen. Da Linienfarben aber durchaus eine Transparenz bekommen können, kannst du eine Linie quasi durchsichtig machen indem du den Wert der Transparenz auf 1% setzt. So kannst du zum Beispiel bei der Navigation Linien ausblenden, wenn du diese nicht haben willst obwohl du das Template ansonsten verwenden möchtest.

 

 

Die üblichen Radiobutton bestehen aus einem runden Icon und einem Text. Die Besonderheit ist, man kann genau eine Option wählen. In unseren Dialogen haben wir daraus eigene Schaltflächen gebaut. Die Funktion ist identisch. Es stehen zwei oder mehr Optionen zur Verfügung und eine davon muss bzw. ist immer ausgewählt. Die aktive Option ist blau hinterlegt. Alle anderen Optionen sind weiss hinterlegt. Die Bedienung ist sehr einfach. Du klickst auf die Option, die du haben möchtest.

 

Es gibt verschiedene Variationen. Grundsätzlich stehen Optionsfelder immer für sich alleine in einer Zeile, da sie normalerweise nicht mit anderen Eingaben kombinierbar sind.

 

Du kannst entweder aus einer beliebigen Anzahl von Optionen eine auswählen (1,3). Manchmal gibt es mehrere Optionen und eine davon schaltet den Effekt komplett aus (2). Einige Optionen haben genau zwei Zustände. Das kann dann wie ein Umschalter wirken (4) oder als An/Ausschalter (5). Bei einigen Optionen erscheinen zusätzliche Eingabefelder. Wenn du wie in (6) angedeutet, einen externen Link aktivierst, dann wird dafür eine Möglichkeit gebraucht, diesen Link auch eintragen zu können. Es wird daher eine zusätzliche Zeile eingeblendet. Bei dem Link zur Originalgröße oder wenn kein Link gewünscht wird, ist dies natürlich nicht nötig.

 

Das Bild oben zeigt nur eine kleine Auswahl. Alle Optionsfelder funktionieren aber identisch und die Beschriftung zeigt dir genau, was passiert, wenn du eine Option aktivierst.

 

 

Es gibt eine ganze Reihe von Elementen, bei denen man erst einen Dialog öffnen muss, um das Element mit eigenen Werten zu füllen. Fast immer wird dazu ein Icon verwendet. Manche Elemente haben sogar mehr als ein Icon. Nachfolgend eine kleine Übersicht der wichtigsten Elemente.

 

1) Schriftauswahl = Klickst du auf das Icon (A) dann öffnet sich ein Dialog mit Schriften. Sobald du auf eine Schrift klickst, schließt der Dialog und die gewählte Schrift wird im Feld angezeigt und benutzt.

2) Farbfeld = Klickst du auf das Icon (Farbpalette) öffnet sich ein Dialog mit dem du eine Farbe bestimmen kannst. Übernimmst du die Farbe, wird der Dialog geschlossen und die gewählte Farbe eingetragen. Diesen Dialog kannst du auch abbrechen und es wird nichts verändert.

3) Icon = Klickst du auf das Icon (eine Heftnadel) öffnet sich ein Dialog mit allen verfügbaren Icons. Ein Klick auf ein Icon schließt den Dialog und das Icon wird übernommen und angezeigt.

4) Bildauswahl = Hier gibt es mehrere Icons. Das erste Icon (grüner Ordner) öffnet einen Dialog mit dem du aus der Bildverwaltung ein Bild aussuchen kannst. Das zweite Icon (dunkelblaues Archiv) öffnet den Dialog zu unserem Bildarchiv und erlaubt dir ein Bild daraus zu verwenden. Das dritte Icon (blauer Pfeil) öffnet einen Dialog der es dir erlaubt, ein Bild von deinem Computer hochzuladen.

 

Daneben gibt es noch Elemente, die vor der eigentlichen Anzeige ein Symbol haben. Jedes Element verfügt hierbei über zwei Funktionen. Klickst du auf das Symbol vor der Anzeige so stepst du damit durch die einzelnen Optionen die möglich sind. Dabei ändert sich jedesmal das Symbol und zeigt die jeweils aktuelle Option an. Klickst du dagegen auf die Anzeige, dort wo die Information steht, dann öffnet sich ein Dialog wo du dann aus einer der Optionen auswählst indem du auf die Option klickst. Im einzelnen sind das folgende Elemente.

 

5) Bildgröße-Anpassung = Hier kannst du bestimmen, wie ein Hintergrundbild an den verfügbaren Bereich angepaßt werden soll. Es stehen 6 Optionen zur Verfügung.

5) Bildwiederholung = Hier bestimmst du, ob und wie ein Hintergrundbild wiederholt (gekachelt) werden soll.

5) Bildausrichtung = Hier legst du fest, wie das Hintergrundbild ausgerichtet werden soll. Es gibt 9 Optionen.

6) Ecken = Du bestimmst, welche Ecke mit dem Effekt "abgerundet" versehen werden soll. Es gibt 15 Optionen.

6) Rahmen = Du legst fest, an welchen Seiten ein Rahmen angezeigt werden soll. Es gibt 15 Optionen.