zurück zur [[Hauptseite]]
zurück zur [[Styleguide]]

<h1 style="page-break-before:always">{{1.}}Zielsetzung und Abgrenzung</h1>
<p>zum Seitenanfang [[#top]]</p>
'''Zielsetzung:'''<br>
<li> Konsolidierung des UI StyleGuides<br>
<li> Evaluierung Tooling für den StyleGuide<br>
- IMIS<br>
- Wiki<br>
- sonst<br>
<li> Package Manager (npm)<br>
<li> Entwurfsentscheidungen ng Components vs Elements<br>
<li> Best of Konsolidierung der Steuerelemente aus den existierenden UserModulen<br>
<li> UX Vorgaben definieren<br>
<li> Paketierung der Styles (customized Bootstrap Template, eigenes allg. OK Stylesheet) als npm<br>
<br>
'''Abgrenzung:'''
<li> Vorerst kein Code (nur beispielhaft)<br>
<br>

<h1 style="page-break-before:always">Design</h1>
<p>zum Seitenanfang [[#top]]</p>

Um ein einheitliches Design zu gewährleisten, müssen die verwendeten Farben, Formen und Schriftarten auf allen User Interfaces dem vorgegebenen StyleGuide entsprechen. Diese Vorgaben werden in den folgenden Kapiteln beschrieben.
==Farben==
<p>zum Seitenanfang [[#top]]</p>

In diesem Kapitel wird das abgestimmte Farbschema (Hauptfarben, Farbverläufe, Sekundärfarben, u. s. w.) und deren Verwendung auf Webseiten und User Interfaces erläutert. Zusätzlich finden Sie hier Informationen über den jeweiligen Farbcode und die CSS Codierung.<br>

===Hauptfarben===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Primary
| <div style="color:#ffffff; background:#003a5f; padding: 1px 10px">#003a5f</div>
|-
| Success
| <div style="color:#ffffff; background:#80b300; padding: 1px 10px">#80b300</div>
|-
| Info
| <div style="color:#ffffff; background:#0080c0; padding: 1px 10px">#0080c0</div>
|-
| Default
| <div style="color:#000000; background:#ffffff; padding: 1px 10px">#ffffff</div>
|-
| Text
| <div style="color:#ffffff; background:#333333; padding: 1px 10px">#333333</div>
|}

===Farbverläufe===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
! CSS
|-
| Streifen Header
| <div style="color:#ffffff; background: linear-gradient(to right, rgba(121, 182, 28, 1) 0%, rgba(2, 129, 196, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0); padding: 1px 10px">#79b61c - #0281c4</div>
| <code>background: linear-gradient(to right, rgba(121, 182, 28, 1) 0%, rgba(2, 129, 196, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0);</code>
|-
| Balken Header
| <div style="color:#000000; background: linear-gradient(to right, rgba(232, 238, 231, 1) 0%, rgba(229, 237, 242, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0); padding: 1px 10px">#e8eee7- #e5edf2</div>
| <code>background: linear-gradient(to right, rgba(232, 238, 231, 1) 0%, rgba(229, 237, 242, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0);</code>
|}

===Flächen und Linien===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Hintergrund
| <div style="color:#000000; background:#f8fafd; padding: 1px 10px">#f8fafd</div>
|-
| Flächen/Tabellen
| <div style="color:#000000; background:#f5f8fc; padding: 1px 10px">#f5f8fc</div>
|-
| Hervorhebung/Eingabefelder/Tabellenzeilen
| <div style="color:#000000; background:#e9f0f9; padding: 1px 10px">#e9f0f9</div>
|-
| Linien
| <div style="color:#000000; background:#ccdbe6; padding: 1px 10px">#ccdbe6</div>
|-
| Umrandung Formularfelder
| <div style="color:#000000; background:#b7cbda; padding: 1px 10px">#b7cbda</div>
|}

===Sekundärfarben===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Warning
| <div style="color:#000000; background:#ffb200; padding: 1px 10px">#ffb200</div>
|-
| Danger
| <div style="color:#ffffff; background:#990000; padding: 1px 10px">#990000</div>
|-
| Disabled
| <div style="color:#ffffff; background:#567d96; padding: 1px 10px">#567d96</div>
|}

==Schriftarten==
<p>zum Seitenanfang [[#top]]</p>

Ebenso wie das Farbschema unterliegen auch die zu verwendenden Schriftarten dem abgestimmten Styleguide. Bei der Verwendung von zu vielen unterschiedlichen Schriftarten und Schriftgrößen kann das User Interface schnell unruhig wirken. Die gewählte Schriftart sollte gut lesbar und nicht zu klein sein.<br>

===Schriftfamilie===
<p>zum Seitenanfang [[#top]]</p>

Für openKONSEQUENZ wurde die Schriftart '''Source Sans Pro''' festgelegt. Diese Schriftart ist bei allen User Interfaces und Texten zu verwendet.

[https://github.com/adobe-fonts/source-sans-pro Download-Link]

[https://www.google.com/fonts/specimen/Source+Sans+Pro WebFont-Link]

==Rahmenabstände==
<p>zum Seitenanfang [[#top]]</p>

'''offener Punkt'''<br>

===Symbole===
<p>zum Seitenanfang [[#top]]</p>

In diesem Abschnitt werden allgemeine Bedien- und Status-Symbole beschrieben. Um ein einheitliches Aussehen der oK-Module sicherzustellen, sollen diese anwendungsübergreifend verwendet werden.
{| class="wikitable sortable"
|-class="hintergrundfarbe6"
!Symbol
!Bezeichnung
|-
|[[Datei:Filter.icon.svg|center|24px]]
|Filter
|-
|[[Datei:Menu.icon.svg|center|24px]]
|Menü
|-
|[[Datei:search.icon.svg|center|24px]]
|Suche
|-
|[[Datei:Warning.icon.svg|center|24px]]
|Warnung
|-
|[[Datei:Copy.png|center|24px]]
|Kopieren
|-
|[[Datei:pencil.png|center|24px]]
|Bearbeiten
|-
|[[Datei:save.png|center|24px]]
|Speichern
|-
|[[Datei:add.png|center|24px]]
|Hinzufügen
|-
|[[Datei:cog.png|center|24px]]
|Einstellung
|-
|[[Datei:print.png|center|24px]]
|Drucken
|-
|[[Datei:refresh.png|center|24px]]
|Refresch
|-
|[[Datei:trash.png|center|24px]]
|Löschen
|-
|[[Datei:question.png|center|24px]]
|Hilfe
|-
|[[Datei:cancel.png|center|24px]]
|Abbrechen
|}
<br>
Unter dem folgenden Link finden Sie weitere Symbole.<br>
[https://material.io/tools/icons/?style=baseline Web material-icons-Link]<br>
Lizenz: Apache license version 2.0 sollte/ist mit EPL kompatibel<br>

Die folgende Darstelung zeigt eine Beispiel-Menüleiste mit Icon, die zum Aufrufen von definierten Funktionen verwendet werden.
<br>
[[Datei:Menueleiste mit Icon.png|frame|none|Beispiel: Schaltflächen zum Aufrufen einer Funktion]]

===technische Vorschläge===
<p>zum Seitenanfang [[#top]]</p>

<h1 style="page-break-before:always">Komponenten</h1>
<p>zum Seitenanfang [[#top]]</p>

Komponenten sind die einzelnen Bestandteile einer grafischen Benutzeroberfläche /bzw. Benutzerschnittstelle. Im folgenden Abschnitt werden die unterschiedlichen Elemente kurz Erläutert.<br>

==Standard-Steuerelemente==
<p>zum Seitenanfang [[#top]]</p>

===Eingabefeld (text)===
<p>zum Seitenanfang [[#top]]</p>

Ein Eingabefeld ist das meinst verwendete Steuerelement einer grafischen Benutzeroberfläche und dient der Interaktion mit dem Benutzer. Diese Textfelder können Ein- oder auch Mehrzeilig sein und über die Tastatur können beliebige Zeichenketten eingegeben werden.<br>
'''Darstellung'''

'''inaktiv'''
[[Datei:Input.inactive.png|frame|none|inaktives Eingabefeld mit Beschriftung "Beschreibung*"]]

'''aktiv'''
[[Datei:Input.active.png|frame|none|aktives Eingabefeld mit Beschriftung "Beschreibung*"]]

===Führungstext (label)===
<p>zum Seitenanfang [[#top]]</p>

Führungstexte (englich: label) gehören auch zu den Steuerelementen einer grafischen Benutzeroberfläche. Diese werden in der Regel dazu verwendet um Ein- oder Ausgabefelder, aber auch Radio Button oder Checkboxen zu beschriften.<br>

===Schaltfläche (button)===
<p>zum Seitenanfang [[#top]]</p>

Ein häufig genutztes Steuerelement für grafische Benutzeroberflächen ist die Schaltfläche (englisch: button). Mittels dieser Schaltflächen können Formulare abgesendet oder definierte Aktionen durchgeführt werden.<br>
'''Farben'''
{| class="wikitable"
|-
! Schaltfläche
! Hintergrundfarbe
! Konturfarbe
! Textfarbe
|-
| <div class="bootstrap-button" style="background:#003a5f; border-color:#002a45; color:#ffffff;">Primary</div>
| <div class="color-value">#003a5f</div>
| <div class="color-value">#002a45</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#ffffff; border-color:#b7cbda; color:#0b325c;">Default</div>
| <div class="color-value">#ffffff</div>
| <div class="color-value">#b7cbda</div>
| <div class="color-value">#0b325c</div>
|-
| <div class="bootstrap-button" style="background:#80b300; border-color:#6e9a00; color:#ffffff;">Success</div>
| <div class="color-value">#80b300</div>
| <div class="color-value">#6e9a00</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#0080c0; border-color:#006fa7; color:#ffffff;">Info</div>
| <div class="color-value">#0080c0</div>
| <div class="color-value">#006fa7</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#ffb200; border-color:e6a000#; color:#ffffff;">Warning</div>
| <div class="color-value">#ffb200</div>
| <div class="color-value">#e6a000</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#990000; border-color:#800000; color:#ffffff;">Danger</div>
| <div class="color-value">#990000</div>
| <div class="color-value">#800000</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#337ab7; border-color:#2e6da4; color:#ffffff;">Disabled</div>
| <div class="color-value">#337ab7</div>
| <div class="color-value">#2e6da4</div>
| <div class="color-value">#ffffff</div>
|}
<br>
Die folgende Abbildung zeigt Beispielhaft eine Menüleiste mit Schaltflächen über diese definierte Funktionen aufgerufen werden können.
<br>
[[Datei:Beispiel-Button.png|frame|none|Beispiel: Schaltflächen zum Aufrufen einer Funktion]]

===Auswahl (check-box)===
<p>zum Seitenanfang [[#top]]</p>

Die Auswahl (englisch: checkbox) ist ein einfaches Steuerelement zur Eingabe von Ja/Nein-Werten, welche durch einen Mausklick aktiviert oder deaktiviert werden kann. Dieses Element findet meist auf Formularen Verwendung, wenn z. B. die Datenschutzbestimmungen oder die allgemeinen Geschäftsbedingungen anerkannt werden müssen.<br>
'''Darstellung'''
[[Datei:Check-box.png|frame|none|Auswahl mit [[Führungstext|Beschriftung]] "Gesamtnetz für Abregelung*"]]

<br>
Beispiel für die Verwendung von Auswahlfeldern.
<br>
[[Datei:checkbox.png|frame|none|Beispiel: Auswahlfelder (check-box)]]

===Auswahllisten (MultiSelect)===
<p>zum Seitenanfang [[#top]]</p>

Ein weiteres Steuerelement ist die Auswahlliste (englisch: multiselect) und dient der Auswahl von mehreren Objekten aus einer Liste. Die Darstellungsform solcher Auswahllisten kann variieren.<br>
Weitere Informationen finden sie unter den folgende Verlinkungen.
<br>
[https://www.primefaces.org/primeng/#/multiselect Web primeng-multiselect-Link]<br>
[https://www.primefaces.org/primeng/#/chipst Web primeng-chips-Link]<br>
<br>
'''Darstellung'''<br>

Beispiel einer Auswahlliste als '''Dropdown'''.
<br>
[[Datei:multiselect.png|frame|none|Multiselect]]

Die Attribute dieser Auswahlliste<br>
<li>können Text ohne Icon enthalten<br>
<li>können Text mit Icon enthalten<br>
<li>sind Filterbar<br>
<br>

Beispiel einer Auswahlliste als '''Chips'''.<br>
In einem Eingabefeld werden mehrere Werte in Form von Chips eingefügt.<br>
[[Datei:multiselect - chip.png|frame|none|Multiselect als Chips]]

Die Attribute dieser Auswahlliste können<br>
<li>Text ohne Icon enthalten<br>
<li>Text mit Icon enthalten<br>
<br>

'''Beide Steuerelemente können kombiniert eingesetzt werden'''<br>

===Dropdown-Liste (drop-down list)===
<p>zum Seitenanfang [[#top]]</p>

Die Dropdown-Liste (englisch: drop-down-list) ist ein Textfeld welches eine Auflistung von benutzerdefinierten Werte enthält aus der ein Anwender einen Eintrag auswählen kann. Diese Dropdown-Liste kann um weitere Elemente wie zum Beispiel ein Scrollbalken, eine Filterfunktion oder auch Icon erweitert werden. Zusätzlich besteht die Möglichkeit Einträge dieser Liste zu Gruppieren, um diese Übersichtlich zu Gestalten.<br><br>
'''Darstellung'''<br>
Darstellung einer '''inaktiven''' Dropdown-Liste.<br>
[[Datei:Drop-down-menu.inactive.png|frame|none|inaktive Dropdown-Liste mit Beschriftung "Grund der Abregelung*"]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste.<br>
[[Datei:Drop-down-menu.active.png|frame|none|aktive Dropdown-Liste mit Beschriftung "Grund der Abregelung*"]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste inklusive Icon, Filter und einem Scrollbalken.<br>
[[Datei:Dropdown mit Icon.png|frame|none|aktive Dropdown-Liste mit Icon und Filter]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste inklusive Gruppierung.<br>
[[Datei:Dropdown mit Gruppierung.png|frame|none|aktive Dropdown-Liste mit Gruppierung]]
[https://www.primefaces.org/primeng/#/dropdown Web primeng-dropdown-Link]<br>

===Kalender (calendar)===
<p>zum Seitenanfang [[#top]]</p>

In der Regel umfasst ein Datums- und / oder Uhrzeitfeld eine Kalenderauswahl, so das ein Datum nicht händisch als String eingegeben werden muss. Durch klick in das Textfeld, öffnet sich ein Kalenderfenster, aus dem das gewünschte Datum und die Uhrzeit auswählt werden kann. <br>
'''Darstellung'''
[[Datei:Calendar.png|frame|none|Kalender mit Beschriftung "Startzeitpunkt*"]]
[https://www.primefaces.org/primeng/#/calendar Web primeng-calendar-Link]<br>

===Suche===
<p>zum Seitenanfang [[#top]]</p>
Eine Suchfunktion dient dazu, dass aus einem großem Datenbestand nur ein bestimmter Datensatz anhand verschiedener Kriterien angezeigt wird.<br>
Beispiel für die Verwendung einer Suchfunktion.
<br>
[[Datei:Suchfunktion.png|frame|none|Beispiel: Suchfunktion]]

===Filter===
<p>zum Seitenanfang [[#top]]</p>
Eine Filterfunktion dient dazu, dass aus einem großem Datenbestand nur bestimmte Datensätze anhand verschiedener Kriterien in einer Ergebnisliste angezeigt werden.<br>
Beispiel für die Verwendung von Filtern.
<br>
[[Datei:Filterfunktion.png|frame|none|Beispiel: Filter mit Auswahlfeldern]]

===Netzspezifische Icons===
<p>zum Seitenanfang [[#top]]</p>

'''offener Punkt, Klärungsbedarf'''<br>

<li>Icons werden von der e-netz bereitgestellt<br>
<li>Lizenz wahrscheinlich MIT<br>
<li>Muss mit Frau Wittek besprochen werden/bzw. Unterstützung<br>

==Steuerelemente für Formulare==
<p>zum Seitenanfang [[#top]]</p>
<br>
Zur Erfassung von Daten werden Eingabe- und Auswahlfelder bereitgestellt, in die ein Benutzer Werte über die Tastatur oder eine Werteliste eingeben kann oder Auswahlknöpfe, die der Benutzer mit der Maus beeinflusst. Hierbei werden Pflichtfelder (müssen gefüllt werden und sind mit einem Sternchen entsprechend gekennzeichnet) und Kann-Felder (können gefüllt werden) unterschieden. In der folgenden Tabelle finden Sie eine Auflisten der möglichen Steuerelemente für Formulare. Auf die einzelnen Elemente wird in den folgenden Abschnitten weiter eingegangen.<br>

{| class="wikitable"
|-
! Pflichtfeld Typ
! Visualisierung
|-
| text invalid
| [[Datei:Steuerelemente fuer Formular 1.png]]
|-
| text valid
| [[Datei:Steuerelemente fuer Formular 2.png]]
|-
| numeric valid
| [[Datei:Steuerelemente fuer Formular-numeric.png]]
|-
| date,datetime,date range valid
| [[Datei:Steuerelemente fuer Formular 3.png]]
|-
| Gesperrt
| [[Datei:Steuerelemente fuer Formular 4.png]]
|-
| Drop-Down valid
| [[Datei:Steuerelemente fuer Formular 5.png]]
|-
| Validierung beim Verlassen eines Feldes
| [[Datei:Steuerelemente fuer Formular 6.png]]
|}

==Steuerelement Kalender==
<p>zum Seitenanfang [[#top]]</p>
<br>
[https://www.primefaces.org/primeng/#/calendar Web primeng-calendar-Link]<br>

'''Darstellung'''
[[Datei:Kalender-Ansichten.png|frame|none|Darstellung der Kalenderansicht für Monat, Woche und Tag]]
<br>
In der Kalenderfunktion stehen dem Benutzer folgende Ansichten zur Verfügung:<br>
<li> Monatsansicht<br>
<li> Wochenansicht<br>
<li> Arbeitswochenansicht<br>
<li> Tagesansicht<br><br>

Bei der Kalenderfunktion hat der Anwender die Möglichkeit von durch einen Klick auf die (Arbeits-)Wochen- oder Tagesansicht zu wechseln. Durch Klicken mit der Maustaste in einen freien Zeitraum können neue Termine erfasst werden. Für eine neue Terminspanne markieren Sie einen freien Bereich durch SHIFT und Klick mit der linken Maustaste und erfassen für diesen Zeitraum einen Termin. Zum Editieren von bestehen den Terminen genügt ebenfalls ein Klick mit der Maustaste. <br>
Über die ‘‘‘Drag & Drop‘‘‘ Funktion können Termine in der Monatsansicht oder der Wochenansicht in einen anderen Wochentag verschoben werden. Um einen Termin zeitlich innerhalb eines Tages zu verschieben und Zeitspanne anzupassen, müssen Sie sich in der Wochenansicht oder der Tagesansicht befinden.<br>
<br>
Folgende Funktionen stehen zusätzlich zur Verfügung:<br>
<li> Termine ICS-Format exportieren (generell in der Applikation!)<br>
<li> Filtern über Kalendereinträge (ArrayList)<br>
<li> Unterschiedliche farbliche Darstellung einzelner Termine (Termin Template)<br>

==Steuerelement Grid==
<p>zum Seitenanfang [[#top]]</p>
<li> Buttons zum Absprung in Detailmaske (Lese/Bearbeitung), Stornierbutton in die erste Linke Spalte im Grid<br>
<li> Absprung durch Doppelklick in Detailmaske (Lese/Bearbeiten)<br>
<li> Datensatz hinzufügen-Button rechts oberhalb des Grid´s<br>
<li> Alternating row color<br>
<li> Hovereffekt (Zeile)<br>
<li> Einzelselektion und Mehrfachselektion mit Strg-Taste, Shift-Taste<br>
<li> Hovereffekt in Spaltenkopf unterstreichen und Mauscursor Hand (Rückmeldung für mögliche Aktionen an den Benutzer)<br>
<li> Klick auf Spaltenkopf, Sortierung ASC, DESC<br>
<li> Merfachsortierung durch klicken der Shift-Taste<br>
<li> Filterzeile als eigene Zeile direkt unterhalb des Spaltenkopfs<br>
<li> Virtual scrolling anstatt Pagination<br>
<li> Spaltenkopf mit Filter und Fußzeile bleiben beim scrollen stehen<br>
<li> Quickfiler (optional)<br>
<li> Externe Filter (optional) aber als Toggle-Switch<br>
<li> Stylevorgaben kommen per ok-vendor.sass !!!!!!!!!<br>
- Schriftrart<br>
- Schriftgröße<br>
- Zeilenhöhe<br>
- Farben<br>
- Style fürs Grid<br>
<li> Kompaktes Grid definieren. Spaltengröße sinnvoll definieren<br><br>
[https://www.ag-grid.com/ Web ag-grid-Link]<br>
<br>
Beispiel einer Verwendung von Steuerelementen auf einem Grid.
<br>
[[Datei:Steuerelement Grid.png|frame|none|Beispiel: Steuerelement Grid]]

==Steuerelement Heatmap / Kartendarstellung==
<p>zum Seitenanfang [[#top]]</p>
<br>
Ermöglicht das Einbinden von zweidimensionalen Karten-Elementen auf Webseiten, Mobile Apps sowie für Navigationen. Diese Kartendarstellungen sind von Standortdaten angetrieben und bieten zusätzlich Echtzeit-Updates. Durch einen Entwickler können diese vollständig angepasst und konfiguriert werden. Das Hinzufügen von Points of Interest, Live-Standortdaten und Persistenz globaler Objekte ist ebenfalls möglich.<br>

<li>[https://www.mapbox.com/ Web mapbox-Link]<br>
<li>[https://openlayers.org/ Web OpenLayers-Link]<br>
- Unterstützt WMS-Services (Web Map Service)<br>
- OpenSreetMap muss Lizenz geklärt werden! ODbL.<br><br>
'''Lizenzkompatibilität muss beim Projekt geklärt werden'''<br>

<br>
[[Datei:Karten-Beispiel.png|frame|none|Beispiel einer Kartenansicht]]

<h1 style="page-break-before:always">Layout</h1>
<p>zum Seitenanfang [[#top]]</p>

==Tabellen/Listen==
<p>zum Seitenanfang [[#top]]</p>

===Tabelle===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Table.png|frame|none|Darstellung einer Tabelle]]

'''Elemente'''
[[Datei:Table.labeled.png|frame|none|Elemente einer Tabelle]]
1 Tabellenkopf<br>
1.1 Spaltenüberschrift<br>
1.2 Sortiereinstellungen<br>
1.3 Spaltenkopf<br>
1.4 Spaltenfilter<br>
1.5 Spaltensortierung<br>
2 Tabelleninhalt<br>
3 Tabellenfuß<br>
3.1 Spaltenfuß<br>

===blätterbare Tabelle===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Pageable-table.png|frame|none|Darstellung einer blätterbaren Tabelle]]

'''Elemente'''
[[Datei:Pageable-table.labeled.png|frame|none|Elemente einer blätterbaren Tabelle]]
1 Tabellenkopf<br>
1.1 Spaltenüberschrift<br>
1.2 Sortiereinstellungen<br>
1.3 Spaltenkopf<br>
1.4 Spaltenfilter<br>
1.5 Sortierung<br>
2 Tabelleninhalt<br>
3 Seitennavigation<br>

==oK-Steuerelemente==
<p>zum Seitenanfang [[#top]]</p>

===Topologie-Baum===
<p>zum Seitenanfang [[#top]]</p>

Das Steuerelement bietet die Möglichkeit, [[Topologie (Strom)| topologische]] Zusammenhänge eines Stromnetzes hierarchisch darzustellen.
Der Topologie-Baum ist als gemeinsames Steuerelment in unterschiedlichen ok-Modulen wiederverwendbar und definiert eine standardisierte Sicht. Die generell möglichen, darstellbaren topologischen Elemente richten sich nach den in oK definierten Elementen.

Die Klärung der Frage, wie ein Netz hierarchisch dargestellt werden kann und welche Elemente des Netzes tatsächlich angezeigt und ausgewählt werden können, ist nicht Aufgabe dieses Steuerelementes. Dies ist Aufgabe der darunter liegenden Anwendung und kann aufgrund fachlicher Aspekte unterschiedlich ausgeprägt sein.<br><br>
'''Elemente'''
[[Datei:TopologyTree.labeled.png|frame|none|Elemente eines Topologie-Baums]]

1 Steuerleiste<br>
1.1 Suchbegriff<br>
Im [[Eingabefeld]] "Suchbegriff" können Begriffe eingeben werden, nach denen in der zugrundeliegenden Topologie gesucht werden kann.
Die Begriffe können folgende [https://de.wikipedia.org/wiki/Wildcard_%28Informatik%29 Platzhalter (Wildcard)] beinhalten:
{| class="wikitable sortable"
|-class="hintergrundfarbe6"
!Platzhalter
!Bezeichnung
!Verwendung
|-
|?
|Fragezeichen
|Platzhalter für genau ein Zeichen
|-
|*
|Sternchen
|Platzhalter für beliebig viele (auch null) Zeichen
|-
|#
|Doppelkreuz
|Platzhalter für einen numerischen Wert
|}
1.2 Suchen<br>
Durch Drücken der [[Schaltfläche]] "Suchen", wird nach dem angegebenen Suchbegriff gesucht. Ist die Suche erfolgreich, werden alle Elemente im Navigationsbereich ausgewählt (Mehrfachselektion), die dem Suchbegriff entsprechen. Gleichzeit wird zum ersten Element aus der Ergebnismenge gesprungen.<br>

1.3 Einstellungen'''<br>
Über die Schaltfläche "Einstellungen" können Filterkriterien definiert werden, die die Anzeige auf passende topologische Elemente im Navigationsbereich einschränken.<br/>
<div style="background:#fff0d0;border-color:#ffb200;border-radius:5px;border-style:solid;border-width:1px;margin:16px;padding:10px">[[Datei:Warning-yellow.icon.svg|24px]] Die Definition möglicher Filterkriterien und Regelwerke ist Teil späterer Festlegungen.</div>

2 Statusleiste<br>
Die Statusleiste zeigt allgemeine Informationen zu den im Navigationsbereich angezeigten Elementen an.<br>
2.1 Datum<br>
Das Erstellungsdatum (Stand) der zugrundeliegenden Daten, auf dem die Anzeige im Navigationsbereich basiert.<br>
2.2 Uhrzei<br>
Die Erstellungsuhrzeit(Stand) der zugrundeliegenden Daten, auf dem die Anzeige im Navigationsbereich basiert.<br>
2.3 Filter<br>
Das Symbol "Filter" zeigt an, ob mindestens ein Filter aktiviert ist.<br>
2.4 Benachrichtigung<br>
Im Benachrichtigungsbereich können verschiedene Symbole angezeigt werden, die über zusätzliche Hinweise informieren. In Beispiel ist liegt hier eine Warnungmeldung vor.<br>

3 Navigationsbereich<br>
Im Navigationsbereich werden topologische Zusammenhänge in einer baumartigen Struktur angezeigt. Die Ausprägung der Topologie als Hierarchie ist Aufgabe der jeweiligen Anwendung.<br>

'''Ordnung/Sortierreihenfolge'''<br>

<div style="background:#fff0d0;border-color:#ffb200;border-radius:5px;border-style:solid;border-width:1px;margin:16px;padding:10px">[[Datei:Warning-yellow.icon.svg|24px]]<br>
- Was für ein Steuerelement nutzt da BTC? <br>
- Wir müssten da einen Link bereitstellen ggf. mit Matthias Rohr oder Felix Korb besprechen <br></div>

==Definition von ok HTML Elementen==
<p>zum Seitenanfang [[#top]]</p>

ok HTML Elemente müssen durch npm paketiert und oK-konform gestyled werden.<br>

Zu den oK HTML Elemente zählen:<br>
<li> Date (primeng)<br>
<li> DateTime (primeng)<br>
<li> DateRange (primeng)<br>
<li> komplexe DropDown (primeng) bspw. Icons, Tabelle, Gruppen<br>
<li> Grid (ag-grid)<br>
<li> Gantt (zurzeit nichts geeignetes gefunden)<br>
<li> Kalender (primeng)<br>
<li> Charts (primeng, c3js, d3js)<br>
<li> Navbar (ok-element)<br>
<li> Modale Dialoge (primeng) sollten vermieden werden<br>
<li> Tabs (primeng)<br>
<li> Akkordion (primeng)<br>
<li> MultiSelect (primeng)<br>
<li> Chips (primeng)<br>
<li> Editor (primeng)<br>
<li> Messages toast (primeng)<br>
<br>
ACHTUNG: Nicht definierte ok Steuerlemente immer erst bei primeng schauen!<br>
<br>
Weitere Steuerlemente müssen über SaaS Themeable sein!<br>
<li> [https://www.primefaces.org/primeng/#/ Web primefaces - Link]<br>
<li> [https://www.ag-grid.com Web ag-grid - Link]<br>
<li> [https://c3js.org/ Web c3js.org - Link]<br>
<li> [https://d3js.org/ Web d3js.org - Link]<br>

==Definition von Standard HTML Elementen==
<p>zum Seitenanfang [[#top]]</p>

Standard HTML Elemente müssen nicht durch npm paketiert werden.<br>
Es ist ausreichend, ok-Styles als npm Pakete zu definieren und auf den HTML Elementen anzuwenden.<br>
<br>
Zu den Standard HTML Elemente zählen:<br>

<li> Textfelder<br>
<li> Validation<br>
<li> Passwort<br>
<li> Simple DropDown Listen<br>
<li> CheckBox<br>
<li> Buttons<br>
<li> Button Groups<br>
<li> Radio Buttons<br>
<li> File Upload<br>
<li> Numerics<br>
<li> (Drag&Drop)<br>
<li> List Group<br>
<li> Tables (wenn keine besonder Funktionalität, sonst ag-grid)<br>
<br>
Komponenten aus https://getbootstrap.com<br>

==Portal==
<p>zum Seitenanfang [[#top]]</p>

==Standarddialoge==
<p>zum Seitenanfang [[#top]]</p>

===Eingabedialog===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Input-dialog.png|frame|none|Darstellung eines Eingabedialogs]]
'''Elemente'''
[[Datei:Input-dialog.labeled.png|frame|none|Elemente eines Eingabedialogs]]
1 Titel<br>
2 Anzeige-/Eingabebereich<br>
3 Steuerleiste<br>

===Benachrichtigungsdialog===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:notification-dialog.png|frame|none|Darstellung eines Benachrichtigungsdialogs]]
'''Elemente'''
[[Datei:notification-dialog.labeled.png|frame|none|Elemente eines Benachrichtigungsdialogs]]
1 Titel<br>
2 Benachrichtigung<br>
3 Steuerleiste<br>

===Wizard===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Wizard.png|frame|none|Darstellung eines Wizards]]

'''Elemente'''
[[Datei:Wizard.labeled.png|frame|none|Elemente eines Wizards]]
1 Überschrift<br>
2 Bearbeitungsschritte<br>
3 Inhalt<br>
4 Steuerleiste<br>

===Message Toast===
<p>zum Seitenanfang [[#top]]</p>
<br>
Ein Message Toast ist ein kurzer Hinweistex welcher als Popup eingeblendet und nach einem Moment wieder ausgeblendet wird, ohne das zwangsläufig eine Benutzeraktion erfolgen muss.<br>
Die Eigenschaften eines Toast können beliebig konfiguriert werden.<br>

'''Darstellung'''
[[Datei:Message toast.png|frame|none|Darstellung eines Message Toast]]<br>

'''Für open KONSEQUENZ wurden folgende Konfigurationen abgestimmt'''<br>
<li>Toasts erscheinen oben rechts<br>
<li>Verschwinden nach rechts oben<br>
<li>Automatisches verschwinden nach:<br>
   Erfolgreich: 2 Sekunden<br>
   Info: Muss manuell geschlossen werden<br>
   Warnung: 7 Sekunden<br>
   Fehler: 7 Sekunden<br>
<li>Messages: Erfolgreich, Fehler, Info, Warnung<br>
<li>Maximal drei Zeilen Content in einem Toast<br>
<li>Defaultfarben verwenden<br><br>

[https://www.primefaces.org/primeng/#/toast Web primeng-Toast-Link]

==Navigationselemente==
<p>zum Seitenanfang [[#top]]</p>

<br>Um das Navigieren innerhalb einer Web-Seite zu vereinfachen gibt es unterschiedliche Navigationselemente, diese werden in den folgenden Kapiteln kurz erläutert.<br>

===Navigation Bar (Navbar)===
<p>zum Seitenanfang [[#top]]</p>
<br>
Das Navbar-Element ist ein permanent sichtbares Navigationselement, welches horizontal oder vertikal auf einer Webseite angeordnet werden kann und dem Benutzer die
Möglichkeit bietet, wichtige Seiten direkt aufzurufen. Der Vorteil ist, dass eine Navbar für jede Seite separat konfiguriert werden kann.<br><br>
'''Darstellung'''
<br>
[[Datei:mit Autodisplay.png|frame|none|Darstellung einer Navbar mit Autodisplay]]
<br>
[[Datei:ohne Autodisplay.png|frame|none|Darstellung einer Navbar ohne Autodisplay]]
<br>
Vorteile einer Navbar:<br>
<li> Bietet einen schnellen Überblick über die Struktur der Webseite<br>
<li> Jede Seite, bzw. Kategorie ist direkt über die Navbar ansteuerbar<br>
<li> Die Navbar ist für jede Seite separat konfigurierbar<br>
<li> Für jedes Navigationselement kann ein eigenes Submenü erstellt werden<br>
<li> Die aktuelle Seite kann farblich hinterlegt werden<br>
<li> In einer Navbar können Funktionen wie zum Beispiel Abmelden oder eine Such-Funktion eingebunden werden<br>
<li> Es können bis zu vier Navbars auf einer Seite verwendet werden (Standartmäßig werden aber nur zwei implementiert)<br>
<br>
Nachteile einer Navbar:<br>
<li> Muss für jede Seite einzeln Konfiguriert werden<br>
<li> Kann bei umfangreichen Seiten schnell unübersichtlich werden oder Überladen wirken<br>
<br>
[https://www.primefaces.org/primeng/#/menubar Web primeng-menubar-Link]

===Accordion===
<p>zum Seitenanfang [[#top]]</p>
<br>
'''Beschreibung'''<br>
Ein Accordion ist ein Navigationselement, welches dazu dient umfangreiche Listen mit Inhalten platzsparend auf Webseiten abzubilden.<br>
[https://www.primefaces.org/primeng/#/accordion Web primeng-accordion-Link]

'''Darstellung'''<br>
Einzelselektion<br>
[[Datei:akkordion-einzelselektion.png|frame|none]]<br>
Mehrfachselektion<br>
[[Datei:akkordion-mehrfachselektion.png|frame|none]]

===TabView===
<p>zum Seitenanfang [[#top]]</p>
<br>
Eine TabView ist eine Komponente zum einfachen Gruppieren von Inhalten auf einer Seite in Form von Registerkarten. Auf jeder Registerkarte können z.B. Formulare implementiert werden, die durch den Anwender abgearbeitet werden müssen. Durch die Verwendung von Registerkarten wird ein schnelles Navigieren zwischen den einzelnen Inhalten ermöglicht. Zudem können diese Registerkarten je nach Anfordeung konfuguriert werden.<br>

[https://www.primefaces.org/primeng/#/tabview Web primeng-tabview-Link]

[[Datei:tab-view.png|frame|none|Darstellung einer TabView]]<br>

Für openKONSEQUENZ wurden folgende Konfigurationen vorgegeben:<br>
<li>Valid: Grüner Balken in Tab (Nur wenn allen Steuerelementen im Content valid sind)
<li>Invalid: Roter Balken in Tab
<li>Neuen Tab dynamisch hinzufügen per + Tab
<li>Tab entfernen mit Lösch-Button im Content-Bereich
<li>Icons können je nach bedarf im Tab angezeigt werden
<li>Ausrichtung der Tabs (oben, unten, links, rechts)

<h1 style="page-break-before:always">Barrierefreiheit</h1>
<p>zum Seitenanfang [[#top]]</p>

Barrierefreiheit bezeichnet eine Gestaltung der baulichen Umwelt sowie von Informationsangeboten, Kommunikation usw. dergestalt, dass sie auch von Menschen mit Beeinträchtigungen ohne zusätzliche Hilfen genutzt und wahrgenommen werden können.

Um Menschen ein barrierefreies Arbeiten in der digitalen Welt zu ermöglichen, sind verschiedene Aspekte zu betrachten: Zum einen müssen Software und das heute nicht mehr wegzudenkende Internet barrierefrei gestaltet werden. Zum anderen muss einigen Menschen mit Behinderung überhaupt erst die Bedienung eines Computers ermöglicht werden durch unterstützende Technologien. Dies können beispielsweise Augensteuerung und Mundmaus bei körperlichen Behinderungen, oder Screenreader und Braillezeile bei Blinden sein. Weitere Beispiele stellen Technologien aus dem Bereich der Unterstützten Kommunikation dar, die Kommunikation in manchen Fällen überhaupt erst möglich machen.

Quelle: [ https://de.wikipedia.org/wiki/Barrierefreiheit ]

<h1 style="page-break-before:always">Internationalisierung</h1>
<p>zum Seitenanfang [[#top]]</p>

Internationalisierung bedeutet in der Informatik beziehungsweise in der Softwareentwicklung, ein Programm so zu gestalten, dass es leicht (ohne den Quellcode ändern zu müssen) an andere Sprachen und Kulturen angepasst werden kann.

Internationalisierung (englisch internationalization oder internationalisation) wird gerne mit dem Numeronym i18n abgekürzt (im englischen Wort Internationalization befinden sich 18 Buchstaben zwischen dem ersten Buchstaben I und dem letzten Buchstaben n). Hierunter fallen diejenigen Aufgaben, die der Entwickler/Programmierer eines Programms bewältigen muss. Dazu darf er zum Beispiel Beschreibungstexte nicht im Quellcode fest kodieren, sondern muss Variablen benutzen, die von einer Quelle zur Laufzeit eingelesen werden. Aber auch Datumsformatierungen und die sprachabhängige Oberflächengestaltung (z. B. kann Text unterschiedlich lang sein oder die Rechts-Nach-Links-Orientierung kann sich unterscheiden) gehören hierzu.

Im nächsten Schritt erfolgt die Lokalisierung (localization oder localisation), die als l10n abgekürzt wird (10 Buchstaben zwischen l und n). Ein Programm sollte im vorigen Schritt so gestaltet sein, dass diese Änderungen nicht mehr vom Programmierer durchgeführt werden müssen. Dieser Prozess bezeichnet die reine Übersetzung von zum Beispiel Texten in eine Landessprache.

Quelle: [ https://de.wikipedia.org/wiki/Internationalisierung_(Softwareentwicklung) ]

<h1 style="page-break-before:always">allg. Usability-Richtlinien</h1>
<p>zum Seitenanfang [[#top]]</p>

Software-Ergonomie (zur Wortherkunft siehe Software und Ergonomie) ist die Arbeit hin zu leicht verständlicher und schnell benutzbarer Software unter den gebotenen technischen Möglichkeiten und unter der Einhaltung definierter bzw. empirisch entstandener Standards und Styleguides. Die Software-Ergonomie ist ein Teilgebiet der Mensch-Computer-Interaktion, und ihr Ergebnis ist die Gebrauchstauglichkeit von Computerprogrammen.

Gegenstandsbereich der Software-Ergonomie im eigentlichen Sinne ist der arbeitende Mensch im Kontext (Softwarenutzung an Arbeitsplätzen). Allgemein wird heute die Benutzung von bzw. die Interaktion mit Computern betrachtet. Dies bedeutet die Berücksichtigung (neuro)psychologischer Aspekte beim Entwerfen der Software – wie dies methodisch auch die Ingenieurpsychologie anstrebt –, um eine optimale Mensch-Maschine-Schnittstelle zur Verfügung zu stellen. Dies soll sich in besonders leicht verständlichen funktionalen Einheiten ausdrücken (Bsp. einfache Dialoge bei Systemen mit GUI). Die Entwicklung gebrauchstauglicher Software wird im Rahmen des Usability-Engineering geleistet.

Quelle: [ https://de.wikipedia.org/wiki/Software-Ergonomie]

<h1 style="page-break-before:always">Paketierung der Styles (customized Bootstrap Template und individuelle allg. oK Styles)</h1>
<p>zum Seitenanfang [[#top]]</p><br>

Aufteilung der Stylse oK und eigene Unternehmensanpassungen.<br>
<li> '''ok-common.saas'''<br>
- Für Layout und globale Styles customized Bootstrap Template<br>
- ok-CI/CD<br>
<li> '''ok-vendor.saas'''<br>
- Nur für die Componenten-Styles von Drittanbietern<br>
(z.B.: primeng, ag-grid, c3.js, d3.js)<br>
<li> '''ok-components.saas'''<br>
- Nur für ok-Components<br>
(z.B.: NavBar)<br>
<br>
Achtung: Unternehmensanpassungen (CI/CD) werden in eigenen neuen saas Dateien beschrieben! Dabei müssen die entsprechenden saas-Variablen überschrieben werden.<br>

Styleguide (in Bearbeitung)

2019-07-08T13:20:18Z

Eschlenker: /* Steuerelement Grid */

Styleguide (in Bearbeitung)

2019-07-08T13:19:58Z

Eschlenker: /* Steuerelement Grid */

zurück zur [[Hauptseite]]
zurück zur [[Styleguide]]

<h1 style="page-break-before:always">Zielsetzung und Abgrenzung</h1>
<p>zum Seitenanfang [[#top]]</p>
'''Zielsetzung:'''<br>
<li> Konsolidierung des UI StyleGuides<br>
<li> Evaluierung Tooling für den StyleGuide<br>
- IMIS<br>
- Wiki<br>
- sonst<br>
<li> Package Manager (npm)<br>
<li> Entwurfsentscheidungen ng Components vs Elements<br>
<li> Best of Konsolidierung der Steuerelemente aus den existierenden UserModulen<br>
<li> UX Vorgaben definieren<br>
<li> Paketierung der Styles (customized Bootstrap Template, eigenes allg. OK Stylesheet) als npm<br>
<br>
'''Abgrenzung:'''
<li> Vorerst kein Code (nur beispielhaft)<br>
<br>

<h1 style="page-break-before:always">Design</h1>
<p>zum Seitenanfang [[#top]]</p>

Um ein einheitliches Design zu gewährleisten, müssen die verwendeten Farben, Formen und Schriftarten auf allen User Interfaces dem vorgegebenen StyleGuide entsprechen. Diese Vorgaben werden in den folgenden Kapiteln beschrieben.
==Farben==
<p>zum Seitenanfang [[#top]]</p>

In diesem Kapitel wird das abgestimmte Farbschema (Hauptfarben, Farbverläufe, Sekundärfarben, u. s. w.) und deren Verwendung auf Webseiten und User Interfaces erläutert. Zusätzlich finden Sie hier Informationen über den jeweiligen Farbcode und die CSS Codierung.<br>

===Hauptfarben===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Primary
| <div style="color:#ffffff; background:#003a5f; padding: 1px 10px">#003a5f</div>
|-
| Success
| <div style="color:#ffffff; background:#80b300; padding: 1px 10px">#80b300</div>
|-
| Info
| <div style="color:#ffffff; background:#0080c0; padding: 1px 10px">#0080c0</div>
|-
| Default
| <div style="color:#000000; background:#ffffff; padding: 1px 10px">#ffffff</div>
|-
| Text
| <div style="color:#ffffff; background:#333333; padding: 1px 10px">#333333</div>
|}

===Farbverläufe===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
! CSS
|-
| Streifen Header
| <div style="color:#ffffff; background: linear-gradient(to right, rgba(121, 182, 28, 1) 0%, rgba(2, 129, 196, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0); padding: 1px 10px">#79b61c - #0281c4</div>
| <code>background: linear-gradient(to right, rgba(121, 182, 28, 1) 0%, rgba(2, 129, 196, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0);</code>
|-
| Balken Header
| <div style="color:#000000; background: linear-gradient(to right, rgba(232, 238, 231, 1) 0%, rgba(229, 237, 242, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0); padding: 1px 10px">#e8eee7- #e5edf2</div>
| <code>background: linear-gradient(to right, rgba(232, 238, 231, 1) 0%, rgba(229, 237, 242, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0);</code>
|}

===Flächen und Linien===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Hintergrund
| <div style="color:#000000; background:#f8fafd; padding: 1px 10px">#f8fafd</div>
|-
| Flächen/Tabellen
| <div style="color:#000000; background:#f5f8fc; padding: 1px 10px">#f5f8fc</div>
|-
| Hervorhebung/Eingabefelder/Tabellenzeilen
| <div style="color:#000000; background:#e9f0f9; padding: 1px 10px">#e9f0f9</div>
|-
| Linien
| <div style="color:#000000; background:#ccdbe6; padding: 1px 10px">#ccdbe6</div>
|-
| Umrandung Formularfelder
| <div style="color:#000000; background:#b7cbda; padding: 1px 10px">#b7cbda</div>
|}

===Sekundärfarben===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Warning
| <div style="color:#000000; background:#ffb200; padding: 1px 10px">#ffb200</div>
|-
| Danger
| <div style="color:#ffffff; background:#990000; padding: 1px 10px">#990000</div>
|-
| Disabled
| <div style="color:#ffffff; background:#567d96; padding: 1px 10px">#567d96</div>
|}

==Schriftarten==
<p>zum Seitenanfang [[#top]]</p>

Ebenso wie das Farbschema unterliegen auch die zu verwendenden Schriftarten dem abgestimmten Styleguide. Bei der Verwendung von zu vielen unterschiedlichen Schriftarten und Schriftgrößen kann das User Interface schnell unruhig wirken. Die gewählte Schriftart sollte gut lesbar und nicht zu klein sein.<br>

===Schriftfamilie===
<p>zum Seitenanfang [[#top]]</p>

Für openKONSEQUENZ wurde die Schriftart '''Source Sans Pro''' festgelegt. Diese Schriftart ist bei allen User Interfaces und Texten zu verwendet.

[https://github.com/adobe-fonts/source-sans-pro Download-Link]

[https://www.google.com/fonts/specimen/Source+Sans+Pro WebFont-Link]

==Rahmenabstände==
<p>zum Seitenanfang [[#top]]</p>

'''offener Punkt'''<br>

===Symbole===
<p>zum Seitenanfang [[#top]]</p>

In diesem Abschnitt werden allgemeine Bedien- und Status-Symbole beschrieben. Um ein einheitliches Aussehen der oK-Module sicherzustellen, sollen diese anwendungsübergreifend verwendet werden.
{| class="wikitable sortable"
|-class="hintergrundfarbe6"
!Symbol
!Bezeichnung
|-
|[[Datei:Filter.icon.svg|center|24px]]
|Filter
|-
|[[Datei:Menu.icon.svg|center|24px]]
|Menü
|-
|[[Datei:search.icon.svg|center|24px]]
|Suche
|-
|[[Datei:Warning.icon.svg|center|24px]]
|Warnung
|-
|[[Datei:Copy.png|center|24px]]
|Kopieren
|-
|[[Datei:pencil.png|center|24px]]
|Bearbeiten
|-
|[[Datei:save.png|center|24px]]
|Speichern
|-
|[[Datei:add.png|center|24px]]
|Hinzufügen
|-
|[[Datei:cog.png|center|24px]]
|Einstellung
|-
|[[Datei:print.png|center|24px]]
|Drucken
|-
|[[Datei:refresh.png|center|24px]]
|Refresch
|-
|[[Datei:trash.png|center|24px]]
|Löschen
|-
|[[Datei:question.png|center|24px]]
|Hilfe
|-
|[[Datei:cancel.png|center|24px]]
|Abbrechen
|}
<br>
Unter dem folgenden Link finden Sie weitere Symbole.<br>
[https://material.io/tools/icons/?style=baseline Web material-icons-Link]<br>
Lizenz: Apache license version 2.0 sollte/ist mit EPL kompatibel<br>

Die folgende Darstelung zeigt eine Beispiel-Menüleiste mit Icon, die zum Aufrufen von definierten Funktionen verwendet werden.
<br>
[[Datei:Menueleiste mit Icon.png|frame|none|Beispiel: Schaltflächen zum Aufrufen einer Funktion]]

===technische Vorschläge===
<p>zum Seitenanfang [[#top]]</p>

<h1 style="page-break-before:always">Komponenten</h1>
<p>zum Seitenanfang [[#top]]</p>

Komponenten sind die einzelnen Bestandteile einer grafischen Benutzeroberfläche /bzw. Benutzerschnittstelle. Im folgenden Abschnitt werden die unterschiedlichen Elemente kurz Erläutert.<br>

==Standard-Steuerelemente==
<p>zum Seitenanfang [[#top]]</p>

===Eingabefeld (text)===
<p>zum Seitenanfang [[#top]]</p>

Ein Eingabefeld ist das meinst verwendete Steuerelement einer grafischen Benutzeroberfläche und dient der Interaktion mit dem Benutzer. Diese Textfelder können Ein- oder auch Mehrzeilig sein und über die Tastatur können beliebige Zeichenketten eingegeben werden.<br>
'''Darstellung'''

'''inaktiv'''
[[Datei:Input.inactive.png|frame|none|inaktives Eingabefeld mit Beschriftung "Beschreibung*"]]

'''aktiv'''
[[Datei:Input.active.png|frame|none|aktives Eingabefeld mit Beschriftung "Beschreibung*"]]

===Führungstext (label)===
<p>zum Seitenanfang [[#top]]</p>

Führungstexte (englich: label) gehören auch zu den Steuerelementen einer grafischen Benutzeroberfläche. Diese werden in der Regel dazu verwendet um Ein- oder Ausgabefelder, aber auch Radio Button oder Checkboxen zu beschriften.<br>

===Schaltfläche (button)===
<p>zum Seitenanfang [[#top]]</p>

Ein häufig genutztes Steuerelement für grafische Benutzeroberflächen ist die Schaltfläche (englisch: button). Mittels dieser Schaltflächen können Formulare abgesendet oder definierte Aktionen durchgeführt werden.<br>
'''Farben'''
{| class="wikitable"
|-
! Schaltfläche
! Hintergrundfarbe
! Konturfarbe
! Textfarbe
|-
| <div class="bootstrap-button" style="background:#003a5f; border-color:#002a45; color:#ffffff;">Primary</div>
| <div class="color-value">#003a5f</div>
| <div class="color-value">#002a45</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#ffffff; border-color:#b7cbda; color:#0b325c;">Default</div>
| <div class="color-value">#ffffff</div>
| <div class="color-value">#b7cbda</div>
| <div class="color-value">#0b325c</div>
|-
| <div class="bootstrap-button" style="background:#80b300; border-color:#6e9a00; color:#ffffff;">Success</div>
| <div class="color-value">#80b300</div>
| <div class="color-value">#6e9a00</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#0080c0; border-color:#006fa7; color:#ffffff;">Info</div>
| <div class="color-value">#0080c0</div>
| <div class="color-value">#006fa7</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#ffb200; border-color:e6a000#; color:#ffffff;">Warning</div>
| <div class="color-value">#ffb200</div>
| <div class="color-value">#e6a000</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#990000; border-color:#800000; color:#ffffff;">Danger</div>
| <div class="color-value">#990000</div>
| <div class="color-value">#800000</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#337ab7; border-color:#2e6da4; color:#ffffff;">Disabled</div>
| <div class="color-value">#337ab7</div>
| <div class="color-value">#2e6da4</div>
| <div class="color-value">#ffffff</div>
|}
<br>
Die folgende Abbildung zeigt Beispielhaft eine Menüleiste mit Schaltflächen über diese definierte Funktionen aufgerufen werden können.
<br>
[[Datei:Beispiel-Button.png|frame|none|Beispiel: Schaltflächen zum Aufrufen einer Funktion]]

===Auswahl (check-box)===
<p>zum Seitenanfang [[#top]]</p>

Die Auswahl (englisch: checkbox) ist ein einfaches Steuerelement zur Eingabe von Ja/Nein-Werten, welche durch einen Mausklick aktiviert oder deaktiviert werden kann. Dieses Element findet meist auf Formularen Verwendung, wenn z. B. die Datenschutzbestimmungen oder die allgemeinen Geschäftsbedingungen anerkannt werden müssen.<br>
'''Darstellung'''
[[Datei:Check-box.png|frame|none|Auswahl mit [[Führungstext|Beschriftung]] "Gesamtnetz für Abregelung*"]]

<br>
Beispiel für die Verwendung von Auswahlfeldern.
<br>
[[Datei:checkbox.png|frame|none|Beispiel: Auswahlfelder (check-box)]]

===Auswahllisten (MultiSelect)===
<p>zum Seitenanfang [[#top]]</p>

Ein weiteres Steuerelement ist die Auswahlliste (englisch: multiselect) und dient der Auswahl von mehreren Objekten aus einer Liste. Die Darstellungsform solcher Auswahllisten kann variieren.<br>
Weitere Informationen finden sie unter den folgende Verlinkungen.
<br>
[https://www.primefaces.org/primeng/#/multiselect Web primeng-multiselect-Link]<br>
[https://www.primefaces.org/primeng/#/chipst Web primeng-chips-Link]<br>
<br>
'''Darstellung'''<br>

Beispiel einer Auswahlliste als '''Dropdown'''.
<br>
[[Datei:multiselect.png|frame|none|Multiselect]]

Die Attribute dieser Auswahlliste<br>
<li>können Text ohne Icon enthalten<br>
<li>können Text mit Icon enthalten<br>
<li>sind Filterbar<br>
<br>

Beispiel einer Auswahlliste als '''Chips'''.<br>
In einem Eingabefeld werden mehrere Werte in Form von Chips eingefügt.<br>
[[Datei:multiselect - chip.png|frame|none|Multiselect als Chips]]

Die Attribute dieser Auswahlliste können<br>
<li>Text ohne Icon enthalten<br>
<li>Text mit Icon enthalten<br>
<br>

'''Beide Steuerelemente können kombiniert eingesetzt werden'''<br>

===Dropdown-Liste (drop-down list)===
<p>zum Seitenanfang [[#top]]</p>

Die Dropdown-Liste (englisch: drop-down-list) ist ein Textfeld welches eine Auflistung von benutzerdefinierten Werte enthält aus der ein Anwender einen Eintrag auswählen kann. Diese Dropdown-Liste kann um weitere Elemente wie zum Beispiel ein Scrollbalken, eine Filterfunktion oder auch Icon erweitert werden. Zusätzlich besteht die Möglichkeit Einträge dieser Liste zu Gruppieren, um diese Übersichtlich zu Gestalten.<br><br>
'''Darstellung'''<br>
Darstellung einer '''inaktiven''' Dropdown-Liste.<br>
[[Datei:Drop-down-menu.inactive.png|frame|none|inaktive Dropdown-Liste mit Beschriftung "Grund der Abregelung*"]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste.<br>
[[Datei:Drop-down-menu.active.png|frame|none|aktive Dropdown-Liste mit Beschriftung "Grund der Abregelung*"]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste inklusive Icon, Filter und einem Scrollbalken.<br>
[[Datei:Dropdown mit Icon.png|frame|none|aktive Dropdown-Liste mit Icon und Filter]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste inklusive Gruppierung.<br>
[[Datei:Dropdown mit Gruppierung.png|frame|none|aktive Dropdown-Liste mit Gruppierung]]
[https://www.primefaces.org/primeng/#/dropdown Web primeng-dropdown-Link]<br>

===Kalender (calendar)===
<p>zum Seitenanfang [[#top]]</p>

In der Regel umfasst ein Datums- und / oder Uhrzeitfeld eine Kalenderauswahl, so das ein Datum nicht händisch als String eingegeben werden muss. Durch klick in das Textfeld, öffnet sich ein Kalenderfenster, aus dem das gewünschte Datum und die Uhrzeit auswählt werden kann. <br>
'''Darstellung'''
[[Datei:Calendar.png|frame|none|Kalender mit Beschriftung "Startzeitpunkt*"]]
[https://www.primefaces.org/primeng/#/calendar Web primeng-calendar-Link]<br>

===Suche===
<p>zum Seitenanfang [[#top]]</p>
Eine Suchfunktion dient dazu, dass aus einem großem Datenbestand nur ein bestimmter Datensatz anhand verschiedener Kriterien angezeigt wird.<br>
Beispiel für die Verwendung einer Suchfunktion.
<br>
[[Datei:Suchfunktion.png|frame|none|Beispiel: Suchfunktion]]

===Filter===
<p>zum Seitenanfang [[#top]]</p>
Eine Filterfunktion dient dazu, dass aus einem großem Datenbestand nur bestimmte Datensätze anhand verschiedener Kriterien in einer Ergebnisliste angezeigt werden.<br>
Beispiel für die Verwendung von Filtern.
<br>
[[Datei:Filterfunktion.png|frame|none|Beispiel: Filter mit Auswahlfeldern]]

===Netzspezifische Icons===
<p>zum Seitenanfang [[#top]]</p>

'''offener Punkt, Klärungsbedarf'''<br>

<li>Icons werden von der e-netz bereitgestellt<br>
<li>Lizenz wahrscheinlich MIT<br>
<li>Muss mit Frau Wittek besprochen werden/bzw. Unterstützung<br>

==Steuerelemente für Formulare==
<p>zum Seitenanfang [[#top]]</p>
<br>
Zur Erfassung von Daten werden Eingabe- und Auswahlfelder bereitgestellt, in die ein Benutzer Werte über die Tastatur oder eine Werteliste eingeben kann oder Auswahlknöpfe, die der Benutzer mit der Maus beeinflusst. Hierbei werden Pflichtfelder (müssen gefüllt werden und sind mit einem Sternchen entsprechend gekennzeichnet) und Kann-Felder (können gefüllt werden) unterschieden. In der folgenden Tabelle finden Sie eine Auflisten der möglichen Steuerelemente für Formulare. Auf die einzelnen Elemente wird in den folgenden Abschnitten weiter eingegangen.<br>

{| class="wikitable"
|-
! Pflichtfeld Typ
! Visualisierung
|-
| text invalid
| [[Datei:Steuerelemente fuer Formular 1.png]]
|-
| text valid
| [[Datei:Steuerelemente fuer Formular 2.png]]
|-
| numeric valid
| [[Datei:Steuerelemente fuer Formular-numeric.png]]
|-
| date,datetime,date range valid
| [[Datei:Steuerelemente fuer Formular 3.png]]
|-
| Gesperrt
| [[Datei:Steuerelemente fuer Formular 4.png]]
|-
| Drop-Down valid
| [[Datei:Steuerelemente fuer Formular 5.png]]
|-
| Validierung beim Verlassen eines Feldes
| [[Datei:Steuerelemente fuer Formular 6.png]]
|}

==Steuerelement Kalender==
<p>zum Seitenanfang [[#top]]</p>
<br>
[https://www.primefaces.org/primeng/#/calendar Web primeng-calendar-Link]<br>

'''Darstellung'''
[[Datei:Kalender-Ansichten.png|frame|none|Darstellung der Kalenderansicht für Monat, Woche und Tag]]
<br>
In der Kalenderfunktion stehen dem Benutzer folgende Ansichten zur Verfügung:<br>
<li> Monatsansicht<br>
<li> Wochenansicht<br>
<li> Arbeitswochenansicht<br>
<li> Tagesansicht<br><br>

Bei der Kalenderfunktion hat der Anwender die Möglichkeit von durch einen Klick auf die (Arbeits-)Wochen- oder Tagesansicht zu wechseln. Durch Klicken mit der Maustaste in einen freien Zeitraum können neue Termine erfasst werden. Für eine neue Terminspanne markieren Sie einen freien Bereich durch SHIFT und Klick mit der linken Maustaste und erfassen für diesen Zeitraum einen Termin. Zum Editieren von bestehen den Terminen genügt ebenfalls ein Klick mit der Maustaste. <br>
Über die ‘‘‘Drag & Drop‘‘‘ Funktion können Termine in der Monatsansicht oder der Wochenansicht in einen anderen Wochentag verschoben werden. Um einen Termin zeitlich innerhalb eines Tages zu verschieben und Zeitspanne anzupassen, müssen Sie sich in der Wochenansicht oder der Tagesansicht befinden.<br>
<br>
Folgende Funktionen stehen zusätzlich zur Verfügung:<br>
<li> Termine ICS-Format exportieren (generell in der Applikation!)<br>
<li> Filtern über Kalendereinträge (ArrayList)<br>
<li> Unterschiedliche farbliche Darstellung einzelner Termine (Termin Template)<br>

==Steuerelement Grid==
<p>zum Seitenanfang [[#top]]</p>
<li> Buttons zum Absprung in Detailmaske (Lese/Bearbeitung), Stornierbutton in die erste Linke Spalte im Grid<br>
<li> Absprung durch Doppelklick in Detailmaske (Lese/Bearbeiten)<br>
<li> Datensatz hinzufügen-Button rechts oberhalb des Grid´s<br>
<li> Alternating row color<br>
<li> Hovereffekt (Zeile)<br>
<li> Einzelselektion und Mehrfachselektion mit Strg-Taste, Shift-Taste<br>
<li> Hovereffekt in Spaltenkopf unterstreichen und Mauscursor Hand (Rückmeldung für mögliche Aktionen an den Benutzer)<br>
<li> Klick auf Spaltenkopf, Sortierung ASC, DESC<br>
<li> Merfachsortierung durch klicken der Shift-Taste<br>
<li> Filterzeile als eigene Zeile direkt unterhalb des Spaltenkopfs<br>
<li> Virtual scrolling anstatt Pagination<br>
<li> Spaltenkopf mit Filter und Fußzeile bleiben beim scrollen stehen<br>
<li> Quickfiler (optional)<br>
<li> Externe Filter (optional) aber als Toggle-Switch<br>
<li> Stylevorgaben kommen per ok-vendor.sass !!!!!!!!!<br>
- Schriftrart<br>
- Schriftgröße<br>
- Zeilenhöhe<br>
- Farben<br>
- Style fürs Grid<br>
<li> Kompaktes Grid definieren. Spaltengröße sinnvoll definieren<br>
[https://www.ag-grid.com/ Web ag-grid-Link]<br>

Beispiel einer Verwendung von Steuerelementen auf einem Grid.
<br>
[[Datei:Steuerelement Grid.png|frame|none|Beispiel: Steuerelement Grid]]

==Steuerelement Heatmap / Kartendarstellung==
<p>zum Seitenanfang [[#top]]</p>
<br>
Ermöglicht das Einbinden von zweidimensionalen Karten-Elementen auf Webseiten, Mobile Apps sowie für Navigationen. Diese Kartendarstellungen sind von Standortdaten angetrieben und bieten zusätzlich Echtzeit-Updates. Durch einen Entwickler können diese vollständig angepasst und konfiguriert werden. Das Hinzufügen von Points of Interest, Live-Standortdaten und Persistenz globaler Objekte ist ebenfalls möglich.<br>

<li>[https://www.mapbox.com/ Web mapbox-Link]<br>
<li>[https://openlayers.org/ Web OpenLayers-Link]<br>
- Unterstützt WMS-Services (Web Map Service)<br>
- OpenSreetMap muss Lizenz geklärt werden! ODbL.<br><br>
'''Lizenzkompatibilität muss beim Projekt geklärt werden'''<br>

<br>
[[Datei:Karten-Beispiel.png|frame|none|Beispiel einer Kartenansicht]]

<h1 style="page-break-before:always">Layout</h1>
<p>zum Seitenanfang [[#top]]</p>

==Tabellen/Listen==
<p>zum Seitenanfang [[#top]]</p>

===Tabelle===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Table.png|frame|none|Darstellung einer Tabelle]]

'''Elemente'''
[[Datei:Table.labeled.png|frame|none|Elemente einer Tabelle]]
1 Tabellenkopf<br>
1.1 Spaltenüberschrift<br>
1.2 Sortiereinstellungen<br>
1.3 Spaltenkopf<br>
1.4 Spaltenfilter<br>
1.5 Spaltensortierung<br>
2 Tabelleninhalt<br>
3 Tabellenfuß<br>
3.1 Spaltenfuß<br>

===blätterbare Tabelle===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Pageable-table.png|frame|none|Darstellung einer blätterbaren Tabelle]]

'''Elemente'''
[[Datei:Pageable-table.labeled.png|frame|none|Elemente einer blätterbaren Tabelle]]
1 Tabellenkopf<br>
1.1 Spaltenüberschrift<br>
1.2 Sortiereinstellungen<br>
1.3 Spaltenkopf<br>
1.4 Spaltenfilter<br>
1.5 Sortierung<br>
2 Tabelleninhalt<br>
3 Seitennavigation<br>

==oK-Steuerelemente==
<p>zum Seitenanfang [[#top]]</p>

===Topologie-Baum===
<p>zum Seitenanfang [[#top]]</p>

Das Steuerelement bietet die Möglichkeit, [[Topologie (Strom)| topologische]] Zusammenhänge eines Stromnetzes hierarchisch darzustellen.
Der Topologie-Baum ist als gemeinsames Steuerelment in unterschiedlichen ok-Modulen wiederverwendbar und definiert eine standardisierte Sicht. Die generell möglichen, darstellbaren topologischen Elemente richten sich nach den in oK definierten Elementen.

Die Klärung der Frage, wie ein Netz hierarchisch dargestellt werden kann und welche Elemente des Netzes tatsächlich angezeigt und ausgewählt werden können, ist nicht Aufgabe dieses Steuerelementes. Dies ist Aufgabe der darunter liegenden Anwendung und kann aufgrund fachlicher Aspekte unterschiedlich ausgeprägt sein.<br><br>
'''Elemente'''
[[Datei:TopologyTree.labeled.png|frame|none|Elemente eines Topologie-Baums]]

1 Steuerleiste<br>
1.1 Suchbegriff<br>
Im [[Eingabefeld]] "Suchbegriff" können Begriffe eingeben werden, nach denen in der zugrundeliegenden Topologie gesucht werden kann.
Die Begriffe können folgende [https://de.wikipedia.org/wiki/Wildcard_%28Informatik%29 Platzhalter (Wildcard)] beinhalten:
{| class="wikitable sortable"
|-class="hintergrundfarbe6"
!Platzhalter
!Bezeichnung
!Verwendung
|-
|?
|Fragezeichen
|Platzhalter für genau ein Zeichen
|-
|*
|Sternchen
|Platzhalter für beliebig viele (auch null) Zeichen
|-
|#
|Doppelkreuz
|Platzhalter für einen numerischen Wert
|}
1.2 Suchen<br>
Durch Drücken der [[Schaltfläche]] "Suchen", wird nach dem angegebenen Suchbegriff gesucht. Ist die Suche erfolgreich, werden alle Elemente im Navigationsbereich ausgewählt (Mehrfachselektion), die dem Suchbegriff entsprechen. Gleichzeit wird zum ersten Element aus der Ergebnismenge gesprungen.<br>

1.3 Einstellungen'''<br>
Über die Schaltfläche "Einstellungen" können Filterkriterien definiert werden, die die Anzeige auf passende topologische Elemente im Navigationsbereich einschränken.<br/>
<div style="background:#fff0d0;border-color:#ffb200;border-radius:5px;border-style:solid;border-width:1px;margin:16px;padding:10px">[[Datei:Warning-yellow.icon.svg|24px]] Die Definition möglicher Filterkriterien und Regelwerke ist Teil späterer Festlegungen.</div>

2 Statusleiste<br>
Die Statusleiste zeigt allgemeine Informationen zu den im Navigationsbereich angezeigten Elementen an.<br>
2.1 Datum<br>
Das Erstellungsdatum (Stand) der zugrundeliegenden Daten, auf dem die Anzeige im Navigationsbereich basiert.<br>
2.2 Uhrzei<br>
Die Erstellungsuhrzeit(Stand) der zugrundeliegenden Daten, auf dem die Anzeige im Navigationsbereich basiert.<br>
2.3 Filter<br>
Das Symbol "Filter" zeigt an, ob mindestens ein Filter aktiviert ist.<br>
2.4 Benachrichtigung<br>
Im Benachrichtigungsbereich können verschiedene Symbole angezeigt werden, die über zusätzliche Hinweise informieren. In Beispiel ist liegt hier eine Warnungmeldung vor.<br>

3 Navigationsbereich<br>
Im Navigationsbereich werden topologische Zusammenhänge in einer baumartigen Struktur angezeigt. Die Ausprägung der Topologie als Hierarchie ist Aufgabe der jeweiligen Anwendung.<br>

'''Ordnung/Sortierreihenfolge'''<br>

<div style="background:#fff0d0;border-color:#ffb200;border-radius:5px;border-style:solid;border-width:1px;margin:16px;padding:10px">[[Datei:Warning-yellow.icon.svg|24px]]<br>
- Was für ein Steuerelement nutzt da BTC? <br>
- Wir müssten da einen Link bereitstellen ggf. mit Matthias Rohr oder Felix Korb besprechen <br></div>

==Definition von ok HTML Elementen==
<p>zum Seitenanfang [[#top]]</p>

ok HTML Elemente müssen durch npm paketiert und oK-konform gestyled werden.<br>

Zu den oK HTML Elemente zählen:<br>
<li> Date (primeng)<br>
<li> DateTime (primeng)<br>
<li> DateRange (primeng)<br>
<li> komplexe DropDown (primeng) bspw. Icons, Tabelle, Gruppen<br>
<li> Grid (ag-grid)<br>
<li> Gantt (zurzeit nichts geeignetes gefunden)<br>
<li> Kalender (primeng)<br>
<li> Charts (primeng, c3js, d3js)<br>
<li> Navbar (ok-element)<br>
<li> Modale Dialoge (primeng) sollten vermieden werden<br>
<li> Tabs (primeng)<br>
<li> Akkordion (primeng)<br>
<li> MultiSelect (primeng)<br>
<li> Chips (primeng)<br>
<li> Editor (primeng)<br>
<li> Messages toast (primeng)<br>
<br>
ACHTUNG: Nicht definierte ok Steuerlemente immer erst bei primeng schauen!<br>
<br>
Weitere Steuerlemente müssen über SaaS Themeable sein!<br>
<li> [https://www.primefaces.org/primeng/#/ Web primefaces - Link]<br>
<li> [https://www.ag-grid.com Web ag-grid - Link]<br>
<li> [https://c3js.org/ Web c3js.org - Link]<br>
<li> [https://d3js.org/ Web d3js.org - Link]<br>

==Definition von Standard HTML Elementen==
<p>zum Seitenanfang [[#top]]</p>

Standard HTML Elemente müssen nicht durch npm paketiert werden.<br>
Es ist ausreichend, ok-Styles als npm Pakete zu definieren und auf den HTML Elementen anzuwenden.<br>
<br>
Zu den Standard HTML Elemente zählen:<br>

<li> Textfelder<br>
<li> Validation<br>
<li> Passwort<br>
<li> Simple DropDown Listen<br>
<li> CheckBox<br>
<li> Buttons<br>
<li> Button Groups<br>
<li> Radio Buttons<br>
<li> File Upload<br>
<li> Numerics<br>
<li> (Drag&Drop)<br>
<li> List Group<br>
<li> Tables (wenn keine besonder Funktionalität, sonst ag-grid)<br>
<br>
Komponenten aus https://getbootstrap.com<br>

==Portal==
<p>zum Seitenanfang [[#top]]</p>

==Standarddialoge==
<p>zum Seitenanfang [[#top]]</p>

===Eingabedialog===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Input-dialog.png|frame|none|Darstellung eines Eingabedialogs]]
'''Elemente'''
[[Datei:Input-dialog.labeled.png|frame|none|Elemente eines Eingabedialogs]]
1 Titel<br>
2 Anzeige-/Eingabebereich<br>
3 Steuerleiste<br>

===Benachrichtigungsdialog===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:notification-dialog.png|frame|none|Darstellung eines Benachrichtigungsdialogs]]
'''Elemente'''
[[Datei:notification-dialog.labeled.png|frame|none|Elemente eines Benachrichtigungsdialogs]]
1 Titel<br>
2 Benachrichtigung<br>
3 Steuerleiste<br>

===Wizard===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Wizard.png|frame|none|Darstellung eines Wizards]]

'''Elemente'''
[[Datei:Wizard.labeled.png|frame|none|Elemente eines Wizards]]
1 Überschrift<br>
2 Bearbeitungsschritte<br>
3 Inhalt<br>
4 Steuerleiste<br>

===Message Toast===
<p>zum Seitenanfang [[#top]]</p>
<br>
Ein Message Toast ist ein kurzer Hinweistex welcher als Popup eingeblendet und nach einem Moment wieder ausgeblendet wird, ohne das zwangsläufig eine Benutzeraktion erfolgen muss.<br>
Die Eigenschaften eines Toast können beliebig konfiguriert werden.<br>

'''Darstellung'''
[[Datei:Message toast.png|frame|none|Darstellung eines Message Toast]]<br>

'''Für open KONSEQUENZ wurden folgende Konfigurationen abgestimmt'''<br>
<li>Toasts erscheinen oben rechts<br>
<li>Verschwinden nach rechts oben<br>
<li>Automatisches verschwinden nach:<br>
   Erfolgreich: 2 Sekunden<br>
   Info: Muss manuell geschlossen werden<br>
   Warnung: 7 Sekunden<br>
   Fehler: 7 Sekunden<br>
<li>Messages: Erfolgreich, Fehler, Info, Warnung<br>
<li>Maximal drei Zeilen Content in einem Toast<br>
<li>Defaultfarben verwenden<br><br>

[https://www.primefaces.org/primeng/#/toast Web primeng-Toast-Link]

==Navigationselemente==
<p>zum Seitenanfang [[#top]]</p>

<br>Um das Navigieren innerhalb einer Web-Seite zu vereinfachen gibt es unterschiedliche Navigationselemente, diese werden in den folgenden Kapiteln kurz erläutert.<br>

===Navigation Bar (Navbar)===
<p>zum Seitenanfang [[#top]]</p>
<br>
Das Navbar-Element ist ein permanent sichtbares Navigationselement, welches horizontal oder vertikal auf einer Webseite angeordnet werden kann und dem Benutzer die
Möglichkeit bietet, wichtige Seiten direkt aufzurufen. Der Vorteil ist, dass eine Navbar für jede Seite separat konfiguriert werden kann.<br><br>
'''Darstellung'''
<br>
[[Datei:mit Autodisplay.png|frame|none|Darstellung einer Navbar mit Autodisplay]]
<br>
[[Datei:ohne Autodisplay.png|frame|none|Darstellung einer Navbar ohne Autodisplay]]
<br>
Vorteile einer Navbar:<br>
<li> Bietet einen schnellen Überblick über die Struktur der Webseite<br>
<li> Jede Seite, bzw. Kategorie ist direkt über die Navbar ansteuerbar<br>
<li> Die Navbar ist für jede Seite separat konfigurierbar<br>
<li> Für jedes Navigationselement kann ein eigenes Submenü erstellt werden<br>
<li> Die aktuelle Seite kann farblich hinterlegt werden<br>
<li> In einer Navbar können Funktionen wie zum Beispiel Abmelden oder eine Such-Funktion eingebunden werden<br>
<li> Es können bis zu vier Navbars auf einer Seite verwendet werden (Standartmäßig werden aber nur zwei implementiert)<br>
<br>
Nachteile einer Navbar:<br>
<li> Muss für jede Seite einzeln Konfiguriert werden<br>
<li> Kann bei umfangreichen Seiten schnell unübersichtlich werden oder Überladen wirken<br>
<br>
[https://www.primefaces.org/primeng/#/menubar Web primeng-menubar-Link]

===Accordion===
<p>zum Seitenanfang [[#top]]</p>
<br>
'''Beschreibung'''<br>
Ein Accordion ist ein Navigationselement, welches dazu dient umfangreiche Listen mit Inhalten platzsparend auf Webseiten abzubilden.<br>
[https://www.primefaces.org/primeng/#/accordion Web primeng-accordion-Link]

'''Darstellung'''<br>
Einzelselektion<br>
[[Datei:akkordion-einzelselektion.png|frame|none]]<br>
Mehrfachselektion<br>
[[Datei:akkordion-mehrfachselektion.png|frame|none]]

===TabView===
<p>zum Seitenanfang [[#top]]</p>
<br>
Eine TabView ist eine Komponente zum einfachen Gruppieren von Inhalten auf einer Seite in Form von Registerkarten. Auf jeder Registerkarte können z.B. Formulare implementiert werden, die durch den Anwender abgearbeitet werden müssen. Durch die Verwendung von Registerkarten wird ein schnelles Navigieren zwischen den einzelnen Inhalten ermöglicht. Zudem können diese Registerkarten je nach Anfordeung konfuguriert werden.<br>

[https://www.primefaces.org/primeng/#/tabview Web primeng-tabview-Link]

[[Datei:tab-view.png|frame|none|Darstellung einer TabView]]<br>

Für openKONSEQUENZ wurden folgende Konfigurationen vorgegeben:<br>
<li>Valid: Grüner Balken in Tab (Nur wenn allen Steuerelementen im Content valid sind)
<li>Invalid: Roter Balken in Tab
<li>Neuen Tab dynamisch hinzufügen per + Tab
<li>Tab entfernen mit Lösch-Button im Content-Bereich
<li>Icons können je nach bedarf im Tab angezeigt werden
<li>Ausrichtung der Tabs (oben, unten, links, rechts)

<h1 style="page-break-before:always">Barrierefreiheit</h1>
<p>zum Seitenanfang [[#top]]</p>

Barrierefreiheit bezeichnet eine Gestaltung der baulichen Umwelt sowie von Informationsangeboten, Kommunikation usw. dergestalt, dass sie auch von Menschen mit Beeinträchtigungen ohne zusätzliche Hilfen genutzt und wahrgenommen werden können.

Um Menschen ein barrierefreies Arbeiten in der digitalen Welt zu ermöglichen, sind verschiedene Aspekte zu betrachten: Zum einen müssen Software und das heute nicht mehr wegzudenkende Internet barrierefrei gestaltet werden. Zum anderen muss einigen Menschen mit Behinderung überhaupt erst die Bedienung eines Computers ermöglicht werden durch unterstützende Technologien. Dies können beispielsweise Augensteuerung und Mundmaus bei körperlichen Behinderungen, oder Screenreader und Braillezeile bei Blinden sein. Weitere Beispiele stellen Technologien aus dem Bereich der Unterstützten Kommunikation dar, die Kommunikation in manchen Fällen überhaupt erst möglich machen.

Quelle: [ https://de.wikipedia.org/wiki/Barrierefreiheit ]

<h1 style="page-break-before:always">Internationalisierung</h1>
<p>zum Seitenanfang [[#top]]</p>

Internationalisierung bedeutet in der Informatik beziehungsweise in der Softwareentwicklung, ein Programm so zu gestalten, dass es leicht (ohne den Quellcode ändern zu müssen) an andere Sprachen und Kulturen angepasst werden kann.

Internationalisierung (englisch internationalization oder internationalisation) wird gerne mit dem Numeronym i18n abgekürzt (im englischen Wort Internationalization befinden sich 18 Buchstaben zwischen dem ersten Buchstaben I und dem letzten Buchstaben n). Hierunter fallen diejenigen Aufgaben, die der Entwickler/Programmierer eines Programms bewältigen muss. Dazu darf er zum Beispiel Beschreibungstexte nicht im Quellcode fest kodieren, sondern muss Variablen benutzen, die von einer Quelle zur Laufzeit eingelesen werden. Aber auch Datumsformatierungen und die sprachabhängige Oberflächengestaltung (z. B. kann Text unterschiedlich lang sein oder die Rechts-Nach-Links-Orientierung kann sich unterscheiden) gehören hierzu.

Im nächsten Schritt erfolgt die Lokalisierung (localization oder localisation), die als l10n abgekürzt wird (10 Buchstaben zwischen l und n). Ein Programm sollte im vorigen Schritt so gestaltet sein, dass diese Änderungen nicht mehr vom Programmierer durchgeführt werden müssen. Dieser Prozess bezeichnet die reine Übersetzung von zum Beispiel Texten in eine Landessprache.

Quelle: [ https://de.wikipedia.org/wiki/Internationalisierung_(Softwareentwicklung) ]

<h1 style="page-break-before:always">allg. Usability-Richtlinien</h1>
<p>zum Seitenanfang [[#top]]</p>

Software-Ergonomie (zur Wortherkunft siehe Software und Ergonomie) ist die Arbeit hin zu leicht verständlicher und schnell benutzbarer Software unter den gebotenen technischen Möglichkeiten und unter der Einhaltung definierter bzw. empirisch entstandener Standards und Styleguides. Die Software-Ergonomie ist ein Teilgebiet der Mensch-Computer-Interaktion, und ihr Ergebnis ist die Gebrauchstauglichkeit von Computerprogrammen.

Gegenstandsbereich der Software-Ergonomie im eigentlichen Sinne ist der arbeitende Mensch im Kontext (Softwarenutzung an Arbeitsplätzen). Allgemein wird heute die Benutzung von bzw. die Interaktion mit Computern betrachtet. Dies bedeutet die Berücksichtigung (neuro)psychologischer Aspekte beim Entwerfen der Software – wie dies methodisch auch die Ingenieurpsychologie anstrebt –, um eine optimale Mensch-Maschine-Schnittstelle zur Verfügung zu stellen. Dies soll sich in besonders leicht verständlichen funktionalen Einheiten ausdrücken (Bsp. einfache Dialoge bei Systemen mit GUI). Die Entwicklung gebrauchstauglicher Software wird im Rahmen des Usability-Engineering geleistet.

Quelle: [ https://de.wikipedia.org/wiki/Software-Ergonomie]

<h1 style="page-break-before:always">Paketierung der Styles (customized Bootstrap Template und individuelle allg. oK Styles)</h1>
<p>zum Seitenanfang [[#top]]</p><br>

Aufteilung der Stylse oK und eigene Unternehmensanpassungen.<br>
<li> '''ok-common.saas'''<br>
- Für Layout und globale Styles customized Bootstrap Template<br>
- ok-CI/CD<br>
<li> '''ok-vendor.saas'''<br>
- Nur für die Componenten-Styles von Drittanbietern<br>
(z.B.: primeng, ag-grid, c3.js, d3.js)<br>
<li> '''ok-components.saas'''<br>
- Nur für ok-Components<br>
(z.B.: NavBar)<br>
<br>
Achtung: Unternehmensanpassungen (CI/CD) werden in eigenen neuen saas Dateien beschrieben! Dabei müssen die entsprechenden saas-Variablen überschrieben werden.<br>

2019-07-08T12:45:12Z

Eschlenker: /* Filter */

zurück zur [[Hauptseite]]
zurück zur [[Styleguide]]

<h1 style="page-break-before:always">Zielsetzung und Abgrenzung</h1>
<p>zum Seitenanfang [[#top]]</p>
'''Zielsetzung:'''<br>
<li> Konsolidierung des UI StyleGuides<br>
<li> Evaluierung Tooling für den StyleGuide<br>
- IMIS<br>
- Wiki<br>
- sonst<br>
<li> Package Manager (npm)<br>
<li> Entwurfsentscheidungen ng Components vs Elements<br>
<li> Best of Konsolidierung der Steuerelemente aus den existierenden UserModulen<br>
<li> UX Vorgaben definieren<br>
<li> Paketierung der Styles (customized Bootstrap Template, eigenes allg. OK Stylesheet) als npm<br>
<br>
'''Abgrenzung:'''
<li> Vorerst kein Code (nur beispielhaft)<br>
<br>

<h1 style="page-break-before:always">Design</h1>
<p>zum Seitenanfang [[#top]]</p>

Um ein einheitliches Design zu gewährleisten, müssen die verwendeten Farben, Formen und Schriftarten auf allen User Interfaces dem vorgegebenen StyleGuide entsprechen. Diese Vorgaben werden in den folgenden Kapiteln beschrieben.
==Farben==
<p>zum Seitenanfang [[#top]]</p>

In diesem Kapitel wird das abgestimmte Farbschema (Hauptfarben, Farbverläufe, Sekundärfarben, u. s. w.) und deren Verwendung auf Webseiten und User Interfaces erläutert. Zusätzlich finden Sie hier Informationen über den jeweiligen Farbcode und die CSS Codierung.<br>

===Hauptfarben===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Primary
| <div style="color:#ffffff; background:#003a5f; padding: 1px 10px">#003a5f</div>
|-
| Success
| <div style="color:#ffffff; background:#80b300; padding: 1px 10px">#80b300</div>
|-
| Info
| <div style="color:#ffffff; background:#0080c0; padding: 1px 10px">#0080c0</div>
|-
| Default
| <div style="color:#000000; background:#ffffff; padding: 1px 10px">#ffffff</div>
|-
| Text
| <div style="color:#ffffff; background:#333333; padding: 1px 10px">#333333</div>
|}

===Farbverläufe===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
! CSS
|-
| Streifen Header
| <div style="color:#ffffff; background: linear-gradient(to right, rgba(121, 182, 28, 1) 0%, rgba(2, 129, 196, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0); padding: 1px 10px">#79b61c - #0281c4</div>
| <code>background: linear-gradient(to right, rgba(121, 182, 28, 1) 0%, rgba(2, 129, 196, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0);</code>
|-
| Balken Header
| <div style="color:#000000; background: linear-gradient(to right, rgba(232, 238, 231, 1) 0%, rgba(229, 237, 242, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0); padding: 1px 10px">#e8eee7- #e5edf2</div>
| <code>background: linear-gradient(to right, rgba(232, 238, 231, 1) 0%, rgba(229, 237, 242, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0);</code>
|}

===Flächen und Linien===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Hintergrund
| <div style="color:#000000; background:#f8fafd; padding: 1px 10px">#f8fafd</div>
|-
| Flächen/Tabellen
| <div style="color:#000000; background:#f5f8fc; padding: 1px 10px">#f5f8fc</div>
|-
| Hervorhebung/Eingabefelder/Tabellenzeilen
| <div style="color:#000000; background:#e9f0f9; padding: 1px 10px">#e9f0f9</div>
|-
| Linien
| <div style="color:#000000; background:#ccdbe6; padding: 1px 10px">#ccdbe6</div>
|-
| Umrandung Formularfelder
| <div style="color:#000000; background:#b7cbda; padding: 1px 10px">#b7cbda</div>
|}

===Sekundärfarben===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Warning
| <div style="color:#000000; background:#ffb200; padding: 1px 10px">#ffb200</div>
|-
| Danger
| <div style="color:#ffffff; background:#990000; padding: 1px 10px">#990000</div>
|-
| Disabled
| <div style="color:#ffffff; background:#567d96; padding: 1px 10px">#567d96</div>
|}

==Schriftarten==
<p>zum Seitenanfang [[#top]]</p>

Ebenso wie das Farbschema unterliegen auch die zu verwendenden Schriftarten dem abgestimmten Styleguide. Bei der Verwendung von zu vielen unterschiedlichen Schriftarten und Schriftgrößen kann das User Interface schnell unruhig wirken. Die gewählte Schriftart sollte gut lesbar und nicht zu klein sein.<br>

===Schriftfamilie===
<p>zum Seitenanfang [[#top]]</p>

Für openKONSEQUENZ wurde die Schriftart '''Source Sans Pro''' festgelegt. Diese Schriftart ist bei allen User Interfaces und Texten zu verwendet.

[https://github.com/adobe-fonts/source-sans-pro Download-Link]

[https://www.google.com/fonts/specimen/Source+Sans+Pro WebFont-Link]

==Rahmenabstände==
<p>zum Seitenanfang [[#top]]</p>

'''offener Punkt'''<br>

===Symbole===
<p>zum Seitenanfang [[#top]]</p>

In diesem Abschnitt werden allgemeine Bedien- und Status-Symbole beschrieben. Um ein einheitliches Aussehen der oK-Module sicherzustellen, sollen diese anwendungsübergreifend verwendet werden.
{| class="wikitable sortable"
|-class="hintergrundfarbe6"
!Symbol
!Bezeichnung
|-
|[[Datei:Filter.icon.svg|center|24px]]
|Filter
|-
|[[Datei:Menu.icon.svg|center|24px]]
|Menü
|-
|[[Datei:search.icon.svg|center|24px]]
|Suche
|-
|[[Datei:Warning.icon.svg|center|24px]]
|Warnung
|-
|[[Datei:Copy.png|center|24px]]
|Kopieren
|-
|[[Datei:pencil.png|center|24px]]
|Bearbeiten
|-
|[[Datei:save.png|center|24px]]
|Speichern
|-
|[[Datei:add.png|center|24px]]
|Hinzufügen
|-
|[[Datei:cog.png|center|24px]]
|Einstellung
|-
|[[Datei:print.png|center|24px]]
|Drucken
|-
|[[Datei:refresh.png|center|24px]]
|Refresch
|-
|[[Datei:trash.png|center|24px]]
|Löschen
|-
|[[Datei:question.png|center|24px]]
|Hilfe
|-
|[[Datei:cancel.png|center|24px]]
|Abbrechen
|}
<br>
Unter dem folgenden Link finden Sie weitere Symbole.<br>
[https://material.io/tools/icons/?style=baseline Web material-icons-Link]<br>
Lizenz: Apache license version 2.0 sollte/ist mit EPL kompatibel<br>

Die folgende Darstelung zeigt eine Beispiel-Menüleiste mit Icon, die zum Aufrufen von definierten Funktionen verwendet werden.
<br>
[[Datei:Menueleiste mit Icon.png|frame|none|Beispiel: Schaltflächen zum Aufrufen einer Funktion]]

===technische Vorschläge===
<p>zum Seitenanfang [[#top]]</p>

<h1 style="page-break-before:always">Komponenten</h1>
<p>zum Seitenanfang [[#top]]</p>

Komponenten sind die einzelnen Bestandteile einer grafischen Benutzeroberfläche /bzw. Benutzerschnittstelle. Im folgenden Abschnitt werden die unterschiedlichen Elemente kurz Erläutert.<br>

==Standard-Steuerelemente==
<p>zum Seitenanfang [[#top]]</p>

===Eingabefeld (text)===
<p>zum Seitenanfang [[#top]]</p>

Ein Eingabefeld ist das meinst verwendete Steuerelement einer grafischen Benutzeroberfläche und dient der Interaktion mit dem Benutzer. Diese Textfelder können Ein- oder auch Mehrzeilig sein und über die Tastatur können beliebige Zeichenketten eingegeben werden.<br>
'''Darstellung'''

'''inaktiv'''
[[Datei:Input.inactive.png|frame|none|inaktives Eingabefeld mit Beschriftung "Beschreibung*"]]

'''aktiv'''
[[Datei:Input.active.png|frame|none|aktives Eingabefeld mit Beschriftung "Beschreibung*"]]

===Führungstext (label)===
<p>zum Seitenanfang [[#top]]</p>

Führungstexte (englich: label) gehören auch zu den Steuerelementen einer grafischen Benutzeroberfläche. Diese werden in der Regel dazu verwendet um Ein- oder Ausgabefelder, aber auch Radio Button oder Checkboxen zu beschriften.<br>

===Schaltfläche (button)===
<p>zum Seitenanfang [[#top]]</p>

Ein häufig genutztes Steuerelement für grafische Benutzeroberflächen ist die Schaltfläche (englisch: button). Mittels dieser Schaltflächen können Formulare abgesendet oder definierte Aktionen durchgeführt werden.<br>
'''Farben'''
{| class="wikitable"
|-
! Schaltfläche
! Hintergrundfarbe
! Konturfarbe
! Textfarbe
|-
| <div class="bootstrap-button" style="background:#003a5f; border-color:#002a45; color:#ffffff;">Primary</div>
| <div class="color-value">#003a5f</div>
| <div class="color-value">#002a45</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#ffffff; border-color:#b7cbda; color:#0b325c;">Default</div>
| <div class="color-value">#ffffff</div>
| <div class="color-value">#b7cbda</div>
| <div class="color-value">#0b325c</div>
|-
| <div class="bootstrap-button" style="background:#80b300; border-color:#6e9a00; color:#ffffff;">Success</div>
| <div class="color-value">#80b300</div>
| <div class="color-value">#6e9a00</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#0080c0; border-color:#006fa7; color:#ffffff;">Info</div>
| <div class="color-value">#0080c0</div>
| <div class="color-value">#006fa7</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#ffb200; border-color:e6a000#; color:#ffffff;">Warning</div>
| <div class="color-value">#ffb200</div>
| <div class="color-value">#e6a000</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#990000; border-color:#800000; color:#ffffff;">Danger</div>
| <div class="color-value">#990000</div>
| <div class="color-value">#800000</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#337ab7; border-color:#2e6da4; color:#ffffff;">Disabled</div>
| <div class="color-value">#337ab7</div>
| <div class="color-value">#2e6da4</div>
| <div class="color-value">#ffffff</div>
|}
<br>
Die folgende Abbildung zeigt Beispielhaft eine Menüleiste mit Schaltflächen über diese definierte Funktionen aufgerufen werden können.
<br>
[[Datei:Beispiel-Button.png|frame|none|Beispiel: Schaltflächen zum Aufrufen einer Funktion]]

===Auswahl (check-box)===
<p>zum Seitenanfang [[#top]]</p>

Die Auswahl (englisch: checkbox) ist ein einfaches Steuerelement zur Eingabe von Ja/Nein-Werten, welche durch einen Mausklick aktiviert oder deaktiviert werden kann. Dieses Element findet meist auf Formularen Verwendung, wenn z. B. die Datenschutzbestimmungen oder die allgemeinen Geschäftsbedingungen anerkannt werden müssen.<br>
'''Darstellung'''
[[Datei:Check-box.png|frame|none|Auswahl mit [[Führungstext|Beschriftung]] "Gesamtnetz für Abregelung*"]]

<br>
Beispiel für die Verwendung von Auswahlfeldern.
<br>
[[Datei:checkbox.png|frame|none|Beispiel: Auswahlfelder (check-box)]]

===Auswahllisten (MultiSelect)===
<p>zum Seitenanfang [[#top]]</p>

Ein weiteres Steuerelement ist die Auswahlliste (englisch: multiselect) und dient der Auswahl von mehreren Objekten aus einer Liste. Die Darstellungsform solcher Auswahllisten kann variieren.<br>
Weitere Informationen finden sie unter den folgende Verlinkungen.
<br>
[https://www.primefaces.org/primeng/#/multiselect Web primeng-multiselect-Link]<br>
[https://www.primefaces.org/primeng/#/chipst Web primeng-chips-Link]<br>
<br>
'''Darstellung'''<br>

Beispiel einer Auswahlliste als '''Dropdown'''.
<br>
[[Datei:multiselect.png|frame|none|Multiselect]]

Die Attribute dieser Auswahlliste<br>
<li>können Text ohne Icon enthalten<br>
<li>können Text mit Icon enthalten<br>
<li>sind Filterbar<br>
<br>

Beispiel einer Auswahlliste als '''Chips'''.<br>
In einem Eingabefeld werden mehrere Werte in Form von Chips eingefügt.<br>
[[Datei:multiselect - chip.png|frame|none|Multiselect als Chips]]

Die Attribute dieser Auswahlliste können<br>
<li>Text ohne Icon enthalten<br>
<li>Text mit Icon enthalten<br>
<br>

'''Beide Steuerelemente können kombiniert eingesetzt werden'''<br>

===Dropdown-Liste (drop-down list)===
<p>zum Seitenanfang [[#top]]</p>

Die Dropdown-Liste (englisch: drop-down-list) ist ein Textfeld welches eine Auflistung von benutzerdefinierten Werte enthält aus der ein Anwender einen Eintrag auswählen kann. Diese Dropdown-Liste kann um weitere Elemente wie zum Beispiel ein Scrollbalken, eine Filterfunktion oder auch Icon erweitert werden. Zusätzlich besteht die Möglichkeit Einträge dieser Liste zu Gruppieren, um diese Übersichtlich zu Gestalten.<br><br>
'''Darstellung'''<br>
Darstellung einer '''inaktiven''' Dropdown-Liste.<br>
[[Datei:Drop-down-menu.inactive.png|frame|none|inaktive Dropdown-Liste mit Beschriftung "Grund der Abregelung*"]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste.<br>
[[Datei:Drop-down-menu.active.png|frame|none|aktive Dropdown-Liste mit Beschriftung "Grund der Abregelung*"]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste inklusive Icon, Filter und einem Scrollbalken.<br>
[[Datei:Dropdown mit Icon.png|frame|none|aktive Dropdown-Liste mit Icon und Filter]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste inklusive Gruppierung.<br>
[[Datei:Dropdown mit Gruppierung.png|frame|none|aktive Dropdown-Liste mit Gruppierung]]
[https://www.primefaces.org/primeng/#/dropdown Web primeng-dropdown-Link]<br>

===Kalender (calendar)===
<p>zum Seitenanfang [[#top]]</p>

In der Regel umfasst ein Datums- und / oder Uhrzeitfeld eine Kalenderauswahl, so das ein Datum nicht händisch als String eingegeben werden muss. Durch klick in das Textfeld, öffnet sich ein Kalenderfenster, aus dem das gewünschte Datum und die Uhrzeit auswählt werden kann. <br>
'''Darstellung'''
[[Datei:Calendar.png|frame|none|Kalender mit Beschriftung "Startzeitpunkt*"]]
[https://www.primefaces.org/primeng/#/calendar Web primeng-calendar-Link]<br>

===Filter===
<p>zum Seitenanfang [[#top]]</p>
Eine Filterfunktion dient dazu, dass aus einem großem Datenbestand nur bestimmte Datensätze anhand verschiedener Kriterien in einer Ergebnisliste angezeigt werden.<br>
Beispiel für die Verwendung von Filtern.
<br>
[[Datei:Filter.png|frame|none|Beispiel: Filter mit Auswahlfeldern]]

===Netzspezifische Icons===
<p>zum Seitenanfang [[#top]]</p>

'''offener Punkt, Klärungsbedarf'''<br>

<li>Icons werden von der e-netz bereitgestellt<br>
<li>Lizenz wahrscheinlich MIT<br>
<li>Muss mit Frau Wittek besprochen werden/bzw. Unterstützung<br>

==Steuerelemente für Formulare==
<p>zum Seitenanfang [[#top]]</p>
<br>
Zur Erfassung von Daten werden Eingabe- und Auswahlfelder bereitgestellt, in die ein Benutzer Werte über die Tastatur oder eine Werteliste eingeben kann oder Auswahlknöpfe, die der Benutzer mit der Maus beeinflusst. Hierbei werden Pflichtfelder (müssen gefüllt werden und sind mit einem Sternchen entsprechend gekennzeichnet) und Kann-Felder (können gefüllt werden) unterschieden. In der folgenden Tabelle finden Sie eine Auflisten der möglichen Steuerelemente für Formulare. Auf die einzelnen Elemente wird in den folgenden Abschnitten weiter eingegangen.<br>

{| class="wikitable"
|-
! Pflichtfeld Typ
! Visualisierung
|-
| text invalid
| [[Datei:Steuerelemente fuer Formular 1.png]]
|-
| text valid
| [[Datei:Steuerelemente fuer Formular 2.png]]
|-
| numeric valid
| [[Datei:Steuerelemente fuer Formular-numeric.png]]
|-
| date,datetime,date range valid
| [[Datei:Steuerelemente fuer Formular 3.png]]
|-
| Gesperrt
| [[Datei:Steuerelemente fuer Formular 4.png]]
|-
| Drop-Down valid
| [[Datei:Steuerelemente fuer Formular 5.png]]
|-
| Validierung beim Verlassen eines Feldes
| [[Datei:Steuerelemente fuer Formular 6.png]]
|}

==Steuerelement Kalender==
<p>zum Seitenanfang [[#top]]</p>
<br>
[https://www.primefaces.org/primeng/#/calendar Web primeng-calendar-Link]<br>

'''Darstellung'''
[[Datei:Kalender-Ansichten.png|frame|none|Darstellung der Kalenderansicht für Monat, Woche und Tag]]
<br>
In der Kalenderfunktion stehen dem Benutzer folgende Ansichten zur Verfügung:<br>
<li> Monatsansicht<br>
<li> Wochenansicht<br>
<li> Arbeitswochenansicht<br>
<li> Tagesansicht<br><br>

Bei der Kalenderfunktion hat der Anwender die Möglichkeit von durch einen Klick auf die (Arbeits-)Wochen- oder Tagesansicht zu wechseln. Durch Klicken mit der Maustaste in einen freien Zeitraum können neue Termine erfasst werden. Für eine neue Terminspanne markieren Sie einen freien Bereich durch SHIFT und Klick mit der linken Maustaste und erfassen für diesen Zeitraum einen Termin. Zum Editieren von bestehen den Terminen genügt ebenfalls ein Klick mit der Maustaste. <br>
Über die ‘‘‘Drag & Drop‘‘‘ Funktion können Termine in der Monatsansicht oder der Wochenansicht in einen anderen Wochentag verschoben werden. Um einen Termin zeitlich innerhalb eines Tages zu verschieben und Zeitspanne anzupassen, müssen Sie sich in der Wochenansicht oder der Tagesansicht befinden.<br>
<br>
Folgende Funktionen stehen zusätzlich zur Verfügung:<br>
<li> Termine ICS-Format exportieren (generell in der Applikation!)<br>
<li> Filtern über Kalendereinträge (ArrayList)<br>
<li> Unterschiedliche farbliche Darstellung einzelner Termine (Termin Template)<br>

==Steuerelement Grid==
<p>zum Seitenanfang [[#top]]</p>
<li> Buttons zum Absprung in Detailmaske (Lese/Bearbeitung), Stornierbutton in die erste Linke Spalte im Grid<br>
<li> Absprung durch Doppelklick in Detailmaske (Lese/Bearbeiten)<br>
<li> Datensatz hinzufügen-Button rechts oberhalb des Grid´s<br>
<li> Alternating row color<br>
<li> Hovereffekt (Zeile)<br>
<li> Einzelselektion und Mehrfachselektion mit Strg-Taste, Shift-Taste<br>
<li> Hovereffekt in Spaltenkopf unterstreichen und Mauscursor Hand (Rückmeldung für mögliche Aktionen an den Benutzer)<br>
<li> Klick auf Spaltenkopf, Sortierung ASC, DESC<br>
<li> Merfachsortierung durch klicken der Shift-Taste<br>
<li> Filterzeile als eigene Zeile direkt unterhalb des Spaltenkopfs<br>
<li> Virtual scrolling anstatt Pagination<br>
<li> Spaltenkopf mit Filter und Fußzeile bleiben beim scrollen stehen<br>
<li> Quickfiler (optional)<br>
<li> Externe Filter (optional) aber als Toggle-Switch<br>
<li> Stylevorgaben kommen per ok-vendor.sass !!!!!!!!!<br>
- Schriftrart<br>
- Schriftgröße<br>
- Zeilenhöhe<br>
- Farben<br>
- Style fürs Grid<br>
<li> Kompaktes Grid definieren. Spaltengröße sinnvoll definieren<br><br>
[https://www.ag-grid.com/ Web ag-grid-Link]<br>

==Steuerelement Heatmap / Kartendarstellung==
<p>zum Seitenanfang [[#top]]</p>
<br>
Ermöglicht das Einbinden von zweidimensionalen Karten-Elementen auf Webseiten, Mobile Apps sowie für Navigationen. Diese Kartendarstellungen sind von Standortdaten angetrieben und bieten zusätzlich Echtzeit-Updates. Durch einen Entwickler können diese vollständig angepasst und konfiguriert werden. Das Hinzufügen von Points of Interest, Live-Standortdaten und Persistenz globaler Objekte ist ebenfalls möglich.<br>

<li>[https://www.mapbox.com/ Web mapbox-Link]<br>
<li>[https://openlayers.org/ Web OpenLayers-Link]<br>
- Unterstützt WMS-Services (Web Map Service)<br>
- OpenSreetMap muss Lizenz geklärt werden! ODbL.<br><br>
'''Lizenzkompatibilität muss beim Projekt geklärt werden'''<br>

<br>
[[Datei:Karten-Beispiel.png|frame|none|Beispiel einer Kartenansicht]]

<h1 style="page-break-before:always">Layout</h1>
<p>zum Seitenanfang [[#top]]</p>

==Tabellen/Listen==
<p>zum Seitenanfang [[#top]]</p>

===Tabelle===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Table.png|frame|none|Darstellung einer Tabelle]]

'''Elemente'''
[[Datei:Table.labeled.png|frame|none|Elemente einer Tabelle]]
1 Tabellenkopf<br>
1.1 Spaltenüberschrift<br>
1.2 Sortiereinstellungen<br>
1.3 Spaltenkopf<br>
1.4 Spaltenfilter<br>
1.5 Spaltensortierung<br>
2 Tabelleninhalt<br>
3 Tabellenfuß<br>
3.1 Spaltenfuß<br>

===blätterbare Tabelle===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Pageable-table.png|frame|none|Darstellung einer blätterbaren Tabelle]]

'''Elemente'''
[[Datei:Pageable-table.labeled.png|frame|none|Elemente einer blätterbaren Tabelle]]
1 Tabellenkopf<br>
1.1 Spaltenüberschrift<br>
1.2 Sortiereinstellungen<br>
1.3 Spaltenkopf<br>
1.4 Spaltenfilter<br>
1.5 Sortierung<br>
2 Tabelleninhalt<br>
3 Seitennavigation<br>

==oK-Steuerelemente==
<p>zum Seitenanfang [[#top]]</p>

===Topologie-Baum===
<p>zum Seitenanfang [[#top]]</p>

Das Steuerelement bietet die Möglichkeit, [[Topologie (Strom)| topologische]] Zusammenhänge eines Stromnetzes hierarchisch darzustellen.
Der Topologie-Baum ist als gemeinsames Steuerelment in unterschiedlichen ok-Modulen wiederverwendbar und definiert eine standardisierte Sicht. Die generell möglichen, darstellbaren topologischen Elemente richten sich nach den in oK definierten Elementen.

Die Klärung der Frage, wie ein Netz hierarchisch dargestellt werden kann und welche Elemente des Netzes tatsächlich angezeigt und ausgewählt werden können, ist nicht Aufgabe dieses Steuerelementes. Dies ist Aufgabe der darunter liegenden Anwendung und kann aufgrund fachlicher Aspekte unterschiedlich ausgeprägt sein.<br><br>
'''Elemente'''
[[Datei:TopologyTree.labeled.png|frame|none|Elemente eines Topologie-Baums]]

1 Steuerleiste<br>
1.1 Suchbegriff<br>
Im [[Eingabefeld]] "Suchbegriff" können Begriffe eingeben werden, nach denen in der zugrundeliegenden Topologie gesucht werden kann.
Die Begriffe können folgende [https://de.wikipedia.org/wiki/Wildcard_%28Informatik%29 Platzhalter (Wildcard)] beinhalten:
{| class="wikitable sortable"
|-class="hintergrundfarbe6"
!Platzhalter
!Bezeichnung
!Verwendung
|-
|?
|Fragezeichen
|Platzhalter für genau ein Zeichen
|-
|*
|Sternchen
|Platzhalter für beliebig viele (auch null) Zeichen
|-
|#
|Doppelkreuz
|Platzhalter für einen numerischen Wert
|}
1.2 Suchen<br>
Durch Drücken der [[Schaltfläche]] "Suchen", wird nach dem angegebenen Suchbegriff gesucht. Ist die Suche erfolgreich, werden alle Elemente im Navigationsbereich ausgewählt (Mehrfachselektion), die dem Suchbegriff entsprechen. Gleichzeit wird zum ersten Element aus der Ergebnismenge gesprungen.<br>

1.3 Einstellungen'''<br>
Über die Schaltfläche "Einstellungen" können Filterkriterien definiert werden, die die Anzeige auf passende topologische Elemente im Navigationsbereich einschränken.<br/>
<div style="background:#fff0d0;border-color:#ffb200;border-radius:5px;border-style:solid;border-width:1px;margin:16px;padding:10px">[[Datei:Warning-yellow.icon.svg|24px]] Die Definition möglicher Filterkriterien und Regelwerke ist Teil späterer Festlegungen.</div>

2 Statusleiste<br>
Die Statusleiste zeigt allgemeine Informationen zu den im Navigationsbereich angezeigten Elementen an.<br>
2.1 Datum<br>
Das Erstellungsdatum (Stand) der zugrundeliegenden Daten, auf dem die Anzeige im Navigationsbereich basiert.<br>
2.2 Uhrzei<br>
Die Erstellungsuhrzeit(Stand) der zugrundeliegenden Daten, auf dem die Anzeige im Navigationsbereich basiert.<br>
2.3 Filter<br>
Das Symbol "Filter" zeigt an, ob mindestens ein Filter aktiviert ist.<br>
2.4 Benachrichtigung<br>
Im Benachrichtigungsbereich können verschiedene Symbole angezeigt werden, die über zusätzliche Hinweise informieren. In Beispiel ist liegt hier eine Warnungmeldung vor.<br>

3 Navigationsbereich<br>
Im Navigationsbereich werden topologische Zusammenhänge in einer baumartigen Struktur angezeigt. Die Ausprägung der Topologie als Hierarchie ist Aufgabe der jeweiligen Anwendung.<br>

'''Ordnung/Sortierreihenfolge'''<br>

<div style="background:#fff0d0;border-color:#ffb200;border-radius:5px;border-style:solid;border-width:1px;margin:16px;padding:10px">[[Datei:Warning-yellow.icon.svg|24px]]<br>
- Was für ein Steuerelement nutzt da BTC? <br>
- Wir müssten da einen Link bereitstellen ggf. mit Matthias Rohr oder Felix Korb besprechen <br></div>

==Definition von ok HTML Elementen==
<p>zum Seitenanfang [[#top]]</p>

ok HTML Elemente müssen durch npm paketiert und oK-konform gestyled werden.<br>

Zu den oK HTML Elemente zählen:<br>
<li> Date (primeng)<br>
<li> DateTime (primeng)<br>
<li> DateRange (primeng)<br>
<li> komplexe DropDown (primeng) bspw. Icons, Tabelle, Gruppen<br>
<li> Grid (ag-grid)<br>
<li> Gantt (zurzeit nichts geeignetes gefunden)<br>
<li> Kalender (primeng)<br>
<li> Charts (primeng, c3js, d3js)<br>
<li> Navbar (ok-element)<br>
<li> Modale Dialoge (primeng) sollten vermieden werden<br>
<li> Tabs (primeng)<br>
<li> Akkordion (primeng)<br>
<li> MultiSelect (primeng)<br>
<li> Chips (primeng)<br>
<li> Editor (primeng)<br>
<li> Messages toast (primeng)<br>
<br>
ACHTUNG: Nicht definierte ok Steuerlemente immer erst bei primeng schauen!<br>
<br>
Weitere Steuerlemente müssen über SaaS Themeable sein!<br>
<li> [https://www.primefaces.org/primeng/#/ Web primefaces - Link]<br>
<li> [https://www.ag-grid.com Web ag-grid - Link]<br>
<li> [https://c3js.org/ Web c3js.org - Link]<br>
<li> [https://d3js.org/ Web d3js.org - Link]<br>

==Definition von Standard HTML Elementen==
<p>zum Seitenanfang [[#top]]</p>

Standard HTML Elemente müssen nicht durch npm paketiert werden.<br>
Es ist ausreichend, ok-Styles als npm Pakete zu definieren und auf den HTML Elementen anzuwenden.<br>
<br>
Zu den Standard HTML Elemente zählen:<br>

<li> Textfelder<br>
<li> Validation<br>
<li> Passwort<br>
<li> Simple DropDown Listen<br>
<li> CheckBox<br>
<li> Buttons<br>
<li> Button Groups<br>
<li> Radio Buttons<br>
<li> File Upload<br>
<li> Numerics<br>
<li> (Drag&Drop)<br>
<li> List Group<br>
<li> Tables (wenn keine besonder Funktionalität, sonst ag-grid)<br>
<br>
Komponenten aus https://getbootstrap.com<br>

==Portal==
<p>zum Seitenanfang [[#top]]</p>

==Standarddialoge==
<p>zum Seitenanfang [[#top]]</p>

===Eingabedialog===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Input-dialog.png|frame|none|Darstellung eines Eingabedialogs]]
'''Elemente'''
[[Datei:Input-dialog.labeled.png|frame|none|Elemente eines Eingabedialogs]]
1 Titel<br>
2 Anzeige-/Eingabebereich<br>
3 Steuerleiste<br>

===Benachrichtigungsdialog===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:notification-dialog.png|frame|none|Darstellung eines Benachrichtigungsdialogs]]
'''Elemente'''
[[Datei:notification-dialog.labeled.png|frame|none|Elemente eines Benachrichtigungsdialogs]]
1 Titel<br>
2 Benachrichtigung<br>
3 Steuerleiste<br>

===Wizard===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Wizard.png|frame|none|Darstellung eines Wizards]]

'''Elemente'''
[[Datei:Wizard.labeled.png|frame|none|Elemente eines Wizards]]
1 Überschrift<br>
2 Bearbeitungsschritte<br>
3 Inhalt<br>
4 Steuerleiste<br>

===Message Toast===
<p>zum Seitenanfang [[#top]]</p>
<br>
Ein Message Toast ist ein kurzer Hinweistex welcher als Popup eingeblendet und nach einem Moment wieder ausgeblendet wird, ohne das zwangsläufig eine Benutzeraktion erfolgen muss.<br>
Die Eigenschaften eines Toast können beliebig konfiguriert werden.<br>

'''Darstellung'''
[[Datei:Message toast.png|frame|none|Darstellung eines Message Toast]]<br>

'''Für open KONSEQUENZ wurden folgende Konfigurationen abgestimmt'''<br>
<li>Toasts erscheinen oben rechts<br>
<li>Verschwinden nach rechts oben<br>
<li>Automatisches verschwinden nach:<br>
   Erfolgreich: 2 Sekunden<br>
   Info: Muss manuell geschlossen werden<br>
   Warnung: 7 Sekunden<br>
   Fehler: 7 Sekunden<br>
<li>Messages: Erfolgreich, Fehler, Info, Warnung<br>
<li>Maximal drei Zeilen Content in einem Toast<br>
<li>Defaultfarben verwenden<br><br>

[https://www.primefaces.org/primeng/#/toast Web primeng-Toast-Link]

==Navigationselemente==
<p>zum Seitenanfang [[#top]]</p>

<br>Um das Navigieren innerhalb einer Web-Seite zu vereinfachen gibt es unterschiedliche Navigationselemente, diese werden in den folgenden Kapiteln kurz erläutert.<br>

===Navigation Bar (Navbar)===
<p>zum Seitenanfang [[#top]]</p>
<br>
Das Navbar-Element ist ein permanent sichtbares Navigationselement, welches horizontal oder vertikal auf einer Webseite angeordnet werden kann und dem Benutzer die
Möglichkeit bietet, wichtige Seiten direkt aufzurufen. Der Vorteil ist, dass eine Navbar für jede Seite separat konfiguriert werden kann.<br><br>
'''Darstellung'''
<br>
[[Datei:mit Autodisplay.png|frame|none|Darstellung einer Navbar mit Autodisplay]]
<br>
[[Datei:ohne Autodisplay.png|frame|none|Darstellung einer Navbar ohne Autodisplay]]
<br>
Vorteile einer Navbar:<br>
<li> Bietet einen schnellen Überblick über die Struktur der Webseite<br>
<li> Jede Seite, bzw. Kategorie ist direkt über die Navbar ansteuerbar<br>
<li> Die Navbar ist für jede Seite separat konfigurierbar<br>
<li> Für jedes Navigationselement kann ein eigenes Submenü erstellt werden<br>
<li> Die aktuelle Seite kann farblich hinterlegt werden<br>
<li> In einer Navbar können Funktionen wie zum Beispiel Abmelden oder eine Such-Funktion eingebunden werden<br>
<li> Es können bis zu vier Navbars auf einer Seite verwendet werden (Standartmäßig werden aber nur zwei implementiert)<br>
<br>
Nachteile einer Navbar:<br>
<li> Muss für jede Seite einzeln Konfiguriert werden<br>
<li> Kann bei umfangreichen Seiten schnell unübersichtlich werden oder Überladen wirken<br>
<br>
[https://www.primefaces.org/primeng/#/menubar Web primeng-menubar-Link]

===Accordion===
<p>zum Seitenanfang [[#top]]</p>
<br>
'''Beschreibung'''<br>
Ein Accordion ist ein Navigationselement, welches dazu dient umfangreiche Listen mit Inhalten platzsparend auf Webseiten abzubilden.<br>
[https://www.primefaces.org/primeng/#/accordion Web primeng-accordion-Link]

'''Darstellung'''<br>
Einzelselektion<br>
[[Datei:akkordion-einzelselektion.png|frame|none]]<br>
Mehrfachselektion<br>
[[Datei:akkordion-mehrfachselektion.png|frame|none]]

===TabView===
<p>zum Seitenanfang [[#top]]</p>
<br>
Eine TabView ist eine Komponente zum einfachen Gruppieren von Inhalten auf einer Seite in Form von Registerkarten. Auf jeder Registerkarte können z.B. Formulare implementiert werden, die durch den Anwender abgearbeitet werden müssen. Durch die Verwendung von Registerkarten wird ein schnelles Navigieren zwischen den einzelnen Inhalten ermöglicht. Zudem können diese Registerkarten je nach Anfordeung konfuguriert werden.<br>

[https://www.primefaces.org/primeng/#/tabview Web primeng-tabview-Link]

[[Datei:tab-view.png|frame|none|Darstellung einer TabView]]<br>

Für openKONSEQUENZ wurden folgende Konfigurationen vorgegeben:<br>
<li>Valid: Grüner Balken in Tab (Nur wenn allen Steuerelementen im Content valid sind)
<li>Invalid: Roter Balken in Tab
<li>Neuen Tab dynamisch hinzufügen per + Tab
<li>Tab entfernen mit Lösch-Button im Content-Bereich
<li>Icons können je nach bedarf im Tab angezeigt werden
<li>Ausrichtung der Tabs (oben, unten, links, rechts)

<h1 style="page-break-before:always">Barrierefreiheit</h1>
<p>zum Seitenanfang [[#top]]</p>

Barrierefreiheit bezeichnet eine Gestaltung der baulichen Umwelt sowie von Informationsangeboten, Kommunikation usw. dergestalt, dass sie auch von Menschen mit Beeinträchtigungen ohne zusätzliche Hilfen genutzt und wahrgenommen werden können.

Um Menschen ein barrierefreies Arbeiten in der digitalen Welt zu ermöglichen, sind verschiedene Aspekte zu betrachten: Zum einen müssen Software und das heute nicht mehr wegzudenkende Internet barrierefrei gestaltet werden. Zum anderen muss einigen Menschen mit Behinderung überhaupt erst die Bedienung eines Computers ermöglicht werden durch unterstützende Technologien. Dies können beispielsweise Augensteuerung und Mundmaus bei körperlichen Behinderungen, oder Screenreader und Braillezeile bei Blinden sein. Weitere Beispiele stellen Technologien aus dem Bereich der Unterstützten Kommunikation dar, die Kommunikation in manchen Fällen überhaupt erst möglich machen.

Quelle: [ https://de.wikipedia.org/wiki/Barrierefreiheit ]

<h1 style="page-break-before:always">Internationalisierung</h1>
<p>zum Seitenanfang [[#top]]</p>

Internationalisierung bedeutet in der Informatik beziehungsweise in der Softwareentwicklung, ein Programm so zu gestalten, dass es leicht (ohne den Quellcode ändern zu müssen) an andere Sprachen und Kulturen angepasst werden kann.

Internationalisierung (englisch internationalization oder internationalisation) wird gerne mit dem Numeronym i18n abgekürzt (im englischen Wort Internationalization befinden sich 18 Buchstaben zwischen dem ersten Buchstaben I und dem letzten Buchstaben n). Hierunter fallen diejenigen Aufgaben, die der Entwickler/Programmierer eines Programms bewältigen muss. Dazu darf er zum Beispiel Beschreibungstexte nicht im Quellcode fest kodieren, sondern muss Variablen benutzen, die von einer Quelle zur Laufzeit eingelesen werden. Aber auch Datumsformatierungen und die sprachabhängige Oberflächengestaltung (z. B. kann Text unterschiedlich lang sein oder die Rechts-Nach-Links-Orientierung kann sich unterscheiden) gehören hierzu.

Im nächsten Schritt erfolgt die Lokalisierung (localization oder localisation), die als l10n abgekürzt wird (10 Buchstaben zwischen l und n). Ein Programm sollte im vorigen Schritt so gestaltet sein, dass diese Änderungen nicht mehr vom Programmierer durchgeführt werden müssen. Dieser Prozess bezeichnet die reine Übersetzung von zum Beispiel Texten in eine Landessprache.

Quelle: [ https://de.wikipedia.org/wiki/Internationalisierung_(Softwareentwicklung) ]

<h1 style="page-break-before:always">allg. Usability-Richtlinien</h1>
<p>zum Seitenanfang [[#top]]</p>

Software-Ergonomie (zur Wortherkunft siehe Software und Ergonomie) ist die Arbeit hin zu leicht verständlicher und schnell benutzbarer Software unter den gebotenen technischen Möglichkeiten und unter der Einhaltung definierter bzw. empirisch entstandener Standards und Styleguides. Die Software-Ergonomie ist ein Teilgebiet der Mensch-Computer-Interaktion, und ihr Ergebnis ist die Gebrauchstauglichkeit von Computerprogrammen.

Gegenstandsbereich der Software-Ergonomie im eigentlichen Sinne ist der arbeitende Mensch im Kontext (Softwarenutzung an Arbeitsplätzen). Allgemein wird heute die Benutzung von bzw. die Interaktion mit Computern betrachtet. Dies bedeutet die Berücksichtigung (neuro)psychologischer Aspekte beim Entwerfen der Software – wie dies methodisch auch die Ingenieurpsychologie anstrebt –, um eine optimale Mensch-Maschine-Schnittstelle zur Verfügung zu stellen. Dies soll sich in besonders leicht verständlichen funktionalen Einheiten ausdrücken (Bsp. einfache Dialoge bei Systemen mit GUI). Die Entwicklung gebrauchstauglicher Software wird im Rahmen des Usability-Engineering geleistet.

Quelle: [ https://de.wikipedia.org/wiki/Software-Ergonomie]

<h1 style="page-break-before:always">Paketierung der Styles (customized Bootstrap Template und individuelle allg. oK Styles)</h1>
<p>zum Seitenanfang [[#top]]</p><br>

Aufteilung der Stylse oK und eigene Unternehmensanpassungen.<br>
<li> '''ok-common.saas'''<br>
- Für Layout und globale Styles customized Bootstrap Template<br>
- ok-CI/CD<br>
<li> '''ok-vendor.saas'''<br>
- Nur für die Componenten-Styles von Drittanbietern<br>
(z.B.: primeng, ag-grid, c3.js, d3.js)<br>
<li> '''ok-components.saas'''<br>
- Nur für ok-Components<br>
(z.B.: NavBar)<br>
<br>
Achtung: Unternehmensanpassungen (CI/CD) werden in eigenen neuen saas Dateien beschrieben! Dabei müssen die entsprechenden saas-Variablen überschrieben werden.<br>

Styleguide (in Bearbeitung)

2019-07-08T12:44:57Z

Eschlenker: /* Kalender (calendar) */

zurück zur [[Hauptseite]]
zurück zur [[Styleguide]]

<h1 style="page-break-before:always">Zielsetzung und Abgrenzung</h1>
<p>zum Seitenanfang [[#top]]</p>
'''Zielsetzung:'''<br>
<li> Konsolidierung des UI StyleGuides<br>
<li> Evaluierung Tooling für den StyleGuide<br>
- IMIS<br>
- Wiki<br>
- sonst<br>
<li> Package Manager (npm)<br>
<li> Entwurfsentscheidungen ng Components vs Elements<br>
<li> Best of Konsolidierung der Steuerelemente aus den existierenden UserModulen<br>
<li> UX Vorgaben definieren<br>
<li> Paketierung der Styles (customized Bootstrap Template, eigenes allg. OK Stylesheet) als npm<br>
<br>
'''Abgrenzung:'''
<li> Vorerst kein Code (nur beispielhaft)<br>
<br>

<h1 style="page-break-before:always">Design</h1>
<p>zum Seitenanfang [[#top]]</p>

Um ein einheitliches Design zu gewährleisten, müssen die verwendeten Farben, Formen und Schriftarten auf allen User Interfaces dem vorgegebenen StyleGuide entsprechen. Diese Vorgaben werden in den folgenden Kapiteln beschrieben.
==Farben==
<p>zum Seitenanfang [[#top]]</p>

In diesem Kapitel wird das abgestimmte Farbschema (Hauptfarben, Farbverläufe, Sekundärfarben, u. s. w.) und deren Verwendung auf Webseiten und User Interfaces erläutert. Zusätzlich finden Sie hier Informationen über den jeweiligen Farbcode und die CSS Codierung.<br>

===Hauptfarben===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Primary
| <div style="color:#ffffff; background:#003a5f; padding: 1px 10px">#003a5f</div>
|-
| Success
| <div style="color:#ffffff; background:#80b300; padding: 1px 10px">#80b300</div>
|-
| Info
| <div style="color:#ffffff; background:#0080c0; padding: 1px 10px">#0080c0</div>
|-
| Default
| <div style="color:#000000; background:#ffffff; padding: 1px 10px">#ffffff</div>
|-
| Text
| <div style="color:#ffffff; background:#333333; padding: 1px 10px">#333333</div>
|}

===Farbverläufe===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
! CSS
|-
| Streifen Header
| <div style="color:#ffffff; background: linear-gradient(to right, rgba(121, 182, 28, 1) 0%, rgba(2, 129, 196, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0); padding: 1px 10px">#79b61c - #0281c4</div>
| <code>background: linear-gradient(to right, rgba(121, 182, 28, 1) 0%, rgba(2, 129, 196, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0);</code>
|-
| Balken Header
| <div style="color:#000000; background: linear-gradient(to right, rgba(232, 238, 231, 1) 0%, rgba(229, 237, 242, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0); padding: 1px 10px">#e8eee7- #e5edf2</div>
| <code>background: linear-gradient(to right, rgba(232, 238, 231, 1) 0%, rgba(229, 237, 242, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0);</code>
|}

===Flächen und Linien===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Hintergrund
| <div style="color:#000000; background:#f8fafd; padding: 1px 10px">#f8fafd</div>
|-
| Flächen/Tabellen
| <div style="color:#000000; background:#f5f8fc; padding: 1px 10px">#f5f8fc</div>
|-
| Hervorhebung/Eingabefelder/Tabellenzeilen
| <div style="color:#000000; background:#e9f0f9; padding: 1px 10px">#e9f0f9</div>
|-
| Linien
| <div style="color:#000000; background:#ccdbe6; padding: 1px 10px">#ccdbe6</div>
|-
| Umrandung Formularfelder
| <div style="color:#000000; background:#b7cbda; padding: 1px 10px">#b7cbda</div>
|}

===Sekundärfarben===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Warning
| <div style="color:#000000; background:#ffb200; padding: 1px 10px">#ffb200</div>
|-
| Danger
| <div style="color:#ffffff; background:#990000; padding: 1px 10px">#990000</div>
|-
| Disabled
| <div style="color:#ffffff; background:#567d96; padding: 1px 10px">#567d96</div>
|}

==Schriftarten==
<p>zum Seitenanfang [[#top]]</p>

Ebenso wie das Farbschema unterliegen auch die zu verwendenden Schriftarten dem abgestimmten Styleguide. Bei der Verwendung von zu vielen unterschiedlichen Schriftarten und Schriftgrößen kann das User Interface schnell unruhig wirken. Die gewählte Schriftart sollte gut lesbar und nicht zu klein sein.<br>

===Schriftfamilie===
<p>zum Seitenanfang [[#top]]</p>

Für openKONSEQUENZ wurde die Schriftart '''Source Sans Pro''' festgelegt. Diese Schriftart ist bei allen User Interfaces und Texten zu verwendet.

[https://github.com/adobe-fonts/source-sans-pro Download-Link]

[https://www.google.com/fonts/specimen/Source+Sans+Pro WebFont-Link]

==Rahmenabstände==
<p>zum Seitenanfang [[#top]]</p>

'''offener Punkt'''<br>

===Symbole===
<p>zum Seitenanfang [[#top]]</p>

In diesem Abschnitt werden allgemeine Bedien- und Status-Symbole beschrieben. Um ein einheitliches Aussehen der oK-Module sicherzustellen, sollen diese anwendungsübergreifend verwendet werden.
{| class="wikitable sortable"
|-class="hintergrundfarbe6"
!Symbol
!Bezeichnung
|-
|[[Datei:Filter.icon.svg|center|24px]]
|Filter
|-
|[[Datei:Menu.icon.svg|center|24px]]
|Menü
|-
|[[Datei:search.icon.svg|center|24px]]
|Suche
|-
|[[Datei:Warning.icon.svg|center|24px]]
|Warnung
|-
|[[Datei:Copy.png|center|24px]]
|Kopieren
|-
|[[Datei:pencil.png|center|24px]]
|Bearbeiten
|-
|[[Datei:save.png|center|24px]]
|Speichern
|-
|[[Datei:add.png|center|24px]]
|Hinzufügen
|-
|[[Datei:cog.png|center|24px]]
|Einstellung
|-
|[[Datei:print.png|center|24px]]
|Drucken
|-
|[[Datei:refresh.png|center|24px]]
|Refresch
|-
|[[Datei:trash.png|center|24px]]
|Löschen
|-
|[[Datei:question.png|center|24px]]
|Hilfe
|-
|[[Datei:cancel.png|center|24px]]
|Abbrechen
|}
<br>
Unter dem folgenden Link finden Sie weitere Symbole.<br>
[https://material.io/tools/icons/?style=baseline Web material-icons-Link]<br>
Lizenz: Apache license version 2.0 sollte/ist mit EPL kompatibel<br>

Die folgende Darstelung zeigt eine Beispiel-Menüleiste mit Icon, die zum Aufrufen von definierten Funktionen verwendet werden.
<br>
[[Datei:Menueleiste mit Icon.png|frame|none|Beispiel: Schaltflächen zum Aufrufen einer Funktion]]

===technische Vorschläge===
<p>zum Seitenanfang [[#top]]</p>

<h1 style="page-break-before:always">Komponenten</h1>
<p>zum Seitenanfang [[#top]]</p>

Komponenten sind die einzelnen Bestandteile einer grafischen Benutzeroberfläche /bzw. Benutzerschnittstelle. Im folgenden Abschnitt werden die unterschiedlichen Elemente kurz Erläutert.<br>

==Standard-Steuerelemente==
<p>zum Seitenanfang [[#top]]</p>

===Eingabefeld (text)===
<p>zum Seitenanfang [[#top]]</p>

Ein Eingabefeld ist das meinst verwendete Steuerelement einer grafischen Benutzeroberfläche und dient der Interaktion mit dem Benutzer. Diese Textfelder können Ein- oder auch Mehrzeilig sein und über die Tastatur können beliebige Zeichenketten eingegeben werden.<br>
'''Darstellung'''

'''inaktiv'''
[[Datei:Input.inactive.png|frame|none|inaktives Eingabefeld mit Beschriftung "Beschreibung*"]]

'''aktiv'''
[[Datei:Input.active.png|frame|none|aktives Eingabefeld mit Beschriftung "Beschreibung*"]]

===Führungstext (label)===
<p>zum Seitenanfang [[#top]]</p>

Führungstexte (englich: label) gehören auch zu den Steuerelementen einer grafischen Benutzeroberfläche. Diese werden in der Regel dazu verwendet um Ein- oder Ausgabefelder, aber auch Radio Button oder Checkboxen zu beschriften.<br>

===Schaltfläche (button)===
<p>zum Seitenanfang [[#top]]</p>

Ein häufig genutztes Steuerelement für grafische Benutzeroberflächen ist die Schaltfläche (englisch: button). Mittels dieser Schaltflächen können Formulare abgesendet oder definierte Aktionen durchgeführt werden.<br>
'''Farben'''
{| class="wikitable"
|-
! Schaltfläche
! Hintergrundfarbe
! Konturfarbe
! Textfarbe
|-
| <div class="bootstrap-button" style="background:#003a5f; border-color:#002a45; color:#ffffff;">Primary</div>
| <div class="color-value">#003a5f</div>
| <div class="color-value">#002a45</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#ffffff; border-color:#b7cbda; color:#0b325c;">Default</div>
| <div class="color-value">#ffffff</div>
| <div class="color-value">#b7cbda</div>
| <div class="color-value">#0b325c</div>
|-
| <div class="bootstrap-button" style="background:#80b300; border-color:#6e9a00; color:#ffffff;">Success</div>
| <div class="color-value">#80b300</div>
| <div class="color-value">#6e9a00</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#0080c0; border-color:#006fa7; color:#ffffff;">Info</div>
| <div class="color-value">#0080c0</div>
| <div class="color-value">#006fa7</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#ffb200; border-color:e6a000#; color:#ffffff;">Warning</div>
| <div class="color-value">#ffb200</div>
| <div class="color-value">#e6a000</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#990000; border-color:#800000; color:#ffffff;">Danger</div>
| <div class="color-value">#990000</div>
| <div class="color-value">#800000</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#337ab7; border-color:#2e6da4; color:#ffffff;">Disabled</div>
| <div class="color-value">#337ab7</div>
| <div class="color-value">#2e6da4</div>
| <div class="color-value">#ffffff</div>
|}
<br>
Die folgende Abbildung zeigt Beispielhaft eine Menüleiste mit Schaltflächen über diese definierte Funktionen aufgerufen werden können.
<br>
[[Datei:Beispiel-Button.png|frame|none|Beispiel: Schaltflächen zum Aufrufen einer Funktion]]

===Auswahl (check-box)===
<p>zum Seitenanfang [[#top]]</p>

Die Auswahl (englisch: checkbox) ist ein einfaches Steuerelement zur Eingabe von Ja/Nein-Werten, welche durch einen Mausklick aktiviert oder deaktiviert werden kann. Dieses Element findet meist auf Formularen Verwendung, wenn z. B. die Datenschutzbestimmungen oder die allgemeinen Geschäftsbedingungen anerkannt werden müssen.<br>
'''Darstellung'''
[[Datei:Check-box.png|frame|none|Auswahl mit [[Führungstext|Beschriftung]] "Gesamtnetz für Abregelung*"]]

<br>
Beispiel für die Verwendung von Auswahlfeldern.
<br>
[[Datei:checkbox.png|frame|none|Beispiel: Auswahlfelder (check-box)]]

===Auswahllisten (MultiSelect)===
<p>zum Seitenanfang [[#top]]</p>

Ein weiteres Steuerelement ist die Auswahlliste (englisch: multiselect) und dient der Auswahl von mehreren Objekten aus einer Liste. Die Darstellungsform solcher Auswahllisten kann variieren.<br>
Weitere Informationen finden sie unter den folgende Verlinkungen.
<br>
[https://www.primefaces.org/primeng/#/multiselect Web primeng-multiselect-Link]<br>
[https://www.primefaces.org/primeng/#/chipst Web primeng-chips-Link]<br>
<br>
'''Darstellung'''<br>

Beispiel einer Auswahlliste als '''Dropdown'''.
<br>
[[Datei:multiselect.png|frame|none|Multiselect]]

Die Attribute dieser Auswahlliste<br>
<li>können Text ohne Icon enthalten<br>
<li>können Text mit Icon enthalten<br>
<li>sind Filterbar<br>
<br>

Beispiel einer Auswahlliste als '''Chips'''.<br>
In einem Eingabefeld werden mehrere Werte in Form von Chips eingefügt.<br>
[[Datei:multiselect - chip.png|frame|none|Multiselect als Chips]]

Die Attribute dieser Auswahlliste können<br>
<li>Text ohne Icon enthalten<br>
<li>Text mit Icon enthalten<br>
<br>

'''Beide Steuerelemente können kombiniert eingesetzt werden'''<br>

===Dropdown-Liste (drop-down list)===
<p>zum Seitenanfang [[#top]]</p>

Die Dropdown-Liste (englisch: drop-down-list) ist ein Textfeld welches eine Auflistung von benutzerdefinierten Werte enthält aus der ein Anwender einen Eintrag auswählen kann. Diese Dropdown-Liste kann um weitere Elemente wie zum Beispiel ein Scrollbalken, eine Filterfunktion oder auch Icon erweitert werden. Zusätzlich besteht die Möglichkeit Einträge dieser Liste zu Gruppieren, um diese Übersichtlich zu Gestalten.<br><br>
'''Darstellung'''<br>
Darstellung einer '''inaktiven''' Dropdown-Liste.<br>
[[Datei:Drop-down-menu.inactive.png|frame|none|inaktive Dropdown-Liste mit Beschriftung "Grund der Abregelung*"]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste.<br>
[[Datei:Drop-down-menu.active.png|frame|none|aktive Dropdown-Liste mit Beschriftung "Grund der Abregelung*"]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste inklusive Icon, Filter und einem Scrollbalken.<br>
[[Datei:Dropdown mit Icon.png|frame|none|aktive Dropdown-Liste mit Icon und Filter]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste inklusive Gruppierung.<br>
[[Datei:Dropdown mit Gruppierung.png|frame|none|aktive Dropdown-Liste mit Gruppierung]]
[https://www.primefaces.org/primeng/#/dropdown Web primeng-dropdown-Link]<br>

===Kalender (calendar)===
<p>zum Seitenanfang [[#top]]</p>

In der Regel umfasst ein Datums- und / oder Uhrzeitfeld eine Kalenderauswahl, so das ein Datum nicht händisch als String eingegeben werden muss. Durch klick in das Textfeld, öffnet sich ein Kalenderfenster, aus dem das gewünschte Datum und die Uhrzeit auswählt werden kann. <br>
'''Darstellung'''
[[Datei:Calendar.png|frame|none|Kalender mit Beschriftung "Startzeitpunkt*"]]
[https://www.primefaces.org/primeng/#/calendar Web primeng-calendar-Link]<br>

===Filter===
<p>zum Seitenanfang [[#top]]</p>
<br>
Eine Filterfunktion dient dazu, dass aus einem großem Datenbestand nur bestimmte Datensätze anhand verschiedener Kriterien in einer Ergebnisliste angezeigt werden.<br>
Beispiel für die Verwendung von Filtern.
<br>
[[Datei:Filter.png|frame|none|Beispiel: Filter mit Auswahlfeldern]]

===Netzspezifische Icons===
<p>zum Seitenanfang [[#top]]</p>

'''offener Punkt, Klärungsbedarf'''<br>

<li>Icons werden von der e-netz bereitgestellt<br>
<li>Lizenz wahrscheinlich MIT<br>
<li>Muss mit Frau Wittek besprochen werden/bzw. Unterstützung<br>

==Steuerelemente für Formulare==
<p>zum Seitenanfang [[#top]]</p>
<br>
Zur Erfassung von Daten werden Eingabe- und Auswahlfelder bereitgestellt, in die ein Benutzer Werte über die Tastatur oder eine Werteliste eingeben kann oder Auswahlknöpfe, die der Benutzer mit der Maus beeinflusst. Hierbei werden Pflichtfelder (müssen gefüllt werden und sind mit einem Sternchen entsprechend gekennzeichnet) und Kann-Felder (können gefüllt werden) unterschieden. In der folgenden Tabelle finden Sie eine Auflisten der möglichen Steuerelemente für Formulare. Auf die einzelnen Elemente wird in den folgenden Abschnitten weiter eingegangen.<br>

{| class="wikitable"
|-
! Pflichtfeld Typ
! Visualisierung
|-
| text invalid
| [[Datei:Steuerelemente fuer Formular 1.png]]
|-
| text valid
| [[Datei:Steuerelemente fuer Formular 2.png]]
|-
| numeric valid
| [[Datei:Steuerelemente fuer Formular-numeric.png]]
|-
| date,datetime,date range valid
| [[Datei:Steuerelemente fuer Formular 3.png]]
|-
| Gesperrt
| [[Datei:Steuerelemente fuer Formular 4.png]]
|-
| Drop-Down valid
| [[Datei:Steuerelemente fuer Formular 5.png]]
|-
| Validierung beim Verlassen eines Feldes
| [[Datei:Steuerelemente fuer Formular 6.png]]
|}

==Steuerelement Kalender==
<p>zum Seitenanfang [[#top]]</p>
<br>
[https://www.primefaces.org/primeng/#/calendar Web primeng-calendar-Link]<br>

'''Darstellung'''
[[Datei:Kalender-Ansichten.png|frame|none|Darstellung der Kalenderansicht für Monat, Woche und Tag]]
<br>
In der Kalenderfunktion stehen dem Benutzer folgende Ansichten zur Verfügung:<br>
<li> Monatsansicht<br>
<li> Wochenansicht<br>
<li> Arbeitswochenansicht<br>
<li> Tagesansicht<br><br>

Bei der Kalenderfunktion hat der Anwender die Möglichkeit von durch einen Klick auf die (Arbeits-)Wochen- oder Tagesansicht zu wechseln. Durch Klicken mit der Maustaste in einen freien Zeitraum können neue Termine erfasst werden. Für eine neue Terminspanne markieren Sie einen freien Bereich durch SHIFT und Klick mit der linken Maustaste und erfassen für diesen Zeitraum einen Termin. Zum Editieren von bestehen den Terminen genügt ebenfalls ein Klick mit der Maustaste. <br>
Über die ‘‘‘Drag & Drop‘‘‘ Funktion können Termine in der Monatsansicht oder der Wochenansicht in einen anderen Wochentag verschoben werden. Um einen Termin zeitlich innerhalb eines Tages zu verschieben und Zeitspanne anzupassen, müssen Sie sich in der Wochenansicht oder der Tagesansicht befinden.<br>
<br>
Folgende Funktionen stehen zusätzlich zur Verfügung:<br>
<li> Termine ICS-Format exportieren (generell in der Applikation!)<br>
<li> Filtern über Kalendereinträge (ArrayList)<br>
<li> Unterschiedliche farbliche Darstellung einzelner Termine (Termin Template)<br>

==Steuerelement Grid==
<p>zum Seitenanfang [[#top]]</p>
<li> Buttons zum Absprung in Detailmaske (Lese/Bearbeitung), Stornierbutton in die erste Linke Spalte im Grid<br>
<li> Absprung durch Doppelklick in Detailmaske (Lese/Bearbeiten)<br>
<li> Datensatz hinzufügen-Button rechts oberhalb des Grid´s<br>
<li> Alternating row color<br>
<li> Hovereffekt (Zeile)<br>
<li> Einzelselektion und Mehrfachselektion mit Strg-Taste, Shift-Taste<br>
<li> Hovereffekt in Spaltenkopf unterstreichen und Mauscursor Hand (Rückmeldung für mögliche Aktionen an den Benutzer)<br>
<li> Klick auf Spaltenkopf, Sortierung ASC, DESC<br>
<li> Merfachsortierung durch klicken der Shift-Taste<br>
<li> Filterzeile als eigene Zeile direkt unterhalb des Spaltenkopfs<br>
<li> Virtual scrolling anstatt Pagination<br>
<li> Spaltenkopf mit Filter und Fußzeile bleiben beim scrollen stehen<br>
<li> Quickfiler (optional)<br>
<li> Externe Filter (optional) aber als Toggle-Switch<br>
<li> Stylevorgaben kommen per ok-vendor.sass !!!!!!!!!<br>
- Schriftrart<br>
- Schriftgröße<br>
- Zeilenhöhe<br>
- Farben<br>
- Style fürs Grid<br>
<li> Kompaktes Grid definieren. Spaltengröße sinnvoll definieren<br><br>
[https://www.ag-grid.com/ Web ag-grid-Link]<br>

==Steuerelement Heatmap / Kartendarstellung==
<p>zum Seitenanfang [[#top]]</p>
<br>
Ermöglicht das Einbinden von zweidimensionalen Karten-Elementen auf Webseiten, Mobile Apps sowie für Navigationen. Diese Kartendarstellungen sind von Standortdaten angetrieben und bieten zusätzlich Echtzeit-Updates. Durch einen Entwickler können diese vollständig angepasst und konfiguriert werden. Das Hinzufügen von Points of Interest, Live-Standortdaten und Persistenz globaler Objekte ist ebenfalls möglich.<br>

<li>[https://www.mapbox.com/ Web mapbox-Link]<br>
<li>[https://openlayers.org/ Web OpenLayers-Link]<br>
- Unterstützt WMS-Services (Web Map Service)<br>
- OpenSreetMap muss Lizenz geklärt werden! ODbL.<br><br>
'''Lizenzkompatibilität muss beim Projekt geklärt werden'''<br>

<br>
[[Datei:Karten-Beispiel.png|frame|none|Beispiel einer Kartenansicht]]

<h1 style="page-break-before:always">Layout</h1>
<p>zum Seitenanfang [[#top]]</p>

==Tabellen/Listen==
<p>zum Seitenanfang [[#top]]</p>

===Tabelle===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Table.png|frame|none|Darstellung einer Tabelle]]

'''Elemente'''
[[Datei:Table.labeled.png|frame|none|Elemente einer Tabelle]]
1 Tabellenkopf<br>
1.1 Spaltenüberschrift<br>
1.2 Sortiereinstellungen<br>
1.3 Spaltenkopf<br>
1.4 Spaltenfilter<br>
1.5 Spaltensortierung<br>
2 Tabelleninhalt<br>
3 Tabellenfuß<br>
3.1 Spaltenfuß<br>

===blätterbare Tabelle===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Pageable-table.png|frame|none|Darstellung einer blätterbaren Tabelle]]

'''Elemente'''
[[Datei:Pageable-table.labeled.png|frame|none|Elemente einer blätterbaren Tabelle]]
1 Tabellenkopf<br>
1.1 Spaltenüberschrift<br>
1.2 Sortiereinstellungen<br>
1.3 Spaltenkopf<br>
1.4 Spaltenfilter<br>
1.5 Sortierung<br>
2 Tabelleninhalt<br>
3 Seitennavigation<br>

==oK-Steuerelemente==
<p>zum Seitenanfang [[#top]]</p>

===Topologie-Baum===
<p>zum Seitenanfang [[#top]]</p>

Das Steuerelement bietet die Möglichkeit, [[Topologie (Strom)| topologische]] Zusammenhänge eines Stromnetzes hierarchisch darzustellen.
Der Topologie-Baum ist als gemeinsames Steuerelment in unterschiedlichen ok-Modulen wiederverwendbar und definiert eine standardisierte Sicht. Die generell möglichen, darstellbaren topologischen Elemente richten sich nach den in oK definierten Elementen.

Die Klärung der Frage, wie ein Netz hierarchisch dargestellt werden kann und welche Elemente des Netzes tatsächlich angezeigt und ausgewählt werden können, ist nicht Aufgabe dieses Steuerelementes. Dies ist Aufgabe der darunter liegenden Anwendung und kann aufgrund fachlicher Aspekte unterschiedlich ausgeprägt sein.<br><br>
'''Elemente'''
[[Datei:TopologyTree.labeled.png|frame|none|Elemente eines Topologie-Baums]]

1 Steuerleiste<br>
1.1 Suchbegriff<br>
Im [[Eingabefeld]] "Suchbegriff" können Begriffe eingeben werden, nach denen in der zugrundeliegenden Topologie gesucht werden kann.
Die Begriffe können folgende [https://de.wikipedia.org/wiki/Wildcard_%28Informatik%29 Platzhalter (Wildcard)] beinhalten:
{| class="wikitable sortable"
|-class="hintergrundfarbe6"
!Platzhalter
!Bezeichnung
!Verwendung
|-
|?
|Fragezeichen
|Platzhalter für genau ein Zeichen
|-
|*
|Sternchen
|Platzhalter für beliebig viele (auch null) Zeichen
|-
|#
|Doppelkreuz
|Platzhalter für einen numerischen Wert
|}
1.2 Suchen<br>
Durch Drücken der [[Schaltfläche]] "Suchen", wird nach dem angegebenen Suchbegriff gesucht. Ist die Suche erfolgreich, werden alle Elemente im Navigationsbereich ausgewählt (Mehrfachselektion), die dem Suchbegriff entsprechen. Gleichzeit wird zum ersten Element aus der Ergebnismenge gesprungen.<br>

1.3 Einstellungen'''<br>
Über die Schaltfläche "Einstellungen" können Filterkriterien definiert werden, die die Anzeige auf passende topologische Elemente im Navigationsbereich einschränken.<br/>
<div style="background:#fff0d0;border-color:#ffb200;border-radius:5px;border-style:solid;border-width:1px;margin:16px;padding:10px">[[Datei:Warning-yellow.icon.svg|24px]] Die Definition möglicher Filterkriterien und Regelwerke ist Teil späterer Festlegungen.</div>

2 Statusleiste<br>
Die Statusleiste zeigt allgemeine Informationen zu den im Navigationsbereich angezeigten Elementen an.<br>
2.1 Datum<br>
Das Erstellungsdatum (Stand) der zugrundeliegenden Daten, auf dem die Anzeige im Navigationsbereich basiert.<br>
2.2 Uhrzei<br>
Die Erstellungsuhrzeit(Stand) der zugrundeliegenden Daten, auf dem die Anzeige im Navigationsbereich basiert.<br>
2.3 Filter<br>
Das Symbol "Filter" zeigt an, ob mindestens ein Filter aktiviert ist.<br>
2.4 Benachrichtigung<br>
Im Benachrichtigungsbereich können verschiedene Symbole angezeigt werden, die über zusätzliche Hinweise informieren. In Beispiel ist liegt hier eine Warnungmeldung vor.<br>

3 Navigationsbereich<br>
Im Navigationsbereich werden topologische Zusammenhänge in einer baumartigen Struktur angezeigt. Die Ausprägung der Topologie als Hierarchie ist Aufgabe der jeweiligen Anwendung.<br>

'''Ordnung/Sortierreihenfolge'''<br>

<div style="background:#fff0d0;border-color:#ffb200;border-radius:5px;border-style:solid;border-width:1px;margin:16px;padding:10px">[[Datei:Warning-yellow.icon.svg|24px]]<br>
- Was für ein Steuerelement nutzt da BTC? <br>
- Wir müssten da einen Link bereitstellen ggf. mit Matthias Rohr oder Felix Korb besprechen <br></div>

==Definition von ok HTML Elementen==
<p>zum Seitenanfang [[#top]]</p>

ok HTML Elemente müssen durch npm paketiert und oK-konform gestyled werden.<br>

Zu den oK HTML Elemente zählen:<br>
<li> Date (primeng)<br>
<li> DateTime (primeng)<br>
<li> DateRange (primeng)<br>
<li> komplexe DropDown (primeng) bspw. Icons, Tabelle, Gruppen<br>
<li> Grid (ag-grid)<br>
<li> Gantt (zurzeit nichts geeignetes gefunden)<br>
<li> Kalender (primeng)<br>
<li> Charts (primeng, c3js, d3js)<br>
<li> Navbar (ok-element)<br>
<li> Modale Dialoge (primeng) sollten vermieden werden<br>
<li> Tabs (primeng)<br>
<li> Akkordion (primeng)<br>
<li> MultiSelect (primeng)<br>
<li> Chips (primeng)<br>
<li> Editor (primeng)<br>
<li> Messages toast (primeng)<br>
<br>
ACHTUNG: Nicht definierte ok Steuerlemente immer erst bei primeng schauen!<br>
<br>
Weitere Steuerlemente müssen über SaaS Themeable sein!<br>
<li> [https://www.primefaces.org/primeng/#/ Web primefaces - Link]<br>
<li> [https://www.ag-grid.com Web ag-grid - Link]<br>
<li> [https://c3js.org/ Web c3js.org - Link]<br>
<li> [https://d3js.org/ Web d3js.org - Link]<br>

==Definition von Standard HTML Elementen==
<p>zum Seitenanfang [[#top]]</p>

Standard HTML Elemente müssen nicht durch npm paketiert werden.<br>
Es ist ausreichend, ok-Styles als npm Pakete zu definieren und auf den HTML Elementen anzuwenden.<br>
<br>
Zu den Standard HTML Elemente zählen:<br>

<li> Textfelder<br>
<li> Validation<br>
<li> Passwort<br>
<li> Simple DropDown Listen<br>
<li> CheckBox<br>
<li> Buttons<br>
<li> Button Groups<br>
<li> Radio Buttons<br>
<li> File Upload<br>
<li> Numerics<br>
<li> (Drag&Drop)<br>
<li> List Group<br>
<li> Tables (wenn keine besonder Funktionalität, sonst ag-grid)<br>
<br>
Komponenten aus https://getbootstrap.com<br>

==Portal==
<p>zum Seitenanfang [[#top]]</p>

==Standarddialoge==
<p>zum Seitenanfang [[#top]]</p>

===Eingabedialog===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Input-dialog.png|frame|none|Darstellung eines Eingabedialogs]]
'''Elemente'''
[[Datei:Input-dialog.labeled.png|frame|none|Elemente eines Eingabedialogs]]
1 Titel<br>
2 Anzeige-/Eingabebereich<br>
3 Steuerleiste<br>

===Benachrichtigungsdialog===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:notification-dialog.png|frame|none|Darstellung eines Benachrichtigungsdialogs]]
'''Elemente'''
[[Datei:notification-dialog.labeled.png|frame|none|Elemente eines Benachrichtigungsdialogs]]
1 Titel<br>
2 Benachrichtigung<br>
3 Steuerleiste<br>

===Wizard===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Wizard.png|frame|none|Darstellung eines Wizards]]

'''Elemente'''
[[Datei:Wizard.labeled.png|frame|none|Elemente eines Wizards]]
1 Überschrift<br>
2 Bearbeitungsschritte<br>
3 Inhalt<br>
4 Steuerleiste<br>

===Message Toast===
<p>zum Seitenanfang [[#top]]</p>
<br>
Ein Message Toast ist ein kurzer Hinweistex welcher als Popup eingeblendet und nach einem Moment wieder ausgeblendet wird, ohne das zwangsläufig eine Benutzeraktion erfolgen muss.<br>
Die Eigenschaften eines Toast können beliebig konfiguriert werden.<br>

'''Darstellung'''
[[Datei:Message toast.png|frame|none|Darstellung eines Message Toast]]<br>

'''Für open KONSEQUENZ wurden folgende Konfigurationen abgestimmt'''<br>
<li>Toasts erscheinen oben rechts<br>
<li>Verschwinden nach rechts oben<br>
<li>Automatisches verschwinden nach:<br>
   Erfolgreich: 2 Sekunden<br>
   Info: Muss manuell geschlossen werden<br>
   Warnung: 7 Sekunden<br>
   Fehler: 7 Sekunden<br>
<li>Messages: Erfolgreich, Fehler, Info, Warnung<br>
<li>Maximal drei Zeilen Content in einem Toast<br>
<li>Defaultfarben verwenden<br><br>

[https://www.primefaces.org/primeng/#/toast Web primeng-Toast-Link]

==Navigationselemente==
<p>zum Seitenanfang [[#top]]</p>

<br>Um das Navigieren innerhalb einer Web-Seite zu vereinfachen gibt es unterschiedliche Navigationselemente, diese werden in den folgenden Kapiteln kurz erläutert.<br>

===Navigation Bar (Navbar)===
<p>zum Seitenanfang [[#top]]</p>
<br>
Das Navbar-Element ist ein permanent sichtbares Navigationselement, welches horizontal oder vertikal auf einer Webseite angeordnet werden kann und dem Benutzer die
Möglichkeit bietet, wichtige Seiten direkt aufzurufen. Der Vorteil ist, dass eine Navbar für jede Seite separat konfiguriert werden kann.<br><br>
'''Darstellung'''
<br>
[[Datei:mit Autodisplay.png|frame|none|Darstellung einer Navbar mit Autodisplay]]
<br>
[[Datei:ohne Autodisplay.png|frame|none|Darstellung einer Navbar ohne Autodisplay]]
<br>
Vorteile einer Navbar:<br>
<li> Bietet einen schnellen Überblick über die Struktur der Webseite<br>
<li> Jede Seite, bzw. Kategorie ist direkt über die Navbar ansteuerbar<br>
<li> Die Navbar ist für jede Seite separat konfigurierbar<br>
<li> Für jedes Navigationselement kann ein eigenes Submenü erstellt werden<br>
<li> Die aktuelle Seite kann farblich hinterlegt werden<br>
<li> In einer Navbar können Funktionen wie zum Beispiel Abmelden oder eine Such-Funktion eingebunden werden<br>
<li> Es können bis zu vier Navbars auf einer Seite verwendet werden (Standartmäßig werden aber nur zwei implementiert)<br>
<br>
Nachteile einer Navbar:<br>
<li> Muss für jede Seite einzeln Konfiguriert werden<br>
<li> Kann bei umfangreichen Seiten schnell unübersichtlich werden oder Überladen wirken<br>
<br>
[https://www.primefaces.org/primeng/#/menubar Web primeng-menubar-Link]

===Accordion===
<p>zum Seitenanfang [[#top]]</p>
<br>
'''Beschreibung'''<br>
Ein Accordion ist ein Navigationselement, welches dazu dient umfangreiche Listen mit Inhalten platzsparend auf Webseiten abzubilden.<br>
[https://www.primefaces.org/primeng/#/accordion Web primeng-accordion-Link]

'''Darstellung'''<br>
Einzelselektion<br>
[[Datei:akkordion-einzelselektion.png|frame|none]]<br>
Mehrfachselektion<br>
[[Datei:akkordion-mehrfachselektion.png|frame|none]]

===TabView===
<p>zum Seitenanfang [[#top]]</p>
<br>
Eine TabView ist eine Komponente zum einfachen Gruppieren von Inhalten auf einer Seite in Form von Registerkarten. Auf jeder Registerkarte können z.B. Formulare implementiert werden, die durch den Anwender abgearbeitet werden müssen. Durch die Verwendung von Registerkarten wird ein schnelles Navigieren zwischen den einzelnen Inhalten ermöglicht. Zudem können diese Registerkarten je nach Anfordeung konfuguriert werden.<br>

[https://www.primefaces.org/primeng/#/tabview Web primeng-tabview-Link]

[[Datei:tab-view.png|frame|none|Darstellung einer TabView]]<br>

Für openKONSEQUENZ wurden folgende Konfigurationen vorgegeben:<br>
<li>Valid: Grüner Balken in Tab (Nur wenn allen Steuerelementen im Content valid sind)
<li>Invalid: Roter Balken in Tab
<li>Neuen Tab dynamisch hinzufügen per + Tab
<li>Tab entfernen mit Lösch-Button im Content-Bereich
<li>Icons können je nach bedarf im Tab angezeigt werden
<li>Ausrichtung der Tabs (oben, unten, links, rechts)

<h1 style="page-break-before:always">Barrierefreiheit</h1>
<p>zum Seitenanfang [[#top]]</p>

Barrierefreiheit bezeichnet eine Gestaltung der baulichen Umwelt sowie von Informationsangeboten, Kommunikation usw. dergestalt, dass sie auch von Menschen mit Beeinträchtigungen ohne zusätzliche Hilfen genutzt und wahrgenommen werden können.

Um Menschen ein barrierefreies Arbeiten in der digitalen Welt zu ermöglichen, sind verschiedene Aspekte zu betrachten: Zum einen müssen Software und das heute nicht mehr wegzudenkende Internet barrierefrei gestaltet werden. Zum anderen muss einigen Menschen mit Behinderung überhaupt erst die Bedienung eines Computers ermöglicht werden durch unterstützende Technologien. Dies können beispielsweise Augensteuerung und Mundmaus bei körperlichen Behinderungen, oder Screenreader und Braillezeile bei Blinden sein. Weitere Beispiele stellen Technologien aus dem Bereich der Unterstützten Kommunikation dar, die Kommunikation in manchen Fällen überhaupt erst möglich machen.

Quelle: [ https://de.wikipedia.org/wiki/Barrierefreiheit ]

<h1 style="page-break-before:always">Internationalisierung</h1>
<p>zum Seitenanfang [[#top]]</p>

Internationalisierung bedeutet in der Informatik beziehungsweise in der Softwareentwicklung, ein Programm so zu gestalten, dass es leicht (ohne den Quellcode ändern zu müssen) an andere Sprachen und Kulturen angepasst werden kann.

Internationalisierung (englisch internationalization oder internationalisation) wird gerne mit dem Numeronym i18n abgekürzt (im englischen Wort Internationalization befinden sich 18 Buchstaben zwischen dem ersten Buchstaben I und dem letzten Buchstaben n). Hierunter fallen diejenigen Aufgaben, die der Entwickler/Programmierer eines Programms bewältigen muss. Dazu darf er zum Beispiel Beschreibungstexte nicht im Quellcode fest kodieren, sondern muss Variablen benutzen, die von einer Quelle zur Laufzeit eingelesen werden. Aber auch Datumsformatierungen und die sprachabhängige Oberflächengestaltung (z. B. kann Text unterschiedlich lang sein oder die Rechts-Nach-Links-Orientierung kann sich unterscheiden) gehören hierzu.

Im nächsten Schritt erfolgt die Lokalisierung (localization oder localisation), die als l10n abgekürzt wird (10 Buchstaben zwischen l und n). Ein Programm sollte im vorigen Schritt so gestaltet sein, dass diese Änderungen nicht mehr vom Programmierer durchgeführt werden müssen. Dieser Prozess bezeichnet die reine Übersetzung von zum Beispiel Texten in eine Landessprache.

Quelle: [ https://de.wikipedia.org/wiki/Internationalisierung_(Softwareentwicklung) ]

<h1 style="page-break-before:always">allg. Usability-Richtlinien</h1>
<p>zum Seitenanfang [[#top]]</p>

Software-Ergonomie (zur Wortherkunft siehe Software und Ergonomie) ist die Arbeit hin zu leicht verständlicher und schnell benutzbarer Software unter den gebotenen technischen Möglichkeiten und unter der Einhaltung definierter bzw. empirisch entstandener Standards und Styleguides. Die Software-Ergonomie ist ein Teilgebiet der Mensch-Computer-Interaktion, und ihr Ergebnis ist die Gebrauchstauglichkeit von Computerprogrammen.

Gegenstandsbereich der Software-Ergonomie im eigentlichen Sinne ist der arbeitende Mensch im Kontext (Softwarenutzung an Arbeitsplätzen). Allgemein wird heute die Benutzung von bzw. die Interaktion mit Computern betrachtet. Dies bedeutet die Berücksichtigung (neuro)psychologischer Aspekte beim Entwerfen der Software – wie dies methodisch auch die Ingenieurpsychologie anstrebt –, um eine optimale Mensch-Maschine-Schnittstelle zur Verfügung zu stellen. Dies soll sich in besonders leicht verständlichen funktionalen Einheiten ausdrücken (Bsp. einfache Dialoge bei Systemen mit GUI). Die Entwicklung gebrauchstauglicher Software wird im Rahmen des Usability-Engineering geleistet.

Quelle: [ https://de.wikipedia.org/wiki/Software-Ergonomie]

<h1 style="page-break-before:always">Paketierung der Styles (customized Bootstrap Template und individuelle allg. oK Styles)</h1>
<p>zum Seitenanfang [[#top]]</p><br>

Aufteilung der Stylse oK und eigene Unternehmensanpassungen.<br>
<li> '''ok-common.saas'''<br>
- Für Layout und globale Styles customized Bootstrap Template<br>
- ok-CI/CD<br>
<li> '''ok-vendor.saas'''<br>
- Nur für die Componenten-Styles von Drittanbietern<br>
(z.B.: primeng, ag-grid, c3.js, d3.js)<br>
<li> '''ok-components.saas'''<br>
- Nur für ok-Components<br>
(z.B.: NavBar)<br>
<br>
Achtung: Unternehmensanpassungen (CI/CD) werden in eigenen neuen saas Dateien beschrieben! Dabei müssen die entsprechenden saas-Variablen überschrieben werden.<br>

Styleguide (in Bearbeitung)

2019-07-08T12:29:38Z

Eschlenker: /* Auswahl (check-box) */

zurück zur [[Hauptseite]]
zurück zur [[Styleguide]]

<h1 style="page-break-before:always">Zielsetzung und Abgrenzung</h1>
<p>zum Seitenanfang [[#top]]</p>
'''Zielsetzung:'''<br>
<li> Konsolidierung des UI StyleGuides<br>
<li> Evaluierung Tooling für den StyleGuide<br>
- IMIS<br>
- Wiki<br>
- sonst<br>
<li> Package Manager (npm)<br>
<li> Entwurfsentscheidungen ng Components vs Elements<br>
<li> Best of Konsolidierung der Steuerelemente aus den existierenden UserModulen<br>
<li> UX Vorgaben definieren<br>
<li> Paketierung der Styles (customized Bootstrap Template, eigenes allg. OK Stylesheet) als npm<br>
<br>
'''Abgrenzung:'''
<li> Vorerst kein Code (nur beispielhaft)<br>
<br>

<h1 style="page-break-before:always">Design</h1>
<p>zum Seitenanfang [[#top]]</p>

Um ein einheitliches Design zu gewährleisten, müssen die verwendeten Farben, Formen und Schriftarten auf allen User Interfaces dem vorgegebenen StyleGuide entsprechen. Diese Vorgaben werden in den folgenden Kapiteln beschrieben.
==Farben==
<p>zum Seitenanfang [[#top]]</p>

In diesem Kapitel wird das abgestimmte Farbschema (Hauptfarben, Farbverläufe, Sekundärfarben, u. s. w.) und deren Verwendung auf Webseiten und User Interfaces erläutert. Zusätzlich finden Sie hier Informationen über den jeweiligen Farbcode und die CSS Codierung.<br>

===Hauptfarben===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Primary
| <div style="color:#ffffff; background:#003a5f; padding: 1px 10px">#003a5f</div>
|-
| Success
| <div style="color:#ffffff; background:#80b300; padding: 1px 10px">#80b300</div>
|-
| Info
| <div style="color:#ffffff; background:#0080c0; padding: 1px 10px">#0080c0</div>
|-
| Default
| <div style="color:#000000; background:#ffffff; padding: 1px 10px">#ffffff</div>
|-
| Text
| <div style="color:#ffffff; background:#333333; padding: 1px 10px">#333333</div>
|}

===Farbverläufe===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
! CSS
|-
| Streifen Header
| <div style="color:#ffffff; background: linear-gradient(to right, rgba(121, 182, 28, 1) 0%, rgba(2, 129, 196, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0); padding: 1px 10px">#79b61c - #0281c4</div>
| <code>background: linear-gradient(to right, rgba(121, 182, 28, 1) 0%, rgba(2, 129, 196, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0);</code>
|-
| Balken Header
| <div style="color:#000000; background: linear-gradient(to right, rgba(232, 238, 231, 1) 0%, rgba(229, 237, 242, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0); padding: 1px 10px">#e8eee7- #e5edf2</div>
| <code>background: linear-gradient(to right, rgba(232, 238, 231, 1) 0%, rgba(229, 237, 242, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0);</code>
|}

===Flächen und Linien===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Hintergrund
| <div style="color:#000000; background:#f8fafd; padding: 1px 10px">#f8fafd</div>
|-
| Flächen/Tabellen
| <div style="color:#000000; background:#f5f8fc; padding: 1px 10px">#f5f8fc</div>
|-
| Hervorhebung/Eingabefelder/Tabellenzeilen
| <div style="color:#000000; background:#e9f0f9; padding: 1px 10px">#e9f0f9</div>
|-
| Linien
| <div style="color:#000000; background:#ccdbe6; padding: 1px 10px">#ccdbe6</div>
|-
| Umrandung Formularfelder
| <div style="color:#000000; background:#b7cbda; padding: 1px 10px">#b7cbda</div>
|}

===Sekundärfarben===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Warning
| <div style="color:#000000; background:#ffb200; padding: 1px 10px">#ffb200</div>
|-
| Danger
| <div style="color:#ffffff; background:#990000; padding: 1px 10px">#990000</div>
|-
| Disabled
| <div style="color:#ffffff; background:#567d96; padding: 1px 10px">#567d96</div>
|}

==Schriftarten==
<p>zum Seitenanfang [[#top]]</p>

Ebenso wie das Farbschema unterliegen auch die zu verwendenden Schriftarten dem abgestimmten Styleguide. Bei der Verwendung von zu vielen unterschiedlichen Schriftarten und Schriftgrößen kann das User Interface schnell unruhig wirken. Die gewählte Schriftart sollte gut lesbar und nicht zu klein sein.<br>

===Schriftfamilie===
<p>zum Seitenanfang [[#top]]</p>

Für openKONSEQUENZ wurde die Schriftart '''Source Sans Pro''' festgelegt. Diese Schriftart ist bei allen User Interfaces und Texten zu verwendet.

[https://github.com/adobe-fonts/source-sans-pro Download-Link]

[https://www.google.com/fonts/specimen/Source+Sans+Pro WebFont-Link]

==Rahmenabstände==
<p>zum Seitenanfang [[#top]]</p>

'''offener Punkt'''<br>

===Symbole===
<p>zum Seitenanfang [[#top]]</p>

In diesem Abschnitt werden allgemeine Bedien- und Status-Symbole beschrieben. Um ein einheitliches Aussehen der oK-Module sicherzustellen, sollen diese anwendungsübergreifend verwendet werden.
{| class="wikitable sortable"
|-class="hintergrundfarbe6"
!Symbol
!Bezeichnung
|-
|[[Datei:Filter.icon.svg|center|24px]]
|Filter
|-
|[[Datei:Menu.icon.svg|center|24px]]
|Menü
|-
|[[Datei:search.icon.svg|center|24px]]
|Suche
|-
|[[Datei:Warning.icon.svg|center|24px]]
|Warnung
|-
|[[Datei:Copy.png|center|24px]]
|Kopieren
|-
|[[Datei:pencil.png|center|24px]]
|Bearbeiten
|-
|[[Datei:save.png|center|24px]]
|Speichern
|-
|[[Datei:add.png|center|24px]]
|Hinzufügen
|-
|[[Datei:cog.png|center|24px]]
|Einstellung
|-
|[[Datei:print.png|center|24px]]
|Drucken
|-
|[[Datei:refresh.png|center|24px]]
|Refresch
|-
|[[Datei:trash.png|center|24px]]
|Löschen
|-
|[[Datei:question.png|center|24px]]
|Hilfe
|-
|[[Datei:cancel.png|center|24px]]
|Abbrechen
|}
<br>
Unter dem folgenden Link finden Sie weitere Symbole.<br>
[https://material.io/tools/icons/?style=baseline Web material-icons-Link]<br>
Lizenz: Apache license version 2.0 sollte/ist mit EPL kompatibel<br>

Die folgende Darstelung zeigt eine Beispiel-Menüleiste mit Icon, die zum Aufrufen von definierten Funktionen verwendet werden.
<br>
[[Datei:Menueleiste mit Icon.png|frame|none|Beispiel: Schaltflächen zum Aufrufen einer Funktion]]

===technische Vorschläge===
<p>zum Seitenanfang [[#top]]</p>

<h1 style="page-break-before:always">Komponenten</h1>
<p>zum Seitenanfang [[#top]]</p>

Komponenten sind die einzelnen Bestandteile einer grafischen Benutzeroberfläche /bzw. Benutzerschnittstelle. Im folgenden Abschnitt werden die unterschiedlichen Elemente kurz Erläutert.<br>

==Standard-Steuerelemente==
<p>zum Seitenanfang [[#top]]</p>

===Eingabefeld (text)===
<p>zum Seitenanfang [[#top]]</p>

Ein Eingabefeld ist das meinst verwendete Steuerelement einer grafischen Benutzeroberfläche und dient der Interaktion mit dem Benutzer. Diese Textfelder können Ein- oder auch Mehrzeilig sein und über die Tastatur können beliebige Zeichenketten eingegeben werden.<br>
'''Darstellung'''

'''inaktiv'''
[[Datei:Input.inactive.png|frame|none|inaktives Eingabefeld mit Beschriftung "Beschreibung*"]]

'''aktiv'''
[[Datei:Input.active.png|frame|none|aktives Eingabefeld mit Beschriftung "Beschreibung*"]]

===Führungstext (label)===
<p>zum Seitenanfang [[#top]]</p>

Führungstexte (englich: label) gehören auch zu den Steuerelementen einer grafischen Benutzeroberfläche. Diese werden in der Regel dazu verwendet um Ein- oder Ausgabefelder, aber auch Radio Button oder Checkboxen zu beschriften.<br>

===Schaltfläche (button)===
<p>zum Seitenanfang [[#top]]</p>

Ein häufig genutztes Steuerelement für grafische Benutzeroberflächen ist die Schaltfläche (englisch: button). Mittels dieser Schaltflächen können Formulare abgesendet oder definierte Aktionen durchgeführt werden.<br>
'''Farben'''
{| class="wikitable"
|-
! Schaltfläche
! Hintergrundfarbe
! Konturfarbe
! Textfarbe
|-
| <div class="bootstrap-button" style="background:#003a5f; border-color:#002a45; color:#ffffff;">Primary</div>
| <div class="color-value">#003a5f</div>
| <div class="color-value">#002a45</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#ffffff; border-color:#b7cbda; color:#0b325c;">Default</div>
| <div class="color-value">#ffffff</div>
| <div class="color-value">#b7cbda</div>
| <div class="color-value">#0b325c</div>
|-
| <div class="bootstrap-button" style="background:#80b300; border-color:#6e9a00; color:#ffffff;">Success</div>
| <div class="color-value">#80b300</div>
| <div class="color-value">#6e9a00</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#0080c0; border-color:#006fa7; color:#ffffff;">Info</div>
| <div class="color-value">#0080c0</div>
| <div class="color-value">#006fa7</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#ffb200; border-color:e6a000#; color:#ffffff;">Warning</div>
| <div class="color-value">#ffb200</div>
| <div class="color-value">#e6a000</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#990000; border-color:#800000; color:#ffffff;">Danger</div>
| <div class="color-value">#990000</div>
| <div class="color-value">#800000</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#337ab7; border-color:#2e6da4; color:#ffffff;">Disabled</div>
| <div class="color-value">#337ab7</div>
| <div class="color-value">#2e6da4</div>
| <div class="color-value">#ffffff</div>
|}
<br>
Die folgende Abbildung zeigt Beispielhaft eine Menüleiste mit Schaltflächen über diese definierte Funktionen aufgerufen werden können.
<br>
[[Datei:Beispiel-Button.png|frame|none|Beispiel: Schaltflächen zum Aufrufen einer Funktion]]

===Auswahl (check-box)===
<p>zum Seitenanfang [[#top]]</p>

Die Auswahl (englisch: checkbox) ist ein einfaches Steuerelement zur Eingabe von Ja/Nein-Werten, welche durch einen Mausklick aktiviert oder deaktiviert werden kann. Dieses Element findet meist auf Formularen Verwendung, wenn z. B. die Datenschutzbestimmungen oder die allgemeinen Geschäftsbedingungen anerkannt werden müssen.<br>
'''Darstellung'''
[[Datei:Check-box.png|frame|none|Auswahl mit [[Führungstext|Beschriftung]] "Gesamtnetz für Abregelung*"]]

<br>
Beispiel für die Verwendung von Auswahlfeldern.
<br>
[[Datei:checkbox.png|frame|none|Beispiel: Auswahlfelder (check-box)]]

===Auswahllisten (MultiSelect)===
<p>zum Seitenanfang [[#top]]</p>

Ein weiteres Steuerelement ist die Auswahlliste (englisch: multiselect) und dient der Auswahl von mehreren Objekten aus einer Liste. Die Darstellungsform solcher Auswahllisten kann variieren.<br>
Weitere Informationen finden sie unter den folgende Verlinkungen.
<br>
[https://www.primefaces.org/primeng/#/multiselect Web primeng-multiselect-Link]<br>
[https://www.primefaces.org/primeng/#/chipst Web primeng-chips-Link]<br>
<br>
'''Darstellung'''<br>

Beispiel einer Auswahlliste als '''Dropdown'''.
<br>
[[Datei:multiselect.png|frame|none|Multiselect]]

Die Attribute dieser Auswahlliste<br>
<li>können Text ohne Icon enthalten<br>
<li>können Text mit Icon enthalten<br>
<li>sind Filterbar<br>
<br>

Beispiel einer Auswahlliste als '''Chips'''.<br>
In einem Eingabefeld werden mehrere Werte in Form von Chips eingefügt.<br>
[[Datei:multiselect - chip.png|frame|none|Multiselect als Chips]]

Die Attribute dieser Auswahlliste können<br>
<li>Text ohne Icon enthalten<br>
<li>Text mit Icon enthalten<br>
<br>

'''Beide Steuerelemente können kombiniert eingesetzt werden'''<br>

===Dropdown-Liste (drop-down list)===
<p>zum Seitenanfang [[#top]]</p>

Die Dropdown-Liste (englisch: drop-down-list) ist ein Textfeld welches eine Auflistung von benutzerdefinierten Werte enthält aus der ein Anwender einen Eintrag auswählen kann. Diese Dropdown-Liste kann um weitere Elemente wie zum Beispiel ein Scrollbalken, eine Filterfunktion oder auch Icon erweitert werden. Zusätzlich besteht die Möglichkeit Einträge dieser Liste zu Gruppieren, um diese Übersichtlich zu Gestalten.<br><br>
'''Darstellung'''<br>
Darstellung einer '''inaktiven''' Dropdown-Liste.<br>
[[Datei:Drop-down-menu.inactive.png|frame|none|inaktive Dropdown-Liste mit Beschriftung "Grund der Abregelung*"]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste.<br>
[[Datei:Drop-down-menu.active.png|frame|none|aktive Dropdown-Liste mit Beschriftung "Grund der Abregelung*"]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste inklusive Icon, Filter und einem Scrollbalken.<br>
[[Datei:Dropdown mit Icon.png|frame|none|aktive Dropdown-Liste mit Icon und Filter]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste inklusive Gruppierung.<br>
[[Datei:Dropdown mit Gruppierung.png|frame|none|aktive Dropdown-Liste mit Gruppierung]]
[https://www.primefaces.org/primeng/#/dropdown Web primeng-dropdown-Link]<br>

===Kalender (calendar)===
<p>zum Seitenanfang [[#top]]</p>

In der Regel umfasst ein Datums- und / oder Uhrzeitfeld eine Kalenderauswahl, so das ein Datum nicht händisch als String eingegeben werden muss. Durch klick in das Textfeld, öffnet sich ein Kalenderfenster, aus dem das gewünschte Datum und die Uhrzeit auswählt werden kann. <br>
'''Darstellung'''
[[Datei:Calendar.png|frame|none|Kalender mit Beschriftung "Startzeitpunkt*"]]
[https://www.primefaces.org/primeng/#/calendar Web primeng-calendar-Link]<br>

===Netzspezifische Icons===
<p>zum Seitenanfang [[#top]]</p>

'''offener Punkt, Klärungsbedarf'''<br>

<li>Icons werden von der e-netz bereitgestellt<br>
<li>Lizenz wahrscheinlich MIT<br>
<li>Muss mit Frau Wittek besprochen werden/bzw. Unterstützung<br>

==Steuerelemente für Formulare==
<p>zum Seitenanfang [[#top]]</p>
<br>
Zur Erfassung von Daten werden Eingabe- und Auswahlfelder bereitgestellt, in die ein Benutzer Werte über die Tastatur oder eine Werteliste eingeben kann oder Auswahlknöpfe, die der Benutzer mit der Maus beeinflusst. Hierbei werden Pflichtfelder (müssen gefüllt werden und sind mit einem Sternchen entsprechend gekennzeichnet) und Kann-Felder (können gefüllt werden) unterschieden. In der folgenden Tabelle finden Sie eine Auflisten der möglichen Steuerelemente für Formulare. Auf die einzelnen Elemente wird in den folgenden Abschnitten weiter eingegangen.<br>

{| class="wikitable"
|-
! Pflichtfeld Typ
! Visualisierung
|-
| text invalid
| [[Datei:Steuerelemente fuer Formular 1.png]]
|-
| text valid
| [[Datei:Steuerelemente fuer Formular 2.png]]
|-
| numeric valid
| [[Datei:Steuerelemente fuer Formular-numeric.png]]
|-
| date,datetime,date range valid
| [[Datei:Steuerelemente fuer Formular 3.png]]
|-
| Gesperrt
| [[Datei:Steuerelemente fuer Formular 4.png]]
|-
| Drop-Down valid
| [[Datei:Steuerelemente fuer Formular 5.png]]
|-
| Validierung beim Verlassen eines Feldes
| [[Datei:Steuerelemente fuer Formular 6.png]]
|}

==Steuerelement Kalender==
<p>zum Seitenanfang [[#top]]</p>
<br>
[https://www.primefaces.org/primeng/#/calendar Web primeng-calendar-Link]<br>

'''Darstellung'''
[[Datei:Kalender-Ansichten.png|frame|none|Darstellung der Kalenderansicht für Monat, Woche und Tag]]
<br>
In der Kalenderfunktion stehen dem Benutzer folgende Ansichten zur Verfügung:<br>
<li> Monatsansicht<br>
<li> Wochenansicht<br>
<li> Arbeitswochenansicht<br>
<li> Tagesansicht<br><br>

Bei der Kalenderfunktion hat der Anwender die Möglichkeit von durch einen Klick auf die (Arbeits-)Wochen- oder Tagesansicht zu wechseln. Durch Klicken mit der Maustaste in einen freien Zeitraum können neue Termine erfasst werden. Für eine neue Terminspanne markieren Sie einen freien Bereich durch SHIFT und Klick mit der linken Maustaste und erfassen für diesen Zeitraum einen Termin. Zum Editieren von bestehen den Terminen genügt ebenfalls ein Klick mit der Maustaste. <br>
Über die ‘‘‘Drag & Drop‘‘‘ Funktion können Termine in der Monatsansicht oder der Wochenansicht in einen anderen Wochentag verschoben werden. Um einen Termin zeitlich innerhalb eines Tages zu verschieben und Zeitspanne anzupassen, müssen Sie sich in der Wochenansicht oder der Tagesansicht befinden.<br>
<br>
Folgende Funktionen stehen zusätzlich zur Verfügung:<br>
<li> Termine ICS-Format exportieren (generell in der Applikation!)<br>
<li> Filtern über Kalendereinträge (ArrayList)<br>
<li> Unterschiedliche farbliche Darstellung einzelner Termine (Termin Template)<br>

==Steuerelement Grid==
<p>zum Seitenanfang [[#top]]</p>
<li> Buttons zum Absprung in Detailmaske (Lese/Bearbeitung), Stornierbutton in die erste Linke Spalte im Grid<br>
<li> Absprung durch Doppelklick in Detailmaske (Lese/Bearbeiten)<br>
<li> Datensatz hinzufügen-Button rechts oberhalb des Grid´s<br>
<li> Alternating row color<br>
<li> Hovereffekt (Zeile)<br>
<li> Einzelselektion und Mehrfachselektion mit Strg-Taste, Shift-Taste<br>
<li> Hovereffekt in Spaltenkopf unterstreichen und Mauscursor Hand (Rückmeldung für mögliche Aktionen an den Benutzer)<br>
<li> Klick auf Spaltenkopf, Sortierung ASC, DESC<br>
<li> Merfachsortierung durch klicken der Shift-Taste<br>
<li> Filterzeile als eigene Zeile direkt unterhalb des Spaltenkopfs<br>
<li> Virtual scrolling anstatt Pagination<br>
<li> Spaltenkopf mit Filter und Fußzeile bleiben beim scrollen stehen<br>
<li> Quickfiler (optional)<br>
<li> Externe Filter (optional) aber als Toggle-Switch<br>
<li> Stylevorgaben kommen per ok-vendor.sass !!!!!!!!!<br>
- Schriftrart<br>
- Schriftgröße<br>
- Zeilenhöhe<br>
- Farben<br>
- Style fürs Grid<br>
<li> Kompaktes Grid definieren. Spaltengröße sinnvoll definieren<br><br>
[https://www.ag-grid.com/ Web ag-grid-Link]<br>

==Steuerelement Heatmap / Kartendarstellung==
<p>zum Seitenanfang [[#top]]</p>
<br>
Ermöglicht das Einbinden von zweidimensionalen Karten-Elementen auf Webseiten, Mobile Apps sowie für Navigationen. Diese Kartendarstellungen sind von Standortdaten angetrieben und bieten zusätzlich Echtzeit-Updates. Durch einen Entwickler können diese vollständig angepasst und konfiguriert werden. Das Hinzufügen von Points of Interest, Live-Standortdaten und Persistenz globaler Objekte ist ebenfalls möglich.<br>

<li>[https://www.mapbox.com/ Web mapbox-Link]<br>
<li>[https://openlayers.org/ Web OpenLayers-Link]<br>
- Unterstützt WMS-Services (Web Map Service)<br>
- OpenSreetMap muss Lizenz geklärt werden! ODbL.<br><br>
'''Lizenzkompatibilität muss beim Projekt geklärt werden'''<br>

<br>
[[Datei:Karten-Beispiel.png|frame|none|Beispiel einer Kartenansicht]]

<h1 style="page-break-before:always">Layout</h1>
<p>zum Seitenanfang [[#top]]</p>

==Tabellen/Listen==
<p>zum Seitenanfang [[#top]]</p>

===Tabelle===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Table.png|frame|none|Darstellung einer Tabelle]]

'''Elemente'''
[[Datei:Table.labeled.png|frame|none|Elemente einer Tabelle]]
1 Tabellenkopf<br>
1.1 Spaltenüberschrift<br>
1.2 Sortiereinstellungen<br>
1.3 Spaltenkopf<br>
1.4 Spaltenfilter<br>
1.5 Spaltensortierung<br>
2 Tabelleninhalt<br>
3 Tabellenfuß<br>
3.1 Spaltenfuß<br>

===blätterbare Tabelle===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Pageable-table.png|frame|none|Darstellung einer blätterbaren Tabelle]]

'''Elemente'''
[[Datei:Pageable-table.labeled.png|frame|none|Elemente einer blätterbaren Tabelle]]
1 Tabellenkopf<br>
1.1 Spaltenüberschrift<br>
1.2 Sortiereinstellungen<br>
1.3 Spaltenkopf<br>
1.4 Spaltenfilter<br>
1.5 Sortierung<br>
2 Tabelleninhalt<br>
3 Seitennavigation<br>

==oK-Steuerelemente==
<p>zum Seitenanfang [[#top]]</p>

===Topologie-Baum===
<p>zum Seitenanfang [[#top]]</p>

Das Steuerelement bietet die Möglichkeit, [[Topologie (Strom)| topologische]] Zusammenhänge eines Stromnetzes hierarchisch darzustellen.
Der Topologie-Baum ist als gemeinsames Steuerelment in unterschiedlichen ok-Modulen wiederverwendbar und definiert eine standardisierte Sicht. Die generell möglichen, darstellbaren topologischen Elemente richten sich nach den in oK definierten Elementen.

Die Klärung der Frage, wie ein Netz hierarchisch dargestellt werden kann und welche Elemente des Netzes tatsächlich angezeigt und ausgewählt werden können, ist nicht Aufgabe dieses Steuerelementes. Dies ist Aufgabe der darunter liegenden Anwendung und kann aufgrund fachlicher Aspekte unterschiedlich ausgeprägt sein.<br><br>
'''Elemente'''
[[Datei:TopologyTree.labeled.png|frame|none|Elemente eines Topologie-Baums]]

1 Steuerleiste<br>
1.1 Suchbegriff<br>
Im [[Eingabefeld]] "Suchbegriff" können Begriffe eingeben werden, nach denen in der zugrundeliegenden Topologie gesucht werden kann.
Die Begriffe können folgende [https://de.wikipedia.org/wiki/Wildcard_%28Informatik%29 Platzhalter (Wildcard)] beinhalten:
{| class="wikitable sortable"
|-class="hintergrundfarbe6"
!Platzhalter
!Bezeichnung
!Verwendung
|-
|?
|Fragezeichen
|Platzhalter für genau ein Zeichen
|-
|*
|Sternchen
|Platzhalter für beliebig viele (auch null) Zeichen
|-
|#
|Doppelkreuz
|Platzhalter für einen numerischen Wert
|}
1.2 Suchen<br>
Durch Drücken der [[Schaltfläche]] "Suchen", wird nach dem angegebenen Suchbegriff gesucht. Ist die Suche erfolgreich, werden alle Elemente im Navigationsbereich ausgewählt (Mehrfachselektion), die dem Suchbegriff entsprechen. Gleichzeit wird zum ersten Element aus der Ergebnismenge gesprungen.<br>

1.3 Einstellungen'''<br>
Über die Schaltfläche "Einstellungen" können Filterkriterien definiert werden, die die Anzeige auf passende topologische Elemente im Navigationsbereich einschränken.<br/>
<div style="background:#fff0d0;border-color:#ffb200;border-radius:5px;border-style:solid;border-width:1px;margin:16px;padding:10px">[[Datei:Warning-yellow.icon.svg|24px]] Die Definition möglicher Filterkriterien und Regelwerke ist Teil späterer Festlegungen.</div>

2 Statusleiste<br>
Die Statusleiste zeigt allgemeine Informationen zu den im Navigationsbereich angezeigten Elementen an.<br>
2.1 Datum<br>
Das Erstellungsdatum (Stand) der zugrundeliegenden Daten, auf dem die Anzeige im Navigationsbereich basiert.<br>
2.2 Uhrzei<br>
Die Erstellungsuhrzeit(Stand) der zugrundeliegenden Daten, auf dem die Anzeige im Navigationsbereich basiert.<br>
2.3 Filter<br>
Das Symbol "Filter" zeigt an, ob mindestens ein Filter aktiviert ist.<br>
2.4 Benachrichtigung<br>
Im Benachrichtigungsbereich können verschiedene Symbole angezeigt werden, die über zusätzliche Hinweise informieren. In Beispiel ist liegt hier eine Warnungmeldung vor.<br>

3 Navigationsbereich<br>
Im Navigationsbereich werden topologische Zusammenhänge in einer baumartigen Struktur angezeigt. Die Ausprägung der Topologie als Hierarchie ist Aufgabe der jeweiligen Anwendung.<br>

'''Ordnung/Sortierreihenfolge'''<br>

<div style="background:#fff0d0;border-color:#ffb200;border-radius:5px;border-style:solid;border-width:1px;margin:16px;padding:10px">[[Datei:Warning-yellow.icon.svg|24px]]<br>
- Was für ein Steuerelement nutzt da BTC? <br>
- Wir müssten da einen Link bereitstellen ggf. mit Matthias Rohr oder Felix Korb besprechen <br></div>

==Definition von ok HTML Elementen==
<p>zum Seitenanfang [[#top]]</p>

ok HTML Elemente müssen durch npm paketiert und oK-konform gestyled werden.<br>

Zu den oK HTML Elemente zählen:<br>
<li> Date (primeng)<br>
<li> DateTime (primeng)<br>
<li> DateRange (primeng)<br>
<li> komplexe DropDown (primeng) bspw. Icons, Tabelle, Gruppen<br>
<li> Grid (ag-grid)<br>
<li> Gantt (zurzeit nichts geeignetes gefunden)<br>
<li> Kalender (primeng)<br>
<li> Charts (primeng, c3js, d3js)<br>
<li> Navbar (ok-element)<br>
<li> Modale Dialoge (primeng) sollten vermieden werden<br>
<li> Tabs (primeng)<br>
<li> Akkordion (primeng)<br>
<li> MultiSelect (primeng)<br>
<li> Chips (primeng)<br>
<li> Editor (primeng)<br>
<li> Messages toast (primeng)<br>
<br>
ACHTUNG: Nicht definierte ok Steuerlemente immer erst bei primeng schauen!<br>
<br>
Weitere Steuerlemente müssen über SaaS Themeable sein!<br>
<li> [https://www.primefaces.org/primeng/#/ Web primefaces - Link]<br>
<li> [https://www.ag-grid.com Web ag-grid - Link]<br>
<li> [https://c3js.org/ Web c3js.org - Link]<br>
<li> [https://d3js.org/ Web d3js.org - Link]<br>

==Definition von Standard HTML Elementen==
<p>zum Seitenanfang [[#top]]</p>

Standard HTML Elemente müssen nicht durch npm paketiert werden.<br>
Es ist ausreichend, ok-Styles als npm Pakete zu definieren und auf den HTML Elementen anzuwenden.<br>
<br>
Zu den Standard HTML Elemente zählen:<br>

<li> Textfelder<br>
<li> Validation<br>
<li> Passwort<br>
<li> Simple DropDown Listen<br>
<li> CheckBox<br>
<li> Buttons<br>
<li> Button Groups<br>
<li> Radio Buttons<br>
<li> File Upload<br>
<li> Numerics<br>
<li> (Drag&Drop)<br>
<li> List Group<br>
<li> Tables (wenn keine besonder Funktionalität, sonst ag-grid)<br>
<br>
Komponenten aus https://getbootstrap.com<br>

==Portal==
<p>zum Seitenanfang [[#top]]</p>

==Standarddialoge==
<p>zum Seitenanfang [[#top]]</p>

===Eingabedialog===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Input-dialog.png|frame|none|Darstellung eines Eingabedialogs]]
'''Elemente'''
[[Datei:Input-dialog.labeled.png|frame|none|Elemente eines Eingabedialogs]]
1 Titel<br>
2 Anzeige-/Eingabebereich<br>
3 Steuerleiste<br>

===Benachrichtigungsdialog===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:notification-dialog.png|frame|none|Darstellung eines Benachrichtigungsdialogs]]
'''Elemente'''
[[Datei:notification-dialog.labeled.png|frame|none|Elemente eines Benachrichtigungsdialogs]]
1 Titel<br>
2 Benachrichtigung<br>
3 Steuerleiste<br>

===Wizard===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Wizard.png|frame|none|Darstellung eines Wizards]]

'''Elemente'''
[[Datei:Wizard.labeled.png|frame|none|Elemente eines Wizards]]
1 Überschrift<br>
2 Bearbeitungsschritte<br>
3 Inhalt<br>
4 Steuerleiste<br>

===Message Toast===
<p>zum Seitenanfang [[#top]]</p>
<br>
Ein Message Toast ist ein kurzer Hinweistex welcher als Popup eingeblendet und nach einem Moment wieder ausgeblendet wird, ohne das zwangsläufig eine Benutzeraktion erfolgen muss.<br>
Die Eigenschaften eines Toast können beliebig konfiguriert werden.<br>

'''Darstellung'''
[[Datei:Message toast.png|frame|none|Darstellung eines Message Toast]]<br>

'''Für open KONSEQUENZ wurden folgende Konfigurationen abgestimmt'''<br>
<li>Toasts erscheinen oben rechts<br>
<li>Verschwinden nach rechts oben<br>
<li>Automatisches verschwinden nach:<br>
   Erfolgreich: 2 Sekunden<br>
   Info: Muss manuell geschlossen werden<br>
   Warnung: 7 Sekunden<br>
   Fehler: 7 Sekunden<br>
<li>Messages: Erfolgreich, Fehler, Info, Warnung<br>
<li>Maximal drei Zeilen Content in einem Toast<br>
<li>Defaultfarben verwenden<br><br>

[https://www.primefaces.org/primeng/#/toast Web primeng-Toast-Link]

==Navigationselemente==
<p>zum Seitenanfang [[#top]]</p>

<br>Um das Navigieren innerhalb einer Web-Seite zu vereinfachen gibt es unterschiedliche Navigationselemente, diese werden in den folgenden Kapiteln kurz erläutert.<br>

===Navigation Bar (Navbar)===
<p>zum Seitenanfang [[#top]]</p>
<br>
Das Navbar-Element ist ein permanent sichtbares Navigationselement, welches horizontal oder vertikal auf einer Webseite angeordnet werden kann und dem Benutzer die
Möglichkeit bietet, wichtige Seiten direkt aufzurufen. Der Vorteil ist, dass eine Navbar für jede Seite separat konfiguriert werden kann.<br><br>
'''Darstellung'''
<br>
[[Datei:mit Autodisplay.png|frame|none|Darstellung einer Navbar mit Autodisplay]]
<br>
[[Datei:ohne Autodisplay.png|frame|none|Darstellung einer Navbar ohne Autodisplay]]
<br>
Vorteile einer Navbar:<br>
<li> Bietet einen schnellen Überblick über die Struktur der Webseite<br>
<li> Jede Seite, bzw. Kategorie ist direkt über die Navbar ansteuerbar<br>
<li> Die Navbar ist für jede Seite separat konfigurierbar<br>
<li> Für jedes Navigationselement kann ein eigenes Submenü erstellt werden<br>
<li> Die aktuelle Seite kann farblich hinterlegt werden<br>
<li> In einer Navbar können Funktionen wie zum Beispiel Abmelden oder eine Such-Funktion eingebunden werden<br>
<li> Es können bis zu vier Navbars auf einer Seite verwendet werden (Standartmäßig werden aber nur zwei implementiert)<br>
<br>
Nachteile einer Navbar:<br>
<li> Muss für jede Seite einzeln Konfiguriert werden<br>
<li> Kann bei umfangreichen Seiten schnell unübersichtlich werden oder Überladen wirken<br>
<br>
[https://www.primefaces.org/primeng/#/menubar Web primeng-menubar-Link]

===Accordion===
<p>zum Seitenanfang [[#top]]</p>
<br>
'''Beschreibung'''<br>
Ein Accordion ist ein Navigationselement, welches dazu dient umfangreiche Listen mit Inhalten platzsparend auf Webseiten abzubilden.<br>
[https://www.primefaces.org/primeng/#/accordion Web primeng-accordion-Link]

'''Darstellung'''<br>
Einzelselektion<br>
[[Datei:akkordion-einzelselektion.png|frame|none]]<br>
Mehrfachselektion<br>
[[Datei:akkordion-mehrfachselektion.png|frame|none]]

===TabView===
<p>zum Seitenanfang [[#top]]</p>
<br>
Eine TabView ist eine Komponente zum einfachen Gruppieren von Inhalten auf einer Seite in Form von Registerkarten. Auf jeder Registerkarte können z.B. Formulare implementiert werden, die durch den Anwender abgearbeitet werden müssen. Durch die Verwendung von Registerkarten wird ein schnelles Navigieren zwischen den einzelnen Inhalten ermöglicht. Zudem können diese Registerkarten je nach Anfordeung konfuguriert werden.<br>

[https://www.primefaces.org/primeng/#/tabview Web primeng-tabview-Link]

[[Datei:tab-view.png|frame|none|Darstellung einer TabView]]<br>

Für openKONSEQUENZ wurden folgende Konfigurationen vorgegeben:<br>
<li>Valid: Grüner Balken in Tab (Nur wenn allen Steuerelementen im Content valid sind)
<li>Invalid: Roter Balken in Tab
<li>Neuen Tab dynamisch hinzufügen per + Tab
<li>Tab entfernen mit Lösch-Button im Content-Bereich
<li>Icons können je nach bedarf im Tab angezeigt werden
<li>Ausrichtung der Tabs (oben, unten, links, rechts)

<h1 style="page-break-before:always">Barrierefreiheit</h1>
<p>zum Seitenanfang [[#top]]</p>

Barrierefreiheit bezeichnet eine Gestaltung der baulichen Umwelt sowie von Informationsangeboten, Kommunikation usw. dergestalt, dass sie auch von Menschen mit Beeinträchtigungen ohne zusätzliche Hilfen genutzt und wahrgenommen werden können.

Um Menschen ein barrierefreies Arbeiten in der digitalen Welt zu ermöglichen, sind verschiedene Aspekte zu betrachten: Zum einen müssen Software und das heute nicht mehr wegzudenkende Internet barrierefrei gestaltet werden. Zum anderen muss einigen Menschen mit Behinderung überhaupt erst die Bedienung eines Computers ermöglicht werden durch unterstützende Technologien. Dies können beispielsweise Augensteuerung und Mundmaus bei körperlichen Behinderungen, oder Screenreader und Braillezeile bei Blinden sein. Weitere Beispiele stellen Technologien aus dem Bereich der Unterstützten Kommunikation dar, die Kommunikation in manchen Fällen überhaupt erst möglich machen.

Quelle: [ https://de.wikipedia.org/wiki/Barrierefreiheit ]

<h1 style="page-break-before:always">Internationalisierung</h1>
<p>zum Seitenanfang [[#top]]</p>

Internationalisierung bedeutet in der Informatik beziehungsweise in der Softwareentwicklung, ein Programm so zu gestalten, dass es leicht (ohne den Quellcode ändern zu müssen) an andere Sprachen und Kulturen angepasst werden kann.

Internationalisierung (englisch internationalization oder internationalisation) wird gerne mit dem Numeronym i18n abgekürzt (im englischen Wort Internationalization befinden sich 18 Buchstaben zwischen dem ersten Buchstaben I und dem letzten Buchstaben n). Hierunter fallen diejenigen Aufgaben, die der Entwickler/Programmierer eines Programms bewältigen muss. Dazu darf er zum Beispiel Beschreibungstexte nicht im Quellcode fest kodieren, sondern muss Variablen benutzen, die von einer Quelle zur Laufzeit eingelesen werden. Aber auch Datumsformatierungen und die sprachabhängige Oberflächengestaltung (z. B. kann Text unterschiedlich lang sein oder die Rechts-Nach-Links-Orientierung kann sich unterscheiden) gehören hierzu.

Im nächsten Schritt erfolgt die Lokalisierung (localization oder localisation), die als l10n abgekürzt wird (10 Buchstaben zwischen l und n). Ein Programm sollte im vorigen Schritt so gestaltet sein, dass diese Änderungen nicht mehr vom Programmierer durchgeführt werden müssen. Dieser Prozess bezeichnet die reine Übersetzung von zum Beispiel Texten in eine Landessprache.

Quelle: [ https://de.wikipedia.org/wiki/Internationalisierung_(Softwareentwicklung) ]

<h1 style="page-break-before:always">allg. Usability-Richtlinien</h1>
<p>zum Seitenanfang [[#top]]</p>

Software-Ergonomie (zur Wortherkunft siehe Software und Ergonomie) ist die Arbeit hin zu leicht verständlicher und schnell benutzbarer Software unter den gebotenen technischen Möglichkeiten und unter der Einhaltung definierter bzw. empirisch entstandener Standards und Styleguides. Die Software-Ergonomie ist ein Teilgebiet der Mensch-Computer-Interaktion, und ihr Ergebnis ist die Gebrauchstauglichkeit von Computerprogrammen.

Gegenstandsbereich der Software-Ergonomie im eigentlichen Sinne ist der arbeitende Mensch im Kontext (Softwarenutzung an Arbeitsplätzen). Allgemein wird heute die Benutzung von bzw. die Interaktion mit Computern betrachtet. Dies bedeutet die Berücksichtigung (neuro)psychologischer Aspekte beim Entwerfen der Software – wie dies methodisch auch die Ingenieurpsychologie anstrebt –, um eine optimale Mensch-Maschine-Schnittstelle zur Verfügung zu stellen. Dies soll sich in besonders leicht verständlichen funktionalen Einheiten ausdrücken (Bsp. einfache Dialoge bei Systemen mit GUI). Die Entwicklung gebrauchstauglicher Software wird im Rahmen des Usability-Engineering geleistet.

Quelle: [ https://de.wikipedia.org/wiki/Software-Ergonomie]

<h1 style="page-break-before:always">Paketierung der Styles (customized Bootstrap Template und individuelle allg. oK Styles)</h1>
<p>zum Seitenanfang [[#top]]</p><br>

Aufteilung der Stylse oK und eigene Unternehmensanpassungen.<br>
<li> '''ok-common.saas'''<br>
- Für Layout und globale Styles customized Bootstrap Template<br>
- ok-CI/CD<br>
<li> '''ok-vendor.saas'''<br>
- Nur für die Componenten-Styles von Drittanbietern<br>
(z.B.: primeng, ag-grid, c3.js, d3.js)<br>
<li> '''ok-components.saas'''<br>
- Nur für ok-Components<br>
(z.B.: NavBar)<br>
<br>
Achtung: Unternehmensanpassungen (CI/CD) werden in eigenen neuen saas Dateien beschrieben! Dabei müssen die entsprechenden saas-Variablen überschrieben werden.<br>

Styleguide (in Bearbeitung)

2019-07-08T12:28:02Z

Eschlenker: /* Auswahl (check-box) */

zurück zur [[Hauptseite]]
zurück zur [[Styleguide]]

<h1 style="page-break-before:always">Zielsetzung und Abgrenzung</h1>
<p>zum Seitenanfang [[#top]]</p>
'''Zielsetzung:'''<br>
<li> Konsolidierung des UI StyleGuides<br>
<li> Evaluierung Tooling für den StyleGuide<br>
- IMIS<br>
- Wiki<br>
- sonst<br>
<li> Package Manager (npm)<br>
<li> Entwurfsentscheidungen ng Components vs Elements<br>
<li> Best of Konsolidierung der Steuerelemente aus den existierenden UserModulen<br>
<li> UX Vorgaben definieren<br>
<li> Paketierung der Styles (customized Bootstrap Template, eigenes allg. OK Stylesheet) als npm<br>
<br>
'''Abgrenzung:'''
<li> Vorerst kein Code (nur beispielhaft)<br>
<br>

<h1 style="page-break-before:always">Design</h1>
<p>zum Seitenanfang [[#top]]</p>

Um ein einheitliches Design zu gewährleisten, müssen die verwendeten Farben, Formen und Schriftarten auf allen User Interfaces dem vorgegebenen StyleGuide entsprechen. Diese Vorgaben werden in den folgenden Kapiteln beschrieben.
==Farben==
<p>zum Seitenanfang [[#top]]</p>

In diesem Kapitel wird das abgestimmte Farbschema (Hauptfarben, Farbverläufe, Sekundärfarben, u. s. w.) und deren Verwendung auf Webseiten und User Interfaces erläutert. Zusätzlich finden Sie hier Informationen über den jeweiligen Farbcode und die CSS Codierung.<br>

===Hauptfarben===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Primary
| <div style="color:#ffffff; background:#003a5f; padding: 1px 10px">#003a5f</div>
|-
| Success
| <div style="color:#ffffff; background:#80b300; padding: 1px 10px">#80b300</div>
|-
| Info
| <div style="color:#ffffff; background:#0080c0; padding: 1px 10px">#0080c0</div>
|-
| Default
| <div style="color:#000000; background:#ffffff; padding: 1px 10px">#ffffff</div>
|-
| Text
| <div style="color:#ffffff; background:#333333; padding: 1px 10px">#333333</div>
|}

===Farbverläufe===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
! CSS
|-
| Streifen Header
| <div style="color:#ffffff; background: linear-gradient(to right, rgba(121, 182, 28, 1) 0%, rgba(2, 129, 196, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0); padding: 1px 10px">#79b61c - #0281c4</div>
| <code>background: linear-gradient(to right, rgba(121, 182, 28, 1) 0%, rgba(2, 129, 196, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0);</code>
|-
| Balken Header
| <div style="color:#000000; background: linear-gradient(to right, rgba(232, 238, 231, 1) 0%, rgba(229, 237, 242, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0); padding: 1px 10px">#e8eee7- #e5edf2</div>
| <code>background: linear-gradient(to right, rgba(232, 238, 231, 1) 0%, rgba(229, 237, 242, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0);</code>
|}

===Flächen und Linien===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Hintergrund
| <div style="color:#000000; background:#f8fafd; padding: 1px 10px">#f8fafd</div>
|-
| Flächen/Tabellen
| <div style="color:#000000; background:#f5f8fc; padding: 1px 10px">#f5f8fc</div>
|-
| Hervorhebung/Eingabefelder/Tabellenzeilen
| <div style="color:#000000; background:#e9f0f9; padding: 1px 10px">#e9f0f9</div>
|-
| Linien
| <div style="color:#000000; background:#ccdbe6; padding: 1px 10px">#ccdbe6</div>
|-
| Umrandung Formularfelder
| <div style="color:#000000; background:#b7cbda; padding: 1px 10px">#b7cbda</div>
|}

===Sekundärfarben===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Warning
| <div style="color:#000000; background:#ffb200; padding: 1px 10px">#ffb200</div>
|-
| Danger
| <div style="color:#ffffff; background:#990000; padding: 1px 10px">#990000</div>
|-
| Disabled
| <div style="color:#ffffff; background:#567d96; padding: 1px 10px">#567d96</div>
|}

==Schriftarten==
<p>zum Seitenanfang [[#top]]</p>

Ebenso wie das Farbschema unterliegen auch die zu verwendenden Schriftarten dem abgestimmten Styleguide. Bei der Verwendung von zu vielen unterschiedlichen Schriftarten und Schriftgrößen kann das User Interface schnell unruhig wirken. Die gewählte Schriftart sollte gut lesbar und nicht zu klein sein.<br>

===Schriftfamilie===
<p>zum Seitenanfang [[#top]]</p>

Für openKONSEQUENZ wurde die Schriftart '''Source Sans Pro''' festgelegt. Diese Schriftart ist bei allen User Interfaces und Texten zu verwendet.

[https://github.com/adobe-fonts/source-sans-pro Download-Link]

[https://www.google.com/fonts/specimen/Source+Sans+Pro WebFont-Link]

==Rahmenabstände==
<p>zum Seitenanfang [[#top]]</p>

'''offener Punkt'''<br>

===Symbole===
<p>zum Seitenanfang [[#top]]</p>

In diesem Abschnitt werden allgemeine Bedien- und Status-Symbole beschrieben. Um ein einheitliches Aussehen der oK-Module sicherzustellen, sollen diese anwendungsübergreifend verwendet werden.
{| class="wikitable sortable"
|-class="hintergrundfarbe6"
!Symbol
!Bezeichnung
|-
|[[Datei:Filter.icon.svg|center|24px]]
|Filter
|-
|[[Datei:Menu.icon.svg|center|24px]]
|Menü
|-
|[[Datei:search.icon.svg|center|24px]]
|Suche
|-
|[[Datei:Warning.icon.svg|center|24px]]
|Warnung
|-
|[[Datei:Copy.png|center|24px]]
|Kopieren
|-
|[[Datei:pencil.png|center|24px]]
|Bearbeiten
|-
|[[Datei:save.png|center|24px]]
|Speichern
|-
|[[Datei:add.png|center|24px]]
|Hinzufügen
|-
|[[Datei:cog.png|center|24px]]
|Einstellung
|-
|[[Datei:print.png|center|24px]]
|Drucken
|-
|[[Datei:refresh.png|center|24px]]
|Refresch
|-
|[[Datei:trash.png|center|24px]]
|Löschen
|-
|[[Datei:question.png|center|24px]]
|Hilfe
|-
|[[Datei:cancel.png|center|24px]]
|Abbrechen
|}
<br>
Unter dem folgenden Link finden Sie weitere Symbole.<br>
[https://material.io/tools/icons/?style=baseline Web material-icons-Link]<br>
Lizenz: Apache license version 2.0 sollte/ist mit EPL kompatibel<br>

Die folgende Darstelung zeigt eine Beispiel-Menüleiste mit Icon, die zum Aufrufen von definierten Funktionen verwendet werden.
<br>
[[Datei:Menueleiste mit Icon.png|frame|none|Beispiel: Schaltflächen zum Aufrufen einer Funktion]]

===technische Vorschläge===
<p>zum Seitenanfang [[#top]]</p>

<h1 style="page-break-before:always">Komponenten</h1>
<p>zum Seitenanfang [[#top]]</p>

Komponenten sind die einzelnen Bestandteile einer grafischen Benutzeroberfläche /bzw. Benutzerschnittstelle. Im folgenden Abschnitt werden die unterschiedlichen Elemente kurz Erläutert.<br>

==Standard-Steuerelemente==
<p>zum Seitenanfang [[#top]]</p>

===Eingabefeld (text)===
<p>zum Seitenanfang [[#top]]</p>

Ein Eingabefeld ist das meinst verwendete Steuerelement einer grafischen Benutzeroberfläche und dient der Interaktion mit dem Benutzer. Diese Textfelder können Ein- oder auch Mehrzeilig sein und über die Tastatur können beliebige Zeichenketten eingegeben werden.<br>
'''Darstellung'''

'''inaktiv'''
[[Datei:Input.inactive.png|frame|none|inaktives Eingabefeld mit Beschriftung "Beschreibung*"]]

'''aktiv'''
[[Datei:Input.active.png|frame|none|aktives Eingabefeld mit Beschriftung "Beschreibung*"]]

===Führungstext (label)===
<p>zum Seitenanfang [[#top]]</p>

Führungstexte (englich: label) gehören auch zu den Steuerelementen einer grafischen Benutzeroberfläche. Diese werden in der Regel dazu verwendet um Ein- oder Ausgabefelder, aber auch Radio Button oder Checkboxen zu beschriften.<br>

===Schaltfläche (button)===
<p>zum Seitenanfang [[#top]]</p>

Ein häufig genutztes Steuerelement für grafische Benutzeroberflächen ist die Schaltfläche (englisch: button). Mittels dieser Schaltflächen können Formulare abgesendet oder definierte Aktionen durchgeführt werden.<br>
'''Farben'''
{| class="wikitable"
|-
! Schaltfläche
! Hintergrundfarbe
! Konturfarbe
! Textfarbe
|-
| <div class="bootstrap-button" style="background:#003a5f; border-color:#002a45; color:#ffffff;">Primary</div>
| <div class="color-value">#003a5f</div>
| <div class="color-value">#002a45</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#ffffff; border-color:#b7cbda; color:#0b325c;">Default</div>
| <div class="color-value">#ffffff</div>
| <div class="color-value">#b7cbda</div>
| <div class="color-value">#0b325c</div>
|-
| <div class="bootstrap-button" style="background:#80b300; border-color:#6e9a00; color:#ffffff;">Success</div>
| <div class="color-value">#80b300</div>
| <div class="color-value">#6e9a00</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#0080c0; border-color:#006fa7; color:#ffffff;">Info</div>
| <div class="color-value">#0080c0</div>
| <div class="color-value">#006fa7</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#ffb200; border-color:e6a000#; color:#ffffff;">Warning</div>
| <div class="color-value">#ffb200</div>
| <div class="color-value">#e6a000</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#990000; border-color:#800000; color:#ffffff;">Danger</div>
| <div class="color-value">#990000</div>
| <div class="color-value">#800000</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#337ab7; border-color:#2e6da4; color:#ffffff;">Disabled</div>
| <div class="color-value">#337ab7</div>
| <div class="color-value">#2e6da4</div>
| <div class="color-value">#ffffff</div>
|}
<br>
Die folgende Abbildung zeigt Beispielhaft eine Menüleiste mit Schaltflächen über diese definierte Funktionen aufgerufen werden können.
<br>
[[Datei:Beispiel-Button.png|frame|none|Beispiel: Schaltflächen zum Aufrufen einer Funktion]]

===Auswahl (check-box)===
<p>zum Seitenanfang [[#top]]</p>

Die Auswahl (englisch: checkbox) ist ein einfaches Steuerelement zur Eingabe von Ja/Nein-Werten, welche durch einen Mausklick aktiviert oder deaktiviert werden kann. Dieses Element findet meist auf Formularen Verwendung, wenn z. B. die Datenschutzbestimmungen oder die allgemeinen Geschäftsbedingungen anerkannt werden müssen.<br>
'''Darstellung'''
[[Datei:Check-box.png|frame|none|Auswahl mit [[Führungstext|Beschriftung]] "Gesamtnetz für Abregelung*"]]

<br>
Beispiel für die Verwendung eines Filters mit Auswahlfeldern (multi-Select).
<br>
[[Datei:checkbox.png|frame|none|Beispiel: Checkboxen]]

===Auswahllisten (MultiSelect)===
<p>zum Seitenanfang [[#top]]</p>

Ein weiteres Steuerelement ist die Auswahlliste (englisch: multiselect) und dient der Auswahl von mehreren Objekten aus einer Liste. Die Darstellungsform solcher Auswahllisten kann variieren.<br>
Weitere Informationen finden sie unter den folgende Verlinkungen.
<br>
[https://www.primefaces.org/primeng/#/multiselect Web primeng-multiselect-Link]<br>
[https://www.primefaces.org/primeng/#/chipst Web primeng-chips-Link]<br>
<br>
'''Darstellung'''<br>

Beispiel einer Auswahlliste als '''Dropdown'''.
<br>
[[Datei:multiselect.png|frame|none|Multiselect]]

Die Attribute dieser Auswahlliste<br>
<li>können Text ohne Icon enthalten<br>
<li>können Text mit Icon enthalten<br>
<li>sind Filterbar<br>
<br>

Beispiel einer Auswahlliste als '''Chips'''.<br>
In einem Eingabefeld werden mehrere Werte in Form von Chips eingefügt.<br>
[[Datei:multiselect - chip.png|frame|none|Multiselect als Chips]]

Die Attribute dieser Auswahlliste können<br>
<li>Text ohne Icon enthalten<br>
<li>Text mit Icon enthalten<br>
<br>

'''Beide Steuerelemente können kombiniert eingesetzt werden'''<br>

===Dropdown-Liste (drop-down list)===
<p>zum Seitenanfang [[#top]]</p>

Die Dropdown-Liste (englisch: drop-down-list) ist ein Textfeld welches eine Auflistung von benutzerdefinierten Werte enthält aus der ein Anwender einen Eintrag auswählen kann. Diese Dropdown-Liste kann um weitere Elemente wie zum Beispiel ein Scrollbalken, eine Filterfunktion oder auch Icon erweitert werden. Zusätzlich besteht die Möglichkeit Einträge dieser Liste zu Gruppieren, um diese Übersichtlich zu Gestalten.<br><br>
'''Darstellung'''<br>
Darstellung einer '''inaktiven''' Dropdown-Liste.<br>
[[Datei:Drop-down-menu.inactive.png|frame|none|inaktive Dropdown-Liste mit Beschriftung "Grund der Abregelung*"]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste.<br>
[[Datei:Drop-down-menu.active.png|frame|none|aktive Dropdown-Liste mit Beschriftung "Grund der Abregelung*"]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste inklusive Icon, Filter und einem Scrollbalken.<br>
[[Datei:Dropdown mit Icon.png|frame|none|aktive Dropdown-Liste mit Icon und Filter]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste inklusive Gruppierung.<br>
[[Datei:Dropdown mit Gruppierung.png|frame|none|aktive Dropdown-Liste mit Gruppierung]]
[https://www.primefaces.org/primeng/#/dropdown Web primeng-dropdown-Link]<br>

===Kalender (calendar)===
<p>zum Seitenanfang [[#top]]</p>

In der Regel umfasst ein Datums- und / oder Uhrzeitfeld eine Kalenderauswahl, so das ein Datum nicht händisch als String eingegeben werden muss. Durch klick in das Textfeld, öffnet sich ein Kalenderfenster, aus dem das gewünschte Datum und die Uhrzeit auswählt werden kann. <br>
'''Darstellung'''
[[Datei:Calendar.png|frame|none|Kalender mit Beschriftung "Startzeitpunkt*"]]
[https://www.primefaces.org/primeng/#/calendar Web primeng-calendar-Link]<br>

===Netzspezifische Icons===
<p>zum Seitenanfang [[#top]]</p>

'''offener Punkt, Klärungsbedarf'''<br>

<li>Icons werden von der e-netz bereitgestellt<br>
<li>Lizenz wahrscheinlich MIT<br>
<li>Muss mit Frau Wittek besprochen werden/bzw. Unterstützung<br>

==Steuerelemente für Formulare==
<p>zum Seitenanfang [[#top]]</p>
<br>
Zur Erfassung von Daten werden Eingabe- und Auswahlfelder bereitgestellt, in die ein Benutzer Werte über die Tastatur oder eine Werteliste eingeben kann oder Auswahlknöpfe, die der Benutzer mit der Maus beeinflusst. Hierbei werden Pflichtfelder (müssen gefüllt werden und sind mit einem Sternchen entsprechend gekennzeichnet) und Kann-Felder (können gefüllt werden) unterschieden. In der folgenden Tabelle finden Sie eine Auflisten der möglichen Steuerelemente für Formulare. Auf die einzelnen Elemente wird in den folgenden Abschnitten weiter eingegangen.<br>

{| class="wikitable"
|-
! Pflichtfeld Typ
! Visualisierung
|-
| text invalid
| [[Datei:Steuerelemente fuer Formular 1.png]]
|-
| text valid
| [[Datei:Steuerelemente fuer Formular 2.png]]
|-
| numeric valid
| [[Datei:Steuerelemente fuer Formular-numeric.png]]
|-
| date,datetime,date range valid
| [[Datei:Steuerelemente fuer Formular 3.png]]
|-
| Gesperrt
| [[Datei:Steuerelemente fuer Formular 4.png]]
|-
| Drop-Down valid
| [[Datei:Steuerelemente fuer Formular 5.png]]
|-
| Validierung beim Verlassen eines Feldes
| [[Datei:Steuerelemente fuer Formular 6.png]]
|}

==Steuerelement Kalender==
<p>zum Seitenanfang [[#top]]</p>
<br>
[https://www.primefaces.org/primeng/#/calendar Web primeng-calendar-Link]<br>

'''Darstellung'''
[[Datei:Kalender-Ansichten.png|frame|none|Darstellung der Kalenderansicht für Monat, Woche und Tag]]
<br>
In der Kalenderfunktion stehen dem Benutzer folgende Ansichten zur Verfügung:<br>
<li> Monatsansicht<br>
<li> Wochenansicht<br>
<li> Arbeitswochenansicht<br>
<li> Tagesansicht<br><br>

Bei der Kalenderfunktion hat der Anwender die Möglichkeit von durch einen Klick auf die (Arbeits-)Wochen- oder Tagesansicht zu wechseln. Durch Klicken mit der Maustaste in einen freien Zeitraum können neue Termine erfasst werden. Für eine neue Terminspanne markieren Sie einen freien Bereich durch SHIFT und Klick mit der linken Maustaste und erfassen für diesen Zeitraum einen Termin. Zum Editieren von bestehen den Terminen genügt ebenfalls ein Klick mit der Maustaste. <br>
Über die ‘‘‘Drag & Drop‘‘‘ Funktion können Termine in der Monatsansicht oder der Wochenansicht in einen anderen Wochentag verschoben werden. Um einen Termin zeitlich innerhalb eines Tages zu verschieben und Zeitspanne anzupassen, müssen Sie sich in der Wochenansicht oder der Tagesansicht befinden.<br>
<br>
Folgende Funktionen stehen zusätzlich zur Verfügung:<br>
<li> Termine ICS-Format exportieren (generell in der Applikation!)<br>
<li> Filtern über Kalendereinträge (ArrayList)<br>
<li> Unterschiedliche farbliche Darstellung einzelner Termine (Termin Template)<br>

==Steuerelement Grid==
<p>zum Seitenanfang [[#top]]</p>
<li> Buttons zum Absprung in Detailmaske (Lese/Bearbeitung), Stornierbutton in die erste Linke Spalte im Grid<br>
<li> Absprung durch Doppelklick in Detailmaske (Lese/Bearbeiten)<br>
<li> Datensatz hinzufügen-Button rechts oberhalb des Grid´s<br>
<li> Alternating row color<br>
<li> Hovereffekt (Zeile)<br>
<li> Einzelselektion und Mehrfachselektion mit Strg-Taste, Shift-Taste<br>
<li> Hovereffekt in Spaltenkopf unterstreichen und Mauscursor Hand (Rückmeldung für mögliche Aktionen an den Benutzer)<br>
<li> Klick auf Spaltenkopf, Sortierung ASC, DESC<br>
<li> Merfachsortierung durch klicken der Shift-Taste<br>
<li> Filterzeile als eigene Zeile direkt unterhalb des Spaltenkopfs<br>
<li> Virtual scrolling anstatt Pagination<br>
<li> Spaltenkopf mit Filter und Fußzeile bleiben beim scrollen stehen<br>
<li> Quickfiler (optional)<br>
<li> Externe Filter (optional) aber als Toggle-Switch<br>
<li> Stylevorgaben kommen per ok-vendor.sass !!!!!!!!!<br>
- Schriftrart<br>
- Schriftgröße<br>
- Zeilenhöhe<br>
- Farben<br>
- Style fürs Grid<br>
<li> Kompaktes Grid definieren. Spaltengröße sinnvoll definieren<br><br>
[https://www.ag-grid.com/ Web ag-grid-Link]<br>

==Steuerelement Heatmap / Kartendarstellung==
<p>zum Seitenanfang [[#top]]</p>
<br>
Ermöglicht das Einbinden von zweidimensionalen Karten-Elementen auf Webseiten, Mobile Apps sowie für Navigationen. Diese Kartendarstellungen sind von Standortdaten angetrieben und bieten zusätzlich Echtzeit-Updates. Durch einen Entwickler können diese vollständig angepasst und konfiguriert werden. Das Hinzufügen von Points of Interest, Live-Standortdaten und Persistenz globaler Objekte ist ebenfalls möglich.<br>

<li>[https://www.mapbox.com/ Web mapbox-Link]<br>
<li>[https://openlayers.org/ Web OpenLayers-Link]<br>
- Unterstützt WMS-Services (Web Map Service)<br>
- OpenSreetMap muss Lizenz geklärt werden! ODbL.<br><br>
'''Lizenzkompatibilität muss beim Projekt geklärt werden'''<br>

<br>
[[Datei:Karten-Beispiel.png|frame|none|Beispiel einer Kartenansicht]]

<h1 style="page-break-before:always">Layout</h1>
<p>zum Seitenanfang [[#top]]</p>

==Tabellen/Listen==
<p>zum Seitenanfang [[#top]]</p>

===Tabelle===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Table.png|frame|none|Darstellung einer Tabelle]]

'''Elemente'''
[[Datei:Table.labeled.png|frame|none|Elemente einer Tabelle]]
1 Tabellenkopf<br>
1.1 Spaltenüberschrift<br>
1.2 Sortiereinstellungen<br>
1.3 Spaltenkopf<br>
1.4 Spaltenfilter<br>
1.5 Spaltensortierung<br>
2 Tabelleninhalt<br>
3 Tabellenfuß<br>
3.1 Spaltenfuß<br>

===blätterbare Tabelle===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Pageable-table.png|frame|none|Darstellung einer blätterbaren Tabelle]]

'''Elemente'''
[[Datei:Pageable-table.labeled.png|frame|none|Elemente einer blätterbaren Tabelle]]
1 Tabellenkopf<br>
1.1 Spaltenüberschrift<br>
1.2 Sortiereinstellungen<br>
1.3 Spaltenkopf<br>
1.4 Spaltenfilter<br>
1.5 Sortierung<br>
2 Tabelleninhalt<br>
3 Seitennavigation<br>

==oK-Steuerelemente==
<p>zum Seitenanfang [[#top]]</p>

===Topologie-Baum===
<p>zum Seitenanfang [[#top]]</p>

Das Steuerelement bietet die Möglichkeit, [[Topologie (Strom)| topologische]] Zusammenhänge eines Stromnetzes hierarchisch darzustellen.
Der Topologie-Baum ist als gemeinsames Steuerelment in unterschiedlichen ok-Modulen wiederverwendbar und definiert eine standardisierte Sicht. Die generell möglichen, darstellbaren topologischen Elemente richten sich nach den in oK definierten Elementen.

Die Klärung der Frage, wie ein Netz hierarchisch dargestellt werden kann und welche Elemente des Netzes tatsächlich angezeigt und ausgewählt werden können, ist nicht Aufgabe dieses Steuerelementes. Dies ist Aufgabe der darunter liegenden Anwendung und kann aufgrund fachlicher Aspekte unterschiedlich ausgeprägt sein.<br><br>
'''Elemente'''
[[Datei:TopologyTree.labeled.png|frame|none|Elemente eines Topologie-Baums]]

1 Steuerleiste<br>
1.1 Suchbegriff<br>
Im [[Eingabefeld]] "Suchbegriff" können Begriffe eingeben werden, nach denen in der zugrundeliegenden Topologie gesucht werden kann.
Die Begriffe können folgende [https://de.wikipedia.org/wiki/Wildcard_%28Informatik%29 Platzhalter (Wildcard)] beinhalten:
{| class="wikitable sortable"
|-class="hintergrundfarbe6"
!Platzhalter
!Bezeichnung
!Verwendung
|-
|?
|Fragezeichen
|Platzhalter für genau ein Zeichen
|-
|*
|Sternchen
|Platzhalter für beliebig viele (auch null) Zeichen
|-
|#
|Doppelkreuz
|Platzhalter für einen numerischen Wert
|}
1.2 Suchen<br>
Durch Drücken der [[Schaltfläche]] "Suchen", wird nach dem angegebenen Suchbegriff gesucht. Ist die Suche erfolgreich, werden alle Elemente im Navigationsbereich ausgewählt (Mehrfachselektion), die dem Suchbegriff entsprechen. Gleichzeit wird zum ersten Element aus der Ergebnismenge gesprungen.<br>

1.3 Einstellungen'''<br>
Über die Schaltfläche "Einstellungen" können Filterkriterien definiert werden, die die Anzeige auf passende topologische Elemente im Navigationsbereich einschränken.<br/>
<div style="background:#fff0d0;border-color:#ffb200;border-radius:5px;border-style:solid;border-width:1px;margin:16px;padding:10px">[[Datei:Warning-yellow.icon.svg|24px]] Die Definition möglicher Filterkriterien und Regelwerke ist Teil späterer Festlegungen.</div>

2 Statusleiste<br>
Die Statusleiste zeigt allgemeine Informationen zu den im Navigationsbereich angezeigten Elementen an.<br>
2.1 Datum<br>
Das Erstellungsdatum (Stand) der zugrundeliegenden Daten, auf dem die Anzeige im Navigationsbereich basiert.<br>
2.2 Uhrzei<br>
Die Erstellungsuhrzeit(Stand) der zugrundeliegenden Daten, auf dem die Anzeige im Navigationsbereich basiert.<br>
2.3 Filter<br>
Das Symbol "Filter" zeigt an, ob mindestens ein Filter aktiviert ist.<br>
2.4 Benachrichtigung<br>
Im Benachrichtigungsbereich können verschiedene Symbole angezeigt werden, die über zusätzliche Hinweise informieren. In Beispiel ist liegt hier eine Warnungmeldung vor.<br>

3 Navigationsbereich<br>
Im Navigationsbereich werden topologische Zusammenhänge in einer baumartigen Struktur angezeigt. Die Ausprägung der Topologie als Hierarchie ist Aufgabe der jeweiligen Anwendung.<br>

'''Ordnung/Sortierreihenfolge'''<br>

<div style="background:#fff0d0;border-color:#ffb200;border-radius:5px;border-style:solid;border-width:1px;margin:16px;padding:10px">[[Datei:Warning-yellow.icon.svg|24px]]<br>
- Was für ein Steuerelement nutzt da BTC? <br>
- Wir müssten da einen Link bereitstellen ggf. mit Matthias Rohr oder Felix Korb besprechen <br></div>

==Definition von ok HTML Elementen==
<p>zum Seitenanfang [[#top]]</p>

ok HTML Elemente müssen durch npm paketiert und oK-konform gestyled werden.<br>

Zu den oK HTML Elemente zählen:<br>
<li> Date (primeng)<br>
<li> DateTime (primeng)<br>
<li> DateRange (primeng)<br>
<li> komplexe DropDown (primeng) bspw. Icons, Tabelle, Gruppen<br>
<li> Grid (ag-grid)<br>
<li> Gantt (zurzeit nichts geeignetes gefunden)<br>
<li> Kalender (primeng)<br>
<li> Charts (primeng, c3js, d3js)<br>
<li> Navbar (ok-element)<br>
<li> Modale Dialoge (primeng) sollten vermieden werden<br>
<li> Tabs (primeng)<br>
<li> Akkordion (primeng)<br>
<li> MultiSelect (primeng)<br>
<li> Chips (primeng)<br>
<li> Editor (primeng)<br>
<li> Messages toast (primeng)<br>
<br>
ACHTUNG: Nicht definierte ok Steuerlemente immer erst bei primeng schauen!<br>
<br>
Weitere Steuerlemente müssen über SaaS Themeable sein!<br>
<li> [https://www.primefaces.org/primeng/#/ Web primefaces - Link]<br>
<li> [https://www.ag-grid.com Web ag-grid - Link]<br>
<li> [https://c3js.org/ Web c3js.org - Link]<br>
<li> [https://d3js.org/ Web d3js.org - Link]<br>

==Definition von Standard HTML Elementen==
<p>zum Seitenanfang [[#top]]</p>

Standard HTML Elemente müssen nicht durch npm paketiert werden.<br>
Es ist ausreichend, ok-Styles als npm Pakete zu definieren und auf den HTML Elementen anzuwenden.<br>
<br>
Zu den Standard HTML Elemente zählen:<br>

<li> Textfelder<br>
<li> Validation<br>
<li> Passwort<br>
<li> Simple DropDown Listen<br>
<li> CheckBox<br>
<li> Buttons<br>
<li> Button Groups<br>
<li> Radio Buttons<br>
<li> File Upload<br>
<li> Numerics<br>
<li> (Drag&Drop)<br>
<li> List Group<br>
<li> Tables (wenn keine besonder Funktionalität, sonst ag-grid)<br>
<br>
Komponenten aus https://getbootstrap.com<br>

==Portal==
<p>zum Seitenanfang [[#top]]</p>

==Standarddialoge==
<p>zum Seitenanfang [[#top]]</p>

===Eingabedialog===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Input-dialog.png|frame|none|Darstellung eines Eingabedialogs]]
'''Elemente'''
[[Datei:Input-dialog.labeled.png|frame|none|Elemente eines Eingabedialogs]]
1 Titel<br>
2 Anzeige-/Eingabebereich<br>
3 Steuerleiste<br>

===Benachrichtigungsdialog===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:notification-dialog.png|frame|none|Darstellung eines Benachrichtigungsdialogs]]
'''Elemente'''
[[Datei:notification-dialog.labeled.png|frame|none|Elemente eines Benachrichtigungsdialogs]]
1 Titel<br>
2 Benachrichtigung<br>
3 Steuerleiste<br>

===Wizard===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Wizard.png|frame|none|Darstellung eines Wizards]]

'''Elemente'''
[[Datei:Wizard.labeled.png|frame|none|Elemente eines Wizards]]
1 Überschrift<br>
2 Bearbeitungsschritte<br>
3 Inhalt<br>
4 Steuerleiste<br>

===Message Toast===
<p>zum Seitenanfang [[#top]]</p>
<br>
Ein Message Toast ist ein kurzer Hinweistex welcher als Popup eingeblendet und nach einem Moment wieder ausgeblendet wird, ohne das zwangsläufig eine Benutzeraktion erfolgen muss.<br>
Die Eigenschaften eines Toast können beliebig konfiguriert werden.<br>

'''Darstellung'''
[[Datei:Message toast.png|frame|none|Darstellung eines Message Toast]]<br>

'''Für open KONSEQUENZ wurden folgende Konfigurationen abgestimmt'''<br>
<li>Toasts erscheinen oben rechts<br>
<li>Verschwinden nach rechts oben<br>
<li>Automatisches verschwinden nach:<br>
   Erfolgreich: 2 Sekunden<br>
   Info: Muss manuell geschlossen werden<br>
   Warnung: 7 Sekunden<br>
   Fehler: 7 Sekunden<br>
<li>Messages: Erfolgreich, Fehler, Info, Warnung<br>
<li>Maximal drei Zeilen Content in einem Toast<br>
<li>Defaultfarben verwenden<br><br>

[https://www.primefaces.org/primeng/#/toast Web primeng-Toast-Link]

==Navigationselemente==
<p>zum Seitenanfang [[#top]]</p>

<br>Um das Navigieren innerhalb einer Web-Seite zu vereinfachen gibt es unterschiedliche Navigationselemente, diese werden in den folgenden Kapiteln kurz erläutert.<br>

===Navigation Bar (Navbar)===
<p>zum Seitenanfang [[#top]]</p>
<br>
Das Navbar-Element ist ein permanent sichtbares Navigationselement, welches horizontal oder vertikal auf einer Webseite angeordnet werden kann und dem Benutzer die
Möglichkeit bietet, wichtige Seiten direkt aufzurufen. Der Vorteil ist, dass eine Navbar für jede Seite separat konfiguriert werden kann.<br><br>
'''Darstellung'''
<br>
[[Datei:mit Autodisplay.png|frame|none|Darstellung einer Navbar mit Autodisplay]]
<br>
[[Datei:ohne Autodisplay.png|frame|none|Darstellung einer Navbar ohne Autodisplay]]
<br>
Vorteile einer Navbar:<br>
<li> Bietet einen schnellen Überblick über die Struktur der Webseite<br>
<li> Jede Seite, bzw. Kategorie ist direkt über die Navbar ansteuerbar<br>
<li> Die Navbar ist für jede Seite separat konfigurierbar<br>
<li> Für jedes Navigationselement kann ein eigenes Submenü erstellt werden<br>
<li> Die aktuelle Seite kann farblich hinterlegt werden<br>
<li> In einer Navbar können Funktionen wie zum Beispiel Abmelden oder eine Such-Funktion eingebunden werden<br>
<li> Es können bis zu vier Navbars auf einer Seite verwendet werden (Standartmäßig werden aber nur zwei implementiert)<br>
<br>
Nachteile einer Navbar:<br>
<li> Muss für jede Seite einzeln Konfiguriert werden<br>
<li> Kann bei umfangreichen Seiten schnell unübersichtlich werden oder Überladen wirken<br>
<br>
[https://www.primefaces.org/primeng/#/menubar Web primeng-menubar-Link]

===Accordion===
<p>zum Seitenanfang [[#top]]</p>
<br>
'''Beschreibung'''<br>
Ein Accordion ist ein Navigationselement, welches dazu dient umfangreiche Listen mit Inhalten platzsparend auf Webseiten abzubilden.<br>
[https://www.primefaces.org/primeng/#/accordion Web primeng-accordion-Link]

'''Darstellung'''<br>
Einzelselektion<br>
[[Datei:akkordion-einzelselektion.png|frame|none]]<br>
Mehrfachselektion<br>
[[Datei:akkordion-mehrfachselektion.png|frame|none]]

===TabView===
<p>zum Seitenanfang [[#top]]</p>
<br>
Eine TabView ist eine Komponente zum einfachen Gruppieren von Inhalten auf einer Seite in Form von Registerkarten. Auf jeder Registerkarte können z.B. Formulare implementiert werden, die durch den Anwender abgearbeitet werden müssen. Durch die Verwendung von Registerkarten wird ein schnelles Navigieren zwischen den einzelnen Inhalten ermöglicht. Zudem können diese Registerkarten je nach Anfordeung konfuguriert werden.<br>

[https://www.primefaces.org/primeng/#/tabview Web primeng-tabview-Link]

[[Datei:tab-view.png|frame|none|Darstellung einer TabView]]<br>

Für openKONSEQUENZ wurden folgende Konfigurationen vorgegeben:<br>
<li>Valid: Grüner Balken in Tab (Nur wenn allen Steuerelementen im Content valid sind)
<li>Invalid: Roter Balken in Tab
<li>Neuen Tab dynamisch hinzufügen per + Tab
<li>Tab entfernen mit Lösch-Button im Content-Bereich
<li>Icons können je nach bedarf im Tab angezeigt werden
<li>Ausrichtung der Tabs (oben, unten, links, rechts)

<h1 style="page-break-before:always">Barrierefreiheit</h1>
<p>zum Seitenanfang [[#top]]</p>

Barrierefreiheit bezeichnet eine Gestaltung der baulichen Umwelt sowie von Informationsangeboten, Kommunikation usw. dergestalt, dass sie auch von Menschen mit Beeinträchtigungen ohne zusätzliche Hilfen genutzt und wahrgenommen werden können.

Um Menschen ein barrierefreies Arbeiten in der digitalen Welt zu ermöglichen, sind verschiedene Aspekte zu betrachten: Zum einen müssen Software und das heute nicht mehr wegzudenkende Internet barrierefrei gestaltet werden. Zum anderen muss einigen Menschen mit Behinderung überhaupt erst die Bedienung eines Computers ermöglicht werden durch unterstützende Technologien. Dies können beispielsweise Augensteuerung und Mundmaus bei körperlichen Behinderungen, oder Screenreader und Braillezeile bei Blinden sein. Weitere Beispiele stellen Technologien aus dem Bereich der Unterstützten Kommunikation dar, die Kommunikation in manchen Fällen überhaupt erst möglich machen.

Quelle: [ https://de.wikipedia.org/wiki/Barrierefreiheit ]

<h1 style="page-break-before:always">Internationalisierung</h1>
<p>zum Seitenanfang [[#top]]</p>

Internationalisierung bedeutet in der Informatik beziehungsweise in der Softwareentwicklung, ein Programm so zu gestalten, dass es leicht (ohne den Quellcode ändern zu müssen) an andere Sprachen und Kulturen angepasst werden kann.

Internationalisierung (englisch internationalization oder internationalisation) wird gerne mit dem Numeronym i18n abgekürzt (im englischen Wort Internationalization befinden sich 18 Buchstaben zwischen dem ersten Buchstaben I und dem letzten Buchstaben n). Hierunter fallen diejenigen Aufgaben, die der Entwickler/Programmierer eines Programms bewältigen muss. Dazu darf er zum Beispiel Beschreibungstexte nicht im Quellcode fest kodieren, sondern muss Variablen benutzen, die von einer Quelle zur Laufzeit eingelesen werden. Aber auch Datumsformatierungen und die sprachabhängige Oberflächengestaltung (z. B. kann Text unterschiedlich lang sein oder die Rechts-Nach-Links-Orientierung kann sich unterscheiden) gehören hierzu.

Im nächsten Schritt erfolgt die Lokalisierung (localization oder localisation), die als l10n abgekürzt wird (10 Buchstaben zwischen l und n). Ein Programm sollte im vorigen Schritt so gestaltet sein, dass diese Änderungen nicht mehr vom Programmierer durchgeführt werden müssen. Dieser Prozess bezeichnet die reine Übersetzung von zum Beispiel Texten in eine Landessprache.

Quelle: [ https://de.wikipedia.org/wiki/Internationalisierung_(Softwareentwicklung) ]

<h1 style="page-break-before:always">allg. Usability-Richtlinien</h1>
<p>zum Seitenanfang [[#top]]</p>

Software-Ergonomie (zur Wortherkunft siehe Software und Ergonomie) ist die Arbeit hin zu leicht verständlicher und schnell benutzbarer Software unter den gebotenen technischen Möglichkeiten und unter der Einhaltung definierter bzw. empirisch entstandener Standards und Styleguides. Die Software-Ergonomie ist ein Teilgebiet der Mensch-Computer-Interaktion, und ihr Ergebnis ist die Gebrauchstauglichkeit von Computerprogrammen.

Gegenstandsbereich der Software-Ergonomie im eigentlichen Sinne ist der arbeitende Mensch im Kontext (Softwarenutzung an Arbeitsplätzen). Allgemein wird heute die Benutzung von bzw. die Interaktion mit Computern betrachtet. Dies bedeutet die Berücksichtigung (neuro)psychologischer Aspekte beim Entwerfen der Software – wie dies methodisch auch die Ingenieurpsychologie anstrebt –, um eine optimale Mensch-Maschine-Schnittstelle zur Verfügung zu stellen. Dies soll sich in besonders leicht verständlichen funktionalen Einheiten ausdrücken (Bsp. einfache Dialoge bei Systemen mit GUI). Die Entwicklung gebrauchstauglicher Software wird im Rahmen des Usability-Engineering geleistet.

Quelle: [ https://de.wikipedia.org/wiki/Software-Ergonomie]

<h1 style="page-break-before:always">Paketierung der Styles (customized Bootstrap Template und individuelle allg. oK Styles)</h1>
<p>zum Seitenanfang [[#top]]</p><br>

Aufteilung der Stylse oK und eigene Unternehmensanpassungen.<br>
<li> '''ok-common.saas'''<br>
- Für Layout und globale Styles customized Bootstrap Template<br>
- ok-CI/CD<br>
<li> '''ok-vendor.saas'''<br>
- Nur für die Componenten-Styles von Drittanbietern<br>
(z.B.: primeng, ag-grid, c3.js, d3.js)<br>
<li> '''ok-components.saas'''<br>
- Nur für ok-Components<br>
(z.B.: NavBar)<br>
<br>
Achtung: Unternehmensanpassungen (CI/CD) werden in eigenen neuen saas Dateien beschrieben! Dabei müssen die entsprechenden saas-Variablen überschrieben werden.<br>

Styleguide (in Bearbeitung)

2019-07-08T12:20:29Z

Eschlenker: /* Auswahl (check-box) */

zurück zur [[Hauptseite]]
zurück zur [[Styleguide]]

<h1 style="page-break-before:always">Zielsetzung und Abgrenzung</h1>
<p>zum Seitenanfang [[#top]]</p>
'''Zielsetzung:'''<br>
<li> Konsolidierung des UI StyleGuides<br>
<li> Evaluierung Tooling für den StyleGuide<br>
- IMIS<br>
- Wiki<br>
- sonst<br>
<li> Package Manager (npm)<br>
<li> Entwurfsentscheidungen ng Components vs Elements<br>
<li> Best of Konsolidierung der Steuerelemente aus den existierenden UserModulen<br>
<li> UX Vorgaben definieren<br>
<li> Paketierung der Styles (customized Bootstrap Template, eigenes allg. OK Stylesheet) als npm<br>
<br>
'''Abgrenzung:'''
<li> Vorerst kein Code (nur beispielhaft)<br>
<br>

<h1 style="page-break-before:always">Design</h1>
<p>zum Seitenanfang [[#top]]</p>

Um ein einheitliches Design zu gewährleisten, müssen die verwendeten Farben, Formen und Schriftarten auf allen User Interfaces dem vorgegebenen StyleGuide entsprechen. Diese Vorgaben werden in den folgenden Kapiteln beschrieben.
==Farben==
<p>zum Seitenanfang [[#top]]</p>

In diesem Kapitel wird das abgestimmte Farbschema (Hauptfarben, Farbverläufe, Sekundärfarben, u. s. w.) und deren Verwendung auf Webseiten und User Interfaces erläutert. Zusätzlich finden Sie hier Informationen über den jeweiligen Farbcode und die CSS Codierung.<br>

===Hauptfarben===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Primary
| <div style="color:#ffffff; background:#003a5f; padding: 1px 10px">#003a5f</div>
|-
| Success
| <div style="color:#ffffff; background:#80b300; padding: 1px 10px">#80b300</div>
|-
| Info
| <div style="color:#ffffff; background:#0080c0; padding: 1px 10px">#0080c0</div>
|-
| Default
| <div style="color:#000000; background:#ffffff; padding: 1px 10px">#ffffff</div>
|-
| Text
| <div style="color:#ffffff; background:#333333; padding: 1px 10px">#333333</div>
|}

===Farbverläufe===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
! CSS
|-
| Streifen Header
| <div style="color:#ffffff; background: linear-gradient(to right, rgba(121, 182, 28, 1) 0%, rgba(2, 129, 196, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0); padding: 1px 10px">#79b61c - #0281c4</div>
| <code>background: linear-gradient(to right, rgba(121, 182, 28, 1) 0%, rgba(2, 129, 196, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0);</code>
|-
| Balken Header
| <div style="color:#000000; background: linear-gradient(to right, rgba(232, 238, 231, 1) 0%, rgba(229, 237, 242, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0); padding: 1px 10px">#e8eee7- #e5edf2</div>
| <code>background: linear-gradient(to right, rgba(232, 238, 231, 1) 0%, rgba(229, 237, 242, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0);</code>
|}

===Flächen und Linien===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Hintergrund
| <div style="color:#000000; background:#f8fafd; padding: 1px 10px">#f8fafd</div>
|-
| Flächen/Tabellen
| <div style="color:#000000; background:#f5f8fc; padding: 1px 10px">#f5f8fc</div>
|-
| Hervorhebung/Eingabefelder/Tabellenzeilen
| <div style="color:#000000; background:#e9f0f9; padding: 1px 10px">#e9f0f9</div>
|-
| Linien
| <div style="color:#000000; background:#ccdbe6; padding: 1px 10px">#ccdbe6</div>
|-
| Umrandung Formularfelder
| <div style="color:#000000; background:#b7cbda; padding: 1px 10px">#b7cbda</div>
|}

===Sekundärfarben===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Warning
| <div style="color:#000000; background:#ffb200; padding: 1px 10px">#ffb200</div>
|-
| Danger
| <div style="color:#ffffff; background:#990000; padding: 1px 10px">#990000</div>
|-
| Disabled
| <div style="color:#ffffff; background:#567d96; padding: 1px 10px">#567d96</div>
|}

==Schriftarten==
<p>zum Seitenanfang [[#top]]</p>

Ebenso wie das Farbschema unterliegen auch die zu verwendenden Schriftarten dem abgestimmten Styleguide. Bei der Verwendung von zu vielen unterschiedlichen Schriftarten und Schriftgrößen kann das User Interface schnell unruhig wirken. Die gewählte Schriftart sollte gut lesbar und nicht zu klein sein.<br>

===Schriftfamilie===
<p>zum Seitenanfang [[#top]]</p>

Für openKONSEQUENZ wurde die Schriftart '''Source Sans Pro''' festgelegt. Diese Schriftart ist bei allen User Interfaces und Texten zu verwendet.

[https://github.com/adobe-fonts/source-sans-pro Download-Link]

[https://www.google.com/fonts/specimen/Source+Sans+Pro WebFont-Link]

==Rahmenabstände==
<p>zum Seitenanfang [[#top]]</p>

'''offener Punkt'''<br>

===Symbole===
<p>zum Seitenanfang [[#top]]</p>

In diesem Abschnitt werden allgemeine Bedien- und Status-Symbole beschrieben. Um ein einheitliches Aussehen der oK-Module sicherzustellen, sollen diese anwendungsübergreifend verwendet werden.
{| class="wikitable sortable"
|-class="hintergrundfarbe6"
!Symbol
!Bezeichnung
|-
|[[Datei:Filter.icon.svg|center|24px]]
|Filter
|-
|[[Datei:Menu.icon.svg|center|24px]]
|Menü
|-
|[[Datei:search.icon.svg|center|24px]]
|Suche
|-
|[[Datei:Warning.icon.svg|center|24px]]
|Warnung
|-
|[[Datei:Copy.png|center|24px]]
|Kopieren
|-
|[[Datei:pencil.png|center|24px]]
|Bearbeiten
|-
|[[Datei:save.png|center|24px]]
|Speichern
|-
|[[Datei:add.png|center|24px]]
|Hinzufügen
|-
|[[Datei:cog.png|center|24px]]
|Einstellung
|-
|[[Datei:print.png|center|24px]]
|Drucken
|-
|[[Datei:refresh.png|center|24px]]
|Refresch
|-
|[[Datei:trash.png|center|24px]]
|Löschen
|-
|[[Datei:question.png|center|24px]]
|Hilfe
|-
|[[Datei:cancel.png|center|24px]]
|Abbrechen
|}
<br>
Unter dem folgenden Link finden Sie weitere Symbole.<br>
[https://material.io/tools/icons/?style=baseline Web material-icons-Link]<br>
Lizenz: Apache license version 2.0 sollte/ist mit EPL kompatibel<br>

Die folgende Darstelung zeigt eine Beispiel-Menüleiste mit Icon, die zum Aufrufen von definierten Funktionen verwendet werden.
<br>
[[Datei:Menueleiste mit Icon.png|frame|none|Beispiel: Schaltflächen zum Aufrufen einer Funktion]]

===technische Vorschläge===
<p>zum Seitenanfang [[#top]]</p>

<h1 style="page-break-before:always">Komponenten</h1>
<p>zum Seitenanfang [[#top]]</p>

Komponenten sind die einzelnen Bestandteile einer grafischen Benutzeroberfläche /bzw. Benutzerschnittstelle. Im folgenden Abschnitt werden die unterschiedlichen Elemente kurz Erläutert.<br>

==Standard-Steuerelemente==
<p>zum Seitenanfang [[#top]]</p>

===Eingabefeld (text)===
<p>zum Seitenanfang [[#top]]</p>

Ein Eingabefeld ist das meinst verwendete Steuerelement einer grafischen Benutzeroberfläche und dient der Interaktion mit dem Benutzer. Diese Textfelder können Ein- oder auch Mehrzeilig sein und über die Tastatur können beliebige Zeichenketten eingegeben werden.<br>
'''Darstellung'''

'''inaktiv'''
[[Datei:Input.inactive.png|frame|none|inaktives Eingabefeld mit Beschriftung "Beschreibung*"]]

'''aktiv'''
[[Datei:Input.active.png|frame|none|aktives Eingabefeld mit Beschriftung "Beschreibung*"]]

===Führungstext (label)===
<p>zum Seitenanfang [[#top]]</p>

Führungstexte (englich: label) gehören auch zu den Steuerelementen einer grafischen Benutzeroberfläche. Diese werden in der Regel dazu verwendet um Ein- oder Ausgabefelder, aber auch Radio Button oder Checkboxen zu beschriften.<br>

===Schaltfläche (button)===
<p>zum Seitenanfang [[#top]]</p>

Ein häufig genutztes Steuerelement für grafische Benutzeroberflächen ist die Schaltfläche (englisch: button). Mittels dieser Schaltflächen können Formulare abgesendet oder definierte Aktionen durchgeführt werden.<br>
'''Farben'''
{| class="wikitable"
|-
! Schaltfläche
! Hintergrundfarbe
! Konturfarbe
! Textfarbe
|-
| <div class="bootstrap-button" style="background:#003a5f; border-color:#002a45; color:#ffffff;">Primary</div>
| <div class="color-value">#003a5f</div>
| <div class="color-value">#002a45</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#ffffff; border-color:#b7cbda; color:#0b325c;">Default</div>
| <div class="color-value">#ffffff</div>
| <div class="color-value">#b7cbda</div>
| <div class="color-value">#0b325c</div>
|-
| <div class="bootstrap-button" style="background:#80b300; border-color:#6e9a00; color:#ffffff;">Success</div>
| <div class="color-value">#80b300</div>
| <div class="color-value">#6e9a00</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#0080c0; border-color:#006fa7; color:#ffffff;">Info</div>
| <div class="color-value">#0080c0</div>
| <div class="color-value">#006fa7</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#ffb200; border-color:e6a000#; color:#ffffff;">Warning</div>
| <div class="color-value">#ffb200</div>
| <div class="color-value">#e6a000</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#990000; border-color:#800000; color:#ffffff;">Danger</div>
| <div class="color-value">#990000</div>
| <div class="color-value">#800000</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#337ab7; border-color:#2e6da4; color:#ffffff;">Disabled</div>
| <div class="color-value">#337ab7</div>
| <div class="color-value">#2e6da4</div>
| <div class="color-value">#ffffff</div>
|}
<br>
Die folgende Abbildung zeigt Beispielhaft eine Menüleiste mit Schaltflächen über diese definierte Funktionen aufgerufen werden können.
<br>
[[Datei:Beispiel-Button.png|frame|none|Beispiel: Schaltflächen zum Aufrufen einer Funktion]]

===Auswahl (check-box)===
<p>zum Seitenanfang [[#top]]</p>

Die Auswahl (englisch: checkbox) ist ein einfaches Steuerelement zur Eingabe von Ja/Nein-Werten, welche durch einen Mausklick aktiviert oder deaktiviert werden kann. Dieses Element findet meist auf Formularen Verwendung, wenn z. B. die Datenschutzbestimmungen oder die allgemeinen Geschäftsbedingungen anerkannt werden müssen.<br>
'''Darstellung'''
[[Datei:Check-box.png|frame|none|Auswahl mit [[Führungstext|Beschriftung]] "Gesamtnetz für Abregelung*"]]

<br>
Beispiel für die Verwendung von Auswahlfeldern.
<br>
[[Datei:checkbox.png|frame|none|Beispiel: Checkboxen]]

===Auswahllisten (MultiSelect)===
<p>zum Seitenanfang [[#top]]</p>

Ein weiteres Steuerelement ist die Auswahlliste (englisch: multiselect) und dient der Auswahl von mehreren Objekten aus einer Liste. Die Darstellungsform solcher Auswahllisten kann variieren.<br>
Weitere Informationen finden sie unter den folgende Verlinkungen.
<br>
[https://www.primefaces.org/primeng/#/multiselect Web primeng-multiselect-Link]<br>
[https://www.primefaces.org/primeng/#/chipst Web primeng-chips-Link]<br>
<br>
'''Darstellung'''<br>

Beispiel einer Auswahlliste als '''Dropdown'''.
<br>
[[Datei:multiselect.png|frame|none|Multiselect]]

Die Attribute dieser Auswahlliste<br>
<li>können Text ohne Icon enthalten<br>
<li>können Text mit Icon enthalten<br>
<li>sind Filterbar<br>
<br>

Beispiel einer Auswahlliste als '''Chips'''.<br>
In einem Eingabefeld werden mehrere Werte in Form von Chips eingefügt.<br>
[[Datei:multiselect - chip.png|frame|none|Multiselect als Chips]]

Die Attribute dieser Auswahlliste können<br>
<li>Text ohne Icon enthalten<br>
<li>Text mit Icon enthalten<br>
<br>

'''Beide Steuerelemente können kombiniert eingesetzt werden'''<br>

===Dropdown-Liste (drop-down list)===
<p>zum Seitenanfang [[#top]]</p>

Die Dropdown-Liste (englisch: drop-down-list) ist ein Textfeld welches eine Auflistung von benutzerdefinierten Werte enthält aus der ein Anwender einen Eintrag auswählen kann. Diese Dropdown-Liste kann um weitere Elemente wie zum Beispiel ein Scrollbalken, eine Filterfunktion oder auch Icon erweitert werden. Zusätzlich besteht die Möglichkeit Einträge dieser Liste zu Gruppieren, um diese Übersichtlich zu Gestalten.<br><br>
'''Darstellung'''<br>
Darstellung einer '''inaktiven''' Dropdown-Liste.<br>
[[Datei:Drop-down-menu.inactive.png|frame|none|inaktive Dropdown-Liste mit Beschriftung "Grund der Abregelung*"]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste.<br>
[[Datei:Drop-down-menu.active.png|frame|none|aktive Dropdown-Liste mit Beschriftung "Grund der Abregelung*"]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste inklusive Icon, Filter und einem Scrollbalken.<br>
[[Datei:Dropdown mit Icon.png|frame|none|aktive Dropdown-Liste mit Icon und Filter]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste inklusive Gruppierung.<br>
[[Datei:Dropdown mit Gruppierung.png|frame|none|aktive Dropdown-Liste mit Gruppierung]]
[https://www.primefaces.org/primeng/#/dropdown Web primeng-dropdown-Link]<br>

===Kalender (calendar)===
<p>zum Seitenanfang [[#top]]</p>

In der Regel umfasst ein Datums- und / oder Uhrzeitfeld eine Kalenderauswahl, so das ein Datum nicht händisch als String eingegeben werden muss. Durch klick in das Textfeld, öffnet sich ein Kalenderfenster, aus dem das gewünschte Datum und die Uhrzeit auswählt werden kann. <br>
'''Darstellung'''
[[Datei:Calendar.png|frame|none|Kalender mit Beschriftung "Startzeitpunkt*"]]
[https://www.primefaces.org/primeng/#/calendar Web primeng-calendar-Link]<br>

===Netzspezifische Icons===
<p>zum Seitenanfang [[#top]]</p>

'''offener Punkt, Klärungsbedarf'''<br>

<li>Icons werden von der e-netz bereitgestellt<br>
<li>Lizenz wahrscheinlich MIT<br>
<li>Muss mit Frau Wittek besprochen werden/bzw. Unterstützung<br>

==Steuerelemente für Formulare==
<p>zum Seitenanfang [[#top]]</p>
<br>
Zur Erfassung von Daten werden Eingabe- und Auswahlfelder bereitgestellt, in die ein Benutzer Werte über die Tastatur oder eine Werteliste eingeben kann oder Auswahlknöpfe, die der Benutzer mit der Maus beeinflusst. Hierbei werden Pflichtfelder (müssen gefüllt werden und sind mit einem Sternchen entsprechend gekennzeichnet) und Kann-Felder (können gefüllt werden) unterschieden. In der folgenden Tabelle finden Sie eine Auflisten der möglichen Steuerelemente für Formulare. Auf die einzelnen Elemente wird in den folgenden Abschnitten weiter eingegangen.<br>

{| class="wikitable"
|-
! Pflichtfeld Typ
! Visualisierung
|-
| text invalid
| [[Datei:Steuerelemente fuer Formular 1.png]]
|-
| text valid
| [[Datei:Steuerelemente fuer Formular 2.png]]
|-
| numeric valid
| [[Datei:Steuerelemente fuer Formular-numeric.png]]
|-
| date,datetime,date range valid
| [[Datei:Steuerelemente fuer Formular 3.png]]
|-
| Gesperrt
| [[Datei:Steuerelemente fuer Formular 4.png]]
|-
| Drop-Down valid
| [[Datei:Steuerelemente fuer Formular 5.png]]
|-
| Validierung beim Verlassen eines Feldes
| [[Datei:Steuerelemente fuer Formular 6.png]]
|}

==Steuerelement Kalender==
<p>zum Seitenanfang [[#top]]</p>
<br>
[https://www.primefaces.org/primeng/#/calendar Web primeng-calendar-Link]<br>

'''Darstellung'''
[[Datei:Kalender-Ansichten.png|frame|none|Darstellung der Kalenderansicht für Monat, Woche und Tag]]
<br>
In der Kalenderfunktion stehen dem Benutzer folgende Ansichten zur Verfügung:<br>
<li> Monatsansicht<br>
<li> Wochenansicht<br>
<li> Arbeitswochenansicht<br>
<li> Tagesansicht<br><br>

Bei der Kalenderfunktion hat der Anwender die Möglichkeit von durch einen Klick auf die (Arbeits-)Wochen- oder Tagesansicht zu wechseln. Durch Klicken mit der Maustaste in einen freien Zeitraum können neue Termine erfasst werden. Für eine neue Terminspanne markieren Sie einen freien Bereich durch SHIFT und Klick mit der linken Maustaste und erfassen für diesen Zeitraum einen Termin. Zum Editieren von bestehen den Terminen genügt ebenfalls ein Klick mit der Maustaste. <br>
Über die ‘‘‘Drag & Drop‘‘‘ Funktion können Termine in der Monatsansicht oder der Wochenansicht in einen anderen Wochentag verschoben werden. Um einen Termin zeitlich innerhalb eines Tages zu verschieben und Zeitspanne anzupassen, müssen Sie sich in der Wochenansicht oder der Tagesansicht befinden.<br>
<br>
Folgende Funktionen stehen zusätzlich zur Verfügung:<br>
<li> Termine ICS-Format exportieren (generell in der Applikation!)<br>
<li> Filtern über Kalendereinträge (ArrayList)<br>
<li> Unterschiedliche farbliche Darstellung einzelner Termine (Termin Template)<br>

==Steuerelement Grid==
<p>zum Seitenanfang [[#top]]</p>
<li> Buttons zum Absprung in Detailmaske (Lese/Bearbeitung), Stornierbutton in die erste Linke Spalte im Grid<br>
<li> Absprung durch Doppelklick in Detailmaske (Lese/Bearbeiten)<br>
<li> Datensatz hinzufügen-Button rechts oberhalb des Grid´s<br>
<li> Alternating row color<br>
<li> Hovereffekt (Zeile)<br>
<li> Einzelselektion und Mehrfachselektion mit Strg-Taste, Shift-Taste<br>
<li> Hovereffekt in Spaltenkopf unterstreichen und Mauscursor Hand (Rückmeldung für mögliche Aktionen an den Benutzer)<br>
<li> Klick auf Spaltenkopf, Sortierung ASC, DESC<br>
<li> Merfachsortierung durch klicken der Shift-Taste<br>
<li> Filterzeile als eigene Zeile direkt unterhalb des Spaltenkopfs<br>
<li> Virtual scrolling anstatt Pagination<br>
<li> Spaltenkopf mit Filter und Fußzeile bleiben beim scrollen stehen<br>
<li> Quickfiler (optional)<br>
<li> Externe Filter (optional) aber als Toggle-Switch<br>
<li> Stylevorgaben kommen per ok-vendor.sass !!!!!!!!!<br>
- Schriftrart<br>
- Schriftgröße<br>
- Zeilenhöhe<br>
- Farben<br>
- Style fürs Grid<br>
<li> Kompaktes Grid definieren. Spaltengröße sinnvoll definieren<br><br>
[https://www.ag-grid.com/ Web ag-grid-Link]<br>

==Steuerelement Heatmap / Kartendarstellung==
<p>zum Seitenanfang [[#top]]</p>
<br>
Ermöglicht das Einbinden von zweidimensionalen Karten-Elementen auf Webseiten, Mobile Apps sowie für Navigationen. Diese Kartendarstellungen sind von Standortdaten angetrieben und bieten zusätzlich Echtzeit-Updates. Durch einen Entwickler können diese vollständig angepasst und konfiguriert werden. Das Hinzufügen von Points of Interest, Live-Standortdaten und Persistenz globaler Objekte ist ebenfalls möglich.<br>

<li>[https://www.mapbox.com/ Web mapbox-Link]<br>
<li>[https://openlayers.org/ Web OpenLayers-Link]<br>
- Unterstützt WMS-Services (Web Map Service)<br>
- OpenSreetMap muss Lizenz geklärt werden! ODbL.<br><br>
'''Lizenzkompatibilität muss beim Projekt geklärt werden'''<br>

<br>
[[Datei:Karten-Beispiel.png|frame|none|Beispiel einer Kartenansicht]]

<h1 style="page-break-before:always">Layout</h1>
<p>zum Seitenanfang [[#top]]</p>

==Tabellen/Listen==
<p>zum Seitenanfang [[#top]]</p>

===Tabelle===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Table.png|frame|none|Darstellung einer Tabelle]]

'''Elemente'''
[[Datei:Table.labeled.png|frame|none|Elemente einer Tabelle]]
1 Tabellenkopf<br>
1.1 Spaltenüberschrift<br>
1.2 Sortiereinstellungen<br>
1.3 Spaltenkopf<br>
1.4 Spaltenfilter<br>
1.5 Spaltensortierung<br>
2 Tabelleninhalt<br>
3 Tabellenfuß<br>
3.1 Spaltenfuß<br>

===blätterbare Tabelle===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Pageable-table.png|frame|none|Darstellung einer blätterbaren Tabelle]]

'''Elemente'''
[[Datei:Pageable-table.labeled.png|frame|none|Elemente einer blätterbaren Tabelle]]
1 Tabellenkopf<br>
1.1 Spaltenüberschrift<br>
1.2 Sortiereinstellungen<br>
1.3 Spaltenkopf<br>
1.4 Spaltenfilter<br>
1.5 Sortierung<br>
2 Tabelleninhalt<br>
3 Seitennavigation<br>

==oK-Steuerelemente==
<p>zum Seitenanfang [[#top]]</p>

===Topologie-Baum===
<p>zum Seitenanfang [[#top]]</p>

Das Steuerelement bietet die Möglichkeit, [[Topologie (Strom)| topologische]] Zusammenhänge eines Stromnetzes hierarchisch darzustellen.
Der Topologie-Baum ist als gemeinsames Steuerelment in unterschiedlichen ok-Modulen wiederverwendbar und definiert eine standardisierte Sicht. Die generell möglichen, darstellbaren topologischen Elemente richten sich nach den in oK definierten Elementen.

Die Klärung der Frage, wie ein Netz hierarchisch dargestellt werden kann und welche Elemente des Netzes tatsächlich angezeigt und ausgewählt werden können, ist nicht Aufgabe dieses Steuerelementes. Dies ist Aufgabe der darunter liegenden Anwendung und kann aufgrund fachlicher Aspekte unterschiedlich ausgeprägt sein.<br><br>
'''Elemente'''
[[Datei:TopologyTree.labeled.png|frame|none|Elemente eines Topologie-Baums]]

1 Steuerleiste<br>
1.1 Suchbegriff<br>
Im [[Eingabefeld]] "Suchbegriff" können Begriffe eingeben werden, nach denen in der zugrundeliegenden Topologie gesucht werden kann.
Die Begriffe können folgende [https://de.wikipedia.org/wiki/Wildcard_%28Informatik%29 Platzhalter (Wildcard)] beinhalten:
{| class="wikitable sortable"
|-class="hintergrundfarbe6"
!Platzhalter
!Bezeichnung
!Verwendung
|-
|?
|Fragezeichen
|Platzhalter für genau ein Zeichen
|-
|*
|Sternchen
|Platzhalter für beliebig viele (auch null) Zeichen
|-
|#
|Doppelkreuz
|Platzhalter für einen numerischen Wert
|}
1.2 Suchen<br>
Durch Drücken der [[Schaltfläche]] "Suchen", wird nach dem angegebenen Suchbegriff gesucht. Ist die Suche erfolgreich, werden alle Elemente im Navigationsbereich ausgewählt (Mehrfachselektion), die dem Suchbegriff entsprechen. Gleichzeit wird zum ersten Element aus der Ergebnismenge gesprungen.<br>

1.3 Einstellungen'''<br>
Über die Schaltfläche "Einstellungen" können Filterkriterien definiert werden, die die Anzeige auf passende topologische Elemente im Navigationsbereich einschränken.<br/>
<div style="background:#fff0d0;border-color:#ffb200;border-radius:5px;border-style:solid;border-width:1px;margin:16px;padding:10px">[[Datei:Warning-yellow.icon.svg|24px]] Die Definition möglicher Filterkriterien und Regelwerke ist Teil späterer Festlegungen.</div>

2 Statusleiste<br>
Die Statusleiste zeigt allgemeine Informationen zu den im Navigationsbereich angezeigten Elementen an.<br>
2.1 Datum<br>
Das Erstellungsdatum (Stand) der zugrundeliegenden Daten, auf dem die Anzeige im Navigationsbereich basiert.<br>
2.2 Uhrzei<br>
Die Erstellungsuhrzeit(Stand) der zugrundeliegenden Daten, auf dem die Anzeige im Navigationsbereich basiert.<br>
2.3 Filter<br>
Das Symbol "Filter" zeigt an, ob mindestens ein Filter aktiviert ist.<br>
2.4 Benachrichtigung<br>
Im Benachrichtigungsbereich können verschiedene Symbole angezeigt werden, die über zusätzliche Hinweise informieren. In Beispiel ist liegt hier eine Warnungmeldung vor.<br>

3 Navigationsbereich<br>
Im Navigationsbereich werden topologische Zusammenhänge in einer baumartigen Struktur angezeigt. Die Ausprägung der Topologie als Hierarchie ist Aufgabe der jeweiligen Anwendung.<br>

'''Ordnung/Sortierreihenfolge'''<br>

<div style="background:#fff0d0;border-color:#ffb200;border-radius:5px;border-style:solid;border-width:1px;margin:16px;padding:10px">[[Datei:Warning-yellow.icon.svg|24px]]<br>
- Was für ein Steuerelement nutzt da BTC? <br>
- Wir müssten da einen Link bereitstellen ggf. mit Matthias Rohr oder Felix Korb besprechen <br></div>

==Definition von ok HTML Elementen==
<p>zum Seitenanfang [[#top]]</p>

ok HTML Elemente müssen durch npm paketiert und oK-konform gestyled werden.<br>

Zu den oK HTML Elemente zählen:<br>
<li> Date (primeng)<br>
<li> DateTime (primeng)<br>
<li> DateRange (primeng)<br>
<li> komplexe DropDown (primeng) bspw. Icons, Tabelle, Gruppen<br>
<li> Grid (ag-grid)<br>
<li> Gantt (zurzeit nichts geeignetes gefunden)<br>
<li> Kalender (primeng)<br>
<li> Charts (primeng, c3js, d3js)<br>
<li> Navbar (ok-element)<br>
<li> Modale Dialoge (primeng) sollten vermieden werden<br>
<li> Tabs (primeng)<br>
<li> Akkordion (primeng)<br>
<li> MultiSelect (primeng)<br>
<li> Chips (primeng)<br>
<li> Editor (primeng)<br>
<li> Messages toast (primeng)<br>
<br>
ACHTUNG: Nicht definierte ok Steuerlemente immer erst bei primeng schauen!<br>
<br>
Weitere Steuerlemente müssen über SaaS Themeable sein!<br>
<li> [https://www.primefaces.org/primeng/#/ Web primefaces - Link]<br>
<li> [https://www.ag-grid.com Web ag-grid - Link]<br>
<li> [https://c3js.org/ Web c3js.org - Link]<br>
<li> [https://d3js.org/ Web d3js.org - Link]<br>

==Definition von Standard HTML Elementen==
<p>zum Seitenanfang [[#top]]</p>

Standard HTML Elemente müssen nicht durch npm paketiert werden.<br>
Es ist ausreichend, ok-Styles als npm Pakete zu definieren und auf den HTML Elementen anzuwenden.<br>
<br>
Zu den Standard HTML Elemente zählen:<br>

<li> Textfelder<br>
<li> Validation<br>
<li> Passwort<br>
<li> Simple DropDown Listen<br>
<li> CheckBox<br>
<li> Buttons<br>
<li> Button Groups<br>
<li> Radio Buttons<br>
<li> File Upload<br>
<li> Numerics<br>
<li> (Drag&Drop)<br>
<li> List Group<br>
<li> Tables (wenn keine besonder Funktionalität, sonst ag-grid)<br>
<br>
Komponenten aus https://getbootstrap.com<br>

==Portal==
<p>zum Seitenanfang [[#top]]</p>

==Standarddialoge==
<p>zum Seitenanfang [[#top]]</p>

===Eingabedialog===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Input-dialog.png|frame|none|Darstellung eines Eingabedialogs]]
'''Elemente'''
[[Datei:Input-dialog.labeled.png|frame|none|Elemente eines Eingabedialogs]]
1 Titel<br>
2 Anzeige-/Eingabebereich<br>
3 Steuerleiste<br>

===Benachrichtigungsdialog===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:notification-dialog.png|frame|none|Darstellung eines Benachrichtigungsdialogs]]
'''Elemente'''
[[Datei:notification-dialog.labeled.png|frame|none|Elemente eines Benachrichtigungsdialogs]]
1 Titel<br>
2 Benachrichtigung<br>
3 Steuerleiste<br>

===Wizard===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Wizard.png|frame|none|Darstellung eines Wizards]]

'''Elemente'''
[[Datei:Wizard.labeled.png|frame|none|Elemente eines Wizards]]
1 Überschrift<br>
2 Bearbeitungsschritte<br>
3 Inhalt<br>
4 Steuerleiste<br>

===Message Toast===
<p>zum Seitenanfang [[#top]]</p>
<br>
Ein Message Toast ist ein kurzer Hinweistex welcher als Popup eingeblendet und nach einem Moment wieder ausgeblendet wird, ohne das zwangsläufig eine Benutzeraktion erfolgen muss.<br>
Die Eigenschaften eines Toast können beliebig konfiguriert werden.<br>

'''Darstellung'''
[[Datei:Message toast.png|frame|none|Darstellung eines Message Toast]]<br>

'''Für open KONSEQUENZ wurden folgende Konfigurationen abgestimmt'''<br>
<li>Toasts erscheinen oben rechts<br>
<li>Verschwinden nach rechts oben<br>
<li>Automatisches verschwinden nach:<br>
   Erfolgreich: 2 Sekunden<br>
   Info: Muss manuell geschlossen werden<br>
   Warnung: 7 Sekunden<br>
   Fehler: 7 Sekunden<br>
<li>Messages: Erfolgreich, Fehler, Info, Warnung<br>
<li>Maximal drei Zeilen Content in einem Toast<br>
<li>Defaultfarben verwenden<br><br>

[https://www.primefaces.org/primeng/#/toast Web primeng-Toast-Link]

==Navigationselemente==
<p>zum Seitenanfang [[#top]]</p>

<br>Um das Navigieren innerhalb einer Web-Seite zu vereinfachen gibt es unterschiedliche Navigationselemente, diese werden in den folgenden Kapiteln kurz erläutert.<br>

===Navigation Bar (Navbar)===
<p>zum Seitenanfang [[#top]]</p>
<br>
Das Navbar-Element ist ein permanent sichtbares Navigationselement, welches horizontal oder vertikal auf einer Webseite angeordnet werden kann und dem Benutzer die
Möglichkeit bietet, wichtige Seiten direkt aufzurufen. Der Vorteil ist, dass eine Navbar für jede Seite separat konfiguriert werden kann.<br><br>
'''Darstellung'''
<br>
[[Datei:mit Autodisplay.png|frame|none|Darstellung einer Navbar mit Autodisplay]]
<br>
[[Datei:ohne Autodisplay.png|frame|none|Darstellung einer Navbar ohne Autodisplay]]
<br>
Vorteile einer Navbar:<br>
<li> Bietet einen schnellen Überblick über die Struktur der Webseite<br>
<li> Jede Seite, bzw. Kategorie ist direkt über die Navbar ansteuerbar<br>
<li> Die Navbar ist für jede Seite separat konfigurierbar<br>
<li> Für jedes Navigationselement kann ein eigenes Submenü erstellt werden<br>
<li> Die aktuelle Seite kann farblich hinterlegt werden<br>
<li> In einer Navbar können Funktionen wie zum Beispiel Abmelden oder eine Such-Funktion eingebunden werden<br>
<li> Es können bis zu vier Navbars auf einer Seite verwendet werden (Standartmäßig werden aber nur zwei implementiert)<br>
<br>
Nachteile einer Navbar:<br>
<li> Muss für jede Seite einzeln Konfiguriert werden<br>
<li> Kann bei umfangreichen Seiten schnell unübersichtlich werden oder Überladen wirken<br>
<br>
[https://www.primefaces.org/primeng/#/menubar Web primeng-menubar-Link]

===Accordion===
<p>zum Seitenanfang [[#top]]</p>
<br>
'''Beschreibung'''<br>
Ein Accordion ist ein Navigationselement, welches dazu dient umfangreiche Listen mit Inhalten platzsparend auf Webseiten abzubilden.<br>
[https://www.primefaces.org/primeng/#/accordion Web primeng-accordion-Link]

'''Darstellung'''<br>
Einzelselektion<br>
[[Datei:akkordion-einzelselektion.png|frame|none]]<br>
Mehrfachselektion<br>
[[Datei:akkordion-mehrfachselektion.png|frame|none]]

===TabView===
<p>zum Seitenanfang [[#top]]</p>
<br>
Eine TabView ist eine Komponente zum einfachen Gruppieren von Inhalten auf einer Seite in Form von Registerkarten. Auf jeder Registerkarte können z.B. Formulare implementiert werden, die durch den Anwender abgearbeitet werden müssen. Durch die Verwendung von Registerkarten wird ein schnelles Navigieren zwischen den einzelnen Inhalten ermöglicht. Zudem können diese Registerkarten je nach Anfordeung konfuguriert werden.<br>

[https://www.primefaces.org/primeng/#/tabview Web primeng-tabview-Link]

[[Datei:tab-view.png|frame|none|Darstellung einer TabView]]<br>

Für openKONSEQUENZ wurden folgende Konfigurationen vorgegeben:<br>
<li>Valid: Grüner Balken in Tab (Nur wenn allen Steuerelementen im Content valid sind)
<li>Invalid: Roter Balken in Tab
<li>Neuen Tab dynamisch hinzufügen per + Tab
<li>Tab entfernen mit Lösch-Button im Content-Bereich
<li>Icons können je nach bedarf im Tab angezeigt werden
<li>Ausrichtung der Tabs (oben, unten, links, rechts)

<h1 style="page-break-before:always">Barrierefreiheit</h1>
<p>zum Seitenanfang [[#top]]</p>

Barrierefreiheit bezeichnet eine Gestaltung der baulichen Umwelt sowie von Informationsangeboten, Kommunikation usw. dergestalt, dass sie auch von Menschen mit Beeinträchtigungen ohne zusätzliche Hilfen genutzt und wahrgenommen werden können.

Um Menschen ein barrierefreies Arbeiten in der digitalen Welt zu ermöglichen, sind verschiedene Aspekte zu betrachten: Zum einen müssen Software und das heute nicht mehr wegzudenkende Internet barrierefrei gestaltet werden. Zum anderen muss einigen Menschen mit Behinderung überhaupt erst die Bedienung eines Computers ermöglicht werden durch unterstützende Technologien. Dies können beispielsweise Augensteuerung und Mundmaus bei körperlichen Behinderungen, oder Screenreader und Braillezeile bei Blinden sein. Weitere Beispiele stellen Technologien aus dem Bereich der Unterstützten Kommunikation dar, die Kommunikation in manchen Fällen überhaupt erst möglich machen.

Quelle: [ https://de.wikipedia.org/wiki/Barrierefreiheit ]

<h1 style="page-break-before:always">Internationalisierung</h1>
<p>zum Seitenanfang [[#top]]</p>

Internationalisierung bedeutet in der Informatik beziehungsweise in der Softwareentwicklung, ein Programm so zu gestalten, dass es leicht (ohne den Quellcode ändern zu müssen) an andere Sprachen und Kulturen angepasst werden kann.

Internationalisierung (englisch internationalization oder internationalisation) wird gerne mit dem Numeronym i18n abgekürzt (im englischen Wort Internationalization befinden sich 18 Buchstaben zwischen dem ersten Buchstaben I und dem letzten Buchstaben n). Hierunter fallen diejenigen Aufgaben, die der Entwickler/Programmierer eines Programms bewältigen muss. Dazu darf er zum Beispiel Beschreibungstexte nicht im Quellcode fest kodieren, sondern muss Variablen benutzen, die von einer Quelle zur Laufzeit eingelesen werden. Aber auch Datumsformatierungen und die sprachabhängige Oberflächengestaltung (z. B. kann Text unterschiedlich lang sein oder die Rechts-Nach-Links-Orientierung kann sich unterscheiden) gehören hierzu.

Im nächsten Schritt erfolgt die Lokalisierung (localization oder localisation), die als l10n abgekürzt wird (10 Buchstaben zwischen l und n). Ein Programm sollte im vorigen Schritt so gestaltet sein, dass diese Änderungen nicht mehr vom Programmierer durchgeführt werden müssen. Dieser Prozess bezeichnet die reine Übersetzung von zum Beispiel Texten in eine Landessprache.

Quelle: [ https://de.wikipedia.org/wiki/Internationalisierung_(Softwareentwicklung) ]

<h1 style="page-break-before:always">allg. Usability-Richtlinien</h1>
<p>zum Seitenanfang [[#top]]</p>

Software-Ergonomie (zur Wortherkunft siehe Software und Ergonomie) ist die Arbeit hin zu leicht verständlicher und schnell benutzbarer Software unter den gebotenen technischen Möglichkeiten und unter der Einhaltung definierter bzw. empirisch entstandener Standards und Styleguides. Die Software-Ergonomie ist ein Teilgebiet der Mensch-Computer-Interaktion, und ihr Ergebnis ist die Gebrauchstauglichkeit von Computerprogrammen.

Gegenstandsbereich der Software-Ergonomie im eigentlichen Sinne ist der arbeitende Mensch im Kontext (Softwarenutzung an Arbeitsplätzen). Allgemein wird heute die Benutzung von bzw. die Interaktion mit Computern betrachtet. Dies bedeutet die Berücksichtigung (neuro)psychologischer Aspekte beim Entwerfen der Software – wie dies methodisch auch die Ingenieurpsychologie anstrebt –, um eine optimale Mensch-Maschine-Schnittstelle zur Verfügung zu stellen. Dies soll sich in besonders leicht verständlichen funktionalen Einheiten ausdrücken (Bsp. einfache Dialoge bei Systemen mit GUI). Die Entwicklung gebrauchstauglicher Software wird im Rahmen des Usability-Engineering geleistet.

Quelle: [ https://de.wikipedia.org/wiki/Software-Ergonomie]

<h1 style="page-break-before:always">Paketierung der Styles (customized Bootstrap Template und individuelle allg. oK Styles)</h1>
<p>zum Seitenanfang [[#top]]</p><br>

Aufteilung der Stylse oK und eigene Unternehmensanpassungen.<br>
<li> '''ok-common.saas'''<br>
- Für Layout und globale Styles customized Bootstrap Template<br>
- ok-CI/CD<br>
<li> '''ok-vendor.saas'''<br>
- Nur für die Componenten-Styles von Drittanbietern<br>
(z.B.: primeng, ag-grid, c3.js, d3.js)<br>
<li> '''ok-components.saas'''<br>
- Nur für ok-Components<br>
(z.B.: NavBar)<br>
<br>
Achtung: Unternehmensanpassungen (CI/CD) werden in eigenen neuen saas Dateien beschrieben! Dabei müssen die entsprechenden saas-Variablen überschrieben werden.<br>

2019-07-08T12:09:31Z

Eschlenker: /* Steuerelement Grid */

zurück zur [[Hauptseite]]
zurück zur [[Styleguide]]

<h1 style="page-break-before:always">Zielsetzung und Abgrenzung</h1>
<p>zum Seitenanfang [[#top]]</p>
'''Zielsetzung:'''<br>
<li> Konsolidierung des UI StyleGuides<br>
<li> Evaluierung Tooling für den StyleGuide<br>
- IMIS<br>
- Wiki<br>
- sonst<br>
<li> Package Manager (npm)<br>
<li> Entwurfsentscheidungen ng Components vs Elements<br>
<li> Best of Konsolidierung der Steuerelemente aus den existierenden UserModulen<br>
<li> UX Vorgaben definieren<br>
<li> Paketierung der Styles (customized Bootstrap Template, eigenes allg. OK Stylesheet) als npm<br>
<br>
'''Abgrenzung:'''
<li> Vorerst kein Code (nur beispielhaft)<br>
<br>

<h1 style="page-break-before:always">Design</h1>
<p>zum Seitenanfang [[#top]]</p>

Um ein einheitliches Design zu gewährleisten, müssen die verwendeten Farben, Formen und Schriftarten auf allen User Interfaces dem vorgegebenen StyleGuide entsprechen. Diese Vorgaben werden in den folgenden Kapiteln beschrieben.
==Farben==
<p>zum Seitenanfang [[#top]]</p>

In diesem Kapitel wird das abgestimmte Farbschema (Hauptfarben, Farbverläufe, Sekundärfarben, u. s. w.) und deren Verwendung auf Webseiten und User Interfaces erläutert. Zusätzlich finden Sie hier Informationen über den jeweiligen Farbcode und die CSS Codierung.<br>

===Hauptfarben===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Primary
| <div style="color:#ffffff; background:#003a5f; padding: 1px 10px">#003a5f</div>
|-
| Success
| <div style="color:#ffffff; background:#80b300; padding: 1px 10px">#80b300</div>
|-
| Info
| <div style="color:#ffffff; background:#0080c0; padding: 1px 10px">#0080c0</div>
|-
| Default
| <div style="color:#000000; background:#ffffff; padding: 1px 10px">#ffffff</div>
|-
| Text
| <div style="color:#ffffff; background:#333333; padding: 1px 10px">#333333</div>
|}

===Farbverläufe===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
! CSS
|-
| Streifen Header
| <div style="color:#ffffff; background: linear-gradient(to right, rgba(121, 182, 28, 1) 0%, rgba(2, 129, 196, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0); padding: 1px 10px">#79b61c - #0281c4</div>
| <code>background: linear-gradient(to right, rgba(121, 182, 28, 1) 0%, rgba(2, 129, 196, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0);</code>
|-
| Balken Header
| <div style="color:#000000; background: linear-gradient(to right, rgba(232, 238, 231, 1) 0%, rgba(229, 237, 242, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0); padding: 1px 10px">#e8eee7- #e5edf2</div>
| <code>background: linear-gradient(to right, rgba(232, 238, 231, 1) 0%, rgba(229, 237, 242, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0);</code>
|}

===Flächen und Linien===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Hintergrund
| <div style="color:#000000; background:#f8fafd; padding: 1px 10px">#f8fafd</div>
|-
| Flächen/Tabellen
| <div style="color:#000000; background:#f5f8fc; padding: 1px 10px">#f5f8fc</div>
|-
| Hervorhebung/Eingabefelder/Tabellenzeilen
| <div style="color:#000000; background:#e9f0f9; padding: 1px 10px">#e9f0f9</div>
|-
| Linien
| <div style="color:#000000; background:#ccdbe6; padding: 1px 10px">#ccdbe6</div>
|-
| Umrandung Formularfelder
| <div style="color:#000000; background:#b7cbda; padding: 1px 10px">#b7cbda</div>
|}

===Sekundärfarben===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Warning
| <div style="color:#000000; background:#ffb200; padding: 1px 10px">#ffb200</div>
|-
| Danger
| <div style="color:#ffffff; background:#990000; padding: 1px 10px">#990000</div>
|-
| Disabled
| <div style="color:#ffffff; background:#567d96; padding: 1px 10px">#567d96</div>
|}

==Schriftarten==
<p>zum Seitenanfang [[#top]]</p>

Ebenso wie das Farbschema unterliegen auch die zu verwendenden Schriftarten dem abgestimmten Styleguide. Bei der Verwendung von zu vielen unterschiedlichen Schriftarten und Schriftgrößen kann das User Interface schnell unruhig wirken. Die gewählte Schriftart sollte gut lesbar und nicht zu klein sein.<br>

===Schriftfamilie===
<p>zum Seitenanfang [[#top]]</p>

Für openKONSEQUENZ wurde die Schriftart '''Source Sans Pro''' festgelegt. Diese Schriftart ist bei allen User Interfaces und Texten zu verwendet.

[https://github.com/adobe-fonts/source-sans-pro Download-Link]

[https://www.google.com/fonts/specimen/Source+Sans+Pro WebFont-Link]

==Rahmenabstände==
<p>zum Seitenanfang [[#top]]</p>

'''offener Punkt'''<br>

===Symbole===
<p>zum Seitenanfang [[#top]]</p>

In diesem Abschnitt werden allgemeine Bedien- und Status-Symbole beschrieben. Um ein einheitliches Aussehen der oK-Module sicherzustellen, sollen diese anwendungsübergreifend verwendet werden.
{| class="wikitable sortable"
|-class="hintergrundfarbe6"
!Symbol
!Bezeichnung
|-
|[[Datei:Filter.icon.svg|center|24px]]
|Filter
|-
|[[Datei:Menu.icon.svg|center|24px]]
|Menü
|-
|[[Datei:search.icon.svg|center|24px]]
|Suche
|-
|[[Datei:Warning.icon.svg|center|24px]]
|Warnung
|-
|[[Datei:Copy.png|center|24px]]
|Kopieren
|-
|[[Datei:pencil.png|center|24px]]
|Bearbeiten
|-
|[[Datei:save.png|center|24px]]
|Speichern
|-
|[[Datei:add.png|center|24px]]
|Hinzufügen
|-
|[[Datei:cog.png|center|24px]]
|Einstellung
|-
|[[Datei:print.png|center|24px]]
|Drucken
|-
|[[Datei:refresh.png|center|24px]]
|Refresch
|-
|[[Datei:trash.png|center|24px]]
|Löschen
|-
|[[Datei:question.png|center|24px]]
|Hilfe
|-
|[[Datei:cancel.png|center|24px]]
|Abbrechen
|}
<br>
Unter dem folgenden Link finden Sie weitere Symbole.<br>
[https://material.io/tools/icons/?style=baseline Web material-icons-Link]<br>
Lizenz: Apache license version 2.0 sollte/ist mit EPL kompatibel<br>

Die folgende Darstelung zeigt eine Menüleiste mit Icon, die zum Aufrufen von definierten Funktionen verwendet werden.
<br>
[[Datei:Menueleiste mit Icon.png|frame|none|Beispiel: Schaltflächen zum Aufrufen einer Funktion]]

===technische Vorschläge===
<p>zum Seitenanfang [[#top]]</p>

<h1 style="page-break-before:always">Komponenten</h1>
<p>zum Seitenanfang [[#top]]</p>

Komponenten sind die einzelnen Bestandteile einer grafischen Benutzeroberfläche /bzw. Benutzerschnittstelle. Im folgenden Abschnitt werden die unterschiedlichen Elemente kurz Erläutert.<br>
==Standard-Steuerelemente==
<p>zum Seitenanfang [[#top]]</p>

===Eingabefeld (text)===
<p>zum Seitenanfang [[#top]]</p>

Ein Eingabefeld ist das meinst verwendete Steuerelement einer grafischen Benutzeroberfläche und dient der Interaktion mit dem Benutzer. Diese Textfelder können Ein- oder auch Mehrzeilig sein und über die Tastatur können beliebige Zeichenketten eingegeben werden.<br>
'''Darstellung'''

'''inaktiv'''
[[Datei:Input.inactive.png|frame|none|inaktives Eingabefeld mit Beschriftung "Beschreibung*"]]

'''aktiv'''
[[Datei:Input.active.png|frame|none|aktives Eingabefeld mit Beschriftung "Beschreibung*"]]

===Führungstext (label)===
<p>zum Seitenanfang [[#top]]</p>

Führungstexte (englich: label) gehören auch zu den Steuerelementen einer grafischen Benutzeroberfläche. Diese werden in der Regel dazu verwendet um Ein- oder Ausgabefelder, aber auch Radio Button oder Checkboxen zu beschriften.<br>

===Schaltfläche (button)===
<p>zum Seitenanfang [[#top]]</p>

Ein häufig genutztes Steuerelement für grafische Benutzeroberflächen ist die Schaltfläche (englisch: button). Mittels dieser Schaltflächen können Formulare abgesendet oder definierte Aktionen durchgeführt werden.<br>
'''Farben'''
{| class="wikitable"
|-
! Schaltfläche
! Hintergrundfarbe
! Konturfarbe
! Textfarbe
|-
| <div class="bootstrap-button" style="background:#003a5f; border-color:#002a45; color:#ffffff;">Primary</div>
| <div class="color-value">#003a5f</div>
| <div class="color-value">#002a45</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#ffffff; border-color:#b7cbda; color:#0b325c;">Default</div>
| <div class="color-value">#ffffff</div>
| <div class="color-value">#b7cbda</div>
| <div class="color-value">#0b325c</div>
|-
| <div class="bootstrap-button" style="background:#80b300; border-color:#6e9a00; color:#ffffff;">Success</div>
| <div class="color-value">#80b300</div>
| <div class="color-value">#6e9a00</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#0080c0; border-color:#006fa7; color:#ffffff;">Info</div>
| <div class="color-value">#0080c0</div>
| <div class="color-value">#006fa7</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#ffb200; border-color:e6a000#; color:#ffffff;">Warning</div>
| <div class="color-value">#ffb200</div>
| <div class="color-value">#e6a000</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#990000; border-color:#800000; color:#ffffff;">Danger</div>
| <div class="color-value">#990000</div>
| <div class="color-value">#800000</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#337ab7; border-color:#2e6da4; color:#ffffff;">Disabled</div>
| <div class="color-value">#337ab7</div>
| <div class="color-value">#2e6da4</div>
| <div class="color-value">#ffffff</div>
|}
<br>
Die folgende Abbildung zeigt Beispielhaft eine Menüleiste mit Schaltflächen über diese definierte Funktionen aufgerufen werden können.
<br>
[[Datei:Beispiel-Button.png|frame|none|Beispiel: Schaltflächen zum Aufrufen einer Funktion]]

===Auswahl (check-box)===
<p>zum Seitenanfang [[#top]]</p>

Die Auswahl (englisch: checkbox) ist ein einfaches Steuerelement zur Eingabe von Ja/Nein-Werten, welche durch einen Mausklick aktiviert oder deaktiviert werden kann. Dieses Element findet meist auf Formularen Verwendung, wenn z. B. die Datenschutzbestimmungen oder die allgemeinen Geschäftsbedingungen anerkannt werden müssen.<br>
'''Darstellung'''
[[Datei:Check-box.png|frame|none|Auswahl mit [[Führungstext|Beschriftung]] "Gesamtnetz für Abregelung*"]]

===Auswahllisten (MultiSelect)===
<p>zum Seitenanfang [[#top]]</p>

Ein weiteres Steuerelement ist die Auswahlliste (englisch: multiselect) und dient der Auswahl von mehreren Objekten aus einer Liste. Die Darstellungsform solcher Auswahllisten kann variieren.<br>
Weitere Informationen finden sie unter den folgende Verlinkungen.
<br>
[https://www.primefaces.org/primeng/#/multiselect Web primeng-multiselect-Link]<br>
[https://www.primefaces.org/primeng/#/chipst Web primeng-chips-Link]<br>
<br>
'''Darstellung'''<br>

Beispiel einer Auswahlliste als '''Dropdown'''.
<br>
[[Datei:multiselect.png|frame|none|Multiselect]]

Die Attribute dieser Auswahlliste<br>
<li>können Text ohne Icon enthalten<br>
<li>können Text mit Icon enthalten<br>
<li>sind Filterbar<br>
<br>

Beispiel einer Auswahlliste als '''Chips'''.<br>
In einem Eingabefeld werden mehrere Werte in Form von Chips eingefügt.<br>
[[Datei:multiselect - chip.png|frame|none|Multiselect als Chips]]

Die Attribute dieser Auswahlliste können<br>
<li>Text ohne Icon enthalten<br>
<li>Text mit Icon enthalten<br>
<br>

'''Beide Steuerelemente können kombiniert eingesetzt werden'''<br>

===Dropdown-Liste (drop-down list)===
<p>zum Seitenanfang [[#top]]</p>

Die Dropdown-Liste (englisch: drop-down-list) ist ein Textfeld welches eine Auflistung von benutzerdefinierten Werte enthält aus der ein Anwender einen Eintrag auswählen kann. Diese Dropdown-Liste kann um weitere Elemente wie zum Beispiel ein Scrollbalken, eine Filterfunktion oder auch Icon erweitert werden. Zusätzlich besteht die Möglichkeit Einträge dieser Liste zu Gruppieren, um diese Übersichtlich zu Gestalten.<br><br>
'''Darstellung'''<br>
Darstellung einer '''inaktiven''' Dropdown-Liste.<br>
[[Datei:Drop-down-menu.inactive.png|frame|none|inaktive Dropdown-Liste mit Beschriftung "Grund der Abregelung*"]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste.<br>
[[Datei:Drop-down-menu.active.png|frame|none|aktive Dropdown-Liste mit Beschriftung "Grund der Abregelung*"]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste inklusive Icon, Filter und einem Scrollbalken.<br>
[[Datei:Dropdown mit Icon.png|frame|none|aktive Dropdown-Liste mit Icon und Filter]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste inklusive Gruppierung.<br>
[[Datei:Dropdown mit Gruppierung.png|frame|none|aktive Dropdown-Liste mit Gruppierung]]
[https://www.primefaces.org/primeng/#/dropdown Web primeng-dropdown-Link]<br>

===Kalender (calendar)===
<p>zum Seitenanfang [[#top]]</p>

In der Regel umfasst ein Datums- und / oder Uhrzeitfeld eine Kalenderauswahl, so das ein Datum nicht händisch als String eingegeben werden muss. Durch klick in das Textfeld, öffnet sich ein Kalenderfenster, aus dem das gewünschte Datum und die Uhrzeit auswählt werden kann. <br>
'''Darstellung'''
[[Datei:Calendar.png|frame|none|Kalender mit Beschriftung "Startzeitpunkt*"]]
[https://www.primefaces.org/primeng/#/calendar Web primeng-calendar-Link]<br>

===Netzspezifische Icons===
<p>zum Seitenanfang [[#top]]</p>

'''offener Punkt, Klärungsbedarf'''<br>

<li>Icons werden von der e-netz bereitgestellt<br>
<li>Lizenz wahrscheinlich MIT<br>
<li>Muss mit Frau Wittek besprochen werden/bzw. Unterstützung<br>

==Steuerelemente für Formulare==
<p>zum Seitenanfang [[#top]]</p>
<br>
Zur Erfassung von Daten werden Eingabe- und Auswahlfelder bereitgestellt, in die ein Benutzer Werte über die Tastatur oder eine Werteliste eingeben kann oder Auswahlknöpfe, die der Benutzer mit der Maus beeinflusst. Hierbei werden Pflichtfelder (müssen gefüllt werden und sind mit einem Sternchen entsprechend gekennzeichnet) und Kann-Felder (können gefüllt werden) unterschieden. In der folgenden Tabelle finden Sie eine Auflisten der möglichen Steuerelemente für Formulare. Auf die einzelnen Elemente wird in den folgenden Abschnitten weiter eingegangen.<br>

{| class="wikitable"
|-
! Pflichtfeld Typ
! Visualisierung
|-
| text invalid
| [[Datei:Steuerelemente fuer Formular 1.png]]
|-
| text valid
| [[Datei:Steuerelemente fuer Formular 2.png]]
|-
| numeric valid
| [[Datei:Steuerelemente fuer Formular-numeric.png]]
|-
| date,datetime,date range valid
| [[Datei:Steuerelemente fuer Formular 3.png]]
|-
| Gesperrt
| [[Datei:Steuerelemente fuer Formular 4.png]]
|-
| Drop-Down valid
| [[Datei:Steuerelemente fuer Formular 5.png]]
|-
| Validierung beim Verlassen eines Feldes
| [[Datei:Steuerelemente fuer Formular 6.png]]
|}

==Steuerelement Kalender==
<p>zum Seitenanfang [[#top]]</p>
<br>
[https://www.primefaces.org/primeng/#/calendar Web primeng-calendar-Link]<br>

'''Darstellung'''
[[Datei:Kalender-Ansichten.png|frame|none|Darstellung der Kalenderansicht für Monat, Woche und Tag]]
<br>
In der Kalenderfunktion stehen dem Benutzer folgende Ansichten zur Verfügung:<br>
<li> Monatsansicht<br>
<li> Wochenansicht<br>
<li> Arbeitswochenansicht<br>
<li> Tagesansicht<br><br>

Bei der Kalenderfunktion hat der Anwender die Möglichkeit von durch einen Klick auf die (Arbeits-)Wochen- oder Tagesansicht zu wechseln. Durch Klicken mit der Maustaste in einen freien Zeitraum können neue Termine erfasst werden. Für eine neue Terminspanne markieren Sie einen freien Bereich durch SHIFT und Klick mit der linken Maustaste und erfassen für diesen Zeitraum einen Termin. Zum Editieren von bestehen den Terminen genügt ebenfalls ein Klick mit der Maustaste. <br>
Über die ‘‘‘Drag & Drop‘‘‘ Funktion können Termine in der Monatsansicht oder der Wochenansicht in einen anderen Wochentag verschoben werden. Um einen Termin zeitlich innerhalb eines Tages zu verschieben und Zeitspanne anzupassen, müssen Sie sich in der Wochenansicht oder der Tagesansicht befinden.<br>
<br>
Folgende Funktionen stehen zusätzlich zur Verfügung:<br>
<li> Termine ICS-Format exportieren (generell in der Applikation!)<br>
<li> Filtern über Kalendereinträge (ArrayList)<br>
<li> Unterschiedliche farbliche Darstellung einzelner Termine (Termin Template)<br>

==Steuerelement Grid==
<p>zum Seitenanfang [[#top]]</p>
<li> Buttons zum Absprung in Detailmaske (Lese/Bearbeitung), Stornierbutton in die erste Linke Spalte im Grid<br>
<li> Absprung durch Doppelklick in Detailmaske (Lese/Bearbeiten)<br>
<li> Datensatz hinzufügen-Button rechts oberhalb des Grid´s<br>
<li> Alternating row color<br>
<li> Hovereffekt (Zeile)<br>
<li> Einzelselektion und Mehrfachselektion mit Strg-Taste, Shift-Taste<br>
<li> Hovereffekt in Spaltenkopf unterstreichen und Mauscursor Hand (Rückmeldung für mögliche Aktionen an den Benutzer)<br>
<li> Klick auf Spaltenkopf, Sortierung ASC, DESC<br>
<li> Merfachsortierung durch klicken der Shift-Taste<br>
<li> Filterzeile als eigene Zeile direkt unterhalb des Spaltenkopfs<br>
<li> Virtual scrolling anstatt Pagination<br>
<li> Spaltenkopf mit Filter und Fußzeile bleiben beim scrollen stehen<br>
<li> Quickfiler (optional)<br>
<li> Externe Filter (optional) aber als Toggle-Switch<br>
<li> Stylevorgaben kommen per ok-vendor.sass !!!!!!!!!<br>
- Schriftrart<br>
- Schriftgröße<br>
- Zeilenhöhe<br>
- Farben<br>
- Style fürs Grid<br>
<li> Kompaktes Grid definieren. Spaltengröße sinnvoll definieren<br><br>
[https://www.ag-grid.com/ Web ag-grid-Link]<br>

==Steuerelement Heatmap / Kartendarstellung==
<p>zum Seitenanfang [[#top]]</p>
<br>
Ermöglicht das Einbinden von zweidimensionalen Karten-Elementen auf Webseiten, Mobile Apps sowie für Navigationen. Diese Kartendarstellungen sind von Standortdaten angetrieben und bieten zusätzlich Echtzeit-Updates. Durch einen Entwickler können diese vollständig angepasst und konfiguriert werden. Das Hinzufügen von Points of Interest, Live-Standortdaten und Persistenz globaler Objekte ist ebenfalls möglich.<br>

<li>[https://www.mapbox.com/ Web mapbox-Link]<br>
<li>[https://openlayers.org/ Web OpenLayers-Link]<br>
- Unterstützt WMS-Services (Web Map Service)<br>
- OpenSreetMap muss Lizenz geklärt werden! ODbL.<br><br>
'''Lizenzkompatibilität muss beim Projekt geklärt werden'''<br>

<br>
[[Datei:Karten-Beispiel.png|frame|none|Beispiel einer Kartenansicht]]

<h1 style="page-break-before:always">Layout</h1>
<p>zum Seitenanfang [[#top]]</p>

==Tabellen/Listen==
<p>zum Seitenanfang [[#top]]</p>

===Tabelle===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Table.png|frame|none|Darstellung einer Tabelle]]

'''Elemente'''
[[Datei:Table.labeled.png|frame|none|Elemente einer Tabelle]]
1 Tabellenkopf<br>
1.1 Spaltenüberschrift<br>
1.2 Sortiereinstellungen<br>
1.3 Spaltenkopf<br>
1.4 Spaltenfilter<br>
1.5 Spaltensortierung<br>
2 Tabelleninhalt<br>
3 Tabellenfuß<br>
3.1 Spaltenfuß<br>

===blätterbare Tabelle===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Pageable-table.png|frame|none|Darstellung einer blätterbaren Tabelle]]

'''Elemente'''
[[Datei:Pageable-table.labeled.png|frame|none|Elemente einer blätterbaren Tabelle]]
1 Tabellenkopf<br>
1.1 Spaltenüberschrift<br>
1.2 Sortiereinstellungen<br>
1.3 Spaltenkopf<br>
1.4 Spaltenfilter<br>
1.5 Sortierung<br>
2 Tabelleninhalt<br>
3 Seitennavigation<br>

==oK-Steuerelemente==
<p>zum Seitenanfang [[#top]]</p>

===Topologie-Baum===
<p>zum Seitenanfang [[#top]]</p>

Das Steuerelement bietet die Möglichkeit, [[Topologie (Strom)| topologische]] Zusammenhänge eines Stromnetzes hierarchisch darzustellen.
Der Topologie-Baum ist als gemeinsames Steuerelment in unterschiedlichen ok-Modulen wiederverwendbar und definiert eine standardisierte Sicht. Die generell möglichen, darstellbaren topologischen Elemente richten sich nach den in oK definierten Elementen.

Die Klärung der Frage, wie ein Netz hierarchisch dargestellt werden kann und welche Elemente des Netzes tatsächlich angezeigt und ausgewählt werden können, ist nicht Aufgabe dieses Steuerelementes. Dies ist Aufgabe der darunter liegenden Anwendung und kann aufgrund fachlicher Aspekte unterschiedlich ausgeprägt sein.<br><br>
'''Elemente'''
[[Datei:TopologyTree.labeled.png|frame|none|Elemente eines Topologie-Baums]]

1 Steuerleiste<br>
1.1 Suchbegriff<br>
Im [[Eingabefeld]] "Suchbegriff" können Begriffe eingeben werden, nach denen in der zugrundeliegenden Topologie gesucht werden kann.
Die Begriffe können folgende [https://de.wikipedia.org/wiki/Wildcard_%28Informatik%29 Platzhalter (Wildcard)] beinhalten:
{| class="wikitable sortable"
|-class="hintergrundfarbe6"
!Platzhalter
!Bezeichnung
!Verwendung
|-
|?
|Fragezeichen
|Platzhalter für genau ein Zeichen
|-
|*
|Sternchen
|Platzhalter für beliebig viele (auch null) Zeichen
|-
|#
|Doppelkreuz
|Platzhalter für einen numerischen Wert
|}
1.2 Suchen<br>
Durch Drücken der [[Schaltfläche]] "Suchen", wird nach dem angegebenen Suchbegriff gesucht. Ist die Suche erfolgreich, werden alle Elemente im Navigationsbereich ausgewählt (Mehrfachselektion), die dem Suchbegriff entsprechen. Gleichzeit wird zum ersten Element aus der Ergebnismenge gesprungen.<br>

1.3 Einstellungen'''<br>
Über die Schaltfläche "Einstellungen" können Filterkriterien definiert werden, die die Anzeige auf passende topologische Elemente im Navigationsbereich einschränken.<br/>
<div style="background:#fff0d0;border-color:#ffb200;border-radius:5px;border-style:solid;border-width:1px;margin:16px;padding:10px">[[Datei:Warning-yellow.icon.svg|24px]] Die Definition möglicher Filterkriterien und Regelwerke ist Teil späterer Festlegungen.</div>

2 Statusleiste<br>
Die Statusleiste zeigt allgemeine Informationen zu den im Navigationsbereich angezeigten Elementen an.<br>
2.1 Datum<br>
Das Erstellungsdatum (Stand) der zugrundeliegenden Daten, auf dem die Anzeige im Navigationsbereich basiert.<br>
2.2 Uhrzei<br>
Die Erstellungsuhrzeit(Stand) der zugrundeliegenden Daten, auf dem die Anzeige im Navigationsbereich basiert.<br>
2.3 Filter<br>
Das Symbol "Filter" zeigt an, ob mindestens ein Filter aktiviert ist.<br>
2.4 Benachrichtigung<br>
Im Benachrichtigungsbereich können verschiedene Symbole angezeigt werden, die über zusätzliche Hinweise informieren. In Beispiel ist liegt hier eine Warnungmeldung vor.<br>

3 Navigationsbereich<br>
Im Navigationsbereich werden topologische Zusammenhänge in einer baumartigen Struktur angezeigt. Die Ausprägung der Topologie als Hierarchie ist Aufgabe der jeweiligen Anwendung.<br>

'''Ordnung/Sortierreihenfolge'''<br>

<div style="background:#fff0d0;border-color:#ffb200;border-radius:5px;border-style:solid;border-width:1px;margin:16px;padding:10px">[[Datei:Warning-yellow.icon.svg|24px]]<br>
- Was für ein Steuerelement nutzt da BTC? <br>
- Wir müssten da einen Link bereitstellen ggf. mit Matthias Rohr oder Felix Korb besprechen <br></div>

==Definition von ok HTML Elementen==
<p>zum Seitenanfang [[#top]]</p>
<br>
ok HTML Elemente müssen durch npm paketiert und oK-konform gestyled werden.<br>

Zu den oK HTML Elemente zählen:<br>
<li> Date (primeng)<br>
<li> DateTime (primeng)<br>
<li> DateRange (primeng)<br>
<li> komplexe DropDown (primeng) bspw. Icons, Tabelle, Gruppen<br>
<li> Grid (ag-grid)<br>
<li> Gantt (zurzeit nichts geeignetes gefunden)<br>
<li> Kalender (primeng)<br>
<li> Charts (primeng, c3js, d3js)<br>
<li> Navbar (ok-element)<br>
<li> Modale Dialoge (primeng) sollten vermieden werden<br>
<li> Tabs (primeng)<br>
<li> Akkordion (primeng)<br>
<li> MultiSelect (primeng)<br>
<li> Chips (primeng)<br>
<li> Editor (primeng)<br>
<li> Messages toast (primeng)<br>
<br>
ACHTUNG: Nicht definierte ok Steuerlemente immer erst bei primeng schauen!<br>
<br>
Weitere Steuerlemente müssen über SaaS Themeable sein!<br>
<li> [https://www.primefaces.org/primeng/#/ Web primefaces - Link]<br>
<li> [https://www.ag-grid.com Web ag-grid - Link]<br>
<li> [https://c3js.org/ Web c3js.org - Link]<br>
<li> [https://d3js.org/ Web d3js.org - Link]<br>

==Definition von Standard HTML Elementen==
<p>zum Seitenanfang [[#top]]</p>
<br>
Standard HTML Elemente müssen nicht durch npm paketiert werden.<br>
Es ist ausreichend, ok-Styles als npm Pakete zu definieren und auf den HTML Elementen anzuwenden.<br>
<br>
Zu den Standard HTML Elemente zählen:<br>

<li> Textfelder<br>
<li> Validation<br>
<li> Passwort<br>
<li> Simple DropDown Listen<br>
<li> CheckBox<br>
<li> Buttons<br>
<li> Button Groups<br>
<li> Radio Buttons<br>
<li> File Upload<br>
<li> Numerics<br>
<li> (Drag&Drop)<br>
<li> List Group<br>
<li> Tables (wenn keine besonder Funktionalität, sonst ag-grid)<br>
<br>
Komponenten aus https://getbootstrap.com<br>

==Portal==
<p>zum Seitenanfang [[#top]]</p>

==Standarddialoge==
<p>zum Seitenanfang [[#top]]</p>

===Eingabedialog===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Input-dialog.png|frame|none|Darstellung eines Eingabedialogs]]
'''Elemente'''
[[Datei:Input-dialog.labeled.png|frame|none|Elemente eines Eingabedialogs]]
1 Titel<br>
2 Anzeige-/Eingabebereich<br>
3 Steuerleiste<br>

===Benachrichtigungsdialog===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:notification-dialog.png|frame|none|Darstellung eines Benachrichtigungsdialogs]]
'''Elemente'''
[[Datei:notification-dialog.labeled.png|frame|none|Elemente eines Benachrichtigungsdialogs]]
1 Titel<br>
2 Benachrichtigung<br>
3 Steuerleiste<br>

===Wizard===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Wizard.png|frame|none|Darstellung eines Wizards]]

'''Elemente'''
[[Datei:Wizard.labeled.png|frame|none|Elemente eines Wizards]]
1 Überschrift<br>
2 Bearbeitungsschritte<br>
3 Inhalt<br>
4 Steuerleiste<br>

===Message Toast===
<p>zum Seitenanfang [[#top]]</p>
<br>
Ein Message Toast ist ein kurzer Hinweistex welcher als Popup eingeblendet und nach einem Moment wieder ausgeblendet wird, ohne das zwangsläufig eine Benutzeraktion erfolgen muss.<br>
Die Eigenschaften eines Toast können beliebig konfiguriert werden.<br>

'''Darstellung'''
[[Datei:Message toast.png|frame|none|Darstellung eines Message Toast]]<br>

'''Für open KONSEQUENZ wurden folgende Konfigurationen abgestimmt'''<br>
<li>Toasts erscheinen oben rechts<br>
<li>Verschwinden nach rechts oben<br>
<li>Automatisches verschwinden nach:<br>
   Erfolgreich: 2 Sekunden<br>
   Info: Muss manuell geschlossen werden<br>
   Warnung: 7 Sekunden<br>
   Fehler: 7 Sekunden<br>
<li>Messages: Erfolgreich, Fehler, Info, Warnung<br>
<li>Maximal drei Zeilen Content in einem Toast<br>
<li>Defaultfarben verwenden<br><br>

[https://www.primefaces.org/primeng/#/toast Web primeng-Toast-Link]

==Navigationselemente==
<p>zum Seitenanfang [[#top]]</p>

<br>Um das Navigieren innerhalb einer Web-Seite zu vereinfachen gibt es unterschiedliche Navigationselemente, diese werden in den folgenden Kapiteln kurz erläutert.<br>

===Navigation Bar (Navbar)===
<p>zum Seitenanfang [[#top]]</p>
<br>
Das Navbar-Element ist ein permanent sichtbares Navigationselement, welches horizontal oder vertikal auf einer Webseite angeordnet werden kann und dem Benutzer die
Möglichkeit bietet, wichtige Seiten direkt aufzurufen. Der Vorteil ist, dass eine Navbar für jede Seite separat konfiguriert werden kann.<br><br>
'''Darstellung'''
<br>
[[Datei:mit Autodisplay.png|frame|none|Darstellung einer Navbar mit Autodisplay]]
<br>
[[Datei:ohne Autodisplay.png|frame|none|Darstellung einer Navbar ohne Autodisplay]]
<br>
Vorteile einer Navbar:<br>
<li> Bietet einen schnellen Überblick über die Struktur der Webseite<br>
<li> Jede Seite, bzw. Kategorie ist direkt über die Navbar ansteuerbar<br>
<li> Die Navbar ist für jede Seite separat konfigurierbar<br>
<li> Für jedes Navigationselement kann ein eigenes Submenü erstellt werden<br>
<li> Die aktuelle Seite kann farblich hinterlegt werden<br>
<li> In einer Navbar können Funktionen wie zum Beispiel Abmelden oder eine Such-Funktion eingebunden werden<br>
<li> Es können bis zu vier Navbars auf einer Seite verwendet werden (Standartmäßig werden aber nur zwei implementiert)<br>
<br>
Nachteile einer Navbar:<br>
<li> Muss für jede Seite einzeln Konfiguriert werden<br>
<li> Kann bei umfangreichen Seiten schnell unübersichtlich werden oder Überladen wirken<br>
<br>
[https://www.primefaces.org/primeng/#/menubar Web primeng-menubar-Link]

===Accordion===
<p>zum Seitenanfang [[#top]]</p>
<br>
'''Beschreibung'''<br>
Ein Accordion ist ein Navigationselement, welches dazu dient umfangreiche Listen mit Inhalten platzsparend auf Webseiten abzubilden.<br>
[https://www.primefaces.org/primeng/#/accordion Web primeng-accordion-Link]

'''Darstellung'''<br>
Einzelselektion<br>
[[Datei:akkordion-einzelselektion.png|frame|none]]<br>
Mehrfachselektion<br>
[[Datei:akkordion-mehrfachselektion.png|frame|none]]

===TabView===
<p>zum Seitenanfang [[#top]]</p>
<br>
Eine TabView ist eine Komponente zum einfachen Gruppieren von Inhalten auf einer Seite in Form von Registerkarten. Auf jeder Registerkarte können z.B. Formulare implementiert werden, die durch den Anwender abgearbeitet werden müssen. Durch die Verwendung von Registerkarten wird ein schnelles Navigieren zwischen den einzelnen Inhalten ermöglicht. Zudem können diese Registerkarten je nach Anfordeung konfuguriert werden.<br>

[https://www.primefaces.org/primeng/#/tabview Web primeng-tabview-Link]

[[Datei:tab-view.png|frame|none|Darstellung einer TabView]]<br>

Für openKONSEQUENZ wurden folgende Konfigurationen vorgegeben:<br>
<li>Valid: Grüner Balken in Tab (Nur wenn allen Steuerelementen im Content valid sind)
<li>Invalid: Roter Balken in Tab
<li>Neuen Tab dynamisch hinzufügen per + Tab
<li>Tab entfernen mit Lösch-Button im Content-Bereich
<li>Icons können je nach bedarf im Tab angezeigt werden
<li>Ausrichtung der Tabs (oben, unten, links, rechts)

<h1 style="page-break-before:always">Barrierefreiheit</h1>
<p>zum Seitenanfang [[#top]]</p>

Barrierefreiheit bezeichnet eine Gestaltung der baulichen Umwelt sowie von Informationsangeboten, Kommunikation usw. dergestalt, dass sie auch von Menschen mit Beeinträchtigungen ohne zusätzliche Hilfen genutzt und wahrgenommen werden können.

Um Menschen ein barrierefreies Arbeiten in der digitalen Welt zu ermöglichen, sind verschiedene Aspekte zu betrachten: Zum einen müssen Software und das heute nicht mehr wegzudenkende Internet barrierefrei gestaltet werden. Zum anderen muss einigen Menschen mit Behinderung überhaupt erst die Bedienung eines Computers ermöglicht werden durch unterstützende Technologien. Dies können beispielsweise Augensteuerung und Mundmaus bei körperlichen Behinderungen, oder Screenreader und Braillezeile bei Blinden sein. Weitere Beispiele stellen Technologien aus dem Bereich der Unterstützten Kommunikation dar, die Kommunikation in manchen Fällen überhaupt erst möglich machen.

Quelle: [ https://de.wikipedia.org/wiki/Barrierefreiheit ]

<h1 style="page-break-before:always">Internationalisierung</h1>
<p>zum Seitenanfang [[#top]]</p>

Internationalisierung bedeutet in der Informatik beziehungsweise in der Softwareentwicklung, ein Programm so zu gestalten, dass es leicht (ohne den Quellcode ändern zu müssen) an andere Sprachen und Kulturen angepasst werden kann.

Internationalisierung (englisch internationalization oder internationalisation) wird gerne mit dem Numeronym i18n abgekürzt (im englischen Wort Internationalization befinden sich 18 Buchstaben zwischen dem ersten Buchstaben I und dem letzten Buchstaben n). Hierunter fallen diejenigen Aufgaben, die der Entwickler/Programmierer eines Programms bewältigen muss. Dazu darf er zum Beispiel Beschreibungstexte nicht im Quellcode fest kodieren, sondern muss Variablen benutzen, die von einer Quelle zur Laufzeit eingelesen werden. Aber auch Datumsformatierungen und die sprachabhängige Oberflächengestaltung (z. B. kann Text unterschiedlich lang sein oder die Rechts-Nach-Links-Orientierung kann sich unterscheiden) gehören hierzu.

Im nächsten Schritt erfolgt die Lokalisierung (localization oder localisation), die als l10n abgekürzt wird (10 Buchstaben zwischen l und n). Ein Programm sollte im vorigen Schritt so gestaltet sein, dass diese Änderungen nicht mehr vom Programmierer durchgeführt werden müssen. Dieser Prozess bezeichnet die reine Übersetzung von zum Beispiel Texten in eine Landessprache.

Quelle: [ https://de.wikipedia.org/wiki/Internationalisierung_(Softwareentwicklung) ]

<h1 style="page-break-before:always">allg. Usability-Richtlinien</h1>
<p>zum Seitenanfang [[#top]]</p>

Software-Ergonomie (zur Wortherkunft siehe Software und Ergonomie) ist die Arbeit hin zu leicht verständlicher und schnell benutzbarer Software unter den gebotenen technischen Möglichkeiten und unter der Einhaltung definierter bzw. empirisch entstandener Standards und Styleguides. Die Software-Ergonomie ist ein Teilgebiet der Mensch-Computer-Interaktion, und ihr Ergebnis ist die Gebrauchstauglichkeit von Computerprogrammen.

Gegenstandsbereich der Software-Ergonomie im eigentlichen Sinne ist der arbeitende Mensch im Kontext (Softwarenutzung an Arbeitsplätzen). Allgemein wird heute die Benutzung von bzw. die Interaktion mit Computern betrachtet. Dies bedeutet die Berücksichtigung (neuro)psychologischer Aspekte beim Entwerfen der Software – wie dies methodisch auch die Ingenieurpsychologie anstrebt –, um eine optimale Mensch-Maschine-Schnittstelle zur Verfügung zu stellen. Dies soll sich in besonders leicht verständlichen funktionalen Einheiten ausdrücken (Bsp. einfache Dialoge bei Systemen mit GUI). Die Entwicklung gebrauchstauglicher Software wird im Rahmen des Usability-Engineering geleistet.

Quelle: [ https://de.wikipedia.org/wiki/Software-Ergonomie]

<h1 style="page-break-before:always">Paketierung der Styles (customized Bootstrap Template und individuelle allg. oK Styles)</h1>
<p>zum Seitenanfang [[#top]]</p><br>

Aufteilung der Stylse oK und eigene Unternehmensanpassungen.<br>
<li> '''ok-common.saas'''<br>
- Für Layout und globale Styles customized Bootstrap Template<br>
- ok-CI/CD<br>
<li> '''ok-vendor.saas'''<br>
- Nur für die Componenten-Styles von Drittanbietern<br>
(z.B.: primeng, ag-grid, c3.js, d3.js)<br>
<li> '''ok-components.saas'''<br>
- Nur für ok-Components<br>
(z.B.: NavBar)<br>
<br>
Achtung: Unternehmensanpassungen (CI/CD) werden in eigenen neuen saas Dateien beschrieben! Dabei müssen die entsprechenden saas-Variablen überschrieben werden.<br>

2019-07-08T11:49:42Z

Eschlenker: /* Schaltfläche (button) */

zurück zur [[Hauptseite]]
zurück zur [[Styleguide]]

<h1 style="page-break-before:always">Zielsetzung und Abgrenzung</h1>
<p>zum Seitenanfang [[#top]]</p>
'''Zielsetzung:'''<br>
<li> Konsolidierung des UI StyleGuides<br>
<li> Evaluierung Tooling für den StyleGuide<br>
- IMIS<br>
- Wiki<br>
- sonst<br>
<li> Package Manager (npm)<br>
<li> Entwurfsentscheidungen ng Components vs Elements<br>
<li> Best of Konsolidierung der Steuerelemente aus den existierenden UserModulen<br>
<li> UX Vorgaben definieren<br>
<li> Paketierung der Styles (customized Bootstrap Template, eigenes allg. OK Stylesheet) als npm<br>
<br>
'''Abgrenzung:'''
<li> Vorerst kein Code (nur beispielhaft)<br>
<br>

<h1 style="page-break-before:always">Design</h1>
<p>zum Seitenanfang [[#top]]</p>

Um ein einheitliches Design zu gewährleisten, müssen die verwendeten Farben, Formen und Schriftarten auf allen User Interfaces dem vorgegebenen StyleGuide entsprechen. Diese Vorgaben werden in den folgenden Kapiteln beschrieben.
==Farben==
<p>zum Seitenanfang [[#top]]</p>

In diesem Kapitel wird das abgestimmte Farbschema (Hauptfarben, Farbverläufe, Sekundärfarben, u. s. w.) und deren Verwendung auf Webseiten und User Interfaces erläutert. Zusätzlich finden Sie hier Informationen über den jeweiligen Farbcode und die CSS Codierung.<br>

===Hauptfarben===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Primary
| <div style="color:#ffffff; background:#003a5f; padding: 1px 10px">#003a5f</div>
|-
| Success
| <div style="color:#ffffff; background:#80b300; padding: 1px 10px">#80b300</div>
|-
| Info
| <div style="color:#ffffff; background:#0080c0; padding: 1px 10px">#0080c0</div>
|-
| Default
| <div style="color:#000000; background:#ffffff; padding: 1px 10px">#ffffff</div>
|-
| Text
| <div style="color:#ffffff; background:#333333; padding: 1px 10px">#333333</div>
|}

===Farbverläufe===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
! CSS
|-
| Streifen Header
| <div style="color:#ffffff; background: linear-gradient(to right, rgba(121, 182, 28, 1) 0%, rgba(2, 129, 196, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0); padding: 1px 10px">#79b61c - #0281c4</div>
| <code>background: linear-gradient(to right, rgba(121, 182, 28, 1) 0%, rgba(2, 129, 196, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0);</code>
|-
| Balken Header
| <div style="color:#000000; background: linear-gradient(to right, rgba(232, 238, 231, 1) 0%, rgba(229, 237, 242, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0); padding: 1px 10px">#e8eee7- #e5edf2</div>
| <code>background: linear-gradient(to right, rgba(232, 238, 231, 1) 0%, rgba(229, 237, 242, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0);</code>
|}

===Flächen und Linien===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Hintergrund
| <div style="color:#000000; background:#f8fafd; padding: 1px 10px">#f8fafd</div>
|-
| Flächen/Tabellen
| <div style="color:#000000; background:#f5f8fc; padding: 1px 10px">#f5f8fc</div>
|-
| Hervorhebung/Eingabefelder/Tabellenzeilen
| <div style="color:#000000; background:#e9f0f9; padding: 1px 10px">#e9f0f9</div>
|-
| Linien
| <div style="color:#000000; background:#ccdbe6; padding: 1px 10px">#ccdbe6</div>
|-
| Umrandung Formularfelder
| <div style="color:#000000; background:#b7cbda; padding: 1px 10px">#b7cbda</div>
|}

===Sekundärfarben===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Warning
| <div style="color:#000000; background:#ffb200; padding: 1px 10px">#ffb200</div>
|-
| Danger
| <div style="color:#ffffff; background:#990000; padding: 1px 10px">#990000</div>
|-
| Disabled
| <div style="color:#ffffff; background:#567d96; padding: 1px 10px">#567d96</div>
|}

==Schriftarten==
<p>zum Seitenanfang [[#top]]</p>

Ebenso wie das Farbschema unterliegen auch die zu verwendenden Schriftarten dem abgestimmten Styleguide. Bei der Verwendung von zu vielen unterschiedlichen Schriftarten und Schriftgrößen kann das User Interface schnell unruhig wirken. Die gewählte Schriftart sollte gut lesbar und nicht zu klein sein.<br>

===Schriftfamilie===
<p>zum Seitenanfang [[#top]]</p>

Für openKONSEQUENZ wurde die Schriftart '''Source Sans Pro''' festgelegt. Diese Schriftart ist bei allen User Interfaces und Texten zu verwendet.

[https://github.com/adobe-fonts/source-sans-pro Download-Link]

[https://www.google.com/fonts/specimen/Source+Sans+Pro WebFont-Link]

==Rahmenabstände==
<p>zum Seitenanfang [[#top]]</p>

'''offener Punkt'''<br>

===Symbole===
<p>zum Seitenanfang [[#top]]</p>

In diesem Abschnitt werden allgemeine Bedien- und Status-Symbole beschrieben. Um ein einheitliches Aussehen der oK-Module sicherzustellen, sollen diese anwendungsübergreifend verwendet werden.
{| class="wikitable sortable"
|-class="hintergrundfarbe6"
!Symbol
!Bezeichnung
|-
|[[Datei:Filter.icon.svg|center|24px]]
|Filter
|-
|[[Datei:Menu.icon.svg|center|24px]]
|Menü
|-
|[[Datei:search.icon.svg|center|24px]]
|Suche
|-
|[[Datei:Warning.icon.svg|center|24px]]
|Warnung
|-
|[[Datei:Copy.png|center|24px]]
|Kopieren
|-
|[[Datei:pencil.png|center|24px]]
|Bearbeiten
|-
|[[Datei:save.png|center|24px]]
|Speichern
|-
|[[Datei:add.png|center|24px]]
|Hinzufügen
|-
|[[Datei:cog.png|center|24px]]
|Einstellung
|-
|[[Datei:print.png|center|24px]]
|Drucken
|-
|[[Datei:refresh.png|center|24px]]
|Refresch
|-
|[[Datei:trash.png|center|24px]]
|Löschen
|-
|[[Datei:question.png|center|24px]]
|Hilfe
|-
|[[Datei:cancel.png|center|24px]]
|Abbrechen
|}
<br>
Unter dem folgenden Link finden Sie weitere Symbole.<br>
[https://material.io/tools/icons/?style=baseline Web material-icons-Link]<br>
Lizenz: Apache license version 2.0 sollte/ist mit EPL kompatibel<br>

===technische Vorschläge===
<p>zum Seitenanfang [[#top]]</p>

<h1 style="page-break-before:always">Komponenten</h1>
<p>zum Seitenanfang [[#top]]</p>

Komponenten sind die einzelnen Bestandteile einer grafischen Benutzeroberfläche /bzw. Benutzerschnittstelle. Im folgenden Abschnitt werden die unterschiedlichen Elemente kurz Erläutert.<br>
==Standard-Steuerelemente==
<p>zum Seitenanfang [[#top]]</p>

===Eingabefeld (text)===
<p>zum Seitenanfang [[#top]]</p>

Ein Eingabefeld ist das meinst verwendete Steuerelement einer grafischen Benutzeroberfläche und dient der Interaktion mit dem Benutzer. Diese Textfelder können Ein- oder auch Mehrzeilig sein und über die Tastatur können beliebige Zeichenketten eingegeben werden.<br>
'''Darstellung'''

'''inaktiv'''
[[Datei:Input.inactive.png|frame|none|inaktives Eingabefeld mit Beschriftung "Beschreibung*"]]

'''aktiv'''
[[Datei:Input.active.png|frame|none|aktives Eingabefeld mit Beschriftung "Beschreibung*"]]

===Führungstext (label)===
<p>zum Seitenanfang [[#top]]</p>

Führungstexte (englich: label) gehören auch zu den Steuerelementen einer grafischen Benutzeroberfläche. Diese werden in der Regel dazu verwendet um Ein- oder Ausgabefelder, aber auch Radio Button oder Checkboxen zu beschriften.<br>

===Schaltfläche (button)===
<p>zum Seitenanfang [[#top]]</p>

Ein häufig genutztes Steuerelement für grafische Benutzeroberflächen ist die Schaltfläche (englisch: button). Mittels dieser Schaltflächen könne Formulage abgesendet oder definierte Aktionen durchgeführt werden.<br>
'''Farben'''
{| class="wikitable"
|-
! Schaltfläche
! Hintergrundfarbe
! Konturfarbe
! Textfarbe
|-
| <div class="bootstrap-button" style="background:#003a5f; border-color:#002a45; color:#ffffff;">Primary</div>
| <div class="color-value">#003a5f</div>
| <div class="color-value">#002a45</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#ffffff; border-color:#b7cbda; color:#0b325c;">Default</div>
| <div class="color-value">#ffffff</div>
| <div class="color-value">#b7cbda</div>
| <div class="color-value">#0b325c</div>
|-
| <div class="bootstrap-button" style="background:#80b300; border-color:#6e9a00; color:#ffffff;">Success</div>
| <div class="color-value">#80b300</div>
| <div class="color-value">#6e9a00</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#0080c0; border-color:#006fa7; color:#ffffff;">Info</div>
| <div class="color-value">#0080c0</div>
| <div class="color-value">#006fa7</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#ffb200; border-color:e6a000#; color:#ffffff;">Warning</div>
| <div class="color-value">#ffb200</div>
| <div class="color-value">#e6a000</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#990000; border-color:#800000; color:#ffffff;">Danger</div>
| <div class="color-value">#990000</div>
| <div class="color-value">#800000</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#337ab7; border-color:#2e6da4; color:#ffffff;">Disabled</div>
| <div class="color-value">#337ab7</div>
| <div class="color-value">#2e6da4</div>
| <div class="color-value">#ffffff</div>
|}
<br>
Die folgenden Abbildung zeigt ein Beispiel einer Schaltflächen - Darstellung. <br>
[[Datei:Beispiel-Button.png|frame|none|Beispiel Schaltflächen]]

===Auswahl (check-box)===
<p>zum Seitenanfang [[#top]]</p>

Die Auswahl (englisch: checkbox) ist ein einfaches Steuerelement zur Eingabe von Ja/Nein-Werten, welche durch einen Mausklick aktiviert oder deaktiviert werden kann. Dieses Element findet meist auf Formularen Verwendung, wenn z. B. die Datenschutzbestimmungen oder die allgemeinen Geschäftsbedingungen anerkannt werden müssen.<br>
'''Darstellung'''
[[Datei:Check-box.png|frame|none|Auswahl mit [[Führungstext|Beschriftung]] "Gesamtnetz für Abregelung*"]]

===Auswahllisten (MultiSelect)===
<p>zum Seitenanfang [[#top]]</p>
<br>
Ein weiteres Steuerelement ist die Auswahlliste (englisch: multiselect) und dient der Auswahl von mehreren Objekten aus einer Liste. Die Darstellungsform solcher Auswahllisten kann variieren.<br>
Weitere Informationen finden sie unter den folgende Verlinkungen.
<br>
[https://www.primefaces.org/primeng/#/multiselect Web primeng-multiselect-Link]<br>
[https://www.primefaces.org/primeng/#/chipst Web primeng-chips-Link]<br>
<br>
'''Darstellung'''<br>

Beispiel einer Auswahlliste als '''Dropdown'''.
<br>
[[Datei:multiselect.png|frame|none|Multiselect]]

Die Attribute dieser Auswahlliste<br>
<li>können Text ohne Icon enthalten<br>
<li>können Text mit Icon enthalten<br>
<li>sind Filterbar<br>
<br>

Beispiel einer Auswahlliste als '''Chips'''.<br>
In einem Eingabefeld werden mehrere Werte in Form von Chips eingefügt.<br>
[[Datei:multiselect - chip.png|frame|none|Multiselect als Chips]]

Die Attribute dieser Auswahlliste können<br>
<li>Text ohne Icon enthalten<br>
<li>Text mit Icon enthalten<br>
<br>

'''Beide Steuerelemente können kombiniert eingesetzt werden'''<br>

===Dropdown-Liste (drop-down list)===
<p>zum Seitenanfang [[#top]]</p>

Die Dropdown-Liste (englisch: drop-down-list) ist ein Textfeld welches eine Auflistung von benutzerdefinierten Werte enthält aus der ein Anwender einen Eintrag auswählen kann. Diese Dropdown-Liste kann um weitere Elemente wie zum Beispiel ein Scrollbalken, eine Filterfunktion oder auch Icon erweitert werden. Zusätzlich besteht die Möglichkeit Einträge dieser Liste zu Gruppieren, um diese Übersichtlich zu Gestalten.<br><br>
'''Darstellung'''<br>
Darstellung einer '''inaktiven''' Dropdown-Liste.<br>
[[Datei:Drop-down-menu.inactive.png|frame|none|inaktive Dropdown-Liste mit Beschriftung "Grund der Abregelung*"]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste.<br>
[[Datei:Drop-down-menu.active.png|frame|none|aktive Dropdown-Liste mit Beschriftung "Grund der Abregelung*"]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste inklusive Icon, Filter und einem Scrollbalken.<br>
[[Datei:Dropdown mit Icon.png|frame|none|aktive Dropdown-Liste mit Icon und Filter]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste inklusive Gruppierung.<br>
[[Datei:Dropdown mit Gruppierung.png|frame|none|aktive Dropdown-Liste mit Gruppierung]]
[https://www.primefaces.org/primeng/#/dropdown Web primeng-dropdown-Link]<br>

===Kalender (calendar)===
<p>zum Seitenanfang [[#top]]</p>

In der Regel umfasst ein Datums- und / oder Uhrzeitfeld eine Kalenderauswahl, so das ein Datum nicht händisch als String eingegeben werden muss. Durch klick in das Textfeld, öffnet sich ein Kalenderfenster, aus dem das gewünschte Datum und die Uhrzeit auswählt werden kann. <br>
'''Darstellung'''
[[Datei:Calendar.png|frame|none|Kalender mit Beschriftung "Startzeitpunkt*"]]
[https://www.primefaces.org/primeng/#/calendar Web primeng-calendar-Link]<br>

===Netzspezifische Icons===
<p>zum Seitenanfang [[#top]]</p>

'''offener Punkt, Klärungsbedarf'''<br>

<li>Icons werden von der e-netz bereitgestellt<br>
<li>Lizenz wahrscheinlich MIT<br>
<li>Muss mit Frau Wittek besprochen werden/bzw. Unterstützung<br>

==Steuerelemente für Formulare==
<p>zum Seitenanfang [[#top]]</p>
<br>
Zur Erfassung von Daten werden Eingabe- und Auswahlfelder bereitgestellt, in die ein Benutzer Werte über die Tastatur oder eine Werteliste eingeben kann oder Auswahlknöpfe, die der Benutzer mit der Maus beeinflusst. Hierbei werden Pflichtfelder (müssen gefüllt werden und sind mit einem Sternchen entsprechend gekennzeichnet) und Kann-Felder (können gefüllt werden) unterschieden. In der folgenden Tabelle finden Sie eine Auflisten der möglichen Steuerelemente für Formulare. Auf die einzelnen Elemente wird in den folgenden Abschnitten weiter eingegangen.<br>

{| class="wikitable"
|-
! Pflichtfeld Typ
! Visualisierung
|-
| text invalid
| [[Datei:Steuerelemente fuer Formular 1.png]]
|-
| text valid
| [[Datei:Steuerelemente fuer Formular 2.png]]
|-
| numeric valid
| [[Datei:Steuerelemente fuer Formular-numeric.png]]
|-
| date,datetime,date range valid
| [[Datei:Steuerelemente fuer Formular 3.png]]
|-
| Gesperrt
| [[Datei:Steuerelemente fuer Formular 4.png]]
|-
| Drop-Down valid
| [[Datei:Steuerelemente fuer Formular 5.png]]
|-
| Validierung beim Verlassen eines Feldes
| [[Datei:Steuerelemente fuer Formular 6.png]]
|}

==Steuerelement Kalender==
<p>zum Seitenanfang [[#top]]</p>
<br>
[https://www.primefaces.org/primeng/#/calendar Web primeng-calendar-Link]<br>

'''Darstellung'''
[[Datei:Kalender-Ansichten.png|frame|none|Darstellung der Kalenderansicht für Monat, Woche und Tag]]
<br>
In der Kalenderfunktion stehen dem Benutzer folgende Ansichten zur Verfügung:<br>
<li> Monatsansicht<br>
<li> Wochenansicht<br>
<li> Arbeitswochenansicht<br>
<li> Tagesansicht<br><br>

Bei der Kalenderfunktion hat der Anwender die Möglichkeit von durch einen Klick auf die (Arbeits-)Wochen- oder Tagesansicht zu wechseln. Durch Klicken mit der Maustaste in einen freien Zeitraum können neue Termine erfasst werden. Für eine neue Terminspanne markieren Sie einen freien Bereich durch SHIFT und Klick mit der linken Maustaste und erfassen für diesen Zeitraum einen Termin. Zum Editieren von bestehen den Terminen genügt ebenfalls ein Klick mit der Maustaste. <br>
Über die ‘‘‘Drag & Drop‘‘‘ Funktion können Termine in der Monatsansicht oder der Wochenansicht in einen anderen Wochentag verschoben werden. Um einen Termin zeitlich innerhalb eines Tages zu verschieben und Zeitspanne anzupassen, müssen Sie sich in der Wochenansicht oder der Tagesansicht befinden.<br>
<br>
Folgende Funktionen stehen zusätzlich zur Verfügung:<br>
<li> Termine ICS-Format exportieren (generell in der Applikation!)<br>
<li> Filtern über Kalendereinträge (ArrayList)<br>
<li> Unterschiedliche farbliche Darstellung einzelner Termine (Termin Template)<br>

==Steuerelement Grid==
<p>zum Seitenanfang [[#top]]</p>
<br>
<li> Buttons zum Absprung in Detailmaske (Lese/Bearbeitung), Stornierbutton in die erste Linke Spalte im Grid<br>
<li> Absprung durch Doppelklick in Detailmaske (Lese/Bearbeiten)<br>
<li> Datensatz hinzufügen-Button rechts oberhalb des Grid´s<br>
<li> Alternating row color<br>
<li> Hovereffekt (Zeile)<br>
<li> Einzelselektion und Mehrfachselektion mit Strg-Taste, Shift-Taste<br>
<li> Hovereffekt in Spaltenkopf unterstreichen und Mauscursor Hand (Rückmeldung für mögliche Aktionen an den Benutzer)<br>
<li> Klick auf Spaltenkopf, Sortierung ASC, DESC<br>
<li> Merfachsortierung durch klicken der Shift-Taste<br>
<li> Filterzeile als eigene Zeile direkt unterhalb des Spaltenkopfs<br>
<li> Virtual scrolling anstatt Pagination<br>
<li> Spaltenkopf mit Filter und Fußzeile bleiben beim scrollen stehen<br>
<li> Quickfiler (optional)<br>
<li> Externe Filter (optional) aber als Toggle-Switch<br>
<li> Stylevorgaben kommen per ok-vendor.sass !!!!!!!!!<br>
- Schriftrart<br>
- Schriftgröße<br>
- Zeilenhöhe<br>
- Farben<br>
- Style fürs Grid<br>
<li> Kompaktes Grid definieren. Spaltengröße sinnvoll definieren<br><br>
[https://www.ag-grid.com/ Web ag-grid-Link]<br>

==Steuerelement Heatmap / Kartendarstellung==
<p>zum Seitenanfang [[#top]]</p>
<br>
Ermöglicht das Einbinden von zweidimensionalen Karten-Elementen auf Webseiten, Mobile Apps sowie für Navigationen. Diese Kartendarstellungen sind von Standortdaten angetrieben und bieten zusätzlich Echtzeit-Updates. Durch einen Entwickler können diese vollständig angepasst und konfiguriert werden. Das Hinzufügen von Points of Interest, Live-Standortdaten und Persistenz globaler Objekte ist ebenfalls möglich.<br>

<li>[https://www.mapbox.com/ Web mapbox-Link]<br>
<li>[https://openlayers.org/ Web OpenLayers-Link]<br>
- Unterstützt WMS-Services (Web Map Service)<br>
- OpenSreetMap muss Lizenz geklärt werden! ODbL.<br><br>
'''Lizenzkompatibilität muss beim Projekt geklärt werden'''<br>

<br>
[[Datei:Karten-Beispiel.png|frame|none|Beispiel einer Kartenansicht]]

<h1 style="page-break-before:always">Layout</h1>
<p>zum Seitenanfang [[#top]]</p>

==Tabellen/Listen==
<p>zum Seitenanfang [[#top]]</p>

===Tabelle===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Table.png|frame|none|Darstellung einer Tabelle]]

'''Elemente'''
[[Datei:Table.labeled.png|frame|none|Elemente einer Tabelle]]
1 Tabellenkopf<br>
1.1 Spaltenüberschrift<br>
1.2 Sortiereinstellungen<br>
1.3 Spaltenkopf<br>
1.4 Spaltenfilter<br>
1.5 Spaltensortierung<br>
2 Tabelleninhalt<br>
3 Tabellenfuß<br>
3.1 Spaltenfuß<br>

===blätterbare Tabelle===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Pageable-table.png|frame|none|Darstellung einer blätterbaren Tabelle]]

'''Elemente'''
[[Datei:Pageable-table.labeled.png|frame|none|Elemente einer blätterbaren Tabelle]]
1 Tabellenkopf<br>
1.1 Spaltenüberschrift<br>
1.2 Sortiereinstellungen<br>
1.3 Spaltenkopf<br>
1.4 Spaltenfilter<br>
1.5 Sortierung<br>
2 Tabelleninhalt<br>
3 Seitennavigation<br>

==oK-Steuerelemente==
<p>zum Seitenanfang [[#top]]</p>

===Topologie-Baum===
<p>zum Seitenanfang [[#top]]</p>

Das Steuerelement bietet die Möglichkeit, [[Topologie (Strom)| topologische]] Zusammenhänge eines Stromnetzes hierarchisch darzustellen.
Der Topologie-Baum ist als gemeinsames Steuerelment in unterschiedlichen ok-Modulen wiederverwendbar und definiert eine standardisierte Sicht. Die generell möglichen, darstellbaren topologischen Elemente richten sich nach den in oK definierten Elementen.

Die Klärung der Frage, wie ein Netz hierarchisch dargestellt werden kann und welche Elemente des Netzes tatsächlich angezeigt und ausgewählt werden können, ist nicht Aufgabe dieses Steuerelementes. Dies ist Aufgabe der darunter liegenden Anwendung und kann aufgrund fachlicher Aspekte unterschiedlich ausgeprägt sein.<br><br>
'''Elemente'''
[[Datei:TopologyTree.labeled.png|frame|none|Elemente eines Topologie-Baums]]

1 Steuerleiste<br>
1.1 Suchbegriff<br>
Im [[Eingabefeld]] "Suchbegriff" können Begriffe eingeben werden, nach denen in der zugrundeliegenden Topologie gesucht werden kann.
Die Begriffe können folgende [https://de.wikipedia.org/wiki/Wildcard_%28Informatik%29 Platzhalter (Wildcard)] beinhalten:
{| class="wikitable sortable"
|-class="hintergrundfarbe6"
!Platzhalter
!Bezeichnung
!Verwendung
|-
|?
|Fragezeichen
|Platzhalter für genau ein Zeichen
|-
|*
|Sternchen
|Platzhalter für beliebig viele (auch null) Zeichen
|-
|#
|Doppelkreuz
|Platzhalter für einen numerischen Wert
|}
1.2 Suchen<br>
Durch Drücken der [[Schaltfläche]] "Suchen", wird nach dem angegebenen Suchbegriff gesucht. Ist die Suche erfolgreich, werden alle Elemente im Navigationsbereich ausgewählt (Mehrfachselektion), die dem Suchbegriff entsprechen. Gleichzeit wird zum ersten Element aus der Ergebnismenge gesprungen.<br>

1.3 Einstellungen'''<br>
Über die Schaltfläche "Einstellungen" können Filterkriterien definiert werden, die die Anzeige auf passende topologische Elemente im Navigationsbereich einschränken.<br/>
<div style="background:#fff0d0;border-color:#ffb200;border-radius:5px;border-style:solid;border-width:1px;margin:16px;padding:10px">[[Datei:Warning-yellow.icon.svg|24px]] Die Definition möglicher Filterkriterien und Regelwerke ist Teil späterer Festlegungen.</div>

2 Statusleiste<br>
Die Statusleiste zeigt allgemeine Informationen zu den im Navigationsbereich angezeigten Elementen an.<br>
2.1 Datum<br>
Das Erstellungsdatum (Stand) der zugrundeliegenden Daten, auf dem die Anzeige im Navigationsbereich basiert.<br>
2.2 Uhrzei<br>
Die Erstellungsuhrzeit(Stand) der zugrundeliegenden Daten, auf dem die Anzeige im Navigationsbereich basiert.<br>
2.3 Filter<br>
Das Symbol "Filter" zeigt an, ob mindestens ein Filter aktiviert ist.<br>
2.4 Benachrichtigung<br>
Im Benachrichtigungsbereich können verschiedene Symbole angezeigt werden, die über zusätzliche Hinweise informieren. In Beispiel ist liegt hier eine Warnungmeldung vor.<br>

3 Navigationsbereich<br>
Im Navigationsbereich werden topologische Zusammenhänge in einer baumartigen Struktur angezeigt. Die Ausprägung der Topologie als Hierarchie ist Aufgabe der jeweiligen Anwendung.<br>

'''Ordnung/Sortierreihenfolge'''<br>

<div style="background:#fff0d0;border-color:#ffb200;border-radius:5px;border-style:solid;border-width:1px;margin:16px;padding:10px">[[Datei:Warning-yellow.icon.svg|24px]]<br>
- Was für ein Steuerelement nutzt da BTC? <br>
- Wir müssten da einen Link bereitstellen ggf. mit Matthias Rohr oder Felix Korb besprechen <br></div>

==Definition von ok HTML Elementen==
<p>zum Seitenanfang [[#top]]</p>
<br>
ok HTML Elemente müssen durch npm paketiert und oK-konform gestyled werden.<br>

Zu den oK HTML Elemente zählen:<br>
<li> Date (primeng)<br>
<li> DateTime (primeng)<br>
<li> DateRange (primeng)<br>
<li> komplexe DropDown (primeng) bspw. Icons, Tabelle, Gruppen<br>
<li> Grid (ag-grid)<br>
<li> Gantt (zurzeit nichts geeignetes gefunden)<br>
<li> Kalender (primeng)<br>
<li> Charts (primeng, c3js, d3js)<br>
<li> Navbar (ok-element)<br>
<li> Modale Dialoge (primeng) sollten vermieden werden<br>
<li> Tabs (primeng)<br>
<li> Akkordion (primeng)<br>
<li> MultiSelect (primeng)<br>
<li> Chips (primeng)<br>
<li> Editor (primeng)<br>
<li> Messages toast (primeng)<br>
<br>
ACHTUNG: Nicht definierte ok Steuerlemente immer erst bei primeng schauen!<br>
<br>
Weitere Steuerlemente müssen über SaaS Themeable sein!<br>
<li> [https://www.primefaces.org/primeng/#/ Web primefaces - Link]<br>
<li> [https://www.ag-grid.com Web ag-grid - Link]<br>
<li> [https://c3js.org/ Web c3js.org - Link]<br>
<li> [https://d3js.org/ Web d3js.org - Link]<br>

==Definition von Standard HTML Elementen==
<p>zum Seitenanfang [[#top]]</p>
<br>
Standard HTML Elemente müssen nicht durch npm paketiert werden.<br>
Es ist ausreichend, ok-Styles als npm Pakete zu definieren und auf den HTML Elementen anzuwenden.<br>
<br>
Zu den Standard HTML Elemente zählen:<br>

<li> Textfelder<br>
<li> Validation<br>
<li> Passwort<br>
<li> Simple DropDown Listen<br>
<li> CheckBox<br>
<li> Buttons<br>
<li> Button Groups<br>
<li> Radio Buttons<br>
<li> File Upload<br>
<li> Numerics<br>
<li> (Drag&Drop)<br>
<li> List Group<br>
<li> Tables (wenn keine besonder Funktionalität, sonst ag-grid)<br>
<br>
Komponenten aus https://getbootstrap.com<br>

==Portal==
<p>zum Seitenanfang [[#top]]</p>

==Standarddialoge==
<p>zum Seitenanfang [[#top]]</p>

===Eingabedialog===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Input-dialog.png|frame|none|Darstellung eines Eingabedialogs]]
'''Elemente'''
[[Datei:Input-dialog.labeled.png|frame|none|Elemente eines Eingabedialogs]]
1 Titel<br>
2 Anzeige-/Eingabebereich<br>
3 Steuerleiste<br>

===Benachrichtigungsdialog===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:notification-dialog.png|frame|none|Darstellung eines Benachrichtigungsdialogs]]
'''Elemente'''
[[Datei:notification-dialog.labeled.png|frame|none|Elemente eines Benachrichtigungsdialogs]]
1 Titel<br>
2 Benachrichtigung<br>
3 Steuerleiste<br>

===Wizard===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Wizard.png|frame|none|Darstellung eines Wizards]]

'''Elemente'''
[[Datei:Wizard.labeled.png|frame|none|Elemente eines Wizards]]
1 Überschrift<br>
2 Bearbeitungsschritte<br>
3 Inhalt<br>
4 Steuerleiste<br>

===Message Toast===
<p>zum Seitenanfang [[#top]]</p>
<br>
Ein Message Toast ist ein kurzer Hinweistex welcher als Popup eingeblendet und nach einem Moment wieder ausgeblendet wird, ohne das zwangsläufig eine Benutzeraktion erfolgen muss.<br>
Die Eigenschaften eines Toast können beliebig konfiguriert werden.<br>

'''Darstellung'''
[[Datei:Message toast.png|frame|none|Darstellung eines Message Toast]]<br>

'''Für open KONSEQUENZ wurden folgende Konfigurationen abgestimmt'''<br>
<li>Toasts erscheinen oben rechts<br>
<li>Verschwinden nach rechts oben<br>
<li>Automatisches verschwinden nach:<br>
   Erfolgreich: 2 Sekunden<br>
   Info: Muss manuell geschlossen werden<br>
   Warnung: 7 Sekunden<br>
   Fehler: 7 Sekunden<br>
<li>Messages: Erfolgreich, Fehler, Info, Warnung<br>
<li>Maximal drei Zeilen Content in einem Toast<br>
<li>Defaultfarben verwenden<br><br>

[https://www.primefaces.org/primeng/#/toast Web primeng-Toast-Link]

==Navigationselemente==
<p>zum Seitenanfang [[#top]]</p>

<br>Um das Navigieren innerhalb einer Web-Seite zu vereinfachen gibt es unterschiedliche Navigationselemente, diese werden in den folgenden Kapiteln kurz erläutert.<br>

===Navigation Bar (Navbar)===
<p>zum Seitenanfang [[#top]]</p>
<br>
Das Navbar-Element ist ein permanent sichtbares Navigationselement, welches horizontal oder vertikal auf einer Webseite angeordnet werden kann und dem Benutzer die
Möglichkeit bietet, wichtige Seiten direkt aufzurufen. Der Vorteil ist, dass eine Navbar für jede Seite separat konfiguriert werden kann.<br><br>
'''Darstellung'''
<br>
[[Datei:mit Autodisplay.png|frame|none|Darstellung einer Navbar mit Autodisplay]]
<br>
[[Datei:ohne Autodisplay.png|frame|none|Darstellung einer Navbar ohne Autodisplay]]
<br>
Vorteile einer Navbar:<br>
<li> Bietet einen schnellen Überblick über die Struktur der Webseite<br>
<li> Jede Seite, bzw. Kategorie ist direkt über die Navbar ansteuerbar<br>
<li> Die Navbar ist für jede Seite separat konfigurierbar<br>
<li> Für jedes Navigationselement kann ein eigenes Submenü erstellt werden<br>
<li> Die aktuelle Seite kann farblich hinterlegt werden<br>
<li> In einer Navbar können Funktionen wie zum Beispiel Abmelden oder eine Such-Funktion eingebunden werden<br>
<li> Es können bis zu vier Navbars auf einer Seite verwendet werden (Standartmäßig werden aber nur zwei implementiert)<br>
<br>
Nachteile einer Navbar:<br>
<li> Muss für jede Seite einzeln Konfiguriert werden<br>
<li> Kann bei umfangreichen Seiten schnell unübersichtlich werden oder Überladen wirken<br>
<br>
[https://www.primefaces.org/primeng/#/menubar Web primeng-menubar-Link]

===Accordion===
<p>zum Seitenanfang [[#top]]</p>
<br>
'''Beschreibung'''<br>
Ein Accordion ist ein Navigationselement, welches dazu dient umfangreiche Listen mit Inhalten platzsparend auf Webseiten abzubilden.<br>
[https://www.primefaces.org/primeng/#/accordion Web primeng-accordion-Link]

'''Darstellung'''<br>
Einzelselektion<br>
[[Datei:akkordion-einzelselektion.png|frame|none]]<br>
Mehrfachselektion<br>
[[Datei:akkordion-mehrfachselektion.png|frame|none]]

===TabView===
<p>zum Seitenanfang [[#top]]</p>
<br>
Eine TabView ist eine Komponente zum einfachen Gruppieren von Inhalten auf einer Seite in Form von Registerkarten. Auf jeder Registerkarte können z.B. Formulare implementiert werden, die durch den Anwender abgearbeitet werden müssen. Durch die Verwendung von Registerkarten wird ein schnelles Navigieren zwischen den einzelnen Inhalten ermöglicht. Zudem können diese Registerkarten je nach Anfordeung konfuguriert werden.<br>

[https://www.primefaces.org/primeng/#/tabview Web primeng-tabview-Link]

[[Datei:tab-view.png|frame|none|Darstellung einer TabView]]<br>

Für openKONSEQUENZ wurden folgende Konfigurationen vorgegeben:<br>
<li>Valid: Grüner Balken in Tab (Nur wenn allen Steuerelementen im Content valid sind)
<li>Invalid: Roter Balken in Tab
<li>Neuen Tab dynamisch hinzufügen per + Tab
<li>Tab entfernen mit Lösch-Button im Content-Bereich
<li>Icons können je nach bedarf im Tab angezeigt werden
<li>Ausrichtung der Tabs (oben, unten, links, rechts)

<h1 style="page-break-before:always">Barrierefreiheit</h1>
<p>zum Seitenanfang [[#top]]</p>

Barrierefreiheit bezeichnet eine Gestaltung der baulichen Umwelt sowie von Informationsangeboten, Kommunikation usw. dergestalt, dass sie auch von Menschen mit Beeinträchtigungen ohne zusätzliche Hilfen genutzt und wahrgenommen werden können.

Um Menschen ein barrierefreies Arbeiten in der digitalen Welt zu ermöglichen, sind verschiedene Aspekte zu betrachten: Zum einen müssen Software und das heute nicht mehr wegzudenkende Internet barrierefrei gestaltet werden. Zum anderen muss einigen Menschen mit Behinderung überhaupt erst die Bedienung eines Computers ermöglicht werden durch unterstützende Technologien. Dies können beispielsweise Augensteuerung und Mundmaus bei körperlichen Behinderungen, oder Screenreader und Braillezeile bei Blinden sein. Weitere Beispiele stellen Technologien aus dem Bereich der Unterstützten Kommunikation dar, die Kommunikation in manchen Fällen überhaupt erst möglich machen.

Quelle: [ https://de.wikipedia.org/wiki/Barrierefreiheit ]

<h1 style="page-break-before:always">Internationalisierung</h1>
<p>zum Seitenanfang [[#top]]</p>

Internationalisierung bedeutet in der Informatik beziehungsweise in der Softwareentwicklung, ein Programm so zu gestalten, dass es leicht (ohne den Quellcode ändern zu müssen) an andere Sprachen und Kulturen angepasst werden kann.

Internationalisierung (englisch internationalization oder internationalisation) wird gerne mit dem Numeronym i18n abgekürzt (im englischen Wort Internationalization befinden sich 18 Buchstaben zwischen dem ersten Buchstaben I und dem letzten Buchstaben n). Hierunter fallen diejenigen Aufgaben, die der Entwickler/Programmierer eines Programms bewältigen muss. Dazu darf er zum Beispiel Beschreibungstexte nicht im Quellcode fest kodieren, sondern muss Variablen benutzen, die von einer Quelle zur Laufzeit eingelesen werden. Aber auch Datumsformatierungen und die sprachabhängige Oberflächengestaltung (z. B. kann Text unterschiedlich lang sein oder die Rechts-Nach-Links-Orientierung kann sich unterscheiden) gehören hierzu.

Im nächsten Schritt erfolgt die Lokalisierung (localization oder localisation), die als l10n abgekürzt wird (10 Buchstaben zwischen l und n). Ein Programm sollte im vorigen Schritt so gestaltet sein, dass diese Änderungen nicht mehr vom Programmierer durchgeführt werden müssen. Dieser Prozess bezeichnet die reine Übersetzung von zum Beispiel Texten in eine Landessprache.

Quelle: [ https://de.wikipedia.org/wiki/Internationalisierung_(Softwareentwicklung) ]

<h1 style="page-break-before:always">allg. Usability-Richtlinien</h1>
<p>zum Seitenanfang [[#top]]</p>

Software-Ergonomie (zur Wortherkunft siehe Software und Ergonomie) ist die Arbeit hin zu leicht verständlicher und schnell benutzbarer Software unter den gebotenen technischen Möglichkeiten und unter der Einhaltung definierter bzw. empirisch entstandener Standards und Styleguides. Die Software-Ergonomie ist ein Teilgebiet der Mensch-Computer-Interaktion, und ihr Ergebnis ist die Gebrauchstauglichkeit von Computerprogrammen.

Gegenstandsbereich der Software-Ergonomie im eigentlichen Sinne ist der arbeitende Mensch im Kontext (Softwarenutzung an Arbeitsplätzen). Allgemein wird heute die Benutzung von bzw. die Interaktion mit Computern betrachtet. Dies bedeutet die Berücksichtigung (neuro)psychologischer Aspekte beim Entwerfen der Software – wie dies methodisch auch die Ingenieurpsychologie anstrebt –, um eine optimale Mensch-Maschine-Schnittstelle zur Verfügung zu stellen. Dies soll sich in besonders leicht verständlichen funktionalen Einheiten ausdrücken (Bsp. einfache Dialoge bei Systemen mit GUI). Die Entwicklung gebrauchstauglicher Software wird im Rahmen des Usability-Engineering geleistet.

Quelle: [ https://de.wikipedia.org/wiki/Software-Ergonomie]

<h1 style="page-break-before:always">Paketierung der Styles (customized Bootstrap Template und individuelle allg. oK Styles)</h1>
<p>zum Seitenanfang [[#top]]</p><br>

Aufteilung der Stylse oK und eigene Unternehmensanpassungen.<br>
<li> '''ok-common.saas'''<br>
- Für Layout und globale Styles customized Bootstrap Template<br>
- ok-CI/CD<br>
<li> '''ok-vendor.saas'''<br>
- Nur für die Componenten-Styles von Drittanbietern<br>
(z.B.: primeng, ag-grid, c3.js, d3.js)<br>
<li> '''ok-components.saas'''<br>
- Nur für ok-Components<br>
(z.B.: NavBar)<br>
<br>
Achtung: Unternehmensanpassungen (CI/CD) werden in eigenen neuen saas Dateien beschrieben! Dabei müssen die entsprechenden saas-Variablen überschrieben werden.<br>

2019-07-08T10:53:22Z

Eschlenker: /* Steuerelement Heatmap / Kartendarstellung */

zurück zur [[Hauptseite]]
zurück zur [[Styleguide]]

<h1 style="page-break-before:always">Zielsetzung und Abgrenzung</h1>
<p>zum Seitenanfang [[#top]]</p>
'''Hinweis: Ticket SG-2'''<br>

Zielsetzung und Abgrenzung der Styleguide Vorgaben<br>
'''Zielsetzung:'''<br>
<li> Konsolidierung des UI StyleGuides<br>
<li> Evaluierung Tooling für den StyleGuide<br>
- IMIS<br>
- Wiki<br>
- sonst<br>
<li> Package Manager (npm)<br>
<li> Entwurfsentscheidungen ng Components vs Elements<br>
<li> Best of Konsolidierung der Steuerelemente aus den existierenden UserModulen<br>
<li> UX Vorgaben definieren<br>
<li> Paketierung der Styles (customized Bootstrap Template, eigenes allg. OK Stylesheet) als npm<br>
<br>
'''Abgrenzung:'''
<li> Vorerst kein Code (nur beispielhaft)<br>
<br>

<h1 style="page-break-before:always">Design</h1>
<p>zum Seitenanfang [[#top]]</p>

Um ein einheitliches Design zu gewährleisten, müssen die verwendeten Farben, Formen und Schriftarten auf allen User Interfaces dem vorgegebenen StyleGuide entsprechen. Diese Vorgaben werden in den folgenden Kapiteln beschrieben.
==Farben==
<p>zum Seitenanfang [[#top]]</p>

In diesem Kapitel wird das abgestimmte Farbschema (Hauptfarben, Farbverläufe, Sekundärfarben, u. s. w.) und deren Verwendung auf Webseiten und User Interfaces erläutert. Zusätzlich finden Sie hier Informationen über den jeweiligen Farbcode und die CSS Codierung.<br>

===Hauptfarben===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Primary
| <div style="color:#ffffff; background:#003a5f; padding: 1px 10px">#003a5f</div>
|-
| Success
| <div style="color:#ffffff; background:#80b300; padding: 1px 10px">#80b300</div>
|-
| Info
| <div style="color:#ffffff; background:#0080c0; padding: 1px 10px">#0080c0</div>
|-
| Default
| <div style="color:#000000; background:#ffffff; padding: 1px 10px">#ffffff</div>
|-
| Text
| <div style="color:#ffffff; background:#333333; padding: 1px 10px">#333333</div>
|}

===Farbverläufe===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
! CSS
|-
| Streifen Header
| <div style="color:#ffffff; background: linear-gradient(to right, rgba(121, 182, 28, 1) 0%, rgba(2, 129, 196, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0); padding: 1px 10px">#79b61c - #0281c4</div>
| <code>background: linear-gradient(to right, rgba(121, 182, 28, 1) 0%, rgba(2, 129, 196, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0);</code>
|-
| Balken Header
| <div style="color:#000000; background: linear-gradient(to right, rgba(232, 238, 231, 1) 0%, rgba(229, 237, 242, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0); padding: 1px 10px">#e8eee7- #e5edf2</div>
| <code>background: linear-gradient(to right, rgba(232, 238, 231, 1) 0%, rgba(229, 237, 242, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0);</code>
|}

===Flächen und Linien===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Hintergrund
| <div style="color:#000000; background:#f8fafd; padding: 1px 10px">#f8fafd</div>
|-
| Flächen/Tabellen
| <div style="color:#000000; background:#f5f8fc; padding: 1px 10px">#f5f8fc</div>
|-
| Hervorhebung/Eingabefelder/Tabellenzeilen
| <div style="color:#000000; background:#e9f0f9; padding: 1px 10px">#e9f0f9</div>
|-
| Linien
| <div style="color:#000000; background:#ccdbe6; padding: 1px 10px">#ccdbe6</div>
|-
| Umrandung Formularfelder
| <div style="color:#000000; background:#b7cbda; padding: 1px 10px">#b7cbda</div>
|}

===Sekundärfarben===
<p>zum Seitenanfang [[#top]]</p>

{| class="wikitable"
|-
! Bezeichnung
! Farbe
|-
| Warning
| <div style="color:#000000; background:#ffb200; padding: 1px 10px">#ffb200</div>
|-
| Danger
| <div style="color:#ffffff; background:#990000; padding: 1px 10px">#990000</div>
|-
| Disabled
| <div style="color:#ffffff; background:#567d96; padding: 1px 10px">#567d96</div>
|}

==Schriftarten==
<p>zum Seitenanfang [[#top]]</p>

Ebenso wie das Farbschema unterliegen auch die zu verwendenden Schriftarten dem abgestimmten Styleguide. Bei der Verwendung von zu vielen unterschiedlichen Schriftarten und Schriftgrößen kann das User Interface schnell unruhig wirken. Die gewählte Schriftart sollte gut lesbar und nicht zu klein sein.<br>

===Schriftfamilie===
<p>zum Seitenanfang [[#top]]</p>

Für openKONSEQUENZ wurde die Schriftart '''Source Sans Pro''' festgelegt. Diese Schriftart ist bei allen User Interfaces und Texten zu verwendet.

[https://github.com/adobe-fonts/source-sans-pro Download-Link]

[https://www.google.com/fonts/specimen/Source+Sans+Pro WebFont-Link]

==Rahmenabstände==
<p>zum Seitenanfang [[#top]]</p>

'''offener Punkt'''<br>

===Symbole===
<p>zum Seitenanfang [[#top]]</p>

In diesem Abschnitt werden allgemeine Bedien- und Status-Symbole beschrieben. Um ein einheitliches Aussehen der oK-Module sicherzustellen, sollen diese anwendungsübergreifend verwendet werden.
{| class="wikitable sortable"
|-class="hintergrundfarbe6"
!Symbol
!Bezeichnung
|-
|[[Datei:Filter.icon.svg|center|24px]]
|Filter
|-
|[[Datei:Menu.icon.svg|center|24px]]
|Menü
|-
|[[Datei:search.icon.svg|center|24px]]
|Suche
|-
|[[Datei:Warning.icon.svg|center|24px]]
|Warnung
|-
|[[Datei:Copy.png|center|24px]]
|Kopieren
|-
|[[Datei:pencil.png|center|24px]]
|Bearbeiten
|-
|[[Datei:save.png|center|24px]]
|Speichern
|-
|[[Datei:add.png|center|24px]]
|Hinzufügen
|-
|[[Datei:cog.png|center|24px]]
|Einstellung
|-
|[[Datei:print.png|center|24px]]
|Drucken
|-
|[[Datei:refresh.png|center|24px]]
|Refresch
|-
|[[Datei:trash.png|center|24px]]
|Löschen
|-
|[[Datei:question.png|center|24px]]
|Hilfe
|-
|[[Datei:cancel.png|center|24px]]
|Abbrechen
|}
<br>
Unter dem folgenden Link finden Sie weitere Symbole.<br>
[https://material.io/tools/icons/?style=baseline Web material-icons-Link]<br>
Lizenz: Apache license version 2.0 sollte/ist mit EPL kompatibel<br>

===technische Vorschläge===
<p>zum Seitenanfang [[#top]]</p>

<h1 style="page-break-before:always">Komponenten</h1>
<p>zum Seitenanfang [[#top]]</p>

Komponenten sind die einzelnen Bestandteile einer grafischen Benutzeroberfläche /bzw. Benutzerschnittstelle. Im folgenden Abschnitt werden die unterschiedlichen Elemente kurz Erläutert.<br>
==Standard-Steuerelemente==
<p>zum Seitenanfang [[#top]]</p>

===Eingabefeld (text)===
<p>zum Seitenanfang [[#top]]</p>

Ein Eingabefeld ist das meinst verwendete Steuerelement einer grafischen Benutzeroberfläche und dient der Interaktion mit dem Benutzer. Diese Textfelder können Ein- oder auch Mehrzeilig sein und über die Tastatur können beliebige Zeichenketten eingegeben werden.<br>
'''Darstellung'''

'''inaktiv'''
[[Datei:Input.inactive.png|frame|none|inaktives Eingabefeld mit Beschriftung "Beschreibung*"]]

'''aktiv'''
[[Datei:Input.active.png|frame|none|aktives Eingabefeld mit Beschriftung "Beschreibung*"]]

===Führungstext (label)===
<p>zum Seitenanfang [[#top]]</p>

Führungstexte (englich: label) gehören auch zu den Steuerelementen einer grafischen Benutzeroberfläche. Diese werden in der Regel dazu verwendet um Ein- oder Ausgabefelder, aber auch Radio Button oder Checkboxen zu beschriften.<br>

===Schaltfläche (button)===
<p>zum Seitenanfang [[#top]]</p>

Ein häufig genutztes Steuerelement für grafische Benutzeroberflächen ist die Schaltfläche (englisch: button). Mittels dieser Schaltflächen könne Formulage abgesendet oder definierte Aktionen durchgeführt werden.
'''Farben'''
{| class="wikitable"
|-
! Schaltfläche
! Hintergrundfarbe
! Konturfarbe
! Textfarbe
|-
| <div class="bootstrap-button" style="background:#003a5f; border-color:#002a45; color:#ffffff;">Primary</div>
| <div class="color-value">#003a5f</div>
| <div class="color-value">#002a45</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#ffffff; border-color:#b7cbda; color:#0b325c;">Default</div>
| <div class="color-value">#ffffff</div>
| <div class="color-value">#b7cbda</div>
| <div class="color-value">#0b325c</div>
|-
| <div class="bootstrap-button" style="background:#80b300; border-color:#6e9a00; color:#ffffff;">Success</div>
| <div class="color-value">#80b300</div>
| <div class="color-value">#6e9a00</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#0080c0; border-color:#006fa7; color:#ffffff;">Info</div>
| <div class="color-value">#0080c0</div>
| <div class="color-value">#006fa7</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#ffb200; border-color:e6a000#; color:#ffffff;">Warning</div>
| <div class="color-value">#ffb200</div>
| <div class="color-value">#e6a000</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#990000; border-color:#800000; color:#ffffff;">Danger</div>
| <div class="color-value">#990000</div>
| <div class="color-value">#800000</div>
| <div class="color-value">#ffffff</div>
|-
| <div class="bootstrap-button" style="background:#337ab7; border-color:#2e6da4; color:#ffffff;">Disabled</div>
| <div class="color-value">#337ab7</div>
| <div class="color-value">#2e6da4</div>
| <div class="color-value">#ffffff</div>
|}

===Auswahl (check-box)===
<p>zum Seitenanfang [[#top]]</p>

Die Auswahl (englisch: checkbox) ist ein einfaches Steuerelement zur Eingabe von Ja/Nein-Werten, welche durch einen Mausklick aktiviert oder deaktiviert werden kann. Dieses Element findet meist auf Formularen Verwendung, wenn z. B. die Datenschutzbestimmungen oder die allgemeinen Geschäftsbedingungen anerkannt werden müssen.<br>
'''Darstellung'''
[[Datei:Check-box.png|frame|none|Auswahl mit [[Führungstext|Beschriftung]] "Gesamtnetz für Abregelung*"]]

===Auswahllisten (MultiSelect)===
<p>zum Seitenanfang [[#top]]</p>
'''Hinweis: Ticket SG-19'''<br>

Ein weiteres Steuerelement ist die Auswahlliste (englisch: multiselect) und dient der Auswahl von mehreren Objekten aus einer Liste. Die Darstellungsform solcher Auswahllisten kann variieren.<br>
Weitere Informationen finden sie unter den folgende Verlinkungen.
<br>
[https://www.primefaces.org/primeng/#/multiselect Web primeng-multiselect-Link]<br>
[https://www.primefaces.org/primeng/#/chipst Web primeng-chips-Link]<br>
<br>
'''Darstellung'''<br>

Beispiel einer Auswahlliste als '''Dropdown'''.
<br>
[[Datei:multiselect.png|frame|none|Multiselect]]

Die Attribute dieser Auswahlliste<br>
<li>können Text ohne Icon enthalten<br>
<li>können Text mit Icon enthalten<br>
<li>sind Filterbar<br>
<br>

Beispiel einer Auswahlliste als '''Chips'''.<br>
In einem Eingabefeld werden mehrere Werte in Form von Chips eingefügt.<br>
[[Datei:multiselect - chip.png|frame|none|Multiselect als Chips]]

Die Attribute dieser Auswahlliste können<br>
<li>Text ohne Icon enthalten<br>
<li>Text mit Icon enthalten<br>
<br>

'''Beide Steuerelemente können kombiniert eingesetzt werden'''<br>

===Dropdown-Liste (drop-down list)===
<p>zum Seitenanfang [[#top]]</p>

Die Dropdown-Liste (englisch: drop-down-list) ist ein Textfeld welches eine Auflistung von benutzerdefinierten Werte enthält aus der ein Anwender einen Eintrag auswählen kann. Diese Dropdown-Liste kann um weitere Elemente wie zum Beispiel ein Scrollbalken, eine Filterfunktion oder auch Icon erweitert werden. Zusätzlich besteht die Möglichkeit Einträge dieser Liste zu Gruppieren, um diese Übersichtlich zu Gestalten.<br><br>
'''Darstellung'''<br>
Darstellung einer '''inaktiven''' Dropdown-Liste.<br>
[[Datei:Drop-down-menu.inactive.png|frame|none|inaktive Dropdown-Liste mit Beschriftung "Grund der Abregelung*"]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste.<br>
[[Datei:Drop-down-menu.active.png|frame|none|aktive Dropdown-Liste mit Beschriftung "Grund der Abregelung*"]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste inklusive Icon, Filter und einem Scrollbalken.<br>
[[Datei:Dropdown mit Icon.png|frame|none|aktive Dropdown-Liste mit Icon und Filter]]
<br>
Darstellung einer '''aktiven''' Dropdown-Liste inklusive Gruppierung.<br>
[[Datei:Dropdown mit Gruppierung.png|frame|none|aktive Dropdown-Liste mit Gruppierung]]
[https://www.primefaces.org/primeng/#/dropdown Web primeng-dropdown-Link]<br>

===Kalender (calendar)===
<p>zum Seitenanfang [[#top]]</p>

In der Regel umfasst ein Datums- und / oder Uhrzeitfeld eine Kalenderauswahl, so das ein Datum nicht händisch als String eingegeben werden muss. Durch klick in das Textfeld, öffnet sich ein Kalenderfenster, aus dem das gewünschte Datum und die Uhrzeit auswählt werden kann. <br>
'''Darstellung'''
[[Datei:Calendar.png|frame|none|Kalender mit Beschriftung "Startzeitpunkt*"]]
[https://www.primefaces.org/primeng/#/calendar Web primeng-calendar-Link]<br>

===Netzspezifische Icons===
<p>zum Seitenanfang [[#top]]</p>

'''offener Punkt, Klärungsbedarf'''<br>

<li>Icons werden von der e-netz bereitgestellt<br>
<li>Lizenz wahrscheinlich MIT<br>
<li>Muss mit Frau Wittek besprochen werden/bzw. Unterstützung<br>

==Steuerelemente für Formulare==
<p>zum Seitenanfang [[#top]]</p>
'''Hinweis: Ticket SG-13'''<br>

Zur Erfassung von Daten werden Eingabe- und Auswahlfelder bereitgestellt, in die ein Benutzer Werte über die Tastatur oder eine Werteliste eingeben kann oder Auswahlknöpfe, die der Benutzer mit der Maus beeinflusst. Hierbei werden Pflichtfelder (müssen gefüllt werden und sind mit einem Sternchen entsprechend gekennzeichnet) und Kann-Felder (können gefüllt werden) unterschieden. In der folgenden Tabelle finden Sie eine Auflisten der möglichen Steuerelemente für Formulare. Auf die einzelnen Elemente wird in den folgenden Abschnitten weiter eingegangen.<br>

{| class="wikitable"
|-
! Pflichtfeld Typ
! Visualisierung
|-
| text invalid
| [[Datei:Steuerelemente fuer Formular 1.png]]
|-
| text valid
| [[Datei:Steuerelemente fuer Formular 2.png]]
|-
| numeric valid
| [[Datei:Steuerelemente fuer Formular-numeric.png]]
|-
| date,datetime,date range valid
| [[Datei:Steuerelemente fuer Formular 3.png]]
|-
| Gesperrt
| [[Datei:Steuerelemente fuer Formular 4.png]]
|-
| Drop-Down valid
| [[Datei:Steuerelemente fuer Formular 5.png]]
|-
| Validierung beim Verlassen eines Feldes
| [[Datei:Steuerelemente fuer Formular 6.png]]
|}

==Steuerelement Kalender==
<p>zum Seitenanfang [[#top]]</p>
'''Hinweis: Ticket SG-14'''<br>

[https://www.primefaces.org/primeng/#/calendar Web primeng-calendar-Link]<br>

'''Darstellung'''
[[Datei:Kalender-Ansichten.png|frame|none|Darstellung der Kalenderansicht für Monat, Woche und Tag]]
<br>
In der Kalenderfunktion stehen dem Benutzer folgende Ansichten zur Verfügung:<br>
<li> Monatsansicht<br>
<li> Wochenansicht<br>
<li> Arbeitswochenansicht<br>
<li> Tagesansicht<br><br>

Bei der Kalenderfunktion hat der Anwender die Möglichkeit von durch einen Klick auf die (Arbeits-)Wochen- oder Tagesansicht zu wechseln. Durch Klicken mit der Maustaste in einen freien Zeitraum können neue Termine erfasst werden. Für eine neue Terminspanne markieren Sie einen freien Bereich durch SHIFT und Klick mit der linken Maustaste und erfassen für diesen Zeitraum einen Termin. Zum Editieren von bestehen den Terminen genügt ebenfalls ein Klick mit der Maustaste. <br>
Über die ‘‘‘Drag & Drop‘‘‘ Funktion können Termine in der Monatsansicht oder der Wochenansicht in einen anderen Wochentag verschoben werden. Um einen Termin zeitlich innerhalb eines Tages zu verschieben und Zeitspanne anzupassen, müssen Sie sich in der Wochenansicht oder der Tagesansicht befinden.<br>
<br>
Folgende Funktionen stehen zusätzlich zur Verfügung:<br>
<li> Termine ICS-Format exportieren (generell in der Applikation!)<br>
<li> Filtern über Kalendereinträge (ArrayList)<br>
<li> Unterschiedliche farbliche Darstellung einzelner Termine (Termin Template)<br>

==Steuerelement Grid==
<p>zum Seitenanfang [[#top]]</p>
'''Hinweis: Ticket SG-12'''<br>

<li> Buttons zum Absprung in Detailmaske (Lese/Bearbeitung), Stornierbutton in die erste Linke Spalte im Grid<br>
<li> Absprung durch Doppelklick in Detailmaske (Lese/Bearbeiten)<br>
<li> Datensatz hinzufügen-Button rechts oberhalb des Grid´s<br>
<li> Alternating row color<br>
<li> Hovereffekt (Zeile)<br>
<li> Einzelselektion und Mehrfachselektion mit Strg-Taste, Shift-Taste<br>
<li> Hovereffekt in Spaltenkopf unterstreichen und Mauscursor Hand (Rückmeldung für mögliche Aktionen an den Benutzer)<br>
<li> Klick auf Spaltenkopf, Sortierung ASC, DESC<br>
<li> Merfachsortierung durch klicken der Shift-Taste<br>
<li> Filterzeile als eigene Zeile direkt unterhalb des Spaltenkopfs<br>
<li> Virtual scrolling anstatt Pagination<br>
<li> Spaltenkopf mit Filter und Fußzeile bleiben beim scrollen stehen<br>
<li> Quickfiler (optional)<br>
<li> Externe Filter (optional) aber als Toggle-Switch<br>
<li> Stylevorgaben kommen per ok-vendor.sass !!!!!!!!!<br>
- Schriftrart<br>
- Schriftgröße<br>
- Zeilenhöhe<br>
- Farben<br>
- Style fürs Grid<br>
<li> Kompaktes Grid definieren. Spaltengröße sinnvoll definieren<br><br>
[https://www.ag-grid.com/ Web ag-grid-Link]<br>

==Steuerelement Heatmap / Kartendarstellung==
<p>zum Seitenanfang [[#top]]</p>
'''Hinweis: Ticket SG-16'''<br>
Ermöglicht das Einbinden von zweidimensionalen Karten-Elementen auf Webseiten, Mobile Apps sowie für Navigationen. Diese Kartendarstellungen sind von Standortdaten angetrieben und bieten zusätzlich Echtzeit-Updates. Durch einen Entwickler können diese vollständig angepasst und konfiguriert werden. Das Hinzufügen von Points of Interest, Live-Standortdaten und Persistenz globaler Objekte ist ebenfalls möglich.<br>

<li>[https://www.mapbox.com/ Web mapbox-Link]<br>
<li>[https://openlayers.org/ Web OpenLayers-Link]<br>
- Unterstützt WMS-Services (Web Map Service)<br>
- OpenSreetMap muss Lizenz geklärt werden! ODbL.<br><br>
'''Lizenzkompatibilität muss beim Projekt geklärt werden'''<br>

<br>
[[Datei:Karten-Beispiel.png|frame|none|Beispiel einer Kartenansicht]]

<h1 style="page-break-before:always">Layout</h1>
<p>zum Seitenanfang [[#top]]</p>

==Tabellen/Listen==
<p>zum Seitenanfang [[#top]]</p>

===Tabelle===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Table.png|frame|none|Darstellung einer Tabelle]]

'''Elemente'''
[[Datei:Table.labeled.png|frame|none|Elemente einer Tabelle]]
1 Tabellenkopf<br>
1.1 Spaltenüberschrift<br>
1.2 Sortiereinstellungen<br>
1.3 Spaltenkopf<br>
1.4 Spaltenfilter<br>
1.5 Spaltensortierung<br>
2 Tabelleninhalt<br>
3 Tabellenfuß<br>
3.1 Spaltenfuß<br>

===blätterbare Tabelle===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Pageable-table.png|frame|none|Darstellung einer blätterbaren Tabelle]]

'''Elemente'''
[[Datei:Pageable-table.labeled.png|frame|none|Elemente einer blätterbaren Tabelle]]
1 Tabellenkopf<br>
1.1 Spaltenüberschrift<br>
1.2 Sortiereinstellungen<br>
1.3 Spaltenkopf<br>
1.4 Spaltenfilter<br>
1.5 Sortierung<br>
2 Tabelleninhalt<br>
3 Seitennavigation<br>

==oK-Steuerelemente==
<p>zum Seitenanfang [[#top]]</p>

===Topologie-Baum===
<p>zum Seitenanfang [[#top]]</p>

Das Steuerelement bietet die Möglichkeit, [[Topologie (Strom)| topologische]] Zusammenhänge eines Stromnetzes hierarchisch darzustellen.
Der Topologie-Baum ist als gemeinsames Steuerelment in unterschiedlichen ok-Modulen wiederverwendbar und definiert eine standardisierte Sicht. Die generell möglichen, darstellbaren topologischen Elemente richten sich nach den in oK definierten Elementen.

Die Klärung der Frage, wie ein Netz hierarchisch dargestellt werden kann und welche Elemente des Netzes tatsächlich angezeigt und ausgewählt werden können, ist nicht Aufgabe dieses Steuerelementes. Dies ist Aufgabe der darunter liegenden Anwendung und kann aufgrund fachlicher Aspekte unterschiedlich ausgeprägt sein.<br><br>
'''Elemente'''
[[Datei:TopologyTree.labeled.png|frame|none|Elemente eines Topologie-Baums]]

1 Steuerleiste<br>
1.1 Suchbegriff<br>
Im [[Eingabefeld]] "Suchbegriff" können Begriffe eingeben werden, nach denen in der zugrundeliegenden Topologie gesucht werden kann.
Die Begriffe können folgende [https://de.wikipedia.org/wiki/Wildcard_%28Informatik%29 Platzhalter (Wildcard)] beinhalten:
{| class="wikitable sortable"
|-class="hintergrundfarbe6"
!Platzhalter
!Bezeichnung
!Verwendung
|-
|?
|Fragezeichen
|Platzhalter für genau ein Zeichen
|-
|*
|Sternchen
|Platzhalter für beliebig viele (auch null) Zeichen
|-
|#
|Doppelkreuz
|Platzhalter für einen numerischen Wert
|}
1.2 Suchen<br>
Durch Drücken der [[Schaltfläche]] "Suchen", wird nach dem angegebenen Suchbegriff gesucht. Ist die Suche erfolgreich, werden alle Elemente im Navigationsbereich ausgewählt (Mehrfachselektion), die dem Suchbegriff entsprechen. Gleichzeit wird zum ersten Element aus der Ergebnismenge gesprungen.<br>

1.3 Einstellungen'''<br>
Über die Schaltfläche "Einstellungen" können Filterkriterien definiert werden, die die Anzeige auf passende topologische Elemente im Navigationsbereich einschränken.<br/>
<div style="background:#fff0d0;border-color:#ffb200;border-radius:5px;border-style:solid;border-width:1px;margin:16px;padding:10px">[[Datei:Warning-yellow.icon.svg|24px]] Die Definition möglicher Filterkriterien und Regelwerke ist Teil späterer Festlegungen.</div>

2 Statusleiste<br>
Die Statusleiste zeigt allgemeine Informationen zu den im Navigationsbereich angezeigten Elementen an.<br>
2.1 Datum<br>
Das Erstellungsdatum (Stand) der zugrundeliegenden Daten, auf dem die Anzeige im Navigationsbereich basiert.<br>
2.2 Uhrzei<br>
Die Erstellungsuhrzeit(Stand) der zugrundeliegenden Daten, auf dem die Anzeige im Navigationsbereich basiert.<br>
2.3 Filter<br>
Das Symbol "Filter" zeigt an, ob mindestens ein Filter aktiviert ist.<br>
2.4 Benachrichtigung<br>
Im Benachrichtigungsbereich können verschiedene Symbole angezeigt werden, die über zusätzliche Hinweise informieren. In Beispiel ist liegt hier eine Warnungmeldung vor.<br>

3 Navigationsbereich<br>
Im Navigationsbereich werden topologische Zusammenhänge in einer baumartigen Struktur angezeigt. Die Ausprägung der Topologie als Hierarchie ist Aufgabe der jeweiligen Anwendung.<br>

'''Ordnung/Sortierreihenfolge'''<br>

<div style="background:#fff0d0;border-color:#ffb200;border-radius:5px;border-style:solid;border-width:1px;margin:16px;padding:10px">[[Datei:Warning-yellow.icon.svg|24px]]<br>
- Was für ein Steuerelement nutzt da BTC? <br>
- Wir müssten da einen Link bereitstellen ggf. mit Matthias Rohr oder Felix Korb besprechen <br></div>

==Definition von ok HTML Elementen==
<p>zum Seitenanfang [[#top]]</p>
'''Hinweis: Ticket SG-11'''<br>

ok HTML Elemente müssen durch npm paketiert und oK-konform gestyled werden.<br>

Zu den oK HTML Elemente zählen:<br>
<li> Date (primeng)<br>
<li> DateTime (primeng)<br>
<li> DateRange (primeng)<br>
<li> komplexe DropDown (primeng) bspw. Icons, Tabelle, Gruppen<br>
<li> Grid (ag-grid)<br>
<li> Gantt (zurzeit nichts geeignetes gefunden)<br>
<li> Kalender (primeng)<br>
<li> Charts (primeng, c3js, d3js)<br>
<li> Navbar (ok-element)<br>
<li> Modale Dialoge (primeng) sollten vermieden werden<br>
<li> Tabs (primeng)<br>
<li> Akkordion (primeng)<br>
<li> MultiSelect (primeng)<br>
<li> Chips (primeng)<br>
<li> Editor (primeng)<br>
<li> Messages toast (primeng)<br>
<br>
ACHTUNG: Nicht definierte ok Steuerlemente immer erst bei primeng schauen!<br>
<br>
Weitere Steuerlemente müssen über SaaS Themeable sein!<br>
<li> [https://www.primefaces.org/primeng/#/ Web primefaces - Link]<br>
<li> [https://www.ag-grid.com Web ag-grid - Link]<br>
<li> [https://c3js.org/ Web c3js.org - Link]<br>
<li> [https://d3js.org/ Web d3js.org - Link]<br>

==Definition von Standard HTML Elementen==
<p>zum Seitenanfang [[#top]]</p>
'''Hinweis: Ticket SG-10'''<br>

Standard HTML Elemente müssen nicht durch npm paketiert werden.<br>
Es ist ausreichend, ok-Styles als npm Pakete zu definieren und auf den HTML Elementen anzuwenden.<br>
<br>
Zu den Standard HTML Elemente zählen:<br>

<li> Textfelder<br>
<li> Validation<br>
<li> Passwort<br>
<li> Simple DropDown Listen<br>
<li> CheckBox<br>
<li> Buttons<br>
<li> Button Groups<br>
<li> Radio Buttons<br>
<li> File Upload<br>
<li> Numerics<br>
<li> (Drag&Drop)<br>
<li> List Group<br>
<li> Tables (wenn keine besonder Funktionalität, sonst ag-grid)<br>
<br>
Komponenten aus https://getbootstrap.com<br>

==Portal==
<p>zum Seitenanfang [[#top]]</p>

==Standarddialoge==
<p>zum Seitenanfang [[#top]]</p>

===Eingabedialog===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Input-dialog.png|frame|none|Darstellung eines Eingabedialogs]]
'''Elemente'''
[[Datei:Input-dialog.labeled.png|frame|none|Elemente eines Eingabedialogs]]
1 Titel<br>
2 Anzeige-/Eingabebereich<br>
3 Steuerleiste<br>

===Benachrichtigungsdialog===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:notification-dialog.png|frame|none|Darstellung eines Benachrichtigungsdialogs]]
'''Elemente'''
[[Datei:notification-dialog.labeled.png|frame|none|Elemente eines Benachrichtigungsdialogs]]
1 Titel<br>
2 Benachrichtigung<br>
3 Steuerleiste<br>

===Wizard===
<p>zum Seitenanfang [[#top]]</p>

'''Darstellung'''
[[Datei:Wizard.png|frame|none|Darstellung eines Wizards]]

'''Elemente'''
[[Datei:Wizard.labeled.png|frame|none|Elemente eines Wizards]]
1 Überschrift<br>
2 Bearbeitungsschritte<br>
3 Inhalt<br>
4 Steuerleiste<br>

===Message Toast===
<p>zum Seitenanfang [[#top]]</p>
'''Hinweis: Ticket SG-20'''<br>

Ein Message Toast ist ein kurzer Hinweistex welcher als Popup eingeblendet und nach einem Moment wieder ausgeblendet wird, ohne das zwangsläufig eine Benutzeraktion erfolgen muss.<br>
Die Eigenschaften eines Toast können beliebig konfiguriert werden.<br>

'''Darstellung'''
[[Datei:Message toast.png|frame|none|Darstellung eines Message Toast]]<br>

'''Für open KONSEQUENZ wurden folgende Konfigurationen abgestimmt'''<br>
<li>Toasts erscheinen oben rechts<br>
<li>Verschwinden nach rechts oben<br>
<li>Automatisches verschwinden nach:<br>
   Erfolgreich: 2 Sekunden<br>
   Info: Muss manuell geschlossen werden<br>
   Warnung: 7 Sekunden<br>
   Fehler: 7 Sekunden<br>
<li>Messages: Erfolgreich, Fehler, Info, Warnung<br>
<li>Maximal drei Zeilen Content in einem Toast<br>
<li>Defaultfarben verwenden<br><br>

[https://www.primefaces.org/primeng/#/toast Web primeng-Toast-Link]

==Navigationselemente==
<p>zum Seitenanfang [[#top]]</p>

<br>Um das Navigieren innerhalb einer Web-Seite zu vereinfachen gibt es unterschiedliche Navigationselemente, diese werden in den folgenden Kapiteln kurz erläutert.<br>

===Navigation Bar (Navbar)===
<p>zum Seitenanfang [[#top]]</p>
'''Hinweis: Ticket SG-21'''<br>

Das Navbar-Element ist ein permanent sichtbares Navigationselement, welches horizontal oder vertikal auf einer Webseite angeordnet werden kann und dem Benutzer die
Möglichkeit bietet, wichtige Seiten direkt aufzurufen. Der Vorteil ist, dass eine Navbar für jede Seite separat konfiguriert werden kann.<br><br>
'''Darstellung'''
<br>
[[Datei:mit Autodisplay.png|frame|none|Darstellung einer Navbar mit Autodisplay]]
<br>
[[Datei:ohne Autodisplay.png|frame|none|Darstellung einer Navbar ohne Autodisplay]]
<br>
Vorteile einer Navbar:<br>
<li> Bietet einen schnellen Überblick über die Struktur der Webseite<br>
<li> Jede Seite, bzw. Kategorie ist direkt über die Navbar ansteuerbar<br>
<li> Die Navbar ist für jede Seite separat konfigurierbar<br>
<li> Für jedes Navigationselement kann ein eigenes Submenü erstellt werden<br>
<li> Die aktuelle Seite kann farblich hinterlegt werden<br>
<li> In einer Navbar können Funktionen wie zum Beispiel Abmelden oder eine Such-Funktion eingebunden werden<br>
<li> Es können bis zu vier Navbars auf einer Seite verwendet werden (Standartmäßig werden aber nur zwei implementiert)<br>
<br>
Nachteile einer Navbar:<br>
<li> Muss für jede Seite einzeln Konfiguriert werden<br>
<li> Kann bei umfangreichen Seiten schnell unübersichtlich werden oder Überladen wirken<br>
<br>
[https://www.primefaces.org/primeng/#/menubar Web primeng-menubar-Link]

===Accordion===
<p>zum Seitenanfang [[#top]]</p>
'''Hinweis: Ticket SG-18'''<br>

'''Beschreibung'''<br>
Ein Accordion ist ein Navigationselement, welches dazu dient umfangreiche Listen mit Inhalten platzsparend auf Webseiten abzubilden.<br>
[https://www.primefaces.org/primeng/#/accordion Web primeng-accordion-Link]

'''Darstellung'''<br>
Einzelselektion<br>
[[Datei:akkordion-einzelselektion.png|frame|none]]<br>
Mehrfachselektion<br>
[[Datei:akkordion-mehrfachselektion.png|frame|none]]

===TabView===
<p>zum Seitenanfang [[#top]]</p>
'''Hinweis: Ticket SG-17'''<br>

Eine TabView ist eine Komponente zum einfachen Gruppieren von Inhalten auf einer Seite in Form von Registerkarten. Auf jeder Registerkarte können z.B. Formulare implementiert werden, die durch den Anwender abgearbeitet werden müssen. Durch die Verwendung von Registerkarten wird ein schnelles Navigieren zwischen den einzelnen Inhalten ermöglicht. Zudem können diese Registerkarten je nach Anfordeung konfuguriert werden.<br>

[https://www.primefaces.org/primeng/#/tabview Web primeng-tabview-Link]

[[Datei:tab-view.png|frame|none|Darstellung einer TabView]]<br>

Für openKONSEQUENZ wurden folgende Konfigurationen vorgegeben:<br>
<li>Valid: Grüner Balken in Tab (Nur wenn allen Steuerelementen im Content valid sind)
<li>Invalid: Roter Balken in Tab
<li>Neuen Tab dynamisch hinzufügen per + Tab
<li>Tab entfernen mit Lösch-Button im Content-Bereich
<li>Icons können je nach bedarf im Tab angezeigt werden
<li>Ausrichtung der Tabs (oben, unten, links, rechts)

<h1 style="page-break-before:always">Barrierefreiheit</h1>
<p>zum Seitenanfang [[#top]]</p>

Barrierefreiheit bezeichnet eine Gestaltung der baulichen Umwelt sowie von Informationsangeboten, Kommunikation usw. dergestalt, dass sie auch von Menschen mit Beeinträchtigungen ohne zusätzliche Hilfen genutzt und wahrgenommen werden können.

Um Menschen ein barrierefreies Arbeiten in der digitalen Welt zu ermöglichen, sind verschiedene Aspekte zu betrachten: Zum einen müssen Software und das heute nicht mehr wegzudenkende Internet barrierefrei gestaltet werden. Zum anderen muss einigen Menschen mit Behinderung überhaupt erst die Bedienung eines Computers ermöglicht werden durch unterstützende Technologien. Dies können beispielsweise Augensteuerung und Mundmaus bei körperlichen Behinderungen, oder Screenreader und Braillezeile bei Blinden sein. Weitere Beispiele stellen Technologien aus dem Bereich der Unterstützten Kommunikation dar, die Kommunikation in manchen Fällen überhaupt erst möglich machen.

Quelle: [ https://de.wikipedia.org/wiki/Barrierefreiheit ]

<h1 style="page-break-before:always">Internationalisierung</h1>
<p>zum Seitenanfang [[#top]]</p>

Internationalisierung bedeutet in der Informatik beziehungsweise in der Softwareentwicklung, ein Programm so zu gestalten, dass es leicht (ohne den Quellcode ändern zu müssen) an andere Sprachen und Kulturen angepasst werden kann.

Internationalisierung (englisch internationalization oder internationalisation) wird gerne mit dem Numeronym i18n abgekürzt (im englischen Wort Internationalization befinden sich 18 Buchstaben zwischen dem ersten Buchstaben I und dem letzten Buchstaben n). Hierunter fallen diejenigen Aufgaben, die der Entwickler/Programmierer eines Programms bewältigen muss. Dazu darf er zum Beispiel Beschreibungstexte nicht im Quellcode fest kodieren, sondern muss Variablen benutzen, die von einer Quelle zur Laufzeit eingelesen werden. Aber auch Datumsformatierungen und die sprachabhängige Oberflächengestaltung (z. B. kann Text unterschiedlich lang sein oder die Rechts-Nach-Links-Orientierung kann sich unterscheiden) gehören hierzu.

Im nächsten Schritt erfolgt die Lokalisierung (localization oder localisation), die als l10n abgekürzt wird (10 Buchstaben zwischen l und n). Ein Programm sollte im vorigen Schritt so gestaltet sein, dass diese Änderungen nicht mehr vom Programmierer durchgeführt werden müssen. Dieser Prozess bezeichnet die reine Übersetzung von zum Beispiel Texten in eine Landessprache.

Quelle: [ https://de.wikipedia.org/wiki/Internationalisierung_(Softwareentwicklung) ]

<h1 style="page-break-before:always">allg. Usability-Richtlinien</h1>
<p>zum Seitenanfang [[#top]]</p>

Software-Ergonomie (zur Wortherkunft siehe Software und Ergonomie) ist die Arbeit hin zu leicht verständlicher und schnell benutzbarer Software unter den gebotenen technischen Möglichkeiten und unter der Einhaltung definierter bzw. empirisch entstandener Standards und Styleguides. Die Software-Ergonomie ist ein Teilgebiet der Mensch-Computer-Interaktion, und ihr Ergebnis ist die Gebrauchstauglichkeit von Computerprogrammen.

Gegenstandsbereich der Software-Ergonomie im eigentlichen Sinne ist der arbeitende Mensch im Kontext (Softwarenutzung an Arbeitsplätzen). Allgemein wird heute die Benutzung von bzw. die Interaktion mit Computern betrachtet. Dies bedeutet die Berücksichtigung (neuro)psychologischer Aspekte beim Entwerfen der Software – wie dies methodisch auch die Ingenieurpsychologie anstrebt –, um eine optimale Mensch-Maschine-Schnittstelle zur Verfügung zu stellen. Dies soll sich in besonders leicht verständlichen funktionalen Einheiten ausdrücken (Bsp. einfache Dialoge bei Systemen mit GUI). Die Entwicklung gebrauchstauglicher Software wird im Rahmen des Usability-Engineering geleistet.

Quelle: [ https://de.wikipedia.org/wiki/Software-Ergonomie]

<h1 style="page-break-before:always">Paketierung der Styles (customized Bootstrap Template und individuelle allg. oK Styles)</h1>
<p>zum Seitenanfang [[#top]]</p>
'''Hinweis: Ticket SG-9'''<br>
'''offener Punkt, Klärungsbedarf'''<br>
Aufteilung der Stylse oK und eigene Unternehmensanpassungen.<br>
<li> '''ok-common.saas'''<br>
- Für Layout und globale Styles customized Bootstrap Template<br>
- ok-CI/CD<br>
<li> '''ok-vendor.saas'''<br>
- Nur für die Componenten-Styles von Drittanbietern<br>
(z.B.: primeng, ag-grid, c3.js, d3.js)<br>
<li> '''ok-components.saas'''<br>
- Nur für ok-Components<br>
(z.B.: NavBar)<br>
<br>
Achtung: Unternehmensanpassungen (CI/CD) werden in eigenen neuen saas Dateien beschrieben! Dabei müssen die entsprechenden saas-Variablen überschrieben werden.<br>