=Graphische Benutzeroberfläche=
Top-Logic™ Project verfügt über eine webbasierte, einfach zu bedienende Oberfläche, die es dem Anwender ermöglicht, sich die Anwendung intuitiv und schnell zu erschließen.

Im [[Glossar|Glossar]] sind die verwendeten GUI-Elemente, u.a.
*[[Strukturelemente/Navigationselemente#Baumtabellen|Baumtabellen]]
*[[Glossar#Bearbeitungsassistenten|Bearbeitungsassistenten]]
*[[Glossar#Funktionen|Funktionen]]
*[[Glossar#Gruppierungsfelder|Gruppierungsfelder]]
*[[Glossar#Strukturelemente/Navigationselemente|Navigationsstrukturen]]
aufgeführt und beschrieben.

==Informationen zur Anwendung==
Im oberen Bereich des Browserfensters sind allgemeine Informationen abgebildet:
* Ggfs. kundenindividuelle Bezeichnung der Anwendung
* Name des angemeldeten Anwenders
* Pfad, in dem sich der aktuell ausgewählte Reiter befindet

:[[Image:1_commonInformationTop.jpg|800px|Informationen zur Anwendung]]

Im unteren Bereich wird die Versionsnummer angezeigt.

:[[Image:1_commonInformationBottom.jpg|Versionsinformationen]]

==Menüleiste==
Die Menüleiste bildet den Haupt Ausgangspunkt der Navigation. Es kann hier je nach Berechtigung in die folgenden Bereiche navigiert werden:
* Cockpit
* Anforderungen
* Projekte 
* Portfolio

[[Image:1_menu.jpg|''Menüelemente'']]

Im [[#Anzeigebereich|Anzeigebereich]] werden daraufhin die entsprechenden Inhalte geladen und weitere Navigationselemente, in Form von bis zu zwei Reiterebenen, angeboten. Die Reiterelemente können durch Anklicken ausgewählt werden.

Die Anzeige von Reiterelementen auf Ebene 3 ist teilweise abhängig von den Einstellungen in der Navigationsstruktur. Hierzu befinden sich in den Beschreibungen der einzelnen [[de/layout index|GUI-Sichten]] genaue Erläuterungen, welche Elemente der Navigationsstruktur ausgewählt werden müssen, damit die entsprechenden Informationen im Anzeigebreich und die notwendigen Elemente der Reitersturktur dargestellt werden.

==Icons unterhalb der Menüleiste==
Neben den Inhalten der Reiterebene 1 sind  vier Icons vorhanden, mit denen eine Navigation zu entsprechenden Bereichen der Anwendung möglich ist. Mit den Icons sind Mouseover-Informationen verbunden.

:[[Image:1_iconsMain.jpg|Icons unterhalb der Menüleiste]]

*[[de/Systembedienung_allgemein#Benutzerdaten|Benutzerdaten]]
*[[de/tl.admin.tabber.helpID|Administration]]
*[[de/pos.search.tabber.helpID|Suche]]
*[[de/Systembedienung_allgemein#Onlinehilfe|Onlinehilfe]]

Die Onlinehilfe wird in einem separaten Browserfenster kontextsensitiv angezeigt. 
==Navigationsstruktur==
Als Navigationselemente werden verwendet:
*eine [[Glossar#Strukturelemente/Navigationselemente|Reiterstruktur]]
*:[[Image:1_tabberHierarchie.jpg|900px|Verwendung von Reiterstrukturen zur Organisation der Sichten]]
*[[Glossar#Strukturelemente/Navigationselemente|Tabellen]]
*:[[Image:1_tableNavigation.jpg|Verwendung von Tabellen zur Anzeige der Daten]]
*[[Glossar#Strukturelemente/Navigationselemente|Baumstrukturen]] 
*:[[Image:1_treeNavigation.jpg|Eine Baumstruktur, hier zur Darstellung einer Projekthierarchie]].

Die genannten Navigationsselemente sind im [[Glossar|Glossar]] beschrieben.

==Anzeigebereich==
Entsprechend der Auswahl eines Navigationselementes bzw. der Kombination auswählbarer Navigationselemente werden die entsprechenden Informationen im Anzeigebereich der Anwendung dargestellt.

:[[Image:1_viewArea.jpg|800px|Anzeigebereich in TL-Project]]

Die Informationen werden aus ergonomischen Gründen sowohl in thematisch ausgerichteten [[Glossar#Gruppierungsfelder|Gruppierungsfeldern]] als auch in einzelnen Fenstern dargestellt. Die Gruppierungsfelder beinhalten Attribute und deren Ausprägungen, dargestellt in Listen- oder Tabellenform, die Fenster sind in der Größe variierbar.

==Anzeigemodus/Bearbeitungsmodus==
Wird eine GUI-Sicht über die Reiterstruktur ausgewählt, erfolgt die Darstellung stets im Anzeigemodus.

:[[Image:1_viewMode.jpg|800px|Anzeigemodus mit Gruppierungsfeldern]]

Der Anwender kann durch Klicken auf den Funktionsbutton [[Funktionen#Bearbeiten|Bearbeiten]] in der [[#Funktionen in der Funktionsleiste|Funktionsleiste]] in den Bearbeitungsmodus schalten.

Sind Eingabefelder gelb hinterlegt, muss der Anwender eine Eingabe tätigen, ansonsten ist eine systemische Weiterschaltung nicht möglich. Optionale Eingabefelder sind weiß hinterlegt.

:[[Image:1_editMode.jpg|800px|Bearbeitungsmodus mit obligatorischen und optionalen Eingabefeldern]]

==[[Funktionen|Funktionen]]==
Je nach Auswahl eine Navigationselementes bzw. der Kombination von Navigationselementen kann der Anwender verschiedene Funktionen verwenden, die im Anzeige- oder  Bearbeitungsmodus angeboten werden.

In der Beschreibung der einzelnen GUI-Sichten wird differenziert nach:
*Funktionen in Anzeigebereich bzw. in der Funktionsleiste,
:jeweils für 
*Anzeige- bzw. Bearbeitungsmodus.

===Funktionen im Anzeigebereich===
Die Funktionen können als [[Symbole|Symbol]] oder als Funktionsbutton in die Anzeige eingebunden sein.

:[[Image:1_functionsViewsection.jpg|800px|Funktionen im Anzeigebereich]]

===Funktionen in der Funktionsleiste===
Ist der Bezeichnung der Funktion ein "..." angehängt, weist dies darauf hin, dass die Bearbeitung mittels eines Dialoges in einem eigenen Bearbeitungsfenster erfolgt.

Sind Funktionsbezeichnungen in grauer Farbe unterlegt, dann stehen sie dem Anwender in dem gewählten Kontext aus funktionalen oder organisatorischen Berechtigungsgründen nicht zur Verfügung.

:[[Image:1_functionsFunctionsection.jpg|350px|Funktionen in der Funktionsleiste]]

==Tooltipps==
In der Anwendung eingebundene Funktionen sind mit Tooltipps belegt, so dass sich der Anwender schnell den Inhalt erschließen kann. Ebenso werden für Links, denen der Anwender folgen kann, Mouseover-Informationen angezeigt.

:[[Image:1_tooltip.jpg|Tooltipp zur Erläuterung  einer Funktion]]

==Scrollen==
Je nach Auswahl des Anwendungsbereiches und des Umfangs der vorhandenen Daten, reicht eine Bildschirmseite nicht dazu aus, alle Informationen darzustellen. Systemseitig werden für diesen Fall Scrollbalken für die vertikale und horizontale Navigation bereitgestellt.

:[[Image:1_scrolling.jpg|800px|Vertikale und horizontale Scrollbalken]]

==Tabellen==
Tabellen werden sowohl zur Informationsdarstellung als auch als Navigationsstruktur verwendet.
Dabei liegen Tabellen in Top-Logic™ Project in verschiedenen Ausprägungen vor:
* [[Strukturelemente/Navigationselemente#Tabellen|Normale Tabellen]]
:[[Image:1_standardTable.jpg|800px|Standard Tabelle]]
* [[Strukturelemente/Navigationselemente#Anpassbare Tabelle|Anpassbare Tabellen]]
:[[Image:1_frozenTable.jpg|400px|Anpassbare Tabelle]]
* [[Strukturelemente/Navigationselemente#Grids|Grids]]
:[[Image:1_grid.jpg|800px|Grid]]

<!--Um Tabelleninhalte bearbeiten zu können, muss in den Bearbeitungsmodus geschaltet werden.

:[[Image:1.5_BearbeitungTabelleninhalte.png|Bearbeitung von Tabelleninhalten]]

Die Anordnung von Tabellenspalten kann beliebig verändert werden. Der Mauszeiger muss auf die Überschrift der zu verschiebenden Spalte zeigen und mit gedrückter linker Maustaste kann die Spalte an die gewünschte Stelle verschoben werden.

:[[Image:1.5_SpaltenVerschieben.png|Veränderung der Anordnung der Spalte "Wert"]]

Die Anordnung von Zeilen einer Tabelle kann geändert werden. Hierzu ist im Bearbeitungsmodus
Tabellen können durch Anklicken der Spaltenüberschriften gemäss dem Kriterium der ausgewählten Spalte auf- und absteigend sortiert werden.

:[[Image:1.5_SpaltenAufsteigend.png|Tabelleninhalt gemäss einer Spaltenbezeichnung aufsteigend sortiert]] 

:[[Image:1.5_SpaltenAbsteigend.png|Tabelleninhalt gemäss einer Spaltenbezeichnung absteigend sortiert]] 

Die Reihenfolge von Tabellenzeilen kann im Bearbeitungsmodus verändert werden. Durch Anklicken der Symbole für [[SysmkboleUebersicht#Zeile nach oben|Zeile nach oben]] oder [[SysmkboleUebersicht#Zeile nach unten|Zeile nach unten]] wird die zu verschiebende Zeile schrittweise an die gewünschte Position verschoben.

:[[Image:1.5_ZeilenAnordnung.png|Zeilenanordnung ändern]]-->
==Konkurrierende Zugriffe==
Daten können jeweils nur von einem Nutzer bearbeitet werden. Versucht ein anderer Nutzer eine Bearbeitung durchzuführen, wird er über den Grund für die Bearbeitungssperre durch eine Systemmeldung informiert.

:[[Image:1_competingAccess.jpg|Konkurrierende Zugriffe]]

==Symbole==
In der Anwendung wird eine Vielzahl von Symbolen verwendet, die im [[Glossar#Symbole|Glossar]] aufgelistet und beschrieben sind.
