Autor Beitrag
Nersgatt
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 1581
Erhaltene Danke: 279


Delphi 10 Seattle Prof.
BeitragVerfasst: Fr 27.09.13 09:17 
Moin,

heute mal eine kleine Anleitung zum TTouchkeyboard, welches seit Delphi 2010 Bestandteil von Delphi ist. Ich habe mich dazu entschlossen, etwas dazu zu schreiben, weil ich nicht wirklich viele Informationen dazu im Internet gefunden habe. Außerdem habe ich mit diesem Artikel selbst eine kleine Gedankenstütze. :D
Ich habe mich vor ein paar Jahren schon mal damit beschäftigt, habe es dann aber nicht weiter verfolgt. Jetzt hab ich dafür etwas Zeit gefunden, mich tiefer mit der Thematik zu befassen.

Es handelt sich bei TTouchKeyboard um eine Komponente, die eine Bildschirmtastatur darstellt. Sie ist also insbesondere für Geräte interessant, die per Touchscreen bedient werden (Kassen, Kioskapplikationen, Infoterminals, etc.).

Um sie zu verwenden, muss man sie nur auf sein Formular klatschen. Dann stellt man noch ein, ob man die Standardtastatur haben möchten (also mit Zahlen, Buchstaben, etc.) oder ein NumPad. Dies lässt sich über die Property "Layout" steuern. Fertig, Ende des Tutorials, Feierabend, Wochenende. :zustimm:

Numpad

"Mooooment", sagt da der Chef. "Nix ist mit Feierabend, Wochenende! :motz: Was soll ich denn bei einer PIN-Eingabe mit dem + - * / und , Buttons? Machense die mal weg!" :!:

Gut. Also doch weiter arbeiten. :bawling:
Die Eigenschaften der Komponente geben nicht viel her. Das Wochenende rückt immer weiter weg. Also habe ich angefangen im Quellcode zu wühlen. Auch da komme ich nicht so recht weiter. Das Wochenende ist nur noch als kleiner Punkt am Horizont zu erkennen. :eyes:

Aber es gibt einen kleinen Lichtblick. Chris Bensen hat sich auch mit dem TTouchkeyboard befasst und dazu einige Artikel in seinem Blog geschrieben. Leider sind einige Seiten nicht mehr erreichbar und den letzten Artikel zu dem Thema hat er wohl nie veröffentlicht. Ich hab ihn auf jeden Fall nicht gefunden.

Wie funktioniert also das TTouchkeyboard?
Es erstellt seine Buttons anhand der Sprache des Betriebssystems und des gewünschten Layoutes. Die entsprechenden Designinformationen bezieht die Komponente aus einer Ressource. Und genau das ist der Punkt, an dem wir einhaken müssen, um die ungeliebten Buttons los zu werden.
Chris Benson hat ein kleines Tool geschrieben, welches die vorhandenen Designinformationen in eine XML-Datei extrahiert. Das entsprechende Tool ist hier zu finden:
cc.embarcadero.com/item/27543

Raus kommt eine XML-Datei, die die Buttons des Keyboards beschreiben. Hier einmal exemplarisch die XML-Datei des Numpads:
ausblenden XML-Daten
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
<keyboard keyboardname="NumPad" keyboardtype="NumPad" width="190" height="229" minwidth="180" minheight="150" rowheight="48">
  <row topmargin="0" bottommargin="2">
    <key keyimage="3" scancode="14" width="48" height="48" rightmargin="2" publishedname="Backspace"/>
    <key vk="111" width="48" height="48" leftmargin="2" rightmargin="2"/>
    <key vk="106" width="48" height="48" leftmargin="2" rightmargin="2"/>
    <key vk="109" width="48" height="48" leftmargin="2" stretch="true"/>
  </row>
  <row topmargin="2" bottommargin="2">
    <key vk="103" width="48" height="48" rightmargin="2"/>
    <key vk="104" width="48" height="48" leftmargin="2" rightmargin="2"/>
    <key vk="105" width="48" height="48" leftmargin="2" rightmargin="2"/>
    <key vk="107" width="48" height="92" leftmargin="2" stretch="true"/>
  </row>
  <row topmargin="2" bottommargin="2">
    <key vk="100" width="48" height="48" rightmargin="2"/>
    <key vk="101" width="48" height="48" leftmargin="2" rightmargin="2"/>
    <key vk="102" width="48" height="48" leftmargin="2"/>
  </row>
  <row topmargin="2" bottommargin="2">
    <key vk="97" width="48" height="48" rightmargin="2"/>
    <key vk="98" width="48" height="48" leftmargin="2" rightmargin="2"/>
    <key vk="99" width="48" height="48" leftmargin="2" rightmargin="2"/>
    <key keyimage="8" vk="13" width="48" height="92" leftmargin="2" stretch="true" publishedname="Enter"/>
  </row>
  <row topmargin="2" bottommargin="0">
    <key vk="96" width="96" height="48" rightmargin="2"/>
    <key vk="110" width="48" height="48" leftmargin="2" rightmargin="2"/>
  </row>
</keyboard>


Der Aufbau ist ja praktisch selbsterklärend. Die Buttons sind in Reihen angeordnet (row). In jeder Reihe gibt es die Buttons (key). Jeder Key ist mit der Breite und Höhe beschrieben. Außerdem finden wir die Scancodes, bzw. die Virtual Key-Werte.
Der Minusbuttons entspricht 109, Dividieren ist 111, Plus ist 107, Multiplizieren 106 und zu guter Letzt der Dezimalbutton mit 110.
Die entsprechenden Zeilen lösche ich einfach raus. Den Backspacebutton lasse ich an die Stelle des + Buttons wandern. Die erste Row wird damit überflüssig und fliegt komplett raus. Da der Dezimalbutton fehlt, habe ich nun eine unschöne Lücke im Keyboard. Ich mache also den 0-Button entsprechend breiter, damit es stimmig aussieht.

Ist euch aufgefallen, dass die Layout-Property keine Aufzählung sondern ein String ist? Das lässt den Schluss zu, dass man vielleicht noch mehr als "Standard" und "Numpad" (was uns der Objektinspector vorschlägt) auswählen kann. Ich ändere also noch in der ersten Zeile Keyboardname und Keyboardtype in "MyNumpad". So kann ich weiterhin auf das Originale Numpad zugreifen. Vielleicht brauche ich auch in Zukunft noch ein Numpad, wo der Dezimalbutton noch drin ist. Das ist auf diese Weise leicht möglich.

Meine geänderte XML-Datei sieht nun so aus:
ausblenden XML-Daten
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
<keyboard keyboardname="MyNumPad" keyboardtype="MyNumPad" width="190" height="229" minwidth="180" minheight="150" rowheight="48">
  <row topmargin="2" bottommargin="2">
    <key vk="103" width="48" height="48" rightmargin="2"/>
    <key vk="104" width="48" height="48" leftmargin="2" rightmargin="2"/>
    <key vk="105" width="48" height="48" leftmargin="2" rightmargin="2"/>
    <key keyimage="3" scancode="14" width="48" height="92" leftmargin="2" stretch="true" publishedname="Backspace"/>
  </row>
  <row topmargin="2" bottommargin="2">
    <key vk="100" width="48" height="48" rightmargin="2"/>
    <key vk="101" width="48" height="48" leftmargin="2" rightmargin="2"/>
    <key vk="102" width="48" height="48" leftmargin="2"/>
  </row>
  <row topmargin="2" bottommargin="2">
    <key vk="97" width="48" height="48" rightmargin="2"/>
    <key vk="98" width="48" height="48" leftmargin="2" rightmargin="2"/>
    <key vk="99" width="48" height="48" leftmargin="2" rightmargin="2"/>
    <key keyimage="8" vk="13" width="48" height="92" leftmargin="2" stretch="true" publishedname="Enter"/>
  </row>
  <row topmargin="2" bottommargin="0">
    <key vk="96" width="144" height="48" rightmargin="2"/>
  </row>
</keyboard>


Plötzlich scheint das Wochenende wieder ganz nah. :angel:
Jetzt müssen wir nur diese Infos einbinden und dem Keyboard beibringen, das Layout auch zu benutzen.
Chris Benson hat ein Tool geschrieben, welches aus der XML-Datei wieder eine Binäre Datei macht. Diese müssen wir dann als Ressource ins Projekt integrieren. Das Tool ist hier im Quelltext zu finden: cc.embarcadero.com/item/27571
Nach dem Kompilieren erhaltet ihr ein Kommandozeilentool. Diesem übergebt ihr eure geänderte XML-Datei. Raus kommt eine Datei mit der Endung .binary.

Der Rest ist Delphistandard. Wir brauchen ein Ressourcenscript:
ausblenden Quelltext
1:
2:
NumpadKeyboard RCDATA NumpadKeyboard.binary
myNumpadKeyboard RCDATA myNumpadKeyboard.binary

Damit ich auch noch das alte Numpad benutzen kann, habe ich auch die Originale XML-Datei eingebunden.

Das Script wird mit BRCC32 compiliert:
ausblenden Quelltext
1:
brcc32 NumpadKeyboard.rc					


Ich habe mir alles in ein Batchfile zusammen gestellt, um die Schritte nicht einzeln durchführen zu müssen:
ausblenden Quelltext
1:
2:
3:
kcc NumPadKeyboard.xml
kcc myNumPadKeyboard.xml
brcc32 NumpadKeyboard.rc


Nun noch an der enstsprechenden Stelle im Quellcode die Ressource einbinden:
ausblenden Delphi-Quelltext
1:
{$R .\res\NumpadKeyboard.res}					


Im Objektinspector könnt ihr nun in der Layoutproperty "MyNumpad" eintragen (Groß-/Kleinschreibung beachten!). Stört euch nicht daran, dass euch der Objektinspektor das nicht vorschlägt. Außerdem wird die Komponente im Designer grau, die Buttons verschwinden. Das soll uns aber zur Designtime nicht stören. Wenn man nun das Projekt kompiliert, sieht die Tastatur genauso wie gewünscht aus:
Numpad_Neu

Fertig, Ende des Tutorials, Feierabend, Wochenende. :zustimm: :zustimm: :zustimm:

Wer sich mit der "großen" Tastatur beschäftigen möchte muss beachten, dass das Layout der Tastatur von der Sprache abhängt, was den Aufbau der XML-Datei etwas verkompliziert. Schaut euch einfach die extrahierten XML-Dateien an. Dort sind auch die entsprechenden Sprachen hinterlegt.

Noch ein paar Links zum Thema:
Die Blogeinträge von Chris Bensen:
chrisbensen.blogspot...keyboard-part-i.html
chrisbensen.blogspot...eyboard-part-ii.html
chrisbensen.blogspot...yboard-part-iii.html
chrisbensen.blogspot...eyboard-part-iv.html
(Teil 5 fehlt leider, hat er wohl nicht mehr veröffentlicht)

Die genannten Tools zum Download:
Layout extrahieren cc.embarcadero.com/item/27543
Layout compilieren cc.embarcadero.com/item/27571
Einloggen, um Attachments anzusehen!
_________________
Gruß, Jens
Zuerst ignorieren sie dich, dann lachen sie über dich, dann bekämpfen sie dich und dann gewinnst du. (Mahatma Gandhi)

Für diesen Beitrag haben gedankt: jaenicke