PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Nouveauté WINDEV Mobile 25 !
  • Ce que vous allez apprendre dans cette leçon
  • Présentation
  • 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
  • Premier test
  • Premier déploiement sur l'appareil
  • Principe
  • Mise en place
  • Transférer le projet WINDEV Mobile sur le Mac
  • Compiler le projet sous Xcode
Leçon 3.1. Mon premier projet iOS
Ce que vous allez apprendre dans cette leçon
  • Configuration nécessaire.
  • Créer un projet iOS (iPhone ou iPad).
  • Ma première fenêtre.
  • Mon premier test.
  • Premier déploiement.
Durée de la leçon

Durée estimée : 40 mn
Leçon précédenteSommaireLeçon suivante
Présentation
Pour commencer à développer avec WINDEV Mobile pour une plateforme iOS, 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 iOS avec WINDEV Mobile.
Mais avant de créer notre premier projet pour iOS, une configuration du poste de développement est nécessaire.
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 25 est une application Windows utilisable sous Windows 7, 10, ...
L'application sera créée sur le PC avant d'être compilée sur un Mac.
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 minimale du système d'exploitation doit être iOS 11.
Xcode est un environnement de développement qui permet de développer des applications iOS (iPhone et iPad). Cet outil est utilisé pour compiler les applications générées avec WINDEV Mobile.
La version minimale de Xcode doit être la version 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 iOS.

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 cliquez sur "Mon projet iOS (Corrigé)".
  • Pour créer un projet :
    1. Lancez WINDEV Mobile 25 (si ce n'est déjà fait).
    2. Affichez si nécessaire 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 d'un 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 document 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 "iOS uniquement" 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 tous les iPhone et iPad.
      • Générer une application pour tous les iPhone.
      • Générer une application pour tous les iPad.
      • Générer une application pour un appareil unique précis.

        Note

        Si l'application est destinée à fonctionner sur plusieurs appareils 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 tous les iPhone et iPad",
        • "Générer une application pour tous les iPhone".
        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 3.2 Interface (UI) et Leçon 5.2 Développement de l'application) permettra à l'application de fonctionner sur tous les supports.
        Assistant de création d'un projet
    8. Pour cet exemple, sélectionnez "Générer une application pour tous les iPhone" et passez à l'étape suivante.
    9. L'assistant propose de saisir le nom du projet, son emplacement et sa description.
      Assistant de création d'un projet
      Dans notre cas, ce projet va simplement s'appeler "Mon_Projet_iOS". Par défaut, WINDEV Mobile propose de créer ce projet dans le répertoire "\Mes projets Mobile\Mon_Projet_iOS". Vous pouvez conserver cet emplacement ou le modifier grâce au bouton [...].
    10. Passez à l'étape suivante (bouton "Suivant").
    11. 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.
    12. Cette étape permet de définir la charte graphique de l'application. Nous allons choisir "Ninja".
      Sélection de la charte graphique
    13. Les autres étapes de l'assistant n'étant pas importantes pour notre premier projet, cliquez sur le bouton "Terminer". Le projet est automatiquement créé.
    14. 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 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 é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 "Ninja" que nous avons sélectionné lors de la création du projet est sélectionné par défaut. Vous pouvez choisir un autre gabarit proposé dans la liste.

      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 de sauvegarde 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". 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".

Affichage d'un message

Vous allez maintenant créer un champ Bouton permettant d'afficher un message.
  • Pour créer le champ Bouton :
    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 faire un nouveau clic gauche de souris.
    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 du 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° 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 sur le champ).
    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 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 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 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 (à gauche du ruban) ou en utilisant la combinaison de touches Ctrl + S.
  • Fermez l'éditeur de code (croix en haut à droite de l'éditeur de code). La fenêtre réapparaît.
Premier test
Pour une application iOS, WINDEV Mobile propose plusieurs types de tests :
  • Test du projet ou d'une fenêtre sur le poste de développement grâce au mode simulation. Ce test réalise une simulation d'un périphérique iOS sur le poste de développement. Ce test est utile quand le développeur ne dispose ni de Mac pour compiler l'application ni de périphérique iOS. Cependant, ce test ne permet pas d'utiliser les composants matériels de l'appareil (GPS, SMS, appareil photo, ...).
  • Test d'un projet directement sur le matériel. Ce test est utile quand le développeur ne dispose pas de Mac pour compiler l'application. Tous les composants de l'appareil sont accessibles.
  • Nous allons tester la fenêtre en mode simulation.
    1. Cliquez sur Tester la 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. La fenêtre que vous avez créée se lance en exécution, dans une coque correspondant au matériel choisi (iPad ou iPhone).
    4. Cliquez sur le bouton "Afficher".
    5. Validez la fenêtre système qui s'affiche.
      Test de la fenêtre
    6. Cliquez sur le bouton "x" situé dans la coque du simulateur pour fermer la fenêtre.
    7. L'éditeur de WINDEV Mobile réapparaît.
  • Vous possédez un iPhone ? Maintenant, testons le projet directement sur le périphérique.
  • Vérifiez tout d'abord que les conditions suivantes sont réunies :
    • l'iPhone/iPad et le poste de développement doivent être sur le même réseau (Wifi par exemple).
    • l'application WMDev doit être téléchargée sur l'iPhone/iPad (https://itunes.apple.com/fr/app/WMDev/id1437792304).
    • les ports réseau suivants doivent être ouverts :
      • 64000 (64000 à 64005 si plusieurs WINDEV Mobile sont lancés en même temps).
      • 27280
      Si un firewall est utilisé, il doit être configuré pour permettre l'utilisation de ces ports.
  • Parmi les boutons d'accès rapide, sélectionnez l'option "Déboguer sur un appareil mobile Déboguer sur un appareil mobile". La fenêtre de connexion à un appareil iOS apparaît. Cette fenêtre contient un QR code spécifique.
    Connexion à un appareil iOS
    1. Lancez WMDev sur le poste mobile (iPhone ou iPAD).
      • Cliquez sur le bouton "+" puis sur le bouton affichant un code-barres.
      • Scannez le code-barres affiché sous WINDEV Mobile dans la fenêtre de connexion à un appareil iOS.
    2. L'application mobile se lance sur le périphérique iOS.
Premier déploiement sur l'appareil

Principe

Pour exécuter l'application de manière autonome sur l'appareil, il suffit de :
  • Générer l'application iOS (ou projet Xcode) sous WINDEV Mobile.
  • Transférer le projet Xcode généré sur un poste Mac pour y être compilé.
  • Compiler le projet Xcode afin de générer le programme.
  • Le programme pourra ensuite être installé sur le matériel connecté ou lancé dans l'émulateur Xcode. 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 iOS :
    1. Sous le volet "Projet", dans le groupe "Génération", cliquez sur "Générer" (vous pouvez également cliquer sur Génération iOS 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 la fenêtre "FEN_Bienvenue" et validez (bouton "OK").
      Première fenêtre du projet
    3. L'assistant de génération d'une application iPhone/iPad se lance.
      Assistant de génération de l'application iOS
    4. La première étape de l'assistant permet de :
      • définir le nom de l'application, la société et le copyright.
      • saisir l'identifiant du bundle.

        Note

        Cet identifiant est l'identifiant unique de votre application auprès de Apple. Il se définit et s'enregistre sur le compte développeur Apple.
        Cet identifiant permettra d'enregistrer votre application pour pouvoir la tester et la déployer. Par défaut, WINDEV Mobile propose automatiquement un identifiant respectant les normes de développement Apple actuelles. Vous pouvez modifier cet identifiant.
      • saisir l'adresse email utilisée par défaut pour envoyer les éventuels rapports d'erreur générés par l'application.
    5. Passez à l'étape suivante. Vous pouvez indiquer le chemin des différentes icônes de l'application. Plusieurs icônes peuvent être fournies :
      • des icônes pour iPad et iPad Rétina (uniquement si l'application propose des fenêtres pour iPad),
      • des icônes pour tous les modèles d'iPhone (par exemple, l'iPhone 4S et l'iPhone 6 plus ont une résolution différente).
    6. Passez à l'étape suivante.
    7. Indiquez les caractéristiques de l'écran de lancement (également appelé "splash screen").
    8. Passez à l'étape suivante. Indiquez le numéro de version de l'application générée.
    9. Passez à l'étape suivante. Cette étape 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.
    10. Passez à l'étape suivante. Cette étape permet d'indiquer :
      • si l'application est autorisée à être redimensionnée ou non (Split View). Cette option permet notamment à l'utilisateur final d'afficher deux fenêtres de deux applications différentes côte à côte sur certains matériels.
      • si le partage des fichiers avec iTunes est possible. Si cette option est cochée, il sera possible de récupérer les fichiers de l'application sur le Mac lors de la synchronisation. Par exemple, si des fichiers de données ont été livrés avec l'application, l'application iTunes permettra de récupérer ces fichiers.
      • la version minimale nécessaire d'iOS pour exécuter l'application.
    11. Passez à l'étape suivante. Cette étape permet de définir les options de signature.
      Pour plus de détails sur les options à choisir, consultez Signature des applications iOS.
    12. Validez l'assistant (bouton "Terminer"). La génération est faite dans le dossier EXE du répertoire du projet. Le répertoire contenant les sources à utiliser sur le Mac s'appelle "Nom_du_projet.xcode.gen" (pour notre exemple "Mon_Projet_iOS.xcode.gen"). C'est ce répertoire qui doit être copié sur le Mac. Cliquez sur le bouton "Ouvrir le répertoire de génération".
La suite des manipulations doit être effectuée sur le Mac. Vous devez :
  • Transférer le projet WINDEV Mobile sur le Mac.
  • Compiler le projet sous Xcode.

Transférer le projet WINDEV Mobile sur le Mac

  • Pour transférer le projet WINDEV Mobile sur le MAC :
    1. Copiez le dossier complet généré dans le répertoire EXE sur un support externe (clé USB, disque dur externe, répertoire partagé avec le MAC sur le réseau). Ce répertoire a pour nom <Nom du projet>.xcode.gen.
    2. Collez ce dossier sur le MAC qui va compiler l'application.
    3. Ouvrez le dossier sur le MAC et ouvrez le fichier nommé “Nom_du_projet.xcodeproj”.
    4. Le projet s'ouvre dans Xcode.

Compiler le projet sous Xcode

WINDEV Mobile génère automatiquement un projet Xcode pour vos compilations iOS. Pour vous faciliter la mise au point des applications, WINDEV Mobile génère un “Scheme” pour Xcode.
  • Pour compiler le projet sous Xcode :
    1. Dans la liste déroulante en haut à gauche, sélectionnez les options de compilation. Sélectionnez le scheme (correspondant à votre application) puis la cible de compilation (appareil actuellement connecté ou un simulateur).
    2. Pour lancer la compilation, cliquez sur l'option de menu “Product .. Clean” puis sur l'option de menu “Product .. Build”.
    3. Un compte rendu de compilation apparaît en haut (“Succeeded” ou sinon le nombre de warnings et d'erreurs). Vous pouvez cliquer sur ces symboles pour voir la liste des erreurs/warnings.
    4. Une fois le programme compilé sans erreurs, vous pouvez lancer la simulation (Option “Product .. Run”).
      • Si la cible de compilation est le simulateur, l'application est lancée dans la fenêtre du simulateur.
      • Si la cible de compilation est l'appareil connecté, l'application est directement lancée sur l'appareil.
Vous pouvez ensuite tester votre application directement sur votre iPhone ou iPad.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 25
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire