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 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 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 24 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 8.
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 8.
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, sous le volet "Accueil", dans le groupe "Aide en ligne", déroulez "Guide d'auto-formation" puis sélectionnez "Mon projet iOS (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 l'icône "Créer un projet" puis sur "Application iOS".
    3. 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 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. 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". 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 [...].

      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.
    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" ou "Générer une application pour tous les iPad".
        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 IHM et Leçon 5.2 Développement de l'application) permettra à l'application de fonctionner sur tous les supports.
    8. Pour cet exemple, sélectionnez "Générer une application pour tous les iPhone".
    9. 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 à l'aide des flèches situées en bas.
    10. Cette étape permet de définir la charte graphique de l'application. Nous allons choisir "ActivPhone 7".
    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 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 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". Le gabarit utilisé est affiché en bas à droite de l'assistant. Le gabarit "ActivPhone 7" 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 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 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 . 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 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 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 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 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 (à 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 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 iOS sur le poste de développement. Ce test est utile quand le développeur ne dispose pas de Mac pour compiler l'application. Cependant, ce test ne permet pas d'utiliser les composants matériels de l'appareil (GPS, SMS, appareil photo, ...).
  • 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. 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.
  • 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, 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 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 vert).
    3. L'assistant de génération d'une application iPhone/iPad se lance.
    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. Sélectionnez le mode de gestion des images de lancement :
      • Utiliser le système recommandé par Apple : cette option est disponible uniquement à partir d'iOS 8 et permet le redimensionnement de l'application.
      • Utiliser l'ancien système : cette option permet d'être compatible avec toutes les versions de iOS.
    7. Pour notre exemple, sélectionnez "Utiliser le système recommandé par Apple" et passez à l'étape suivante.
    8. Indiquez les caractéristiques de l'image de lancement (splash screen).
    9. Passez à l'étape suivante. Indiquez le numéro de version de l'application générée.
    10. 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.
    11. 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.
    12. Passez à l'étape suivante. Cette étape permet de définir les options de signature nécessaires pour Xcode 8.
      Pour plus de détails sur les options à choisir, consultez Signature des applications iOS.
    13. Validez l'assistant. 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 23
Documentation également disponible pour…
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire