• Configuration nécessaire.
• Créer un projet Android/iOS.
• Ma première fenêtre.

	Durée estimée : 1 h

Configuration nécessaire pour Android

• 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 (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.

Configuration nécessaire pour iOS

• 1 PC
• 1 Mac
• 1 iPhone et/ou iPad (optionnel)

Création du projet

	Corrigé	Un projet corrigé est disponible. Pour ouvrir ce projet : Affichez la page d'accueil de WINDEV Mobile (Ctrl + <). 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 28 (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" (icône ) puis sur "Application Android ou iOS".
     
  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 : Cliquez sur parmi les boutons d'accès rapide du menu de WINDEV Mobile. 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 :
     
     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.3 Interface (UI) et Leçon 4.2 Développement de l'application) permettra à l'application de fonctionner sur tous les supports.

       
  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\Mon_Projet_iOS_Android". Vous pouvez conserver cet emplacement ou le modifier grâce au bouton [...].
     
  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 "Phoenix".
      
  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éé. Deux configurations de projet sont automatiquement créées :
      • une configuration "Application iOS", sélectionnée automatiquement.
      • une configuration "Application Android".
      Les assistants de création de fenêtres, de génération (ou autres) proposeront automatiquement les options correspondant à la configuration en cours sous l'éditeur.
  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.

Présentation

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. Dans la liste des fenêtres proposées, sélectionnez "Vierge" (la configuration par défaut sélectionnée étant "iOS", l'assistant propose de créer une fenêtre pour iPhone). Le nom du gabarit utilisé est affiché en bas à droite de l'assistant. Le gabarit "Phoenix" 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".
     
     
     

     	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

• Pour créer le champ Bouton "Afficher" :
  1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur . 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 :
  
  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 : Cliquez sur le champ pour le sélectionner. Appuyez sur la touche Entrée ou Espace : le libellé passe en édition. 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.

• Pour améliorer l'UI de notre première fenêtre, nous allons centrer le champ Bouton dans la fenêtre :
  1. Cliquez si nécessaire sur le champ Bouton pour le sélectionner.
  2. Sous le volet "Alignement" du ruban, dans le groupe "Centrage et répartition", cliquez sur "Centrer dans le parent (Horz.)".
  3. Le résultat est immédiat.

	Note	WINDEV Mobile propose de nombreuses options d'alignement. Si vous ne savez pas quel alignement choisir, survolez les différentes options proposées par le volet "Alignement" de WINDEV Mobile. Lors du survol avec la souris d'une option, les champs sélectionnés dans la fenêtre sont automatiquement positionnés et/ou redimensionnés en fonction de l'option survolée. Si le positionnement vous convient, il suffit de cliquer sur l'option. Si le positionnement ne vous convient pas, il suffit de ne plus survoler les options d'alignement : les champs sont replacés à leur position d'origine.

• 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")

	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").

• 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.