Gérer le clavier virtuel sous iOS et Android

Gérer le clavier
virtuel sous iOS et
Android
Webinaire du 28 juillet 2020

PRÉSENTATEUR
MVP Embarcadero
Prestataire informatique freelance et formateur Delphi
CV et contacts :
https://www.linkedin.com/in/patrickpremartin/
Blog Delphi/Pascal :
https://developpeur-pascal.fr

Outils Embarcadero
Les meilleurs outils de développement multi-
plateformes. Créez une fois et déployez des
applications modernes sur chaque plateforme.
Support Technique
Nos techniciens sont à votre service à tout
moment pour répondre à vos questions et
vous fournir des informations sûres.
Distributeur Officiel
Partenaire exclusif de Embarcadero
Technologies, largement reconnu pour
ses produits de programmation primés.
B A R N S T E N
QUI
Site : https://www.barnsten.com – Contacts FR : equipe@barnsten.com

NOTRE
Société de prestations informatiques.
Edition de sites Internet, vidéos et livres.
Centre de formation référencé sur Datadock.
Infos et contacts : https://olfsoftware.fr
Formations en entreprise : https://se-former-a-delphi.fr
Formations en ligne : https://apprendre-delphi.fr
O L F S O F T W A R E

INTROD
Les saisies sur mobiles sont à limiter au
maximum mais nous n’avons pas toujours le
choix. Voyons comment gérer le clavier
virtuel sur smartphone et tablettes avec
FireMonkey.
© Patrick Prémartin / developpeur-pascal.fr

INTROD
Les exemples seront réalisés avec Delphi mais
vous pourrez bien entendu vous en inspirer pour
faire de même sous C++Builder.

SAISIR
Les smartphones sont quasiment partout, les
tablettes remplacent de plus en plus souvent les
ordinateurs portables ou même des ordinateurs
fixes. Nous n’y coupons pas dans nos logiciels : il
faut que les utilisateurs puissent entrer leurs
informations.

SAISIR
Qui dit mobile dit aussi tailles d’écrans variables,
conditions de saisie pas toujours géniales,
potentielles difficultés liées au tactile ou à la
saisie vocale selon les cas et l’utilisateur.
A nous de simplifier au maximum ces étapes si
nous voulons obtenir les informations
demandées.

SAISIR
Je vais évoquer deux choses avec vous
aujourd’hui:
- La configuration des claviers mobiles
- L’ergonomie des écrans

CONFIGURER
FireMonkey propose de nombreux champs pour
permettre aux utilisateurs d’entrer des
informations. Nous ne devons proposer des
champs de saisie (TEdit ou TMemo) que
lorsqu’aucun autre choix n’est disponible.
Ca permet de se simplifier la vie et de la simplifier
aussi à nos utilisateurs.

CONFIGURER
Embarcadero nous permet de paramétrer le
clavier virtuel sur les champs de saisie avec
plusieurs propriétés :
- KeyboardType
- KillFocusByReturn
- ReturnKeyType

CONFIGURER
KeyboardType : Indique quel type de clavier sera
affiché lorsque le champ concerné aura le focus.

CONFIGURER
KillFocusByReturn : Annule ou laisse la
focalisation (et donc le clavier virtuel affiché)
lorsque la touche ENTREE du clavier virtuel est
utilisée.

CONFIGURER
ReturnKeyType : Détermine le look de la touche
ENTREE du clavier virtuel.

CONFIGURER
Une fois le look du clavier déterminé, reste à faire
en sorte qu’il s’affiche au bon endroit… ou plutôt
faire en sorte que le champ qui a le focus soit
visible au dessus du clavier d’une manière ou
d’une autre.

RAPPELS
L’une des choses les plus importantes lorsqu’on
fait des écrans mobiles est de penser
« responsif » et donc de mettre en place les
éléments visuels à l’écran de telle sorte que celui-
ci soit toujours affiché au mieux des possibilités
du périphérique utilisé.

RAPPELS
Reportez vous à la session « faire une interface
adaptive avec FireMonkey » du 28 mai 2019 sur
le sujet pour plus d’infos :
https://developpeur-pascal.fr/p/_200e-
webinaire-du-28-mai-2019-faire-une-interface-
adaptive-avec-firemonkey.html

ERGONOMIE
En mobile les fiches sont positionnées en haut à
gauche de l’écran et occupent la largeur et la
hauteur de l’écran.
Ce n’est pas modifiable par code.
Contrairement aux autres éléments visuels de
FMX les fiches ne peuvent pas être déplacées sur
plateformes mobiles. Sur macOS, Linux et
Windows elles fonctionnent comme en VCL.

ERGONOMIE
Comme on ne peut pas déplacer la fiche il faudra
pouvoir en déplacer le contenu si on désire
mettre un champ de saisie au dessus du clavier
lorsqu’il s’affichait au départ par dessus.
Nous devons impérativement avoir un
TVertScrollBox comme composant parent des
éléments de la fiche.
ERGONOMIE
Comme on ne peut pas déplacer la fiche il faudra
pouvoir en déplacer le contenu si on désire
mettre un champ de saisie au dessus du clavier
lorsqu’il s’affichait au départ par dessus.
Nous devons impérativement avoir un
TVertScrollBox comme composant parent des
éléments de la fiche.

ERGONOMIE
En faisant ça nous pourrons modifier la position
d’affichage dans la zone avec ascenseur en jouant
sur sa propriété ViewportPosition et en modifier
la taille si nécessaire.
Idéalement on alignera les composants en
alignement Top ou en coordonnées absolues.

ERGONOMIE
En réalité on peut faire sans, mais du coup on
devra déplacer tous les composants de la fiche au
lieu de simplement modifier la coordonnée Y de
la vue dans la zone avec ascenseur.

ERGONOMIE
De base les choses ne seront déjà pas forcément
simples, mais ça va se compliquer encore plus
lorsqu’on sera dans un TMemo ou dans des
composants imbriqués les uns dans les autres.

ERGONOMIE
Le cas du TMemo complique les choses car ce
n’est pas le composant lui-même qui nous
intéressera mais la position du curseur à
l’intérieur du composant. On l’obtiendra à partir
de sa propriété Caret.Pos (et non CaretPosition).

ERGONOMIE
Pour les composants imbriqués il faudra que l’on
calcule la position du champ qui a la focalisation
par rapport au TVertScrollBox de base, donc
qu’on remonte ses parents jusqu’à avoir la bonne
réponse.

ERGONOMIE
On peut à peu près automatiser tout ça dans une
fiche dont on peut hériter pour construire les
écrans du projet.
Les calculs de coordonnées ne seront pas
toujours faciles à faire car il est possible qu’un
ascenseur se trouve dans un autre ascenseur et là
c’est le bordel…

ERGONOMIE
L’ouverture et la fermeture du clavier virtuel
déclenchent deux événements au niveau de la
fiche :
- onVirtualKeyboardShown
- onVirtualKeyboardHidden
A nous de les gérer à l’aide de la taille fournie en
paramètre.

EXEMPLE
Embarcadero fournit un exemple d’écran gérant
le clavier virtuel des mobiles.
Il se trouve dans « Object PascalMulti-Device
SamplesUser InterfaceScrollableForm » de
l’arborescence des exemples.

EXEMPLE
Je vous en propose une autre approche.
Les sources sont disponibles sur GitHub :
https://github.com/DeveloppeurPascal/GererLeCl
avierVirtuelSurIOSEtAndroid

QUESTIONS

CONCL
Aujourd’hui nous avons vu comment configurer
les claviers pour les adapter aux données à entrer
et comment gérer nos écrans pour éviter les
couacs visuels.

CONCL
Vous n’avez plus qu’à adapter vos logiciels
multiplateforme pour qu’ils restent exploitables
dans un maximum de circonstances et de formats
d’écrans possibles.

CONCL
La rediffusion de ce webinaire devrait être
disponible sur la chaîne YouTube de Barnsten :
https://www.youtube.com/channel/UCSrWP5Y01
uSHS3014Pfprlw/videos

CONCL
Pour des ressources complémentaires,
télécharger cette présentation et accéder aux
exemples, rendez-vous sur :
https://developpeur-pascal.fr/p/_200l-webinaire-
du-mardi-28-juillet-2020-gerer-le-clavier-virtuel-
sur-ios-et-android.html

PROCHAINS
Prochains webinaires :
- 25 août 2020 : Sauvegarder et restaurer l'état
des applications mobiles
- 29 septembre 2020 : Développer une
application pour Android TV avec Delphi
Détails et inscriptions depuis
https://developpeur-pascal.fr/p/_6007-
webinaires.html

Gérer le clavier virtuel sous iOS et Android

Recommended

Recommended

More Related Content

Similar to Gérer le clavier virtuel sous iOS et Android

Similar to Gérer le clavier virtuel sous iOS et Android (20)

More from pprem

More from pprem (15)

Gérer le clavier virtuel sous iOS et Android