Tags: VB6 · WebView2 · UI/UX · Legacy-Modernisierung · Windows Desktop
ZeitPicker ist ein eigenes Entwicklungsprojekt von HPApps.
Der VB6 Time Picker (ZeitPicker) ersetzt mühsame Textfeld-Eingaben durch scrollbare Walzen. Er ist touch-freundlich und nativ integrierbar. Außerdem braucht er keine externen Bibliotheken. In diesem Beitrag zeige ich Aufbau, API und Integration in bestehende VB6-Formulare.
VB6 Time Picker: Das Problem
Uhrzeiten eingeben ist in klassischen VB6-Anwendungen meist eine trostlose Angelegenheit. Eine Textbox und etwas Validierung – fertig. Wer sich schon mal in einem modernen Web-Formular eine Uhrzeit per Scroll-Rad ausgesucht hat, kennt den Unterschied. Das geht schnell und fehlerfrei. Deshalb wollte ich genau dieses Gefühl auch in VB6 umsetzen. Dafür brauchte es kein aufwendiges Custom-Control von Grund auf.
VB6 Time Picker: Die Idee
Die Lösung nutzt denselben Trick wie beim Diagramm-Steuerelement: Eine kleine HTML/JavaScript-Anwendung läuft über WebView2 in einem randlosen VB6-Werkzeugfenster. Außerdem steckt die komplette Optik in einer einzigen HTML-Datei von rund 9 KB. Zum Beispiel: Scroll-Walzen, Buttons und Direkteingabe. Es gibt keine externen Bibliotheken und keine Netzwerkzugriffe.
Das VB6-Formular ist bewusst minimal gehalten. Es öffnet sich an der aktuellen Mausposition. Zudem erkennt es automatisch den richtigen Monitor – auch bei Multi-Monitor-Setups. Bei Bedarf rutscht der Dialog vom Bildschirmrand weg. In unseren Tests bleibt er so vollständig sichtbar. Für den aufrufenden Code bleibt davon nichts zu sehen. Die öffentliche Schnittstelle ist eine einzige Zeile:
Dim sZeit As String
sZeit = "14:30:00"
If frmZeitPicker.ShowDialog(sZeit) Then
' sZeit enthält jetzt die gewählte Uhrzeit
End If
VB6 Time Picker: Funktionen
Scroll-Walzen wie in modernen Apps
Stunde, Minute und Sekunde haben jeweils eine eigene Walze. Du kannst per Mausrad drehen oder mit gedrückter Maustaste wischen. Der gewählte Wert bleibt mittig und orange hervorgehoben.
Feinsteuerung per Klick
Kleine Pfeil-Buttons springen ±1 pro Walze. Außerdem gibt es Schnellsprünge für ±5 Minuten und ±10 Sekunden. So verschiebst du eine Uhrzeit um 15 Minuten ohne 15 Klicks.
Direkteingabe ohne Umweg
Ein Klick auf den markierten Wert öffnet ein Eingabefeld über der Walze. Zahl eintippen, Enter oder Tab drücken – fertig. Kein Rechtsklick und kein Kontextmenü nötig.
Ein-Klick-Shortcuts
Eine Leiste bietet „Jetzt“ und fünf Standardzeiten. Bei Schichtwechseln spart das im Alltag viele Klicks.
Smarte Positionierung
Der Dialog öffnet sich dort, wo du gerade arbeitest. Er zentriert sich unter dem Mauszeiger auf dem richtigen Monitor. Zudem erkennt er Bildschirmränder. So wird er in der Regel nicht abgeschnitten.
Ruckelfreies Erscheinen
Das Fenster wird zuerst unsichtbar aufgebaut. Erst wenn WebView2 fertig ist, blendet es ein. Dadurch gibt es kein Aufblitzen eines leeren Fensters.
Unter der Haube
Die HTML-Seite ist bewusst minimalistisch gehalten. Sie nutzt reines Vanilla-JavaScript ohne Framework. Außerdem gibt es keine externe Abhängigkeit. Nur ein paar hundert Zeilen stecken in Walzen-Rendering, Drag-Erkennung und Direkteingabe.
Für die exakte Positionierung greift das VB6-Formular auf die Win32-API zurück. Zum Beispiel nutzt es MonitorFromPoint und GetMonitorInfo. Derselbe Ansatz hilft auch beim Diagramm-Steuerelement.
Für das eigentliche Einbetten des Browsers sorgt derselbe flotte cWebView2-Wrapper wie beim Diagramm-Steuerelement: Teil von RC6.dll (VB-RichClient6, kostenlose VB6-Klassenbibliothek von Olaf Schmidt, vbrichclient.com), instanziiert per Set WV = New_c.WebView2. Ein und derselbe, einmal sauber gebaute Baustein trägt damit gleich mehrere Web-Steuerelemente in der Anwendung. Vollständige API-Referenz: RC6-WebView2.md.
Fazit
Manchmal ist das beste Steuerelement das, von dem man am wenigsten merkt, dass es eins ist. Ein Funktionsaufruf, ein Wisch mit der Maus – fertig ist die Uhrzeit. Außerdem vermisst niemand mehr die alte Textbox.
Weitere VB6-Projekte im Blog: MSChart mit WebView2, VB6 Profiler, MenuEx-Kontextmenü und VB6 Time Picker.