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 3.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 : 20 mn
Leçon précédenteSommaireLeçon suivante
Présentation
Le système iOS est disponible sur des téléphones (iPhone), sur des tablettes (iPad) et sur des iPod. 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 le matériel sur lequel sera déployée l'application :
  • iPhone,
  • iPad,
  • iPhone et iPad.
Deux cas se présentent :
  • Vous connaissez le matériel cible : dans ce cas, il suffit de le sélectionner. L'assistant de création de fenêtres proposera uniquement la création de fenêtres pour ce matériel cible.
  • Vous ne connaissez pas le matériel cible : dans ce cas, dans l'assistant de création de projet, vous sélectionnez "iPhone et iPad". Lors de la création des fenêtres, vous pouvez :
    • développer vos fenêtres pour l'iPhone. L'ancrage des champs dans la fenêtre permettra d'adapter le contenu à iPad (solution conseillée).
    • utiliser les agencements pour créer des interfaces différentes selon la plateforme d'exécution et sa résolution.
    • développer 2 jeux de fenêtres, un pour l'iPhone, un pour l'iPad.
Orientation de la fenêtre
Sous iPhone ou iPad, 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_iOS" que vous venez de créer dans la leçon précédente.

    Corrigé

    Un projet corrigé est disponible. Ce projet contient les différentes fenêtres créées dans cette leçon. Pour ouvrir le projet corrigé, dans la page d'accueil de WINDEV Mobile (Ctrl + <), cliquez sur "Cours d'auto-formation", puis sélectionnez "Mon projet iOS (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 l'aide en ligne.

Exemple pratique

  • Ouvrez si nécessaire le projet "Mon_Projet_iOS" 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 iOS (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 des champs 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. Nous verrons la marche à suivre dans la partie "Android et iOS : Développement d'une application".
    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 iOS.
  • le champ Carte pour visualiser une position sur une carte ou un itinéraire.
Nous verrons certains de ces champs dans la leçon "Android et iOS : Développement d'une application".
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 24
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire