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
Leçon 6.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.

Durée estimée : 30 mn

Express

En version Express, la création et la génération d'un projet Universal Windows n'est pas disponible.

Leçon précédenteSommaireLeçon suivante
Présentation
Les applications Universal Windows 10 sont disponibles aussi bien sur un PC de bureau (en mode tuile) que sur des tablettes ou des téléphones. 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 (PC/Tablette ou Téléphone) dans 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
En mode Universal Windows 10, 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_UWA" 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 UWA (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.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 24
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire