Tutoriel mobile : Création d'une application mobile FireMonkey (iOS et Android)

De Appmethod Topics
Aller à : navigation, rechercher

Remonter à Tutoriels mobiles : Développement d'applications mobiles (iOS et Android)


Cette rubrique décrit comment créer une application mobile "Hello World" pour la plate-forme cible iOS ou Android.

Avant de commencer

Pour développer des applications mobiles (iOS et Android) en utilisant Appmethod, vous devez accomplir d'importantes étapes de configuration. Ce tutoriel suppose que vous avez accompli toutes les étapes de configuration préalables.
Pour plus de détails, voir :

Etape 1 : Créer une nouvelle application pour Android ou iOS

  1. Sélectionnez Fichier > Nouveau > Application mobile FireMonkey - Object Pascal.
    L'expert Application mobile FireMonkey apparaît :
    FireMonkey Mobile Application WizardRev3.png

  2. Sélectionnez Application vide. Le Concepteur de fiches mobiles FireMonkey affiche une nouvelle fiche pour la plate-forme mobile par défaut, Android :
    NewAndroidApp4.png

  3. Android : Pour utiliser un périphérique Android, voir Configuration de votre système pour détecter votre périphérique Android. Si vous n'avez pas de périphérique Android, vous pouvez à la place créer un émulateur Android.
  4. iOS : Si vous voulez créer une app iOS, ouvrez le noeud Plate-forme cible dans le Gestionnaire de projets et double-cliquez sur Simulateur iOS ou sur un périphérique iOS connecté :
    Blank FireMonkey iOS application2.png
    WhiteSpace50.png

Etape 2 : Placer des composants sur la fiche mobile

La première étape de la création d'une application mobile est la conception de l'interface utilisateur ; c'est aussi la première étape des applications destinées à une plate-forme de bureau. De nombreux composants réutilisables sont disponibles dans l'EDI pour la création d'interfaces utilisateur.

  1. Déplacez le pointeur de la souris sur la palette d'outils et développez la catégorie Standard en cliquant sur l'icône plus (+) qui suit le nom de catégorie.
  2. Sélectionnez le composant TEdit, et double-cliquez sur TEdit ou déposez-le sur le Concepteur de fiches mobiles FireMonkey.
    Standard Tab.png    TEdit on ToolPalette for FireMonkey.png

    Une instance du composant TEdit apparaît sur la fiche. Voici une app Android :
    AndroidAppEdit.png

  3. Répétez ces étapes en ajoutant un TLabel et un TButton sur la fiche.
  4. Sélectionnez la zone d'édition et définissez la propriété KillFocusByReturn dans l'inspecteur d'objets sur True.
  5. Sélectionnez le bouton et changez la propriété Text dans l'inspecteur d'objets par "Say Hello".
  6. Vous devez maintenant voir trois composants sur le Concepteur de fiches mobiles FireMonkey. Voici une app iOS :
    Development an iOS application on Windows.png

  7. Après que vous ayez placé ces composants sur le Concepteur de fiches mobiles FireMonkey, l'EDI définit automatiquement leur nom.
    Pour voir ou changer le nom d'un composant, cliquez sur le composant dans le Concepteur de fiches mobiles FireMonkey, puis trouvez sa propriété Name dans l'inspecteur d'objets et la vue Structure :
    See Name Property of FireMonkey Button.png

    Pour un composant TButton, le nom du composant est défini par défaut à Button1 (ou Button2, Button3, selon le nombre de TButton ayant été créés dans cette application).
  8. La fiche sur laquelle ces composants sont localisés a aussi un nom. Sélectionnez l'arrière-plan du Concepteur de fiches mobiles FireMonkey, puis la propriété Name dans l'inspecteur d'objets. Le nom de la fiche Form1 (ou Form2, Form3, etc.) est affiché. Vous pouvez facilement localiser le nom de la fiche dans la vue Structure :
    See Form2 at Structure View.png

  9. Vous pouvez facilement permuter l'affichage et accéder au code source en sélectionnant l'onglet Code en bas du Concepteur de fiches.
    Vous pouvez également appuyer sur la touche F12 pour basculer entre le Concepteur de fiches mobiles FireMonkey et l'éditeur de code :
Switch to source.png

L'éditeur de code affiche le code source généré par l'EDI. Les trois composants sont normalement définis (Edit1, Label1 et Button1) :

Source code of new iOS app.png

Remarque : Lorsque vous enregistrez ou exécutez votre projet, les clauses Uses sont mises à jour (afin d'ajouter FMX.StdCtrls pour TLabel et FMX.Edit pour TEdit).

Etape 3 : Ecrire un gestionnaire d'événement pour un clic de bouton par l'utilisateur

L'étape suivante consiste à définir un gestionnaire d'événement pour le composant TButton. Vous pouvez définir des gestionnaires d'événement pour votre application mobile de la même façon que pour les applications de bureau. Pour le composant TButton, l'événement le plus typique est un clic de bouton.

Lorsque vous double-cliquez sur le bouton sur le Concepteur de fiches, Appmethod crée un code squelette utilisable pour implémenter un gestionnaire d'événement pour l'événement clic de bouton.

New form code.png
WhiteSpace50.png

Vous pouvez maintenant implémenter des réponses dans la méthode Button1Click.

L'extrait de code suivant implémente une réponse pour afficher un petit dialogue sur lequel est écrit "Hello + <nom entré dans la zone d'édition>" :

 Label1.Text := 'Hello ' + Edit1.Text + ' !';


Les marques de délimitation qui encadrent les littéraux chaîne doivent être des apostrophes droites simples (comme dans 'chaîne', par exemple). Vous pouvez utiliser le signe plus (+) pour concaténer des chaînes. Si vous voulez placer un guillemet simple à l'intérieur d'une chaîne, vous devez utiliser deux guillemets simples consécutifs à l'intérieur de la chaîne, ce qui équivaut à un guillemet simple.

Au fur et à mesure que vous tapez le code, des conseils indiquant le type de paramètre à spécifier apparaissent. Les conseils affichent également les types de membres supportés dans une classe donnée :

CodeInsight in action for FireMonkey application.png
WhiteSpace50.png


Etape 4 : Tester votre application mobile

L'implémentation de cette application est terminée, vous pouvez donc l'exécuter.
Vous pouvez cliquer sur le bouton Exécuter (RunButton.png) de l'EDI, appuyer sur F9 ou sélectionner Exécuter > Exécuter dans le menu principal de Appmethod.

Run my first FireMonkey application.png WhiteSpace50.png

Tester votre application Android

Test sur l'émulateur Android

Avant d'exécuter votre app Android, confirmez la plate-forme cible dans le Gestionnaire de projets :

AndroidProjectManager.png

Test sur le périphérique Android

Si vous effectuez les étapes décrites dans Tutoriel mobile : Définition de votre environnement de développement sur un PC Windows (Android) avant de créer votre nouveau projet, vous pouvez maintenant exécuter votre app Android sur un périphérique Android connecté à votre PC par câble USB.

CreatingAFireMonkeyApp.png

Tester votre application iOS

Test sur le Mac (Simulateur iOS)

Par défaut, les applications iOS s'exécutent sur la plate-forme cible Simulateur iOS. Vous pouvez confirmer la plate-forme cible dans le Gestionnaire de projets :

ProjectConfiguredForSimulator.png

WhiteSpace50.png

Lorsque vous exécutez votre application, elle est déployée sur le Mac puis sur le simulateur iOS sur le Mac. Pour votre app, une fiche comportant une zone d'édition et un bouton est affichée. Entrez un texte dans la zone d'édition et cliquez sur le bouton Say Hello :

FirstiOSAppOnMac.png

WhiteSpace50.png

Test sur un périphérique iOS connecté

Si vous effectuez les étapes décrites dans Tutoriel mobile : Définition de votre environnement de développement sur le Mac (iOS) et Tutoriel mobile : Définition de votre environnement de développement sur un PC Windows (iOS) avant de créer votre nouveau projet, vous pouvez maintenant exécuter votre app iOS sur un périphérique iOS connecté à votre Mac par câble USB.

Pour exécuter votre app iOS sur un périphérique iOS connecté, sélectionnez d'abord la plate-forme cible Périphérique iOS afin que Platform Assistant puisse déployer l'application sur le périphérique iOS connecté :

SelectDeviceProfile.png

Après avoir sélectionné la plate-forme cible Périphérique iOS, exécutez votre app iOS en cliquant sur le bouton Exécuter dans l'EDI, en appuyant sur F9 ou en sélectionnant Exécuter > Exécuter.

Sur votre Mac, il se peut qu'un dialogue vous demande la permission pour signer le code de votre app iOS. Sélectionnez "Toujours autoriser" ou "Autoriser" pour signer votre app.

CodeSignToiOSApp.png

Accédez ensuite à votre périphérique iOS et attendez que l'app iOS apparaisse. Remarquez l'image de lancement (l'icône est disponible dans $(BDS)\bin\Artwork\iOS, et vous pouvez définir l'image de lancement dans Options de l'application) :

FMXFlame.png

Voir aussi