PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • Ce que vous allez apprendre dans cette leçon
  • Présentation
  • Configuration nécessaire pour Android
  • 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 2.1. Mon premier projet Android
Ce que vous allez apprendre dans cette leçon
  • Configuration nécessaire.
  • Créer un projet Android.
  • Ma première fenêtre.
  • Mon premier test.
  • Premier déploiement.
Durée

Durée estimée : 1 h
Leçon précédenteSommaireLeçon suivante
Présentation
Pour commencer à développer avec WINDEV Mobile pour une plateforme Android, 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 Android avec WINDEV Mobile.
Mais avant de créer notre premier projet pour Android, une configuration du poste de développement est 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 (4, 5, 6, 7, ...).
  • 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é.
Mon premier projet

Création du projet

Nous allons créer notre premier projet pour Android.

Corrigé

Un projet corrigé est disponible. Pour ouvrir ce projet, sous le volet "Accueil", dans le groupe "Aide en ligne", déroulez "Guide d'auto-formation" puis sélectionnez "Mon projet Android (Corrigé)".
  • Pour créer un projet :
    1. Lancez WINDEV Mobile 23 (si ce n'est déjà fait). Si nécessaire, fermez le projet en cours pour faire apparaître la fenêtre de bienvenue.
    2. Dans la fenêtre de bienvenue, cliquez sur "Créer un projet" puis sur "Application Android".
      Fenêtre de bienvenue
    3. 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 Nouveau 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".
    4. 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_Android". Par défaut, WINDEV Mobile propose de créer ce projet dans le répertoire "\Mes projets Mobile\Mon_Projet_Android". Vous pouvez conserver cet emplacement ou le modifier grâce au bouton [...].
      Création de projet

      Express

      En version Express, le nom du projet ainsi que celui de tous les éléments du projet (fenêtres, états, ...) est préfixé par "EXPRESS_".
    5. Passez à l'étape suivante à l'aide des flèches situées en bas.
    6. L'assistant propose d'ajouter des documents. Passez à l'étape suivante à l'aide des flèches situées en bas.
    7. L'assistant propose de choisir le type d'appareils Android 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 uniquement.
      • Générer une application pour tablettes uniquement.
      • Générer une application pour un appareil unique précis.

        Note

        Si l'application est destinée à fonctionner sur plusieurs appareils Android (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 uniquement" ou "Générer une application pour tablettes 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 2.2 Interface (IHM) 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 uniquement" et passez à l'étape suivante.

      Note

      Vous possédez un appareil Android et vous souhaitez tester l'application réalisée directement sur cet appareil ? Sélectionnez l'option "Générer une application pour un appareil unique précis". L'étape suivante de l'assistant permet alors de sélectionner l'appareil voulu.
    9. Cette étape permet de définir la charte de programmation utilisée. Ne modifiez pas les options proposées. Passez à l'étape suivante.
    10. Cette étape permet de définir la charte graphique de l'application. Nous allons conserver "Material Design Blue Grey".
      Choix de la charte graphique
    11. 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".
    12. Cliquez sur le bouton de validation en bas de l'assistant. Le projet est automatiquement créé.
    13. 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 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 Nouveau parmi les boutons d'accès rapide de WINDEV Mobile :
      Nouvel élément
    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 Grey" 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" (ici, l'élément correspond à la fenêtre WINDEV Mobile). Le nom de l'élément "FEN_Bienvenue" est automatiquement proposé.
      Sauvegarde 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 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 Création d'un bouton. 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 :
    Description d'un 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 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è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 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 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 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 Sauver 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 Android, 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 Android sur le poste de développement. Ce test est utile quand le développeur ne dispose pas de périphérique Android. Cependant, ce test ne permet pas d'utiliser les composants matériels de l'appareil (GPS, SMS, appareil photo, ...).

Note

WINDEV Mobile permet également de réaliser un test de l'application via l'émulateur Android (AVD) fourni avec le SDK.
Pour plus de détails, consultez l'aide en ligne.
  • Nous allons tester la fenêtre en mode simulation.
    1. Cliquez sur Go de fenêtre 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.
      Test d'une fenêtre
  • 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

Pour exécuter l'application de manière autonome sur l'appareil Android, il suffit de :
  • Connecter l'appareil via un port USB.
  • Générer l'application. Un fichier "apk" va être créé. Ce fichier contient tous les éléments nécessaires à l'exécution de l'application sur un appareil Android.
  • Sélectionner votre appareil à la fin de la génération. La copie de l'application (fichier "apk") peut prendre quelques secondes.
Nous allons voir en détail ces différentes étapes.

Note

Attention : L'activation du débogage USB est nécessaire pour lancer les tests sur le téléphone. Si cette opération n'est pas effectuée, le téléphone ne sera pas détecté par WINDEV Mobile.
Pour activer le débogage USB :
  1. Sur le téléphone, sélectionnez le menu "Paramètres".
  2. Sélectionnez le choix "A propos de l'appareil".
  3. Cliquez plusieurs fois sur l'option "Numéro de build" pour activer le mode développeur.
  4. Remontez d'un niveau.
  5. Le choix "Option de développement" apparaît. Sélectionnez cette option.
  6. Cochez l'option "Débogage USB".
Remarque : Selon la version du téléphone et sa marque, les manipulations à effectuer peuvent varier. Par exemple, pour un matériel de type Samsung Galaxy Notes 3, il est nécessaire de "tapoter" plusieurs fois le champ "Numéro de version" de l'option "A propos de l'appareil" afin d'activer le choix "Option de développement". Dans tous les cas, une recherche Google avec "débogage usb <nom périphérique>" permet d'avoir le mode opératoire adapté au matériel utilisé.

Mise en place

  • Pour générer l'application Android :
    1. Sous le volet "Projet", dans le groupe "Génération", cliquez sur "Générer" (vous pouvez également cliquer sur Génération Android 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).
      Première fenêtre
    3. L'assistant de génération d'une application Android se lance.
    4. La première étape de l'assistant consiste à vérifier les outils nécessaires à la génération de l'application Android.
      Outils de génération
      L'assistant propose de :
      • Télécharger et installer automatiquement le SDK Android et Gradle : dans ce cas, vous devez uniquement valider la licence. WINDEV Mobile s'occupe de tout. Si une mise à jour est disponible, l'assistant de génération vous proposera automatiquement de réaliser les mises à jour nécessaires. Seule une connexion Internet est nécessaire. Cette option est disponible uniquement si vous n'avez pas précédemment téléchargé et installé Gradle.
      • Utiliser les outils installés automatiquement. Cette option est disponible uniquement si vous avez téléchargé et installé les outils lors d'une précédente génération.
      • Spécifier l'emplacement des outils déjà installés sur votre poste. Dans ce cas, il suffit de préciser les chemins d'installation de Gradle et du SDK Android.
    5. Sélectionnez l'option correspondant à votre configuration et passez à l'étape suivante.
      Remarque : Si vous avez choisi de télécharger et installer les outils, le passage à l'étape suivant peut être relativement long et demander la validation de la licence.
    6. L'étape suivante de l'assistant permet de :
      • définir le nom de l'application (affiché sous l'icône permettant de lancer l'application) et le package correspondant.
      • sélectionner l'icône de l'application dans le catalogue d'images de WINDEV Mobile.
        Informations générales
    7. Passez à l'étape suivante en cliquant sur les touches fléchées au bas de la fenêtre. Cette étape permet de définir :
      • le splash screen de l'application,

        Express

        Remarque : Le splash screen de l'application n'est pas disponible en version Express.
      • les informations enregistrées dans le manifeste,
      • le mode de lancement de l'application (lancement au démarrage du périphérique ou non).
    8. Passez à l'étape suivante. L'assistant permet de définir le numéro de version de l'application.
    9. Passez à l'étape suivante. Cette étape permet de signer l'application. L'assistant propose par défaut une signature générique, utilisable pour les tests de l'application. Pour une diffusion de l'application, il est nécessaire de posséder une signature spécifique. Pour plus de détails, consultez l'aide en ligne.

      Express

      Remarque : La signature de l'application n'est pas disponible en version Express.
    10. Passez à l'étape suivante. L'assistant permet d'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.
    11. Passez à l'étape suivante. L'assistant permet d'intégrer des librairies spécifiques. Conservez les options par défaut.
    12. Passez à l'étape suivante. L'assistant permet d'intégrer des dépendances Maven utilisées par le projet. Conservez les options par défaut.
    13. Passez à l'étape suivante. L'assistant permet de définir les permissions de l'application. Par défaut, selon les fonctions WLangage utilisées dans l'application, WINDEV Mobile détecte les permissions nécessaires.
    14. Passez à l'étape suivante. Il est possible de restreindre le téléchargement de l'application sur Google Play store aux matériels disposant des fonctionnalités utilisées. Conservez les options par défaut.
    15. Passez à l'étape suivante. L'assistant permet de configurer les options du SDK Android. Conservez les options par défaut.
      Configuration avancée
    16. Passez à l'étape suivante.
    17. Terminez l'assistant. La génération est automatiquement effectuée en tâche de fond. L'icône Génération en cours indique que la génération est en cours.
    18. Lorsque la génération est terminée, une fenêtre de type popup est affichée sous l'éditeur :
      Génération terminée
    19. Pour copier et exécuter l'application directement sur l'appareil relié au poste ou sur un émulateur, cliquez sur “Déployer”.
    20. Une nouvelle fenêtre apparaît permettant de sélectionner le périphérique d'exécution. Si vous possédez un appareil Android connecté au poste de développement, sélectionnez le matériel connecté au PC.
Voilà, notre première application est générée et exécutée sur le périphérique Android.

Note

Pour tester directement votre application sur le téléphone mobile, utilisez l'option "GO - Tester le projet (appareil mobile)" : la génération sera effectuée et l'application sera copiée et exécutée sur le téléphone mobile connecté au poste en cours.
Tester le projet (appareil mobile
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 23
Documentation également disponible pour…
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire