PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

Nouveauté WINDEV Mobile 24 !
  • Ce que vous allez apprendre dans cette leçon
  • Présentation
  • Choix de la résolution en fonction du matériel
  • Orientation de la fenêtre
  • Exemple pratique
  • Gestion du tactile
  • Exemple pratique
  • Les différents types de champs disponibles
Leçon 2.2. Interface (IHM)
Ce que vous allez apprendre dans cette leçon
  • Choix de la résolution en fonction du matériel.
  • Orientation de la fenêtre.
  • Gestion du tactile.

Durée estimée : 30 mn
Leçon précédenteSommaireLeçon suivante
Présentation
Le système Android est disponible aussi bien sur des téléphones que sur des tablettes. WINDEV Mobile permet de créer simplement des interfaces s'adaptant au matériel utilisé.
Choix de la résolution en fonction du matériel
Lors de la création d'un projet, il est nécessaire de choisir la résolution qui sera utilisée pour les fenêtres du projet. Deux cas se présentent :
  • Vous avez un seul matériel cible : dans ce cas, il suffit de sélectionner ce matériel dans la liste proposée par l'assistant.
  • Vous utilisez plusieurs matériels cibles avec des résolutions d'écran différentes : dans ce cas, il est nécessaire de choisir la résolution la plus petite commune à tous ces matériels. L'ancrage des champs dans la fenêtre permettra d'adapter le contenu à la résolution.
Orientation de la fenêtre
Sous Android, une fenêtre peut avoir une des orientations suivantes :
  • Libre : la fenêtre suit l'orientation du matériel,
  • Bloquée en mode portrait,
  • Bloquée en mode paysage.
Cette orientation est définie dans l'onglet "IHM" de la fenêtre de description de la fenêtre (option "Description" du menu contextuel de la fenêtre).
Dans les deux derniers cas, aucune manipulation spécifique n'est nécessaire.
Dans le cas d'une fenêtre libre, la disposition des champs et leur taille doivent s'adapter à l'orientation. Il faut utiliser le mécanisme de l'ancrage pour obtenir un résultat satisfaisant.

Exemple pratique

  • Ouvrez si nécessaire le projet "Mon_Projet_Android" que vous venez de créer dans la leçon précédente.

    Corrigé

    Un projet corrigé est disponible. Pour ouvrir ce projet, dans la page d'accueil de WINDEV Mobile (Ctrl + <), cliquez sur "Cours d'auto-formation", puis sélectionnez "Mon projet Android (Corrigé)".
Dans notre exemple, le projet a été créé pour un téléphone, et nous l'avons testé en mode portrait sous le simulateur.
Nous allons maintenant le tester en mode paysage sous le simulateur.
  • Lancez le test du projet ( parmi les boutons d'accès rapide).
    1. La fenêtre apparaît en mode portrait.
    2. Dans le simulateur, cliquez sur le menu dans la coque ().
    3. Un menu contextuel apparaît. Modifiez l'orientation de la fenêtre grâce à l'option "Rotation".
    4. La fenêtre change d'orientation à l'écran. Dans notre exemple, le bouton ne change pas de place : il ne s'adapte pas à l'orientation de l'écran.
  • Nous allons maintenant modifier notre fenêtre pour que le bouton "Afficher" soit centré dans la fenêtre et reste centré quelle que soit l'orientation du mobile.
  • Arrêtez le test et revenez sous l'éditeur.
  • Pour centrer le bouton dans la fenêtre :
    1. Sélectionnez le bouton (clic sur le bouton).
    2. Sous le volet "Alignement", dans le groupe "Centrage et répartition", cliquez sur "Centrer dans le parent (horz)".
  • Pour que le bouton reste centré dans la fenêtre, nous allons utiliser l'ancrage du champ :
    1. Sélectionnez le bouton (clic sur le bouton).
    2. Affichez le menu contextuel (clic droit).
    3. Sélectionnez l'option "Ancrage" : la fenêtre de définition des ancrages apparaît :
    4. Sélectionnez "Centré horizontalement" et validez (bouton vert).

      Note

      Dans la fenêtre affichée sous l'éditeur, vous pouvez remarquer les petites flèches rouges dans le champ. Ces flèches indiquent que le champ est ancré.
  • Lancez le test du projet ( parmi les boutons d'accès rapide) :
    • Le bouton est centré en mode portrait.
    • Changez l'orientation du simulateur.
    • Le bouton reste centré en mode paysage.
Gestion du tactile
Un des aspects importants de l'interface d'une application mobile est la gestion de l'écran tactile.
Un dispositif "multi-touch" est une technique permettant à une personne d'interagir avec un matériel informatique à l'aide de plusieurs points de contact.
L'une des applications la plus courante du multi-touch est la manipulation d'images. La taille de l'affichage sur un téléphone étant souvent réduite, il est souvent nécessaire de zoomer et/ou de se déplacer dans une image.
Il est ainsi possible de réaliser un zoom sur une image avec le contact de 2 doigts qui s'écartent.
Pour gérer le "multi-touch", WINDEV Mobile propose :
  • Différentes options spécifiques disponibles dans le champ Image.
  • Des fonctions WLangage spécifiques.
  • Des traitements optionnels spécifiques.
Pour plus de détails, consultez Gestion du multi-touch.

Exemple pratique

  • Ouvrez si nécessaire le projet "Mon_Projet_Android" que vous venez de créer dans la leçon précédente.

    Corrigé

    Un projet corrigé est disponible. Pour ouvrir ce projet, dans la page d'accueil de WINDEV Mobile (Ctrl + <), cliquez sur "Cours d'auto-formation", puis sélectionnez "Mon projet Android (Corrigé)".
  • Dans la fenêtre "FEN_Bienvenue", créez un champ Image :
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur "Image".
    2. Le champ Image apparaît en création sous la souris.
    3. Déplacez la souris dans la fenêtre vers la position où le champ doit être créé. Pour poser le champ dans la fenêtre, il suffit de faire un nouveau clic gauche de souris.
    4. Double-cliquez sur le champ Image : la fenêtre de description du champ apparaît.
    5. Dans l'onglet "Général", sélectionnez une image présente sur votre disque dans le champ de saisie "Image" (via le bouton ).
    6. Si l'image est présente dans un répertoire différent de celui du projet, WINDEV Mobile propose de copier le fichier image dans le répertoire du projet. Acceptez en cliquant sur le bouton "Copier le fichier dans le répertoire proposé".
    7. Affichez l'onglet "Détail" : les options de gestion du multi-touch sont affichées :
    8. Sélectionnez l'option "Scroll et zoom automatiques".
    9. Validez la fenêtre de description du champ.
    10. Enregistrez la fenêtre (clic sur parmi les boutons d'accès rapide).
    11. Une erreur d'IHM apparaît dans le volet des erreurs : les ascenseurs automatiques de la fenêtre entrent en conflit avec les fonctionnalités de scrolling du champ Image.
    12. Pour ne plus avoir cette erreur d'IHM, désactivez les ascenseurs de la fenêtre :
      • Affichez la fenêtre de description de la fenêtre (option "Description" du menu contextuel).
      • Dans l'onglet "IHM", décochez l'option "Ascenseurs automatiques".
      • Validez la fenêtre de description.
    13. Enregistrez la fenêtre (clic sur parmi les boutons d'accès rapide). L'erreur d'IHM disparaît.

      Note

      La gestion du multi-touch ne peut pas être testée sous le simulateur. Pour tester cette fonctionnalité, il est nécessaire de déployer l'application sur l'appareil mobile.
    14. Fermez le projet.
Les différents types de champs disponibles
WINDEV Mobile propose de nombreux champs. Ces champs permettent d'afficher ou de saisir des données. Certains champs sont plus spécifiques à une interface mobile.
Pour réaliser vos applications, vous disposez des champs classiques (champs de saisie, images, sélecteurs et interrupteurs), mais aussi de champs plus spécifiques tels que :
  • les zones multilignes pour réaliser des IHM ressemblant aux fenêtres natives Android,
  • le champ Carte pour visualiser une position sur une carte ou un itinéraire,
  • le champ Publicité pour afficher un bandeau de publicité,
  • le menu sous forme de "Action bar".
Nous verrons certains de ces champs dans la leçon "Développement d'une application Android et iOS".
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 24
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire