|
|
|
|
|
|
|
|
|
|
- Leçon 1 - Mon premier projet Android/iOS
- Projet multiplateforme
- Création du projet
- Première fenêtre : afficher un message
- Comment créer la fenêtre ?
- Affichage d'un message
- En résumé
Tuto - Ma première application Android/iOS
Leçon 1 - Mon premier projet Android/iOS Ce que vous allez apprendre : - Mon premier projet Android/iOS.
- Ma première fenêtre.
 1 h 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. Ce projet contiendra simplement une fenêtre permettant d'afficher un message. La différenciation des plateformes sera effectuée uniquement lors de la génération et lors du déploiement de l'application. Le déploiement d'une application sera abordé dans les tutos suivants : Avant tout développement avec WINDEV Mobile, il est nécessaire de créer un projet. Nous allons créer notre premier projet pour Android et iOS.
 Avertissement
Ce projet sera utilisé dans les différentes leçons de ce tuto.
Pour créer le projet, il suffit de suivre les différentes étapes de l'assistant de création de projet :- Lancez WINDEV Mobile si nécessaire.
- Affichez la page d'accueil de WINDEV Mobile (Ctrl + <).
- Cliquez sur "Créer un projet" (icône
 ) puis sur "Application Android ou iOS".
- L'assistant de création de projet se lance.
 Tous les renseignements indiqués dans cet assistant pourront être modifiés par la suite. - La première étape de l'assistant permet de définir la plateforme d'exécution du projet :
Nous créons une application multiplateforme, sélectionnez "Multiplateforme Android et iOS" et passez à l'étape suivante.
- L'assistant propose de choisir le type d'appareils concernés par le projet :
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 permettra à l'application de fonctionner sur tous les supports. - 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.
- L'assistant propose ensuite de définir la charte graphique. Sélectionnez "Phoenix".
La charte graphique est définie notamment grâce aux gabarits. Les gabarits permettent d'obtenir rapidement des UI (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. - Passez à l'étape suivante.
- L'assistant propose de saisir le nom du projet et son emplacement. Dans notre cas, ce projet va 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 [...].
- Cliquez sur le bouton "Terminer".
Les actions suivantes sont alors automatiquement effectuées : - Le projet est automatiquement créé.
- Deux configurations de projet sont également créées :
- une configuration "Application iOS", sélectionnée automatiquement.
- une configuration "Application Android".
Nous verrons ces configurations de projet en détail dans la suite de ce tuto. - La fenêtre de création d'un nouvel élément s'affiche. Elle permet de créer tous les éléments pouvant être associés à un projet. Ne fermez pas cette fenêtre, nous allons l'utiliser pour créer la première fenêtre de notre application.
Première fenêtre : afficher un message La première fenêtre que nous allons créer permet à l'utilisateur d'afficher un message de bienvenue grâce au bouton "Afficher". Comment créer la fenêtre ? Pour créer la fenêtre, nous allons utiliser la fenêtre de création d'un nouvel élément : - Dans la fenêtre de création d'un nouvel élément, cliquez sur "Fenêtre" puis sur "Fenêtre". L'assistant de création d'une fenêtre s'affiche.
- 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.
- 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 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 ici 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 de l'élément (par défaut, le répertoire du projet)
Pour notre exemple : - Indiquez le titre de l'élément : "Bienvenue". Le nom de l'élément est automatiquement proposé : "FEN_Bienvenue".
- Validez.
A savoir :
Le nom de la fenêtre (qui sera utilisé par exemple en programmation) est automatiquement déduit du titre de l'élément. Si ce nom ne vous convient pas, il est possible de le modifier et de spécifier un nom différent du titre de l'élément.
La fenêtre est affichée dans l'éditeur de fenêtres. La configuration par défaut étant une configuration iOS, elle adopte le look des fenêtres iOS. 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, etc.
- La zone d'affichage de la fenêtre, qui va contenir les différents champs de votre application.
Affichage d'un message Notre première fenêtre est créée. Nous allons maintenant créer un champ Bouton permettant d'afficher un message. Pour créer le champ Bouton "Afficher" : - Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur
 . Le champ apparaît en création sous la souris. - 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. Le champ est créé et des poignées sont affichées pour indiquer que le champ est sélectionné.
Comment sélectionner un champ ?
Pour sélectionner un champ, il suffit de cliquer sur le champ avec la souris. Des poignées de sélection apparaissent alors sur les différents côtés du champ. Si le champ est déjà sélectionné, un clic sur le champ permet d'éditer le libellé.
Nous allons maintenant modifier les caractéristiques de ce champ : - 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 :
- Ce champ a pour nom : "BTN_Afficher".
- Ce champ a pour libellé : "Afficher".
- 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 : - Cliquez si nécessaire sur le champ Bouton pour le sélectionner.
- Sous le volet "Alignement" du ruban, dans le groupe "Centrage et répartition", cliquez sur "Centrer dans le parent (Horz.)".
- Le résultat est immédiat.
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.
Le positionnement vous convient ? Cliquez sur l'option.
Le positionnement ne vous convient pas ? Déplacez la souris pour ne plus survoler les options d'alignement : les champs sont replacés à leur position d'origine. Dans cette leçon, nous souhaitons afficher un message dans une boîte de dialogue lors du clic sur le bouton. Pour cela, nous allons utiliser notre première fonction WLangage, la fonction Info. - Sélectionnez le champ si nécessaire (si le champ est sélectionné, des poignées apparaissent autour du champ).
- Affichez le menu contextuel du champ (clic droit de la souris).
- Sélectionnez l'option "Code". Cette option ouvre l'éditeur de code de WINDEV Mobile, dans lequel toutes les instructions WLangage peuvent être saisies.
Cet éditeur de code permet de saisir toutes les instructions WLangage dans des événements associés aux champs. - Dans l'événement "Clic sur BTN_Afficher", saisissez le code WLangage suivant :
La fonction Info affiche le message passé en paramètre.
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. Cette leçon nous a permis de créer un projet, une fenêtre et un champ : les éléments les plus importants d'une application. Dans la prochaine leçon, nous allons tester directement le fonctionnement de cette fenêtre. Projet corrigé :
Vous voulez vérifier le résultat de vos manipulations ? Un projet corrigé est disponible. Ce projet contient la fenêtre créée dans cette leçon. Pour ouvrir le projet corrigé, dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Tuto - Ma première application Android/iOS", double-cliquez sur "Mon projet Android/iOS - Corrigé". |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|