PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Nouveauté WINDEV Mobile 26 !
  • Ce que vous allez apprendre dans cette leçon
  • Présentation
  • Configuration nécessaire
  • Configuration nécessaire pour Android
  • Configuration nécessaire pour iOS
  • Mon premier projet
  • Création du projet
  • Ma première fenêtre
  • Présentation
  • Création de la fenêtre
  • Affichage d'un message
Leçon 2.1. Mon premier projet Android/iOS
Ce que vous allez apprendre dans cette leçon
  • Configuration nécessaire.
  • Créer un projet Android/iOS.
  • Ma première fenêtre.
Durée

Durée estimée : 1 h
Leçon précédenteSommaireLeçon suivante
Présentation
Pour commencer à développer avec WINDEV Mobile, nous allons simplement créer un premier projet. Ce projet sera un projet multiplateforme utilisable aussi bien sur une plateforme Android que sur une plateforme iOS. En effet, la plupart du temps, lors du développement d'une application pour Mobile, cette application doit fonctionner à la fois sur Android et sur iOS.
Avec WINDEV Mobile, pas besoin de développer deux projets différents, de les maintenir et de les faire évoluer en parallèle. Il suffit de créer un seul projet associé à plusieurs plateformes, par exemple Android et iOS : c'est un projet multiplateforme. La différenciation des plateformes sera effectuée uniquement lors de la génération et lors du déploiement de l'application.

Note

Nous avons choisi de créer dans ce cours un projet multi-plateforme. WINDEV Mobile permet également de créer :
  • Un projet uniquement pour Android,
  • Un projet uniquement pour iOS.
La création d'un projet uniquement pour Android ou uniquement pour iOS est similaire à celle présentée dans cette leçon.
Le projet que nous allons créer contiendra simplement une fenêtre permettant d'afficher un message.
Mais avant de créer notre premier projet, regardons la configuration nécessaire pour développer une application Android et/ou iOS.
Configuration nécessaire

Configuration nécessaire pour Android

Pour développer une application pour la plateforme Android, il est nécessaire d'installer sur le poste de développement les éléments suivants :
  • Le JDK : Le JDK (Java Development Kit) distribué par Oracle est utilisé pour compiler les fichiers Java générés.
  • Le SDK Android de Google : Le SDK Android (Software Development Kit ou Kit de développement logiciel) est un ensemble de fichiers et d'applications distribué par Google afin de permettre la compilation d'applications pour le système d'exploitation Android.
    Attention : Le SDK Android est composé de parties correspondant aux versions des plateformes des matériels (5, 6, 7, ...).
    Le téléchargement et l'installation du SDK Android sont proposés si nécessaire lors de la génération de l'application Android depuis WINDEV Mobile.
  • L'outil Gradle : Cet outil est nécessaire à la compilation et à la génération des applications Android. Le téléchargement et l'installation de Gradle sont proposés si nécessaire lors de la génération de l'application Android depuis WINDEV Mobile.
Pour plus de détails (adresses de téléchargement, ...), consultez Installation des outils de développement Android.
Après l'installation du JDK et du SDK, le redémarrage de la machine est conseillé.

Configuration nécessaire pour iOS

Pour développer une application WINDEV Mobile pour iPhone/iPad, il est nécessaire de posséder :
  • 1 PC
  • 1 Mac
  • 1 iPhone et/ou iPad (optionnel)

Pourquoi un PC ?
WINDEV Mobile 26 est une application Windows, utilisable sous Windows Vista, 7, 8, 10.
L'application sera créée sur le PC avant d'être compilée sur un Mac (Projet, Analyse, Fenêtres, ...).
Ce PC ne nécessite aucune installation d'outils Mac/Apple.

Pourquoi un Mac ?
Un Mac est nécessaire car il faut compiler le projet généré sur le PC dans un compilateur spécifique pour générer des applications iOS. La version minimum du système d'exploitation doit être MacOs Catalina.
Xcode est le compilateur Mac pour générer des programmes qui fonctionnent sous le système iOS (c'est-à-dire qui s'exécutent sur iPhone et iPad).
La version minimum de Xcode préconisée doit être la 11.
Pour plus de détails (adresses de téléchargement, ...), consultez Compiler un projet WINDEV Mobile sous Xcode.
Mon premier projet

Création du projet

Nous allons créer notre premier projet pour Android et iOS.

Corrigé

Un projet corrigé est disponible. Pour ouvrir ce projet :
  1. Affichez la page d'accueil de WINDEV Mobile (Ctrl + <).
  2. Cliquez sur "Tutoriel" puis dans la zone "Partie 2 - Leçon 2.1 - Ma première application Android/iOS", double-cliquez sur "Mon projet Android/iOS (Corrigé)".
  • Pour créer un projet multiplateforme Android / iOS :
    1. Lancez WINDEV Mobile 26 (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 "Application Android ou iOS".
      Page d'accueil
    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

      Astuce : Autre méthode pour créer un projet :
      1. Cliquez sur Créer un élément 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 définir la plateforme d'exécution du projet :
      Plateforme d'exécution
      Dans notre cas, sélectionnez "Multiplateforme Android et iOS" et passez à l'étape suivante.
    6. L'assistant propose de créer un projet vierge ou basé sur un exemple. Choisissez "Créer un projet vierge" et passez à l'étape suivante.
    7. L'assistant propose de choisir le type d'appareils concernés par le projet :
      • Générer une application pour téléphones et tablettes.
      • Générer une application pour téléphones.
      • Générer une application pour tablettes.

        Note

        Si l'application est destinée à fonctionner sur plusieurs appareils Android et/ou iOS (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 et tablettes",
        • "Générer une application pour téléphones".
        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 2.2 Interface (UI) et Leçon 5.2 Développement de l'application) permettra à l'application de fonctionner sur tous les supports.
        Choix des appareils
    8. 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" et passez à l'étape suivante.
    9. L'assistant propose de saisir le nom du projet, son emplacement et sa description. Dans notre cas, ce projet va simplement s'appeler "Mon_Projet_iOS_Android". Par défaut, WINDEV Mobile propose de créer ce projet dans le répertoire "\Mes projets Mobile\Mon_Projet_iOS_Android". Vous pouvez conserver cet emplacement ou le modifier grâce au bouton [...].
      Assistant de création d'un projet
    10. Passez à l'étape suivante.
    11. L'assistant propose d'ajouter des documents. Passez à l'étape suivante.
    12. Cette étape permet d'utiliser le Gestionnaire de Sources (GDS). Dans cet exemple, nous ne l'utiliserons pas. Sélectionnez "Non, ne pas utiliser le GDS". Passez à l'étape suivante.

      Express

      Remarque : Le Gestionnaire de Sources (GDS) n'est pas disponible en version Express.
    13. 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 choisir "Material Design Blue 2".
      Choix de la charte graphique
    15. Les autres étapes de l'assistant ne sont pas importantes pour notre premier projet. Cliquez directement sur le bouton "Terminer". Le projet est automatiquement créé.
    16. 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 Android/iOS 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 Créer un nouvel élément parmi les boutons d'accès rapide de WINDEV Mobile :
      Boutons d'accès rapide
    2. L'assistant de création d'une fenêtre s'affiche.
    3. Dans la liste des fenêtres proposées, sélectionnez "Vierge". Le gabarit utilisé est affiché en bas à droite de l'assistant. Le gabarit "Material Design Blue 2" que nous avons sélectionné lors de la création du projet est sélectionné par défaut.

      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 et permet de renseigner :
      • 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". Le nom de l'élément est automatiquement proposé : "FEN_Bienvenue".
      Enregistrement d'un élément

      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 l'enregistrement de la fenêtre en cliquant sur le bouton "OK".
    7. La fenêtre est affichée dans l'éditeur de fenêtres. Cette fenêtre est composée de plusieurs zones :
      • La barre système, dans laquelle l'heure est affichée.
      • L'Action Bar. Les "Action Bars" remplacent la barre de titre d'une fenêtre et permettent d'afficher plusieurs informations : l'icône de l'application, le titre de la fenêtre, certaines options de menu, le menu déroulant de votre fenêtre.
      • La zone d'affichage de la fenêtre, qui va contenir les différents champs de votre application.

Affichage d'un message

Vous allez maintenant créer un champ Bouton permettant d'afficher un message.

  • Pour créer le champ Bouton "Afficher" :
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur Créer un champ Bouton. Le champ 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 champ Bouton s'affiche.
  • Modifiez les caractéristiques du champ en saisissant les informations suivantes :
    Description d'un champ Bouton
    1. Ce champ a pour nom : "BTN_Afficher".
    2. Ce champ a pour libellé : "Afficher".

Note

Pour modifier le nom et le libellé du champ 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 champ 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 "OK"). 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ème 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 événements pour chaque type de champ. Ce sont les événements WLangage liés au champ.
      Ainsi, pour le champ "Bouton", deux événements sont affichés :
      • "Initialisation", exécuté lors de l'affichage de la fenêtre.
      • "Clic", exécuté lorsque l'utilisateur clique sur le champ.
      Remarque : Des événements supplémentaires peuvent être ajoutés si nécessaire.
    4. Dans l'événement "Clic" du champ "BTN_Afficher", saisissez le code WLangage 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 syntaxe 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 WLangage 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 Enregistrer l'élément 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.
La leçon suivante va nous permettre de tester immédiatement ce projet.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 26
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire