Das Kolibri Web Ui Toolkit ist eine Sammlung von nachhaltig und hochwertig programmierten Abstraktionen in JavaScript. Die Inhalte werden durch Usability Tests geprüft und müssen sich in einer Anwendung bewährt haben. In diesem Projekt wurde das Toolkit mit einigen nützlichen Funktionalitäten ergänzt.
In diesem Projekt geht es darum, das Kolibri Toolkit um ein Logging Framework und um einen „Functional Immutable Focus Ring" zu erweitern. Ein Focus Ring ist eine immutable Datenstruktur, die einer Liste entspricht, bei der ein Listenelement - zum Beispiel für eine Anzeige - im Fokus liegt. Die Datenstruktur unterstützt Operationen um den Fokus entlang der Liste vorwärts oder rückwärts zu verschieben, wobei vom Ende der Liste durch ein "vorwärts" wieder das erste Listenelement in den Fokus rückt. So entsteht der "Ring". Die Operationen sind auf funktionale, nicht-destruktive Weise bereitgestellt und so effizient wie möglich implementiert.
An der FHNW wird das Web UI Toolkit "Kolibri" in Zusammenarbeit mit Studenten entwickelt. Die Library umfasst funktionale Abstraktionen wie sie etwa in der Haskell Standard Library genutzt werden, Test Unterstützung und Utilities für den sicheren Umgang mit HTML/DOM. In dieser Arbeit sollte nun das Toolkit mit weiteren Abstraktionen ergänzt werden. Dabei steht bei der Inplementation die Qualität und die Effizienz im Vordergrund. Erstes Ziel war eine Entwicklung eines Logging-Framework, welches sich für die Bedürfnisse einer Applikation konfigurieren lässt und zur Laufzeit beeinflussbar ist. Das zweite Ziel der Arbeit war die Implementierung eines Focus-Ring. Für eine effiziente Bewirtschatung der Datenstruktur mussten dafür erst die Grundlagen erarbeitet werden.
Das Logging-Framework wurde weit möglichst funktional implementiert. Des Weiteren kann das Logging-Framework mit verschiedenen Appendern zur Laufzeit konfiguriert werden. Appender ermöglichen es, Log-Messages an verschiedene Ziele zu verschicken. Appender für die gängigsten Log-Varianten sind implementiert, jedoch ist die Idee, dass Entwickler eigene auf ihre Anstprüche zielgerichtete Appender schreiben und einsetzen können. Um den Focus-Ring zu implementieren, wurde vorbereitend eine eigene Implementierung der JavaScript Iteration-Protocols erstellt. Diese ermöglicht es, endlose oder endliche Reihen von Werten oder Objekten zu berechnen. Durch den Einsatz von Iteratoren wird eine Datenstruktur effizienter und einfacher zu implementieren.
Als praktische Anwendung unserer Implementierungen haben wir jeweils einen einfachen Use-Case als Beispielanwendung umgesetzt. Exemplarisch sehen sie folgend ein Screenshot der Slot Machine. Dieses Beispiel soll den einfachen Zugriff auf das sich im Fokus befindende Element eines Focus-Rings demonstrieren.
| Projekttyp: | Informatik Projekt 5 (IP5) |
| Projektdauer: | 19.09.2022 bis 20.01.2023 |
| Teamgrösse: | 2 Personen |
| Aufwand pro Person: | 180 Stunden |
FHNW Hochschule für Technik Institut für Mobile und Verteilte Systeme Prof. Dierk König dierk.koenig@fhnw.ch
Tobias Wyss - tobias.wyss@students.fhnw.ch Andri Wild - andri.wild@students.fhnw.ch
Prof. Dierk König - dierk.koenig@fhnw.ch
