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
  • Configuration nécessaire pour Universal Windows 10
  • Mon premier projet
  • Création du projet
  • Ma première fenêtre
  • Présentation
  • Création de la fenêtre
  • Affichage d'un message
  • Premier test
  • Premier déploiement sur l'appareil
  • Principe
  • Mise en place
Leçon 6.1. Mon premier projet Universal Windows 10
Ce que vous allez apprendre dans cette leçon
  • Configuration nécessaire.
  • Créer un projet Universal Windows 10.
  • Ma première fenêtre.
  • Mon premier test.
  • Premier déploiement.

Durée estimée : 1 h

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
Pour commencer à utiliser WINDEV Mobile pour Universal Windows 10, nous allons simplement créer un premier projet. Ce projet contiendra une fenêtre permettant d'afficher un message.
Ce premier exemple permettra de présenter rapidement les bases du développement pour Universal Windows 10 avec WINDEV Mobile.
Mais avant de créer notre premier projet pour Universal Windows 10, une configuration du poste de développement est nécessaire.
Configuration nécessaire pour Universal Windows 10
Pour développer une application de type Universal Windows 10 App, il est nécessaire d'installer sur le poste de développement les éléments suivants :
  • le SDK Window 10 de Microsoft. Le SDK pour Windows 10 (Software Development Kit ou Kit de développement logiciel) est un ensemble de fichiers et d'applications distribué par Microsoft afin de permettre la compilation d'applications pour le système d'exploitation Windows 10.
  • Visual Studio 2010 Redistributable Package.
Attention :
  • Pour utiliser des API Universal Windows App (API UWA), il est également nécessaire d'installer Visual Studio (version 2015 minimum).
  • La création d'un projet de type Universal Windows 10 App avec WINDEV ou WINDEV Mobile est disponible quel que soit le système du poste de développement. Pour générer et déployer l'application, le système du poste de développement doit être Windows 8 ou supérieur.
Pour plus de détails (adresses de téléchargement, ...), consultez Applications Universal Windows 10 App : Configuration nécessaire.
Mon premier projet

Création du projet

Nous allons créer notre premier projet pour Universal Windows 10.

Corrigé

Un projet corrigé est disponible. Pour ouvrir ce projet, dans la page d'accueil de WINDEV Mobile, cliquez sur "Cours d'auto-formation" puis sélectionnez "Mon projet UWA (Corrigé)".
  • Pour créer un projet :
    1. Lancez WINDEV Mobile 24 (si ce n'est déjà fait).
    2. Si nécessaire affichez la page d'accueil de WINDEV Mobile (Ctrl + <).
    3. Dans la page d'accueil, cliquez sur "Créer un projet" puis sur "Universal Windows 10 App".
    4. L'assistant de création de projet se lance. Les différentes étapes de l'assistant vont vous aider à créer votre projet. Tous les renseignements indiqués dans cet assistant pourront être modifiés par la suite.

      Note

      Autre méthode pour créer un projet :
      1. Cliquez sur parmi les boutons d'accès rapide du menu de WINDEV Mobile.
      2. La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Projet".
    5. La première étape de l'assistant permet de saisir le nom du projet, son emplacement et sa description. Dans notre cas, ce projet va simplement s'appeler "Mon_Projet_UWA". Par défaut, WINDEV Mobile propose de créer ce projet dans le répertoire "\Mes projets Mobile\Mon_Projet_UWA". Vous pouvez conserver cet emplacement ou le modifier grâce au bouton [...].
    6. Passez à l'étape suivante à l'aide des flèches situées en bas.
    7. L'assistant propose d'ajouter des documents. Passez à l'étape suivante.
    8. L'assistant propose de créer un projet vierge ou basé sur un exemple. Choisissez "Projet vierge" et passez à l'étape suivante.
    9. Indiquez où trouver le SDK Windows 10 nécessaire à la génération d'applications. Si le SDK a été installé, le chemin d'installation est automatiquement proposé (par exemple "C:\Program Files (x86)\Windows Kits\10\bin").
    10. Passez à l'étape suivante à l'aide des flèches situées en bas.
    11. L'assistant propose de choisir le type d'appareils concernés par le projet :
      • Générer une application pour téléphones, tablettes et PC.
      • Générer une application pour téléphones uniquement.
      • Générer une application pour tablettes et PC uniquement.

        Note

        Si l'application est destinée à fonctionner sur plusieurs appareils Universal Windows (téléphones de tailles différentes ou de résolutions différentes par exemple), il est conseillé d'utiliser une des options suivantes : "Générer une application pour téléphones, tablettes et PC", "Générer une application pour téléphones uniquement" ou "Générer une application pour tablettes et PC uniquement".
        Dans ce cas, WINDEV Mobile propose par défaut la plus petite résolution pour créer les fenêtres de l'application. L'utilisation des ancrages (voir Leçon 6.2 Interface IHM) permettra à l'application de fonctionner sur tous les supports.
    12. Dans cet exemple, nous allons choisir de générer une application pour téléphones. Sélectionnez l'option "Générer une application pour téléphones uniquement" et passez à l'étape suivante.
    13. Dans la partie gauche de l'assistant, cliquez sur "Chartes". Cette étape permet de définir la charte de programmation utilisée. Ne modifiez pas les options proposées. Passez à l'étape suivante.
    14. Cette étape permet de définir la charte graphique de l'application. Nous allons conserver "Material Design Blue Grey".
    15. Les autres étapes de l'assistant n'étant pas importantes pour notre premier projet, dans la partie gauche de l'assistant, cliquez directement sur "Fin".
    16. Cliquez sur le bouton de validation en bas de l'assistant. Le projet est automatiquement créé.
    17. La fenêtre de création d'un nouvel élément s'affiche. Cette fenêtre permet de créer tous les éléments pouvant être associés à un projet.
Ma première fenêtre

Présentation

La première fenêtre que nous allons créer permet à l'utilisateur d'afficher un message de bienvenue grâce au bouton "Afficher".
Vous pouvez être tenté de dire que c'est trop simple, trop basique, mais nous vous conseillons de réaliser cette fenêtre. Vous risquez d'être surpris par la facilité et l'intuitivité de l'éditeur de WINDEV Mobile. De plus, cette fenêtre vous permettra de découvrir des concepts fondamentaux pour la suite de ce cours et de voir tout le processus de développement d'une application Universal Windows 10 avec WINDEV Mobile.

Création de la fenêtre

  • Pour créer la fenêtre :
    1. Dans la fenêtre de création d'un nouvel élément, cliquez sur "Fenêtre" puis sur "Fenêtre".

      Note

      Ici, comme nous venons de créer un nouveau projet, la fenêtre de création d'un nouvel élément s'affiche automatiquement.
      Pour afficher la fenêtre de création d'un nouvel élément, il suffit de cliquer sur parmi les boutons d'accès rapide de WINDEV Mobile :
    2. L'assistant de création d'une fenêtre s'affiche.
    3. Sélectionnez "Vierge" dans la liste des fenêtres. Le gabarit "Material Design Blue Grey" que nous avons sélectionné lors de la création du projet est sélectionné par défaut dans le champ "Gabarit" (présent en bas à droite de l'assistant).

      Note

      Les gabarits permettent de créer rapidement des interfaces professionnelles. Un gabarit définit le look de la fenêtre mais également le look de tous les champs qui seront utilisés dans cette fenêtre. Ainsi, aucune faute de goût n'est possible.
    4. Validez. La fenêtre est automatiquement créée sous l'éditeur. La fenêtre de sauvegarde de l'élément créé apparaît. Cette fenêtre affiche :
      • le titre de l'élément : Pour une fenêtre, ce titre sera affiché dans l'Action Bar de la fenêtre.
      • le nom de l'élément qui correspond au nom de la fenêtre. Ce nom sera utilisé en programmation.
      • l'emplacement de l'élément. Cet emplacement correspond au répertoire de sauvegarde du fichier physique correspondant à l'élément. La fenêtre est un fichier d'extension "WDW", enregistré dans le répertoire du projet.
    5. Indiquez le titre de l'élément "Bienvenue" (ici, l'élément correspond à la fenêtre WINDEV Mobile). Le nom de l'élément "FEN_Bienvenue" est automatiquement proposé.

      Note

      Observez bien le nom de la fenêtre que WINDEV Mobile propose par défaut : ce nom commence par les lettres "FEN_". Ce préfixe est automatiquement ajouté car le projet utilise une charte de programmation.
      La charte de programmation permet de définir un préfixe pour chaque type d'objet et ainsi d'identifier rapidement l'élément manipulé :
      • une fenêtre commence par "FEN_",
      • un bouton commence par "BTN_",
      • etc.
      Si vous ne voulez pas utiliser cette charte, il suffit de la débrancher : sous le volet "Projet", dans le groupe "Autres actions", déroulez l'option "Charte" et décochez l'option "Utiliser la charte".
    6. Validez les informations affichées dans la fenêtre de sauvegarde en cliquant sur le bouton vert.

Affichage d'un message

Vous allez maintenant créer un bouton permettant d'afficher un message.
  • Pour créer le bouton "Afficher" :
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur . Le bouton apparaît en création sous la souris.
    2. Déplacez la souris dans la fenêtre vers la position où le champ doit être créé (par exemple en haut de la fenêtre). Pour poser le champ dans la fenêtre, il suffit de cliquer dans la fenêtre.
    3. Faites un clic droit de la souris sur le champ que vous venez de créer. Le menu contextuel du champ apparaît. Dans ce menu contextuel, sélectionnez l'option "Description". La fenêtre de description du bouton s'affiche.
  • Modifiez les caractéristiques du champ en saisissant les informations suivantes :
    1. Ce champ a pour nom : "BTN_Afficher".
    2. Ce champ a pour libellé : "Afficher"

Note

Pour modifier le nom et le libellé du bouton, nous avons utilisé la fenêtre de description du champ (également appelée "Fenêtre à 7 onglets").
Il est également possible de modifier le nom et le libellé du bouton directement depuis la fenêtre en cours d'édition :
  1. Cliquez sur le champ pour le sélectionner.
  2. Appuyez sur la touche Entrée ou Espace : le libellé passe en édition.
  3. Saisissez le nouveau libellé et validez.
  • Validez la fenêtre de description du champ (bouton vert). Le nouveau libellé du champ apparaît sous l'éditeur de fenêtres.
  • Nous allons afficher un message dans une boîte de dialogue (une mini-fenêtre proposée par le système). Pour cela, nous allons utiliser notre première fonction WLangage : la fonction Info.

    Note

    Le WLangage est le langage de programmation fourni avec WINDEV Mobile. C'est un langage de 5° génération (L5G) possédant des ordres évolués.
    1. Sélectionnez le champ si nécessaire.
      Remarques :
      • Lorsque le champ est sélectionné, des poignées apparaissent autour du champ.
      • Pour sélectionner un champ, il suffit de cliquer dessus avec la souris.
    2. Affichez le menu contextuel du champ (clic droit de la souris).
    3. Sélectionnez l'option "Code". Cette option ouvre l'éditeur de code de WINDEV Mobile, dans lequel toutes les instructions WLangage peuvent être saisies.

      Note

      L'éditeur de code propose différents traitements pour chaque type de champ. Ces traitements correspondent aux événements liés au champ.
      Ainsi, pour le champ "Bouton", deux traitements sont affichés :
      • Initialisation, exécuté lors de l'affichage de la fenêtre.
      • Clic sur le bouton, exécuté lorsque l'utilisateur clique sur le bouton.
      Remarque : Des traitements supplémentaires peuvent être ajoutés si nécessaire.
    4. Dans le traitement "Clic" du champ "BTN_Afficher", saisissez le code suivant :
      Info("Bonjour")
Remarque sur l'aide à la saisie : Dès la saisie des deux premiers caractères, WINDEV Mobile propose tous les mots du vocabulaire WLangage contenant ces caractères. L'assistance au développement est poussée très loin. Vous ne pouvez plus vous tromper en saisissant le nom d'un élément : les erreurs de syntaxes sont minimisées. Il suffit de sélectionner le mot désiré et de valider par la touche Entrée. Vous pourrez ainsi vous concentrer sur l'algorithme.

Note

En saisissant ce code sous l'éditeur de code, vous constatez que les différents éléments saisis utilisent des couleurs différentes. C'est la coloration syntaxique. L'éditeur de code permet ainsi d'identifier rapidement les différents éléments manipulés par le code :
  • les fonctions du WLangage apparaissent en bleu,
  • les chaînes de caractères (entre guillemets) apparaissent en violet,
  • les noms de champs apparaissent en cyan.
Ces couleurs peuvent être modifiées élément par élément dans les options de l'éditeur de code (sous le volet "Accueil", dans le groupe "Environnement", déroulez "Options" et sélectionnez "Options de l'éditeur de code").
La fonction Info affiche le message passé en paramètre.
  • Enregistrez les modifications en cliquant sur parmi les boutons d'accès rapide ou en utilisant la combinaison de touches Ctrl + S.
  • Fermez l'éditeur de code (croix en haut à droite de l'éditeur de code). L'éditeur de fenêtres réapparaît.
