UI Elemente
TextureSync
Version
Datum	25.04.19
Autor	Jannik Seiler
Projektmitglieder	Hendrik Schutter, Lukas Fürderer, Robin Willmann, Jannik Seiler

Einleitung
Das Ziel des Feindesign der UI-Elemente ist es festzulegen, welche Eingabe – und Ausgabelemente geeignet sind.
Die Architektur der UI wie auch die Navigation im Client werden dadurch definiert.

Genereller Aufbau
Die verschiedenen Views werden wiederum auf einer „RootView“ angebracht. Das Diagramm zeigt die Darstellung der MainView und deren Elemente.

Erster Start
JFXTextfield, IPv4 Adresse
kann eingegeben werden,
mit Enter wird zum
Server verbunden
JFXSpinner, dreht sich
während des Verbindens
JFXButton, verbindet mit der
angegebenen IPv4 Adresse
Die StartupView erscheint beim ersten Start des Clients oder wenn keine Serveradresse gespeichert ist, beziehungsweise kein Server im Netzwerk gefunden wurde.
Der Nutzer kann die Adresse des lokalen Servers eingeben und mittels einem Button die Verbindung aufbauen. Während des Verbindungsprozesses wird ein Spinner eingeblendet und Infotext entsprechend angepasst.

Hauptfenster
JFXTextfield, hier lassen sich
Die Texturen nach Name,
Tags, Auflösung und
Einfügedatum durchsuchen
3DPreview, zeigt einen Würfel
Mit der aktuell
ausgewählten Textur an
Gridpane, enthält alle
TexturGUI-Elemente mit 2D-Preview
und Name
DetailView, zeigt Informationen
wie Name, Tags, Auflösung und Einfügedatum
JFXButton, hierüber lässt sich
die ImportView aufrufen
Die MainView wird angezeigt sobald das Programm fertig initialisiert ist. Sie enthält eine Scrollpane mit einer Gridpane, welche alle gefunden Texturen anzeigt. Die DetailView besteht aus einer 3D-Preview und einer Anzeige von Name, Tags, Auflösung und dem Einfügedatum. Die Tags werden in einer ChipView dargestellt. Das Editieren der Tags ist direkt in der ChipView möglich.
Über einen Button lässt sich die komplette Textur löschen, hierfür wird der Lösch-Dialog aufgerufen.
Ein Hinzufügen-Symbol wie ein „+“ startet den Vorgang für das Hinzufügen der Textur.
Das Exportiren einer Textur erfolgt über das Kontextmenü welches beim Rechts-Klick auf die Textur erscheint.

Dialog
Dialog, besteht aus Heading
und Description
JFXButton, abbrechen
oder ausführen
Die DialogView zeigt eine Meldung bestehend aus Heading und Description an. Über einen Cancel-Button lässt sich der angezeigte Vorgang abbrechen, über einen Okay-Button bestätigen.
Der Dialog wird zum Beispiel für das Bestätigen des Löschens oder bei Fehlermeldungen eingesetzt.

Textur importieren
JFXTextfield, hier lässt
sich ein Pfad zu einer
Textur eingeben
JFXButton, öffnet FileChooser
JFXTextfield, hier wird
der Name der
ausgewählten Textur
angezeigt
und lässt sich ändern
JFXChipView, hier
lassen sich Tags setzen.
Resolution und Date
werden automatisch
gesetzt
Die ImportView wird angezeigt wenn man eine neue Textur importiert. Sie besteht aus einem Textfield, in welchem sich der Pfad zur Textur eingeben lässt. Wird die Textur über den FileChooser ausgewählt, wird dieser Pfad im Textfield angezeigt. Über ein weiteres Textfield lässt sich ein beliebiger eindeutiger Name setzen, dieser ist am Anfang auf den Name der Textur gesetzt. Tags lassen sich über eine JFXChipView setzen.

Changelog
Version	Änderung
1.0.0	Dokument UI Elemente erstellt
1.1.0	Detailbeschreibung hinzugefügt
1.2.0	Einleitung und Diagramm hinzugefügt
1.2.1	Exportieren mittels Kontextmenü
TextureSync UI Elemente ⸬ Version Seite 8/8