Intrexx und die Tastatur auf Smartphones

Ich habe mich kürzlich ganz erschrocken, als mir einfiel, dass ich auf meiner (dieser, jenen) Businesswebsite doch mal extra einen Blog einrichtete, um ein wenig von meiner Arbeit zu erzählen oder vielleicht ein paar Tipps zur Entwicklung mit Intrexx zu geben. Mir ist nämlich, als sei es erst gestern gewesen, als ich euch ein paar handliche Tipps zur Entwicklung besserer Applikationen mit Intrexx gab, allerdings ist das nun auch schon wieder über 2 Jahre her und ich weiß natürlich auch nicht, wo die Zeit geblieben ist. Natürlich in einigen wunderbaren und weniger wunderbaren Projekten und anderen spannenden Dingen, von denen ich euch bestimmt auch bald an geeigneter Stelle erzählen kann. Der verlinkte Artikel ist selbstverständlich immer noch gültig und darf gern zurate gezogen werden.

Heute möchte ich euch allerdings erstmal einen kleinen Trick zeigen, der eure Intrexx-Applikationen nochmal um einiges toller macht, dabei aber kaum eines Aufwandes bedarf.

Das Problem ist nämlich, dass Intrexx auf dem Smartphone im Großen und Ganzen zwar sehr gut funktioniert, so ihr denn alles artig mit Rastern gebaut und entsprechend gestaltet habt, die Eingabefelder einem aber immer nur die komplette Tastatur anbieten. Nun kam aber kürzlich in einem Kundenprojekt die Frage auf, ob man denn nicht die native Zahleneingabe der Tastatur öffnen könne, wenn in das Eingabefeld doch sowieso nur Zahlen eingegeben werden sollen. So direkt hatte ich da leider keine Antwort drauf und wir haben die Anforderung erstmal auf „WON’T FIX“ gesetzt, aber ein wenig gewurmt hat es mich dann natürlich doch. Willkommen im Labor.

Es gibt nämlich genau zwei Möglichkeiten, um es eben doch hinzubekommen. Die erste ist blöd, unschön, irgendwie merkwürdig und wird von mir nur der Vollständigkeit halber erwähnt, damit am Ende niemand sagen kann, ich würde euch irgendwas verheimlichen, und die andere Möglichkeit ist elegant, sexy, so gut wie gar kein Aufwand und kann einfach mietfrei in eurer JavaScript-Bibliothek leben. Scrollt einfach gerne direkt bis zum Ende dieses Artikels und verschwendet nicht eure Zeit. Ich setze euch sogar eine Sprungmarke

Die unschöne Lösung mit Bordmitteln

Es gibt einen Trick, den euch Intrexx gerne verheimlichen möchte. Wenn ihr nämlich in den Eigenschaften einer Seite den Haken bei „Für mobile Endgeräte transformieren“ setzt, bekommen Eingabefelder vom Typ Ganzzahl (oder Gleitkommazahl usw.) die Option „Bei Klick in Kontrolle Nummernblock anzeigen“, welche wiederum das Expert-Attribut „picker“ auf ja setzt. Dieses Attribut kann man auch ohne die vorherigen Schritte einfach so setzen, es wird einem nur einfach nicht angeboten. Im folgenden Screenshot erkennt ihr aber vermutlich direkt mein Problem mit der Sache – es sieht nicht gut aus.

Darüber hinaus fehlen einige Zeichen, es passt nicht unbedingt zum Design und ist auch nicht gestaltbar und irgendwie fühlt es sich auch einfach überhaupt nicht hygge an. Das ungleich nervigere Problem ist zudem noch, dass es sich auch einfach richtig bescheuert verhält: Hat man nämlich zum Beispiel zwei Eingabefelder, für die man dieses Expert-Attribut gesetzt hat, scheint die Eingabe beim ersten schon gar nicht mehr zu funktionieren, wenn man da zweite angeklickt hat und zurück in das erste wechselt. Damit ist diese Lösung einfach nicht benutzbar und kann einfach ignoriert werden. Sorry also, wenn ihr bis hierhin gelesen habt und nicht direkt, wie von mir empfohlen, zur besseren Lösung gesprungen seid.

Die beste Lösung mit ein wenig JavaScript

Das Stichwort heißt inputmode. Das eigentliche Problem ist nämlich tatsächlich, dass Intrexx allen Eingabefeldern, ungeachtet des Kontrolltyps (Ganzzahl, Text, Währung, Gleitkommazahl, Telefonnummer, usw.), den Type text gibt. Das müssen wir wohl oder übel als gegeben annehmen. Wir könnten es zwar mittels ein wenig JavaScript im Client ändern und tatsächlich scheint das auch problemlos zu funktionieren, aber ob das wirklich die sauberste Lösung ist, halte ich ein für ein wenig fraglich. Intrexx validiert die Eingaben dieser Felder zwar anhand des Kontrolltyps, vermutlich irgendwo in der BusinessLogic, und es wird auch alles korrekt gespeichert und es wirft keine Fehler, aber ob es im Hintergrund wirklich so funktioniert, wie ich mir das gerade vorstelle, ist natürlich total fraglich.

Das Attribut inputmode ist da wesentlich spannender.

Ich mach es kurz: Setzt einfach im Script-Teil der Kontrolle auf das onfocus-Event folgenden Codeschnipsel und ihr habt eigentlich alles erledigt, was es zu erledigen gilt:

this.setAttribute("inputmode","decimal");Code language: JavaScript (javascript)

Ich mach es länger: Im Grunde erweitern wir das Input-Element um das bisher nicht vorhandene Attribut inputmode, das tatsächlich bestimmt, welche Art der Eingabe dem User in Abhängigkeit des UserAgents angeboten wird. Auf Desktops ist das recht unbedeutend, auf Smartphones offensichtlich nicht. Es gibt einiges an Lektüre zu dem Thema und da könnt ihr gerne weiter recherchieren. Wichtig zu wissen ist eigentlich nur, dass W3C und WHATWG es kennen und es mittlerweile von allen modernen Browsern unterstützt wird. Firefox war hier tatsächlich Bummelletzter, aber das wollen wir natürlich niemandem vorhalten.

Hey Intrexx!

Die schönste und vor allem bequemste Lösung, die diesen Artikel hier total obsolet machen würde, wäre natürlich, wenn Intrexx automatisch in Abhängigkeit des Kontrolltyps einen passenden Inputmode an die Kontrolle setzen würde. Gerne auch als Expert-Attribut, damit ich da trotzdem noch ein wenig herumpfuschen kann. In meiner Naivität stelle ich mir das natürlich ganz einfach vor, weiß aber natürlich auch, dass die Dinge, die einfach scheinen, es oftmals gar nicht sind. Hoffentlich liest das aber trotzdem jemand in Freiburg und reicht es an die entsprechende Stelle weiter.

Liebsten Dank für die Aufmerksamkeit, meldet euch mit, falls ihr mal einen Intrexxer braucht und seid auch unabhängig davon exzellent zueinander. Cheers.