Premier test
Pour une application Universal Windows 10, WINDEV Mobile permet de tester directement l'application sur le poste de développement grâce au mode simulation. Ce test réalise une simulation d'un périphérique Universal Windows 10 sur le poste de développement.
  • Nous allons tester la fenêtre en mode simulation.
    1. Cliquez sur parmi les boutons d'accès rapide (ou utilisez la touche F9).
    2. Validez si nécessaire le message d'information concernant le mode simulateur.
    3. Choisissez si nécessaire le mode de gestion de l'éditeur lors du test (iconisation ou non de l'éditeur).
    4. La fenêtre que vous avez créée se lance en exécution.
    5. Cliquez sur le bouton "Afficher".
    6. Validez la fenêtre système qui s'affiche.
  • Tout développeur sait que tester un programme est souvent long, voire fastidieux. Avec WINDEV Mobile, en UN CLIC, vous testez la fenêtre, l'état ou la procédure que vous êtes en train de réaliser. C'est à la fois simple et rapide !
  • Cliquez sur le bouton "x" situé dans la coque du simulateur pour fermer la fenêtre.
  • L'éditeur de WINDEV Mobile réapparaît.
Premier déploiement sur l'appareil

Principe

Une application Universal Windows 10 peut être exécutée directement sur le poste de développement si le système utilisé est Windows 10. Pour exécuter l'application de manière autonome sur le poste de développement, il suffit de :
  • Générer l'application Universal Windows 10 sous WINDEV Mobile.
  • Le programme sera ensuite installé sur le poste. Il fonctionnera de manière autonome.
Nous allons voir en détail ces différentes étapes.

Mise en place

  • Pour générer l'application Universal Windows 10 :
    1. Sous le volet "Projet", dans le groupe "Génération", cliquez sur "Générer" (vous pouvez également cliquer sur parmi les boutons d'accès rapide).
    2. WINDEV Mobile propose de sélectionner la première fenêtre du projet. Pour notre exemple, sélectionnez "FEN_Bienvenue" et validez (bouton vert).
    3. L'assistant de génération d'une application Universal Windows 10 se lance.
    4. La première étape de l'assistant permet de sélectionner le mode de génération de l'application. Il est possible de :
      • Générer et déployer l'application sur une machine locale : nous allons choisir cette option.
      • Générer l'application pour Windows Store : cette option permet de générer l'application pour la diffuser via le store de Windows. Pour plus de détails, consultez Déployer sur le store.
    5. Passez à l'étape suivante.
    6. Indiquez les informations générales de l'application : le nom de l'application, la société et le copyright. Passez à l'étape suivante.
    7. Définissez le numéro de version de l'application. Passez à l'étape suivante.
    8. Indiquez le chemin des différentes images de lancement de l'application : image de la tuile, splash screen, ... Des images par défaut sont automatiquement créées pour votre application. Passez à l'étape suivante.
    9. Indiquez également les caractéristiques de la tuile associée à l'application. Passez à l'étape suivante.
    10. Indiquez le message d'erreur personnalisé affiché par l'application. Passez à l'étape suivante.
    11. Vous pouvez intégrer des fichiers spécifiques (fichiers de données, images, ...). Dans notre exemple, nous n'utiliserons pas cette possibilité. Conservez les options par défaut. Passez à l'étape suivante.
    12. Cette étape permet d'indiquer les fonctionnalités utilisées par l'application. Dans cet exemple, ne cochez rien et passez à l'étape suivante.
    13. Les applications Universal Windows 10 doivent être signées pour fonctionner. L'assistant propose de générer un certificat ou d'utiliser un certificat existant. Dans ce dernier cas, il suffit de sélectionner le certificat voulu.
      Attention : Il est nécessaire de posséder et de générer un certificat sur le poste de développement pour signer l'application.
      Pour générer un nouveau certificat :
      • Indiquez le nom du certificat à générer.
      • L'étape suivante de l'assistant permet de créer le certificat.
      • Cliquez sur le bouton "Créer le certificat". L'explorateur Windows s'ouvre et affiche le certificat créé.
      • Dans l'explorateur, affichez le menu contextuel du fichier (clic droit) et sélectionnez l'option "Installer le certificat". L'assistant d'importation du certificat se lance.
      • Dans l'assistant, sélectionnez l'emplacement de stockage "Ordinateur local". Cliquez sur "Suivant".
      • Sélectionnez l'option "Placer tous les certificats dans le magasin suivant".
      • Cliquez sur le bouton "Parcourir" et sélectionnez le magasin "Autorités de certification racines de confiance".
      • Cliquez sur le bouton "Suivant" jusqu'à la fin de l'assistant. Un message apparaît indiquant que l'importation a réussi.
      • Dans l'assistant, cochez l'option "Le certificat a été installé avec succès" et passez à l'étape suivante.
    14. Validez la génération de l'application. L'assistant offre la possibilité de réaliser une sauvegarde du projet.
    15. L'assistant propose de déployer l'application générée. Il est possible de :
      • Déployer et lancer l'application sur la machine locale.
      • Déployer l'application sur un téléphone connecté en USB.
      • Déployer l'application sur un téléphone réseau.
    16. Sélectionnez "Déployer et lancer l'application sur la machine locale" et passez à l'étape suivante. Activez le mode développeur si nécessaire et validez l'assistant.
    17. La tuile correspondante est automatiquement créée sur l'écran d'accueil de Windows 10 et l'application est automatiquement lancée.

Note

Pour plus de détails sur les différents modes de déploiement d'une application Universal Windows 10, consultez Application Universal Windows 10 App : Plateforme de déploiement.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 24
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire