> For the complete documentation index, see [llms.txt](https://kolibri-selection-component.gitbook.io/generalisierte-auswahlkomponente-fur-kolibri/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kolibri-selection-component.gitbook.io/generalisierte-auswahlkomponente-fur-kolibri/1.-einleitung.md). # 1. Einleitung ## 1.1 Problemstellung Im Web existieren diverse Möglichkeiten zur Erstellung eines Auswahl-Inputs mit vorgegebenen Werten. Die HTML-Elemente bieten über die verschiedenen Browser keine konsistente Darstellung und Interaktion an. Dazu sind sie nicht schön anzusehen und nur geringfügig anpassbar. Die Werte sind begrenzt auf Text und Unicode-Symbole. Die Komponente ist nicht effizient bedienbar – besonders bei einer grossen Menge an Werten. Als Alternative zu den Basiselementen existieren unzählige Bibliotheken, welche solche Eingabemöglichkeiten unterstützen. Diese besitzen externe Abhängigkeiten, welche das eigene Projekt unnötig aufblasen. Zudem benötigen viele dieser Libraries eine längere Einarbeitungszeit, um die Funktionalitäten verstehen und anwenden zu können. Das Vorgängerprojekt **Länderauswahl-Komponente** deckt die Probleme ab, ist aber nur auf die Auswahl eines Landes zugeschnitten. Eine Anwendung dieser Komponente mit anderen Inhalten kann zu unerwünschtem Verhalten führen. Die oben genannten Probleme dienen als Basis für das folgende Kapitel. ## 1.2 Ziel Die neue Komponente `SelectComponent` zielt darauf ab, die Auswahl eines Wertes aus einer begrenzten, vorgegebenen Menge zu ermöglichen. Dazu finden die Generalisierung und der Ausbau der vorangegangenen Länderauswahl statt. Die Eingabe soll weiterhin effizient bleiben und sich konsistent über alle Browser zeigen. Dabei liegt der Fokus auf Browsern von Desktop-Computern bzw. Laptops. Die Komponente soll sich einfach anpassen lassen. Als Werte sind nebst Texten auch Bilder wünschenswert. Die Qualität ist auf dem Kolibri-Standard zu halten und durch Tests zu beweisen. User-Tests mit Programmierern wie auch Endanwendern beweisen die gute Usability. Automatisierte Komponententests stellen die Korrektheit der Implementation sicher. Bei der Umsetzung sollen die Design-Patterns des Kolibri ihre Anwendung finden. Dabei sollen das Design und die Interaktion mit dem Toolkit synchronisiert sein. Hierbei ist zu beachten, die Ziele nicht ausserhalb des Projekts zu definieren. ## 1.3 Out of Scope Dieses Projekt bezieht sich auf die Entwicklung einer Auswahlkomponente für Nutzer ohne Seheinschränkungen. Daher spielt die Accessibility nur eine begrenzte Rolle. Screenreader sind nicht zu beachten, da dies zu umfangreich für diese Arbeit ist. Die effiziente Anzeige von übergrossen Datenmengen mit mehr als 10'000 Werten ist nicht verlangt. Die Eingabe eines eigenen Wertes in die neue Auswahlkomponente ist ebenfalls ausserhalb der Anforderungen. Für die generalisierte Komponente reicht es, wenn die Auswahl eines einzelnen Wertes möglich ist. Die Auswahl mehrerer Werte im selben Eingabeelement ist nicht gefordert. Die Komponente ist nicht speziell auf Mobile-Geräte auszurichten. Eine Undo- wie auch eine Redo-Funktion der ausgewählten Werte ist ausserhalb des geforderten Rahmens. Ein Bestandteil dieser Arbeit ist das Erweitern des `SimpleInput`s um ein Select und eine Datalist. Damit der Fokus des Projekts auf der generalisierten Auswahlkomponente bleibt, sind keine Änderungen ausserhalb der oben genannten Ziele gefordert. Anpassungen der Kern-Codebasis gehören nicht in den Rahmen dieses Projekts. Die Eingrenzung der Anforderungen stellt sicher, dass die Ressourcen auf das Ziel fokussiert bleiben. ## 1.4 Leitfaden Dieser Bericht gliedert sich in die Teile [**Hintergrund**](/generalisierte-auswahlkomponente-fur-kolibri/2.-hintergrund.md), [**existierende**](/generalisierte-auswahlkomponente-fur-kolibri/3.-existierende-auswahlkomponenten.md) und [**neue Komponenten**](/generalisierte-auswahlkomponente-fur-kolibri/4.-neue-auswahlkomponente.md) sowie die [**Diskussion**](/generalisierte-auswahlkomponente-fur-kolibri/5.-diskussion.md). Jedes Kapitel baut auf dem Vorherigen auf und führt den Leser Schritt für Schritt durch die Entwicklung und Optimierung der neuen Auswahlkomponente. Im Kapitel [**Hintergrund**](/generalisierte-auswahlkomponente-fur-kolibri/2.-hintergrund.md) ([**2**](/generalisierte-auswahlkomponente-fur-kolibri/2.-hintergrund.md)) ist die [**Ausgangslage**](/generalisierte-auswahlkomponente-fur-kolibri/2.-hintergrund/2.1-ausgangslage.md) ([**2.1**](/generalisierte-auswahlkomponente-fur-kolibri/2.-hintergrund/2.1-ausgangslage.md)) des Kolibri-Toolkits und des Projekts erläutert. Es folgt eine Erklärung der [**Master-Detail-View**](/generalisierte-auswahlkomponente-fur-kolibri/2.-hintergrund/2.2-master-detail-ansicht.md) ([**2.2**](/generalisierte-auswahlkomponente-fur-kolibri/2.-hintergrund/2.2-master-detail-ansicht.md)). Nachfolgend sind die verschiedenen [**Zustände**](/generalisierte-auswahlkomponente-fur-kolibri/2.-hintergrund/2.3-zustande-in-einer-auswahlkomponente.md) ([**2.3**](/generalisierte-auswahlkomponente-fur-kolibri/2.-hintergrund/2.3-zustande-in-einer-auswahlkomponente.md)), die eine Auswahlkomponente besitzen kann, aufgeführt. Eine Beschreibung der [**Browser und deren Rendering-Engines**](/generalisierte-auswahlkomponente-fur-kolibri/2.-hintergrund/2.4-browser-and-html-renderer.md) ([**2.4**](/generalisierte-auswahlkomponente-fur-kolibri/2.-hintergrund/2.4-browser-and-html-renderer.md)) ist ebenfalls enthalten. Der **Rendering-Prozess** einer HTML-Seite sowie die wichtigsten **Browser-Implementationen** sind ebenfalls auf dem Plan. Das Kapitel [**existierende Komponenten**](/generalisierte-auswahlkomponente-fur-kolibri/3.-existierende-auswahlkomponenten.md) ([**3**](/generalisierte-auswahlkomponente-fur-kolibri/3.-existierende-auswahlkomponenten.md)) vergleicht die [**HTML-Elemente Datalist und Select**](/generalisierte-auswahlkomponente-fur-kolibri/3.-existierende-auswahlkomponenten/3.1-html-datalist-vs.-select.md) ([**3.1**](/generalisierte-auswahlkomponente-fur-kolibri/3.-existierende-auswahlkomponenten/3.1-html-datalist-vs.-select.md)). Die Nutzung und Unterschiede der verschiedenen Elemente sind hier ebenfalls beschrieben. Dabei hebt es die [**Browser-Inkonsistenzen**](/generalisierte-auswahlkomponente-fur-kolibri/3.-existierende-auswahlkomponenten/3.2-browser-inkonsistenzen.md) ([**3.2**](/generalisierte-auswahlkomponente-fur-kolibri/3.-existierende-auswahlkomponenten/3.2-browser-inkonsistenzen.md)) hervor. Sie führen zu **unterschiedlichen UI-Erfahrungen**. Die [**Länderauswahl-Komponente**](/generalisierte-auswahlkomponente-fur-kolibri/3.-existierende-auswahlkomponenten/3.3-landerauswahl-komponente.md) ([**3.3**](/generalisierte-auswahlkomponente-fur-kolibri/3.-existierende-auswahlkomponenten/3.3-landerauswahl-komponente.md)) aus der Vorarbeit ist nur auf die Auswahl eines Landes zugeschnitten. Mögliche [**Anwendungsfälle**](/generalisierte-auswahlkomponente-fur-kolibri/3.-existierende-auswahlkomponenten/3.4-anwendungsfalle.md) ([**3.4**](/generalisierte-auswahlkomponente-fur-kolibri/3.-existierende-auswahlkomponenten/3.4-anwendungsfalle.md)) der existierenden Komponenten zeigen die dabei entstehenden Probleme auf. Eine detaillierte Beschreibung der [**neuen Komponente**](/generalisierte-auswahlkomponente-fur-kolibri/4.-neue-auswahlkomponente.md) findet sich im gleichnamigen Kapitel [**4**](/generalisierte-auswahlkomponente-fur-kolibri/4.-neue-auswahlkomponente.md). Das [**Design**](/generalisierte-auswahlkomponente-fur-kolibri/4.-neue-auswahlkomponente/4.1-design.md) ([**4.1**](/generalisierte-auswahlkomponente-fur-kolibri/4.-neue-auswahlkomponente/4.1-design.md)) basiert auf dem Kolibri-Designsystem. Beim Visualisieren und Testen des neuen Designs kommen **Figma-Prototypen** zum Einsatz. Die **Implementation der Zustände** optimiert die Benutzerführung für Maus- und Tastaturbenutzer. **Prototyping** und Benutzerfeedback tragen in einem iterativen Prozess zur Verbesserung bei. Das **Implementationsresultat** visualisiert und beschreibt die neue Komponente in diversen Beispielen. Im Abschnitt [**Interaktionen**](/generalisierte-auswahlkomponente-fur-kolibri/4.-neue-auswahlkomponente/4.2-interaktionen.md) ([**4.2**](/generalisierte-auswahlkomponente-fur-kolibri/4.-neue-auswahlkomponente/4.2-interaktionen.md)) sind Regeln für die Maus- und Tastaturinteraktion festgelegt. Für einen stabilen und verständlichen Code sorgt die Einhaltung diverser [**Prinzipien und Regeln**](/generalisierte-auswahlkomponente-fur-kolibri/4.-neue-auswahlkomponente/4.3-prinzipien-and-regeln.md) ([**4.3**](/generalisierte-auswahlkomponente-fur-kolibri/4.-neue-auswahlkomponente/4.3-prinzipien-and-regeln.md)). Der Einsatz von [**Patterns**](/generalisierte-auswahlkomponente-fur-kolibri/4.-neue-auswahlkomponente/4.4-patterns.md) ([**4.4**](/generalisierte-auswahlkomponente-fur-kolibri/4.-neue-auswahlkomponente/4.4-patterns.md)) wie **Null-Object**, **Projector** und **Decorator** strukturiert die Implementation. Die Patterns erhöhen die Wartbarkeit des Codes. Der [**Dropdown-Container**](/generalisierte-auswahlkomponente-fur-kolibri/4.-neue-auswahlkomponente/4.5-dropdown-container.md) ([**4.5**](/generalisierte-auswahlkomponente-fur-kolibri/4.-neue-auswahlkomponente/4.5-dropdown-container.md)) lässt sich auf verschiedene Weisen umsetzen. Das Kapitel [**Performance**](/generalisierte-auswahlkomponente-fur-kolibri/4.-neue-auswahlkomponente/4.6-performance.md) ([**4.6**](/generalisierte-auswahlkomponente-fur-kolibri/4.-neue-auswahlkomponente/4.6-performance.md)) beschreibt Optimierungen zur Verbesserung der Ladezeit sowie des Leistungspotenzials der neuen Auswahlkomponente. Das [**Testing**](/generalisierte-auswahlkomponente-fur-kolibri/4.-neue-auswahlkomponente/4.7-testing.md)-Kapitel ([**4.7**](/generalisierte-auswahlkomponente-fur-kolibri/4.-neue-auswahlkomponente/4.7-testing.md)) dokumentiert die Durchführung sowie die Auswertung **manueller**, **automatisierter** und **Usability-Tests**. Schliesslich fasst das [**Fazit der neuen Komponente**](/generalisierte-auswahlkomponente-fur-kolibri/4.-neue-auswahlkomponente/4.8-fazit-der-neuen-komponente.md) ([**4.8**](/generalisierte-auswahlkomponente-fur-kolibri/4.-neue-auswahlkomponente/4.8-fazit-der-neuen-komponente.md)) die wichtigsten Erkenntnisse zusammen. Abschliessend bietet die [**Diskussion**](/generalisierte-auswahlkomponente-fur-kolibri/5.-diskussion.md) ([**5**](/generalisierte-auswahlkomponente-fur-kolibri/5.-diskussion.md)) einen Überblick über die Bedeutung der Erkenntnisse für die Entwicklung. Zudem beschreiben die [**Future Features**](/generalisierte-auswahlkomponente-fur-kolibri/5.-diskussion/5.1-future-features.md) ([**5.1**](/generalisierte-auswahlkomponente-fur-kolibri/5.-diskussion/5.1-future-features.md)) Ideen für eine Weiterentwicklung sowie Verbesserungsvorschläge. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://kolibri-selection-component.gitbook.io/generalisierte-auswahlkomponente-fur-kolibri/1.-einleitung.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.