Entwickeln und umsetzen von User Interface Komponenten im Geschäftsumfeld für das Web UI Toolkit "Kolibri".
JavaScript, HTML, CSS, Projektor Pattern, Kolibri Web UI Toolkit
Das Ziel der Arbeit ist die visuelle und Interaktions-Konzeption von Komponenten für das Geschäftsumfeld inklusive Validation und Umsetzung mit Webtechnologien, passend zum FHNW Web UI Toolkit "Kolibri". Diese sollen einerseits hochwertig und bewiesenermassen nützlich sein, sich andererseits leicht verwenden lassen und sich in das bestehende open-source Toolkit einfügen. Dazu müssen sie sowohl sehr hohen gestalterischen, wie auch softwaretechnischen Anforderungen genügen.
In der heutigen Welt der Softwareentwicklung für das Web gibt es unzählige JavaScript- und CSS-Frameworks, um Applikationen umsetzen zu können. Diese sind aber meistens auf Applikationen spezialisiert, die eine breite Benutzergruppe ansprechen und nicht für den Einsatz im Geschäftsumfeld. Zudem beinhalten diese Frameworks fast immer zahlreiche Abhängigkeiten. Diese Projektarbeit nimmt sich dieser Problematik an. Es soll der Grundstein gelegt werden, um Interaktionskomponenten für das Geschäftsumfeld zu entwickeln. Diese sollen mit Technologien für das FHNW Web UI Toolkit "Kolibri" umgesetzt und validiert werden.
Im Verlauf der Arbeit wurden zwei verschiedene Komponenten entwickelt. Dies sind eine Switch- und eine
Monolog-Komponente. Diese wurden mit der Codestruktur des Projektor-Patterns implementiert.
Ein Switch lässt den Benutzer eine Funktion ein- oder ausschalten. Dies wird dem Benutzer visuell
zurückgemeldet. Die Komponente stellt zudem noch einen dritten, den sogenannten "indeterminate"-Zustand
bereit. Dieser wird gesetzt, wenn eine Funktion weder an- noch ausgeschaltet, also noch unbestimmt ist. Der
Switch lässt sich über Tastatureingaben steuern. Dies befähigt die Benutzer der Applikation schneller zu
navigieren und entsprechende Entscheidungen zu treffen, ohne dabei von der Tastatur zur Maus wechseln zu
müssen.
Die Monolog-Komponente kann durch Entwickler genutzt werden, um den Benutzer der Applikation über Ereignisse
in der Applikation zu benachrichtigen. Dazu wurden vier verschiedene Typen implementiert. Diese sind Info,
Erfolg, Warnung und Fehler. Um die Komponente von anderen Implementierungen abzuheben, wurde der
Error-Monolog
erweitert, sodass durch die Applikation zusätzliche Fehlerinformationen mitgeliefert werden können. Wir
nennen dies einen Code-Error. Der Benutzer der Applikation hat die Möglichkeit, den Fehlertext direkt über
einen
Klick zu kopieren, um diesen an die Entwicklungsabteilung zu melden. Wenn nun viele Monologe generiert
werden,
wird dies für den Nutzer schnell unübersichtlich. Daher werden Monologe desselben Typs gestapelt. Die Anzahl
Monologe eines Stapels werden über einen Zähler angezeigt. Statt nun alle Monologe einzeln zu schliessen,
kann über
den «close-all»-Button, welcher unter dem Zähler liegt, der ganzen Stapel entfernt werden.
Abschliessend kann festgehalten werden, dass die entwickelten Komponenten visuell und funktionell den erwarteten Qualitätsansprüchen gerecht werden und auch umfangreich getestet wurden, sodass sie im Geschäftsumfeld vielseitig einsetzbar sind.
Projektdauer: 20.09.2021 - 25.03.2022
Aufwand in Personenstunden: 720h
Teamgrösse: 2 Personen
FHNW Hochschule für Technik
Institut für Mobile und Verteilte Systeme
Prof. Dierk König
dierk.koenig@fhnw.ch
Alexander Eser, iCompetence Vollzeit
Florian Thiévent, iCompetence berufsbegleitend
Prof. Dierk König, dierk.koenig@fhnw.ch
Fabian Affolter, fabian.affolter@fhnw.ch
