Embarcadero RAD STUDIO XE4: DELPHI XE4, C++ BUILDER XE4, and HTML5 Builder Manuel utilisateur

Documentation du produit
RAD Studio
TUTORIELS IOS : DEVELOPPEMENT D'APPLICATIONS DELPHI IOS
Version XE4
© 2013 Embarcadero Technologies, Inc. Embarcadero, les logos Embarcadero
Technologies, et tous les autres noms de services ou de produits Embarcadero
Technologies sont des marques ou des marques déposées de Embarcadero
Technologies, Inc. Toutes les autres marques sont la propriété de leurs propriétaires
respectifs.
Embarcadero Technologies, Inc. est le leader des outils primés, destinés aux
développeurs d'applications et aux professionnels des bases de données, leur
permettant de concevoir de bons systèmes, de les construire plus rapidement et de
mieux les exécuter, quel que soit leur plate-forme ou langage de programmation.
Quatre-vingt-dix entreprises du classement des 100 premières entreprises américaines
(liste "Fortune 100") et une communauté active de plus de trois millions d'utilisateurs à
l'échelle mondiale comptent sur les produits Embarcadero pour augmenter leur
productivité, réduire leurs coûts, simplifier la gestion des modifications et la conformité,
et accélérer l'innovation. Les outils phare de la société sont les suivants : Embarcadero®
Change Manager™, CodeGear™ RAD Studio, DBArtisan®, Delphi®, ER/Studio®,
JBuilder® et Rapid SQL®. Fondé en 1993, Embarcadero a son siège social à San
Francisco, avec des bureaux dans le monde entier. Visitez le site en ligne de
Embarcadero sur www.embarcadero.com.
April, 2013
Embarcadero Technologies
2
Sommaire
Tutoriels iOS : Développement d'applications Delphi iOS .......................................... 8
Configuration ................................................................................................................. 8
Utilisation des éléments d'interface élémentaires ................................................... 8
Utilisation des fonctionnalités du périphérique ........................................................ 9
Accès à une base de données ................................................................................ 10
Voir aussi ....................................................................................................................... 10
Tutoriel iOS : Définition de votre environnement de développement sur le Mac 11
Exigences relatives au Mac ....................................................................................... 11
Etapes de configuration de votre Mac afin d'exécuter votre application iOS
sur le simulateur iOS..................................................................................................... 11
Etape 1 : Installer Platform Assistant ...................................................................... 12
Etape 2 : Exécuter Platform Assistant ................................................................... 13
Etape 3 : Installer Xcode sur le Mac ..................................................................... 14
Etapes suivantes ...................................................................................................... 15
Etapes supplémentaires permettant de configurer votre Mac afin d'exécuter
votre application iOS sur votre périphérique iOS ................................................... 15
Etape 1 : Installer les outils en ligne de commande Xcode sur un Mac ......... 16
Etape 2 : Inscription à un compte développeur ................................................ 17
Etape 3 : Demander, télécharger et installer votre certificat de
développement ...................................................................................................... 17
Etape 4 : Recenser le périphérique pour le déploiement ................................ 18
Etape 5 : Créer et installer un profil d'approvisionnement................................ 19
Voir aussi ....................................................................................................................... 20
Tutoriel iOS : Définition de votre environnement de développement sur un PC
Windows ........................................................................................................................... 22
Configuration de votre environnement RAD Studio ............................................. 22
Créer un profil de connexion pour le Mac .......................................................... 22
Ajouter un SDK au système de développement pour le périphérique iOS
connecté au Mac ................................................................................................... 25
Voir aussi ....................................................................................................................... 26
Tutoriel iOS : Création d'une application FireMonkey iOS ........................................ 27
Avant de commencer ............................................................................................... 27
Etape 1 : Créer une nouvelle application FireMonkey HD pour iOS ................... 27
Etape 2 : Placer des composants sur la fiche FireMonkey iOS ............................ 28
Etape 3 : Ecrire un gestionnaire d'événements dans Delphi pour un clic de
bouton par l'utilisateur ................................................................................................ 32
Etape 4 : Tester votre application iOS sur Mac (simulateur iOS) .......................... 33
Etape 5 : Tester votre application iOS sur un périphérique iOS connecté ......... 34
Voir aussi ....................................................................................................................... 35
Tutoriel iOS : Utilisation d'un composant Bouton avec différents styles dans une
application iOS ................................................................................................................ 36
Embarcadero Technologies
3
Boutons dans les applications FireMonkey iOS ....................................................... 36
Définition de l'apparence d'un composant Bouton ............................................. 36
Création d'un contrôle segmenté en utilisant les composants Bouton ............. 38
Création d'une barre de portée sur un composant Barre d'outils ...................... 40
Voir aussi ....................................................................................................................... 40
Tutoriel iOS : Utilisation d'un composant Calendrier pour sélectionner une date
dans une application iOS .............................................................................................. 41
Utilisation d'un calendrier dans des applications FireMonkey iOS ...................... 41
Implémentation d'un gestionnaire d'événéments correspondant aux
modifications utilisateur relatives à la date ............................................................ 42
Voir aussi ....................................................................................................................... 43
Tutoriel iOS : Utilisation de composants Zone de liste déroulante pour
sélectionner des éléments dans une liste d'une application iOS............................ 44
Implémentation d'un sélecteur dans des applications FireMonkey iOS ............ 44
Construction d'une liste d'éléments en utilisant le code ...................................... 46
Affichage d'un élément spécifique ......................................................................... 47
Implémentation d'un gestionnaire d'événements correspondant à la sélection
effectuée par l'utilisateur ........................................................................................... 48
Voir aussi ....................................................................................................................... 49
Tutoriel iOS : Utilisation du composant Navigateur Web dans une application iOS
........................................................................................................................................... 50
Utilisation du composant Navigateur Web dans des applications FireMonkey
iOS .................................................................................................................................. 50
Etape 1 : Conception de l'interface utilisateur ...................................................... 51
Etape 2 : Ecriture d'un gestionnaire d'événements provoquant l'ouverture
d'une page Web lorsque l'utilisateur change d'URL dans le contrôle de saisie 53
Implémentation d'une méthode commune pour ouvrir une page Web ...... 54
Implémentation d'un gestionnaire d'événements pour l'événement
OnChange ............................................................................................................... 55
Implémentation d'un gestionnaire d'événements pour supporter la touche
Entrée ........................................................................................................................ 55
Implémentation d'un gestionnaire d'événements pour le bouton Back ....... 56
Etape 3 : Sélection du clavier approprié pour l'application Navigateur Web . 56
Voir aussi ....................................................................................................................... 57
Tutoriel iOS : Utilisation des composants Onglet pour afficher des pages dans
une application iOS ........................................................................................................ 58
Onglets dans les applications FireMonkey iOS ....................................................... 58
Conception de pages d'onglets en utilisant le Concepteur de fiches .............. 58
Utilisation d'icônes personnalisées pour les onglets ............................................... 63
Définition de contrôles dans un TabControl ........................................................... 66
Changement de page à l'exécution ...................................................................... 67
Par l'interaction de l'utilisateur en touchant l'onglet.......................................... 67
Par les actions et une liste d'actions ..................................................................... 67
Par le code source .................................................................................................. 71
Embarcadero Technologies
4
Voir aussi ....................................................................................................................... 71
Tutoriel iOS : Utilisation des composants Zone de liste pour afficher une vue table
dans une application iOS .............................................................................................. 72
Utilisation des composants Zone de liste pour afficher une vue table dans une
application iOS ............................................................................................................ 72
Création des éléments sur le composant Zone de liste ........................................ 73
Ajout d'un en-tête ....................................................................................................... 75
Ajout d'un groupe en-tête/pied à la liste ................................................................ 76
Affichage des éléments de liste sous forme d'éléments groupés séparés ........ 77
Ajout d'une case à cocher ou d'un autre accessoire à un élément de zone de
liste ................................................................................................................................. 78
Ajout d'une icône à un élément de zone de liste ................................................. 79
Ajout d'informations de détail à un élément .......................................................... 79
Ajout d'éléments à une zone de liste à partir du code ........................................ 80
Ajout d'une zone de recherche ............................................................................... 82
Voir aussi ....................................................................................................................... 83
Tutoriel iOS : Utilisation de la disposition pour ajuster différentes tailles de fiches
ou orientations dans une application iOS .................................................................. 84
Chaque composant FireMonkey peut avoir un propriétaire, un parent et des
enfants .......................................................................................................................... 84
Utilisation des propriétés communes relatives à la disposition d'un composant
FireMonkey ................................................................................................................... 85
Utilisation de la propriété Align.............................................................................. 85
Utilisation de la propriété Margins......................................................................... 86
Utilisation de la propriété Padding ....................................................................... 86
Utilisation de la propriété Anchors ........................................................................ 87
Utilisation du composant TLayout ............................................................................. 88
Manipulation d'une interface encombrée : Utilisation du composant
TVertScrollBox ............................................................................................................... 89
Voir aussi ....................................................................................................................... 90
Tutoriel iOS : Prendre une photo et la partager dans une application iOS ........... 91
Construction de l'interface utilisateur pour l'application ...................................... 92
Prendre une photo avec la caméra du périphérique iOS ................................... 92
Utilisation d'une photo de la bibliothèque de photos du périphérique iOS ...... 93
Partage ou impression d'une photo ......................................................................... 94
Voir aussi ....................................................................................................................... 95
Tutoriel iOS : Utilisation de détecteurs d'emplacement sur le périphérique iOS ... 96
Conception de l'interface utilisateur ....................................................................... 97
Le détecteur d'emplacement .................................................................................. 98
Lecture des informations d'emplacement (Latitude, Longitude) à partir du
composant LocationSensor ....................................................................................... 98
Affichage de l'emplacement en cours en utilisant Google Maps via un
composant TWebBrowser .......................................................................................... 99
Utilisation du géocodage inversé ........................................................................... 100
Embarcadero Technologies
5
Affichage d'une adresse lisible dans le composant Zone de liste .................... 102
Voir aussi ..................................................................................................................... 103
Tutoriel iOS : Utilisation du Centre de notifications sur le périphérique iOS ......... 104
Trois notifications élémentaires ou styles d'alerte ................................................. 104
Badge affiché sur l'icône d'application ............................................................. 104
Bannière de notification sur l'iPad....................................................................... 104
Alerte de notification ............................................................................................ 104
Centre de notifications sur l'iPad ........................................................................ 104
Accès au service de notifications .......................................................................... 105
Définition du numéro de badge d'icône à partir du code ................................ 106
Planification des notifications .................................................................................. 107
Mise à jour ou annulation d'un message de notification ................................... 108
Présentation immédiate du message de notification ........................................ 109
Bannière de notification ou alerte de notification .............................................. 109
Ajouter des actions à l'alerte de notification ....................................................... 111
Voir aussi ..................................................................................................................... 111
Tutoriel iOS : Utilisation de InterBase ToGo dans une application iOS .................. 112
Utilisation de dbExpress pour se connecter à la base de données .................. 112
Conception et configuration de l'interface utilisateur ........................................ 113
Connexion aux données .......................................................................................... 114
Déploiement de votre application sur iOS............................................................ 117
Déployer InterBase ToGo, dbExpress Driver et le fichier de base de données
sur iOS ...................................................................................................................... 117
Modifier votre code pour se connecter à un fichier de base de données
local sur iOS ............................................................................................................ 119
Exécuter votre application sur le simulateur iOS ou sur un périphérique iOS .. 120
Dépannage ............................................................................................................... 121
Problèmes de licences InterBase ........................................................................ 121
Problèmes de gestion des exceptions ............................................................... 121
Erreurs typiques et résolutions .............................................................................. 122
Voir aussi ..................................................................................................................... 122
Tutoriel iOS : Utilisation de SQLite dans une application iOS .................................. 123
Utilisation de dbExpress pour se connecter à la base de données .................. 124
Création de la base de données dans l'environnement Windows à des fins de
développement ........................................................................................................ 124
Créer la base de données dans l'explorateur de données ........................... 124
Créer une table sur l'explorateur de données .................................................. 126
Conception et configuration de l'interface utilisateur ........................................ 127
Connexion aux données .......................................................................................... 128
Création du gestionnaire d'événements afin de rendre visible le bouton
Delete quand l'utilisateur sélectionne un élément dans la liste ........................ 129
Création du gestionnaire d'événements pour le bouton Add afin d'ajouter une
entrée dans la liste .................................................................................................... 130
Embarcadero Technologies
6
Création du gestionnaire d'événements pour le bouton Delete afin de retirer
une entrée de la liste ................................................................................................ 132
Modification de votre code pour se connecter à un fichier de base de
données local sur iOS ............................................................................................... 133
Spécification de l'emplacement de la base de données SQLite sur le
périphérique iOS .................................................................................................... 133
Création d'une table si aucune n'existe ............................................................ 134
Exécution de votre application sur le simulateur iOS ou sur un périphérique iOS
...................................................................................................................................... 135
Voir aussi ..................................................................................................................... 135
Tutoriel iOS : Connexion à une base de données d'entreprise depuis une
application client iOS ................................................................................................... 136
Création du niveau intermédiaire, un serveur DataSnap .................................. 137
Créer une application VCL Serveur DataSnap ................................................ 137
Définir un ensemble de données sur le serveur DataSnap ............................. 139
Exposer l'ensemble de données à partir du serveur DataSnap ..................... 141
Exécuter le serveur DataSnap ............................................................................. 141
Création d'une application iOS qui se connecte au serveur DataSnap ......... 142
Déployer la bibliothèque MIDAS sur le simulateur iOS ........................................ 145
Exécuter votre application sur le simulateur iOS ou sur un périphérique iOS .. 146
Voir aussi ..................................................................................................................... 146
Embarcadero Technologies
7
TUTORIELS IOS : DEVELOPPEMENT
D'APPLICATIONS DELPHI IOS
Cet ensemble de tutoriels intégré vous guide à travers le développement d'une
application iOS avec RAD Studio :


Après le tutoriel de configuration initiale, chaque tutoriel présente la
construction d'une application iOS avec les outils FireMonkey.
Les tutoriels présentent les composants FireMonkey recommandés à
utiliser afin d'obtenir un aspect natif dans vos applications iOS.
CONFIGURATION

Définition de votre environnement de
développement sur le Mac

Définition de votre environnement de
développement sur un PC Windows
UTILISATION DES ELEMENTS D'INTERFACE ELEMENTAIRES

Création d'une application FireMonkey iOS

Utilisation d'un composant Bouton avec différents
styles dans une application iOS
Embarcadero Technologies
8

Utilisation d'un composant Calendrier pour
sélectionner une date dans une application iOS

Utilisation de composants Zone de liste déroulante
pour sélectionner des éléments dans une liste d'une
application iOS

Utilisation du composant Navigateur Web dans une
application iOS

Utilisation des composants Onglet pour afficher des
pages dans une application iOS

Utilisation des composants Zone de liste pour afficher
une vue table dans une application iOS

Utilisation de la disposition pour ajuster différentes
tailles de fiches ou orientations dans une application
iOS
UTILISATION DES FONCTIONNALITES DU PERIPHERIQUE

Embarcadero Technologies
Prendre une photo et la partager dans une
application iOS
9

Utilisation de détecteurs d'emplacement sur le
périphérique iOS

Utilisation du Centre de notifications sur le
périphérique iOS
ACCES A UNE BASE DE DONNEES

Utilisation de InterBase ToGo dans une application iOS

Utilisation de SQLite dans une application iOS

Connexion à une base de données d'entreprise
depuis une application client iOS
VOIR AUSSI





Guide de prise en main FireMonkey
Création d'une application FireMonkey iOS
Conception d'applications FireMonkey
Extraits de code iOS
Développement d'applications mobiles iOS
Embarcadero Technologies
10
TUTORIEL IOS : DEFINITION DE VOTRE
ENVIRONNEMENT DE DEVELOPPEMENT SUR LE
MAC
Une application FireMonkey destinée à la plate-forme cible iOS est testée
d'abord sur le simulateur iOS disponible sur le Mac. La deuxième moitié du
processus de test consiste à utiliser la plate-forme cible Périphérique iOS et
requiert un périphérique iOS test connecté au Mac.


La première moitié de ce tutoriel décrit les étapes à effectuer afin
d'exécuter votre application iOS sur le simulateur iOS sur le Mac.
La deuxième moitié de ce tutoriel décrit les étapes supplémentaires
requises afin d'exécuter votre application iOS sur votre périphérique iOS.
EXIGENCES RELATIVES AU MAC

OS X 10.7 Lion ou 10.8 Mountain Lion
Aucun système d'exploitation n'est supporté sur les anciens systèmes
Macintosh PowerPC- et 680x0. Tous les Macs depuis 2007 sont basés sur
Intel ; tous depuis 2008 sont 64 bits, ce que Lion requiert.



iOS 5.1 et supérieur
Dernière version de Xcode et iOS SDK installés, et outils en ligne de
commande Xcode installés
o Nécessite l'appartenance à l'un des programmes développeur
Apple, décrits dans cette rubrique sous Etape 2 : Inscription à un
compte développeur.
Un périphérique iOS connecté au Mac par le port USB (requis pour tester
ou exécuter votre application iOS sur le périphérique)
ETAPES DE CONFIGURATION DE VOTRE MAC AFIN D'EXECUTER
VOTRE APPLICATION IOS SUR LE SIMULATEUR IOS
Pour déployer une application iOS vers le simulateur iOS sur le Mac, vous devez
installer les outils suivants sur votre Mac :

Platform Assistant (PAServer)
Embarcadero Technologies
11
A des fins de débogage, RAD Studio utilise Platform Assistant, une
application que vous devez installer et exécuter sur le Mac.

Xcode
Xcode est l'environnement de développement et de débogage sur le
Mac, qui fournit les fichiers de développement requis pour les applications
Mac OS X et iOS.
ETAPE 1 : INSTALLER PLATFORM ASSISTANT
Comme nous l'avons indiqué, Platform Assistant doit s'exécuter sur le Mac
quand vous déployez une application iOS de votre PC vers le simulateur iOS ou
un périphérique iOS.
L'installateur Mac OS X pour Platform Assistant se nomme RADPAServerXE4.pkg
et est disponible à deux emplacements :

Dans le dossier PAServer au sein du répertoire d'installation de RAD Studio.
Par exemple, C:\Program Files\Embarcadero\RAD
Studio\11.0\PAServer\RADPAServerXE4.pkg.

Sur le Web où vous pouvez le télécharger sur le Mac :
http://installers.codegear.com/release/radstudio/11.0/PAServer/RADPASer
verXE4.pkg
Embarcadero Technologies
12
Pour plus de détails, voir Installation de Platform Assistant sur un Mac.
ETAPE 2 : EXECUTER PLATFORM ASSISTANT
Sur le Mac, dans le Finder, activez le fichier .app (RAD PAServer XE4.app) de la
manière suivante :
1. Naviguez jusqu'au dossier de niveau supérieur Applications.
2. Double-cliquez sur RAD PAServer XE4.app pour démarrer Platform
Assistant.
La fenêtre Terminal apparaît, affichant la bannière Platform Assistant et
l'invite de mot de passe :
Mot de passe du profil de connexion <appuyez sur Entrée si aucun mot de
passe> :
Embarcadero Technologies
13
3. Vous êtes maintenant invité à entrer votre mot de passe d'utilisateur Mac
pour permettre à Platform Assistant de déboguer (prendre le contrôle
d'un autre processus) votre application. Entrez votre mot de passe et
sélectionnez Take Control.
Pour plus de détails sur l'exécution de Platform Assistant, voir Exécution de
Platform Assistant sur un Mac.
ETAPE 3 : INSTALLER XCODE SUR LE MAC
Xcode est l'environnement de développement et de débogage sur le Mac. Il
fournit les fichiers de développement requis pour les applications Mac OS X et
iOS.
Vous pouvez installer Xcode depuis l'une des sources suivantes :



Sur votre DVD "Mac OS X Install", sous Optional Installs, double-cliquez sur
Xcode.mpkg pour installer Xcode sur votre système.
Au niveau de l'App Store Mac, téléchargez Xcode gratuitement.
En tant que développeur Apple enregistré, vous pouvez télécharger la
dernière version de Xcode sous forme de bundle (.dmg). Pour s'enregistrer
puis télécharger Xcode :
1. Enregistrez-vous (gratuitement) en tant que développeur Apple sur
http://developer.apple.com/programs/register/.
2. Téléchargez Xcode sous forme de bundle à l'adresse
https://developer.apple.com/downloads.
Embarcadero Technologies
14
ETAPES SUIVANTES
Vous avez configuré votre Mac pour exécuter une application iOS sur le
simulateur iOS.

Pour exécuter maintenant une application iOS sur le simulateur iOS, voir
Tutoriel iOS : Définition de votre environnement de développement sur un
PC Windows pour achever la configuration de l'EDI de votre RAD Studio.

Pour exécuter votre application iOS sur votre périphérique iOS, utilisez les
étapes suivantes sur cette page pour achever la configuration de votre
Mac. Notez que vous pouvez effectuer ces étapes après le test d'une
application sur le simulateur iOS.
ETAPES SUPPLEMENTAIRES PERMETTANT DE CONFIGURER
VOTRE MAC AFIN D'EXECUTER VOTRE APPLICATION IOS SUR
VOTRE PERIPHERIQUE IOS
Les étapes supplémentaires suivantes vous permettent d'exécuter votre
application iOS sur votre périphérique iOS.
Embarcadero Technologies
15
ETAPE 1 : INSTALLER LES OUTILS EN LIGNE DE COMMANDE XCODE SUR UN MAC
Pour installer les outils Xcode nécessaires en utilisant Xcode sur le Mac :
1. Démarrez Xcode sur le Mac.
2. Choisissez Preferences dans le menu Xcode.
3. Dans le panneau General, cliquez sur Downloads.
4. Sur la fenêtre Downloads, choisissez l'onglet Components.
5. Cliquez sur le bouton Install auprès de Command Line Tools.
Vous êtes invité à fournir votre identifiant de connexion développeur
Apple pendant le processus d'installation.
Pour plus de détails, voir Installation des outils en ligne de commande Xcode sur
un Mac.
Embarcadero Technologies
16
ETAPE 2 : INSCRIPTION A UN COMPTE DEVELOPPEUR
L'appartenance à l'un des programmes Développeur iOS est obligatoire pour
construire, exécuter, déboguer et déployer des applications pour iOS.
Vous pouvez rejoindre un programme développeur d'une des deux façons
suivantes :


En tant que développeur individuel.
En tant que membre (ou chef) d'une équipe dans un programme
d'entreprise (métier) ou un programme universitaire.
Pour plus de détails, voir Rejoindre un programme Développeur iOS.
ETAPE 3 : DEMANDER, TELECHARGER ET INSTALLER VOTRE CERTIFICAT DE
DEVELOPPEMENT
Les applications qui sont déployées sur le périphérique (ou sur le simulateur iOS)
doivent être signées cryptographiquement avant leur exécution. Le certificat de
développement contient des informations nécessaires à la signature des
applications. Chaque individu (un développeur individuel ou un membre
d'équipe) doit avoir un certificat de développement unique, utilisable pour
plusieurs applications.
Pour les équipes de développement, les certificats de développement doivent
être demandés par chaque membre d'équipe, et ces demandes doivent être
approuvées par un administrateur d'équipe.
Demander, télécharger et installer votre certificat
1. Dans l'application Keychain Access de votre Mac, sélectionnez dans le
menu Keychain Access : Certificate Assistant > Request a Certificate From
a Certificate Authority.
Embarcadero Technologies
17
Enregistrez la demande de certificat dans un fichier, puis envoyez-le à
votre autorité de certificat en le téléchargeant dans le Portail
d'approvisionnement iOS de Apple.
Si vous êtes un membre de l'équipe de développement d'un
programme d'entreprise/d'organisation, l'administrateur de votre
équipe doit approuver votre demande. Dès que l'administrateur de
votre équipe l'a approuvé, vous pouvez télécharger le certificat.
o Si vous êtes un développeur individuel, une option de
téléchargement de votre certificat devrait apparaître rapidement
dès sa demande. Voir la documentation de Apple sur : Creating
signing certificates pour plus de détails.
2. Accédez au Portail d'approvisionnement iOS. Vous pouvez télécharger le
certificat de développement dès que le statut passe de Submitted à
Issued.
o
3. Lancez le certificat de développement en double-cliquant dessus. Il se
charge automatiquement dans l'application Keychain Access.
ETAPE 4 : RECENSER LE PERIPHERIQUE POUR LE DEPLOIEMENT
Avant qu'un périphérique puisse exécuter des applications utilisateur, il doit être
recensé dans le Portail d'approvisionnement Apple. Les périphériques sont
Embarcadero Technologies
18
recensés par leur identifiant de périphérique unique (UDID). Le UDID peut être
déterminé par Xcode, comme suit :
1. Assurez-vous que votre périphérique iOS est connecté à votre machine
Mac.
2. Ouvrez Xcode et accédez à l'organisateur (Window > Organizer).
3. Dans l'onglet Devices, cliquez sur votre périphérique.
4. Une chaîne de caractères se trouve auprès du libellé Identifier :
La chaîne Identifier représente le UDID de votre périphérique.
o
o
Si vous êtes un développeur individuel, recensez votre périphérique
en ajoutant le UDID dans l'onglet Devices du Portail
d'approvisionnement Apple.
Si vous appartenez à une société/organisation, demandez à
l'administrateur de votre équipe de recenser votre périphérique.
ETAPE 5 : CREER ET INSTALLER UN PROFIL D'APPROVISIONNEMENT
Les profils d'approvisionnement sont utilisés pour lier un développeur et des
périphériques à une équipe de développement. Ce profil d'approvisionnement
est requis pour l'exécution d'applications sur un périphérique iOS.


Si vous êtes un développeur individuel, vous devez créer un profil
d'approvisionnement. Pour des informations spécifiques, voir : Creating
and Downloading a Distribution Provisioning Profile.
Si vous appartenez à une société/organisation, l'administrateur de votre
équipe doit créer un profil d'approvisionnement que vous pourrez utiliser.
Dès que votre profil d'approvisionnement est créé, vous devez l'installer dans
Xcode, comme suit :
1. Ouvrez Xcode sur le Mac et accédez à l'organisateur (Window >
Organizer).
Embarcadero Technologies
19
2. Dans la section Library, sélectionnez Provisioning Profiles et cliquez sur
Refresh.
3. Xcode vous demande de signer avec votre identifiant Apple. Entrez vos
informations d'identification et sélectionnez Log in.
Les profils d'approvisionnement disponibles sont installés dans votre
Xcode :
4. Sélectionnez un profil d'approvisionnement iOS valide et faites-le glisser
dans les profils d'approvisionnement de votre périphérique test.
Vous avez configuré votre Mac pour exécuter votre application iOS sur votre
périphérique iOS.
Pour exécuter votre application iOS, voir Tutoriel iOS : Définition de votre
environnement de développement sur un PC Windows et achevez la
configuration de l'EDI de votre RAD Studio. Si vous avez configuré votre PC pour
l'exécution de votre application sur le simulateur iOS, vous pouvez ignorer cette
étape.
VOIR AUSSI




Tutoriel iOS : Définition de votre environnement de développement sur un
PC Windows
paserver, l'application serveur Platform Assistant
Apple Developer Program
iOS Developer Program
Embarcadero Technologies
20








Creating and Configuring App IDs
Creating signing certificates
iOS Provisioning Portal
Devices tab of the Apple Provisioning Portal
Create an Apple ID
Creating and Downloading a Distribution Provisioning Profile
Installation de Platform Assistant sur un Mac
Exécution de Platform Assistant sur un Mac
Embarcadero Technologies
21
TUTORIEL IOS : DEFINITION DE VOTRE
ENVIRONNEMENT DE DEVELOPPEMENT SUR UN
PC WINDOWS
Avant de commencer ce tutoriel, il est recommandé de lire et suivre le tutoriel
suivant :

Tutoriel iOS : Définition de votre environnement de développement sur le
Mac
Une application FireMonkey destinée à la plate-forme cible iOS est testée
d'abord sur le simulateur iOS disponible sur le Mac. La deuxième moitié du
processus de test consiste à utiliser la plate-forme cible Périphérique iOS et
requiert un périphérique iOS test connecté au Mac. Pour déployer une
application iOS sur votre périphérique à des fins de débogage et de tests, RAD
Studio utilise Platform Assistant que vous devez installer et exécuter sur le Mac.
Cette section décrit les étapes de configuration de votre environnement de
développement après la configuration de votre environnement sur votre Mac.
CONFIGURATION DE VOTRE ENVIRONNEMENT RAD STUDIO
Les étapes de configuration suivantes accélèrent le développement iOS avec
RAD Studio.
CREER UN PROFIL DE CONNEXION POUR LE MAC
1. Ouvrez Outils > Options > Options d'environnement > Gestionnaire de
profils de connexion.
Embarcadero Technologies
22
2. Sélectionnez Ajouter :
3. Vous apercevez maintenant l'expert Créer un profil de connexion.
Définissez le nom du profil de connexion, par exemple "Mon Mac".
Assurez-vous de sélectionner OS X comme plate-forme cible, puis cliquez
sur Suivant :
4. Dans la page Informations relatives à la machine hôte, définissez le nom
ou l'adresse IP du Mac hôte, le numéro de port à utiliser (le port par
Embarcadero Technologies
23
défaut 64211 fonctionne typiquement) et un mot de passe facultatif (si
vous souhaitez utiliser un mot de passe).
5. Cliquez sur Tester la connexion et assurez-vous que le profil de connexion
fonctionne sans erreur (vous devez recevoir le message "La connexion à
<nom d'hôte> sur le port <numéro de port> a réussi") :
Embarcadero Technologies
24
AJOUTER UN SDK AU SYSTEME DE DEVELOPPEMENT POUR LE PERIPHERIQUE IOS
CONNECTE AU MAC
1. Ouvrez Outils > Options > Options d'environnement > Gestionnaire de
SDK :
2. Sélectionnez Ajouter.
3. Sur la boîte de dialogue Ajouter un nouveau SDK, sélectionnez
Périphérique iOS comme plate-forme.
4. Sélectionnez une plate-forme à connecter (comme par exemple
"Périphérique iOS") :
Embarcadero Technologies
25
5. Après la sélection d'une plate-forme, l'EDI remplit un profil (comme "Mon
Mac") et la zone de liste déroulante relative à la version SDK par la liste
des versions SDK disponibles sur la plate-forme cible :
Cliquez sur OK pour fermer la boîte de dialogue.
VOIR AUSSI









Tutoriel iOS : Création d'une application FireMonkey iOS
Travailler avec un Mac et un PC
Exécution de votre application sur un périphérique iOS
Exécution de votre application sur le simulateur iOS
Prérequis de plate-forme FireMonkey
Création d'une application FireMonkey iOS
Développement d'applications Mac OS X
Création d'une application FireMonkey
Pages Apple developer.apple.com
o iOS Developer Library
o iOS Developer Library: Getting Started
o iOS Dev Center
o Provisioning an iOS Device
o Preparing Your iOS App for Distribution in the App Store
o iAd Network
Embarcadero Technologies
26
TUTORIEL IOS : CREATION D'UNE APPLICATION
FIREMONKEY IOS
Cette rubrique explique comment créer une application "Hello World"
FireMonkey pour la plate-forme cible iOS.
AVANT DE COMMENCER
Pour développer des applications iOS en utilisant RAD Studio, 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 :


Tutoriel iOS : Définition de votre environnement de développement
sur un PC Windows
Développement d'applications mobiles iOS
ETAPE 1 : CREER UNE NOUVELLE APPLICATION FIREMONKEY
HD POUR IOS
1. Sélectionnez Fichier > Nouveau > Application mobile FireMonkey >
Application mobile FireMonkey – Delphi :
Embarcadero Technologies
27
2. Sélectionnez Application vide.
Le Concepteur de fiches mobiles FireMonkey affiche à présent une
nouvelle fiche pour une application iOS :
ETAPE 2 : PLACER DES COMPOSANTS SUR LA FICHE
FIREMONKEY IOS
La première étape de la création d'une application FireMonkey iOS est la
conception de l'interface utilisateur (identique à 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 ensuite le composant TEdit et déposez-le sur le Concepteur
de fiches. Une instance du composant TEdit s'affiche sur la fiche :
Embarcadero Technologies
28
Répétez ces étapes en ajoutant un TLabel et un TButton sur la fiche. Sélectionnez
le bouton et changez la propriété Text dans l'inspecteur d'objets par "Say Hello".
Vous devriez maintenant voir trois composants sur le Concepteur de fiches :
Après que vous ayez placé ces composants sur le Concepteur de fiches, 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, puis trouvez sa propriété Name dans l'inspecteur d'objets
et la vue Structure :
Embarcadero Technologies
29
Pour un composant TButton, le nom du composant est défini par défaut à
Button1 (ou Button2, Button3, selon le nombre de composants TButton ayant été
créés dans cette application).
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 :
Embarcadero Technologies
30
Vous pouvez facilement permuter l'affichage et accéder au code source en
sélectionnant l'onglet Code en bas du Concepteur de fiches ou en appuyant
sur la touche F12. Vous pouvez permuter entre le Concepteur de fiches et
l'éditeur de code à tout moment :
Lorsque vous basculez sur l'éditeur de code, vous visualisez le code source
généré par l'EDI. Les trois composants sont normalement définis (Edit1, Label1 et
Button1) :
Embarcadero Technologies
31
ETAPE 3 : ECRIRE UN GESTIONNAIRE D'EVENEMENTS DANS
DELPHI POUR UN CLIC DE BOUTON PAR L'UTILISATEUR
L'étape suivante consiste à définir un gestionnaire d'événements pour le
composant TButton. Vous définissez des gestionnaires d'événements pour votre
application FireMonkey iOS 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 sur le
bouton.
Lorsque vous double-cliquez sur le bouton sur le Concepteur de fiches, RAD
Studio crée un code squelette utilisable pour implémenter un gestionnaire
d'événements pour l'événement clic de bouton.
Vous pouvez maintenant implémenter les réponses entre les instructions begin et
end de 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 + ' !';
Dans Delphi, 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 :
Embarcadero Technologies
32
ETAPE 4 : TESTER VOTRE APPLICATION IOS SUR MAC
(SIMULATEUR IOS)
L'implémentation de cette application est terminée, vous pouvez donc
l'exécuter. Vous pouvez cliquer sur le bouton Exécuter (
) de l'EDI, appuyer
sur F9 ou sélectionner Exécuter > Exécuter dans le menu principal de RAD
Studio.
Par défaut, les applications FireMonkey iOS s'exécutent sur la plate-forme cible
Simulateur iOS. Vous pouvez confirmer la plate-forme cible dans le Gestionnaire
de projets :
Embarcadero Technologies
33
Lorsque vous exécutez votre application, elle est déployée sur le Mac puis sur le
simulateur iOS sur le Mac. Pour votre application, 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 :
ETAPE 5 : TESTER VOTRE APPLICATION IOS SUR UN
PERIPHERIQUE IOS CONNECTE
Si vous avez suivi les étapes décrites dans Tutoriel iOS : Définition de votre
environnement de développement sur un PC Windows avant de créer votre
nouveau projet, vous pouvez maintenant exécuter votre application iOS sur un
périphérique iOS connecté à votre Mac par câble USB.
Pour exécuter votre application 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é :
Embarcadero Technologies
34
Après avoir sélectionné la plate-forme cible Périphérique iOS, exécutez votre
application iOS en cliquant sur le bouton Exécuter dans l'EDI, en appuyant sur F9
ou en sélectionnant Exécuter > Exécuter.
Accédez ensuite à votre périphérique iOS et attendez que l'application
FireMonkey iOS apparaisse. Remarquez l'image de lancement de FireMonkey
(disponible dans $(BDS)\bin\Artwork\iOS) :
VOIR AUSSI



Tutoriel iOS : Utilisation d'un composant Bouton avec différents styles dans
une application iOS
Développement d'applications mobiles iOS
Développement d'applications Mac OS X
Embarcadero Technologies
35
TUTORIEL IOS : UTILISATION D'UN COMPOSANT
BOUTON AVEC DIFFERENTS STYLES DANS UNE
APPLICATION IOS
BOUTONS DANS LES APPLICATIONS FIREMONKEY IOS
FireMonkey définit plusieurs types de boutons que vous pourrez utiliser en suivant
les étapes décrites dans ce tutoriel. Les boutons FireMonkey comprennent
TButton et TSpeedButton.
Vous trouverez ci-après quelques exemples des divers styles de composants
Bouton à différents endroits de l'interface utilisateur.

Boutons placés sur la fiche :
o
o

Boutons placés sur la barre de navigation (aussi appelée Barre d'outils) :
o
o
o
o
o
o
DEFINITION DE L'APPARENCE D'UN COMPOSANT BOUTON
Après avoir placé un nouveau bouton sur le Concepteur mobile FireMonkey,
vous pouvez spécifier d'importantes propriétés pour le composant sélectionné
en utilisant l'inspecteur d'objets.
Embarcadero Technologies
36
Sélectionnez un composant (dans ce cas, un bouton), puis modifiez les valeurs
de certaines propriétés en procédant comme suit :




Changez le texte affiché à la surface du bouton en modifiant la valeur de
la propriété Text.
Changez la valeur des propriétés Position.X et Position.Y (ou faites glisser le
composant en utilisant la souris).
Changez la valeur des propriétés Height et/ou Width (ou faites glisser le
bord du composant en utilisant la souris).
Cliquez sur la flèche vers le bas de la propriété StyleLookup.
Dans la liste déroulante StyleLookup, sélectionnez un style prédéfini en
fonction de l'utilisation de votre composant :
Embarcadero Technologies
37
CREATION D'UN CONTROLE SEGMENTE EN UTILISANT LES
COMPOSANTS BOUTON
FireMonkey utilise le composant Bouton pour définir le contrôle segmenté ; il
permet aux utilisateurs de sélectionner une valeur parmi plusieurs options.
Pour définir un contrôle segmenté, utilisez les étapes suivantes :
1. Placez trois composants TSpeedButton à partir de la Palette d'outils.
Placez les composants TSpeedButton les uns après les autres en utilisant la
souris :
2. Sélectionnez le premier composant et changez sa propriété StyleLookup
en segmentedbuttonleft :
3. Sélectionnez le second composant et changez sa propriété StyleLookup
en segmentedbuttonmiddle.
4. Sélectionnez le troisième composant et changez sa propriété StyleLookup
en segmentedbuttonright. Maintenant les trois boutons ont l'apparence
d'un contrôle segmenté :
5. Sélectionnez chaque composant et changez sa propriété Text comme
vous le souhaitez :
Embarcadero Technologies
38
6. Cliquez sur ces trois boutons et faites-les glisser pour les sélectionner :
7. Définissez la propriété GroupName en spécifiant un nom unique tel que
LocationSegments :
8. Pour spécifier que l'un de ces composants apparaîtra par défaut à l'état
appuyé, définissez sa propriété IsPressed sur True :
Embarcadero Technologies
39
CREATION D'UNE BARRE DE PORTEE SUR UN COMPOSANT
BARRE D'OUTILS
Vous pouvez définir un contrôle segmenté sur une barre d'outils. Ce composant
également appelé barre de portée est un contrôle segmenté pouvant être
utilisé pour contrôler la portée d'une recherche.
Utilisez les mêmes contrôles TSpeedButton que lors des étapes précédentes,
mais en utilisant les valeurs suivantes pour la propriété StyleLookup.



toolbuttonleft
toolbuttonmiddle
toolbuttonright
VOIR AUSSI




Tutoriel iOS : Création d'une application FireMonkey iOS
FMX.StdCtrls.TButton
FMX.Controls.TStyledControl.StyleLookup
FMX.StdCtrls.TToolBar
Embarcadero Technologies
40
TUTORIEL IOS : UTILISATION D'UN COMPOSANT
CALENDRIER POUR SELECTIONNER UNE DATE
DANS UNE APPLICATION IOS
UTILISATION D'UN CALENDRIER DANS DES APPLICATIONS
FIREMONKEY IOS
FireMonkey utilise le composant TCalendarEdit pour encapsuler un composant
Calendrier ou Sélecteur de date pour la plate-forme cible iOS :
Vous pouvez facilement utiliser le composant TCalendarEdit en suivant les
étapes ci-dessous :
1. Sélectionnez le composant TCalendarEdit dans la palette d'outils et
déposez-le sur le Concepteur de fiches mobiles FireMonkey. Pour trouver
le composant sur la palette d'outils, tapez les premiers caractères ("Cale")
dans la zone de recherche ( ) :
Dès qu'il a été déposé, le composant TCalendarEdit est visible dans le
Concepteur de fiches mobiles.
Embarcadero Technologies
41
2. Et voilà ! Exécutez l'application sur le simulateur iOS ou votre périphérique
iOS connecté. Dès que vous touchez le composant TCalendarEdit, le
contrôle Calendrier apparaît. Vous pouvez sélectionner une date.
IMPLEMENTATION D'UN GESTIONNAIRE D'EVENEMENTS
CORRESPONDANT AUX MODIFICATIONS UTILISATEUR
RELATIVES A LA DATE
Dès que l'utilisateur modifie la date, l'événement OnChange est déclenché. En
réponse à l'action de l'utilisateur, vous pouvez implémenter un gestionnaire
d'événements pour l'événement OnChange.
Pour implémenter un gestionnaire d'événements OnChange :
1. Sélectionnez le composant TCalendarEdit.
2. Dans l’inspecteur d’objets, ouvrez la page Evénements et double-cliquez
sur la zone vierge qui suit OnChange.
3. Ecrivez le code comme suit :
procedure TForm25.CalendarEdit1Change(Sender: TObject);
begin
ShowMessage(FormatDateTime('dddddd', CalendarEdit1.Date));
end;
Ce code provoque l'affichage d'un dialogue de message avec une date
sélectionnée. La fonction FormatDateTime convertit la date sélectionnée au
format spécifié (dans ce cas dddddd correspond au format date long) :
Embarcadero Technologies
42
VOIR AUSSI




Tutoriel iOS : Utilisation d'un composant Bouton avec différents styles dans
une application iOS
Tutoriel iOS : Utilisation de composants Zone de liste déroulante pour
sélectionner des éléments dans une liste d'une application iOS
Support date et heure
Routines de conversion des types
Embarcadero Technologies
43
TUTORIEL IOS : UTILISATION DE COMPOSANTS
ZONE DE LISTE DEROULANTE POUR
SELECTIONNER DES ELEMENTS DANS UNE LISTE
D'UNE APPLICATION IOS
IMPLEMENTATION D'UN SELECTEUR DANS DES APPLICATIONS
FIREMONKEY IOS
Sur la plate-forme iOS, FireMonkey encapsule le composant Sélecteur avec le
composant TComboBox :
Pour définir un sélecteur et la liste d'éléments à sélectionner :
1. Sélectionnez Fichier > Nouveau > Application mobile FireMonkey - Delphi
> Application vide.
2. Sélectionnez le composant TComboBox dans la palette d'outils et
déposez-le sur le Concepteur de fiches mobiles FireMonkey.
Pour trouver TComboBox, tapez les premiers caractères ("Com") dans la
zone de recherche de la palette d'outils :
Embarcadero Technologies
44
3. Dès qu'il a été déposé, le composant TComboBox est visible dans le
Concepteur de fiches.
Cliquez avec le bouton droit sur le composant TComboBox et
sélectionnez Editeur d'éléments... :
4. Pour définir des éléments, cliquez plusieurs fois sur Ajouter un élément.
5. Dans la vue Structure, sélectionnez ListBoxItem1 (le premier élément de la
liste).
6. Dans l'inspecteur d'objets, modifiez la propriété Text de ListBoxItem1. Dans
cet exemple qui traite des cinquante états des Etats-Unis, le premier
élément de la liste est "Alabama".
Embarcadero Technologies
45
7. Modifiez les autres éléments en spécifiant Alaska, Arizona, Arkansas,
California, Colorado, etc.
8. Exécutez l'application sur la plate-forme cible Simulateur iOS ou
Périphérique iOS. Dès que vous touchez le composant TComboBox, le
contrôle Sélecteur apparaît. Vous pouvez sélectionner un élément dans la
liste.
CONSTRUCTION D'UNE LISTE D'ELEMENTS EN UTILISANT LE
CODE
La méthode Add vous permet de construire une liste d'éléments en utilisant le
code :
procedure TForm27.FormCreate(Sender: TObject);
begin
ComboBox1.Items.Add('Alabama');
ComboBox1.Items.Add('Alaska');
ComboBox1.Items.Add('Arizona');
ComboBox1.Items.Add('Arkansas');
ComboBox1.Items.Add('California');
// Other states can be listed here
ComboBox1.Items.Add('Virginia');
ComboBox1.Items.Add('Washington');
ComboBox1.Items.Add('West Virginia');
ComboBox1.Items.Add('Wisconsin');
ComboBox1.Items.Add('Wyoming');
end;
Embarcadero Technologies
46
AFFICHAGE D'UN ELEMENT SPECIFIQUE
L'élément actuellement sélectionné est spécifié par la propriété ItemIndex.
ItemIndex est une valeur entière spécifiée en utilisant un index de base zéro (ce
qui signifie que le premier élément est zéro).
Pour afficher la liste avec le cinquième élément sélectionné ("California" dans le
code exemple suivant), spécifiez ItemIndex comme suit :
procedure TForm27.FormCreate(Sender: TObject);
begin
ComboBox1.Items.Add('Alabama');
ComboBox1.Items.Add('Alaska');
ComboBox1.Items.Add('Arizona');
ComboBox1.Items.Add('Arkansas');
ComboBox1.Items.Add('California');
// Other states can be listed here
// Index of 5th item is "4"
ComboBox1.ItemIndex := 4;
end;
Si vous ne connaissez pas la valeur de l'index, vous pouvez la trouver en utilisant
la méthode IndexOf comme suit :
procedure TForm27.FormCreate(Sender: TObject);
begin
ComboBox1.Items.Add('Alabama');
ComboBox1.Items.Add('Alaska');
ComboBox1.Items.Add('Arizona');
ComboBox1.Items.Add('Arkansas');
ComboBox1.Items.Add('California');
// Other states can be listed here
ComboBox1.ItemIndex := ComboBox1.Items.IndexOf('California');
end;
Embarcadero Technologies
47
IMPLEMENTATION D'UN GESTIONNAIRE D'EVENEMENTS
CORRESPONDANT A LA SELECTION EFFECTUEE PAR
L'UTILISATEUR
Après que l'utilisateur ait sélectionné un élément, l'événement OnChange est
déclenché. En réponse à l'action de l'utilisateur, vous pouvez implémenter un
gestionnaire d'événements pour l'événement OnChange.
Pour implémenter un gestionnaire d'événements OnChange :
1. Sélectionnez le composant TComboBox.
2. Dans l’inspecteur d’objets, ouvrez la page Evénements et double-cliquez
sur la zone vierge qui suit OnClick.
3. L'éditeur de code s'ouvre. Ecrivez le code comme suit :
procedure TForm27.CalendarEdit1Change(Sender: TObject);
begin
ShowMessage(Format('Item %s at Index %d was selected. ',
[ComboBox1.Selected.Text, ComboBox1.ItemIndex]));
end;
Ce gestionnaire d'événements affiche un dialogue de message indiquant
l'élément qui a été sélectionné.
Embarcadero Technologies
48
La fonction Format renvoie une chaîne formatée composée d'une chaîne de
format et d'un tableau d'arguments :
VOIR AUSSI




Tutoriel iOS : Utilisation d'un composant Calendrier pour sélectionner une
date dans une application iOS
Tutoriel iOS : Utilisation des composants Onglet pour afficher des pages
dans une application iOS
Développement d'applications mobiles iOS
Développement d'applications Mac OS X
Embarcadero Technologies
49
TUTORIEL IOS : UTILISATION DU COMPOSANT
NAVIGATEUR WEB DANS UNE APPLICATION IOS
UTILISATION DU COMPOSANT NAVIGATEUR WEB DANS DES
APPLICATIONS FIREMONKEY IOS
Sur la plate-forme iOS, FireMonkey encapsule le composant Navigateur Web en
tant que composant TWebBrowser. Cette rubrique décrit comment créer une
application Navigateur Web FireMonkey simple pour iOS.
Embarcadero Technologies
50
ETAPE 1 : CONCEPTION DE L'INTERFACE UTILISATEUR
1. Sélectionnez Fichier > Nouveau > Application mobile FireMonkey - Delphi
> Application vide.
2. Sélectionnez le composant TToolBar dans la Palette d'outils et déposez-le
sur le Concepteur de fiches mobiles FireMonkey. Pour trouver TToolBar,
tapez les premiers caractères (comme "tool") dans la zone Chercher de la
Palette d'outils :
3. Dès qu'il a été déposé, le composant TToolBar est visible en haut du
Concepteur de fiches mobiles :
4. Sélectionnez le composant TButton dans la Palette d'outils et déposez-le
sur le composant ToolBar.
5. Sélectionnez le composant Bouton dans le Concepteur de fiches mobiles,
puis sélectionnez priortoolbuttonbordered pour la propriété StyleLookup
dans l'inspecteur d'objets.
La valeur priortoolbuttonbordered de la propriété StyleLookup du TButton
ajoute un libellé de bouton Back dans le style iOS :
Pour plus de détails sur la sélection d'un style dans les applications
FireMonkey iOS, voir Tutoriel iOS : Utilisation d'un composant Bouton avec
différents styles dans une application iOS.
Embarcadero Technologies
51
6. Sélectionnez le composant TEdit dans la Palette d'outils et déposez-le sur
le composant ToolBar. Assurez-vous que la taille du contrôle de saisie est
suffisamment large pour remplir la zone du ToolBar :
7. Sélectionnez le composant TWebBrowser dans la Palette d'outils et
déposez-le sur la fiche.
8. Sélectionnez le composant Navigateur Web sur le Concepteur de fiches
mobiles, accédez à l'inspecteur d'objets et sélectionnez alClient pour la
propriété Align.
Une fois ces étapes accomplies, la fiche doit avoir l'apparence de la
figure suivante :
Embarcadero Technologies
52
ETAPE 2 : ECRITURE D'UN GESTIONNAIRE D'EVENEMENTS
PROVOQUANT L'OUVERTURE D'UNE PAGE WEB LORSQUE
L'UTILISATEUR CHANGE D'URL DANS LE CONTROLE DE SAISIE
A la différence de la plate-forme de bureau, les périphériques mobiles utilisent
le clavier virtuel pour entrer du texte comme illustré sur l'image suivante.
L'utilisateur peut terminer l'action en cliquant soit sur "Done" ou "Return".
FireMonkey fournit de nombreux types de gestionnaires d'événement pour
couvrir la plupart des actions entreprises par les utilisateurs. Après que le bouton
"Done" ait été sélectionné, le framework FireMonkey envoie un événement
OnChange au contrôle TEdit. D'autre part, il n'y a pas d'événement spécifique
pour le bouton "Return". Dans cette section, nous allons implémenter des
gestionnaires d'événement pour supporter les deux scénarios.
Embarcadero Technologies
53
IMPLEMENTATION D'UNE METHODE COMMUNE POUR OUVRIR UNE PAGE WEB
Avant d'implémenter des gestionnaires d'événement, commencez par
implémenter une méthode commune pour ouvrir une page Web basée sur la
propriété Text du contrôle de saisie.
1. Dans l'éditeur de code, créez la nouvelle ligne suivante :
procedure OpenURL;
next to { Private declarations }
2. Appuyez sur CTRL+MAJ+C pour créer un espace de réservation à la fin du
fichier :
3. Implémentez la méthode OpenURL comme dans l'extrait de code
suivant :
Embarcadero Technologies
54
IMPLEMENTATION D'UN GESTIONNAIRE D'EVENEMENTS POUR L'EVENEMENT
ONCHANGE
1. Dans le Concepteur de fiches mobiles, sélectionnez le composant de
saisie, puis dans l'inspecteur d'objets (onglet Evénements), double-cliquez
sur la zone vide suivant l'événement OnChange pour créer le gestionnaire
d'événement.
L'inspecteur d'objets crée un nouveau gestionnaire d'événements nommé
Edit1Change :
2. Terminez le gestionnaire d'événements en ajoutant le code suivant :
IMPLEMENTATION D'UN GESTIONNAIRE D'EVENEMENTS POUR SUPPORTER LA TOUCHE
ENTREE
Il n'y a pas d'événement spécifique qui soit défini pour la touche Entrée.
Toutefois, vous pouvez toujours contrôler de tels événements via l'événement
OnKeyDown.
OnKeyDown fournit des informations sur la touche appuyée via plusieurs
paramètres dans son gestionnaire d'événement. Vous pouvez implémenter cet
événement comme suit :
Embarcadero Technologies
55
IMPLEMENTATION D'UN GESTIONNAIRE D'EVENEMENTS POUR LE BOUTON BACK
Pour implémenter un bouton Back pour votre navigateur Web, il vous suffit
d'appeler la méthode GoBack sur le composant Navigateur Web :
Le comportement de base est maintenant implémenté pour cette application
Navigateur Web. Essayez d'exécuter l'application sur le simulateur iOS ou sur
votre périphérique iOS.
ETAPE 3 : SELECTION DU CLAVIER APPROPRIE POUR
L'APPLICATION NAVIGATEUR WEB
Une fois que vous aurez exécuté votre application Navigateur Web, vous
réaliserez sans doute que le clavier virtuel n'est pas optimisé. iOS propose
plusieurs claviers virtuels comme suit :
vktAlphabet
vktDefault
vktEmailAddress
vktNamePhonePad
vktNumberPad
vktNumbersAnd
Punctuation
vktPhonePad
vktURL
Embarcadero Technologies
56
Sélectionnez vktURL comme clavier virtuel dans la propriété KeyboardType du
contrôle de saisie :
VOIR AUSSI








Tutoriel iOS : Utilisation de composants Zone de liste déroulante pour
sélectionner des éléments dans une liste d'une application iOS
Tutoriel iOS : Utilisation des composants Onglet pour afficher des pages
dans une application iOS
TWebBrowser
TToolBar
TButton
TEdit
KeyboardType
StyleLookup
Embarcadero Technologies
57
TUTORIEL IOS : UTILISATION DES
COMPOSANTS ONGLET POUR AFFICHER DES
PAGES DANS UNE APPLICATION IOS
ONGLETS DANS LES APPLICATIONS FIREMONKEY IOS
Les onglets sont définis par FMX.TabControl.TTabControl, qui est un conteneur qui
peut contenir plusieurs pages d'onglets :


Chaque page d'onglet peut contenir n'importe quel contrôle utilisé
comme élément de l'interface utilisateur.
Vous pouvez masquer l'onglet de ces pages et changer de page sans
afficher les onglets.
Pour chaque onglet, vous pouvez spécifier des icônes prédéfinies ainsi qu'une
icône personnalisée et un libellé de texte.
Vous pouvez également placer les onglets en haut ou en bas du contrôle.
CONCEPTION DE PAGES D'ONGLETS EN UTILISANT LE
CONCEPTEUR DE FICHES
Pour créer des pages d'onglets dans votre application, utilisez le composant
TTabControl en procédant comme suit :
1. Pour créer une application mobile HD FireMonkey, sélectionnez Fichier >
Nouveau > Application mobile FireMonkey - Delphi > Application vide.
Utilisez la plate-forme cible par défaut pour iPhone (Simulateur iOS).
2. Sélectionnez un TTabControl dans la Palette d'outils :
Embarcadero Technologies
58
3. Après avoir déposé le TTabControl, un TabControl vide apparaît sur le
Concepteur de fiches mobiles FireMonkey :
4. Typiquement, les applications qui possèdent un TabControl utilisent le
plein écran pour afficher les pages. Pour cela, vous devez changer
l'alignement par défaut du TabControl. Dans l'inspecteur d'objets,
changez la propriété Align du TabControl sur alClient :
Embarcadero Technologies
59
5. Cliquez avec le bouton droit sur le TabControl et sélectionnez Editeur
d'éléments... dans le menu contextuel :
6. Cliquez sur Ajouter un élément trois fois afin d'avoir trois instances de
TabItem à cet emplacement. Fermez la boîte de dialogue.
7. Dans le Concepteur de fiches mobiles FireMonkey, sélectionnez le premier
TabItem et changez sa propriété StyleLookup en tabitembookmarks :
Embarcadero Technologies
60
8. Vous pouvez placer n'importe quel composant sur chacune des pages.
Pour passer à une autre page, cliquez simplement sur l'onglet voulu dans
le Concepteur de fiches ou changez la propriété ActiveTab dans
l'inspecteur d'objets :
9. Pour changer l'emplacement des onglets, sélectionnez la propriété
TabPosition pour le composant TabControls. Pour chaque composant,
vous pouvez sélectionner l'une quelconque des valeurs suivantes de la
propriété TabPosition dans l'inspecteur d'objets :
Embarcadero Technologies
61
tpTop
Les onglets sont
affichés en haut.
tpBottom
Les onglets sont
affichés en bas.
Embarcadero Technologies
tpDots
tpNone
Aucun onglet
n'est affiché.
Toutefois, des
points ou des
points de
suspension sous la
forme ([...]) sont
affichés pour
signaler l'existence
de pages
supplémentaires.
Aucun onglet ni
aucun point n'est
affiché à
l'exécution, même
s'il est visible à la
conception. Les
pages peuvent
être changées
uniquement via le
code ou une
action.
62
UTILISATION D'ICONES PERSONNALISEES POUR LES ONGLETS
Vous pouvez utiliser des icônes personnalisées ainsi que du texte personnalisé
pour les pages d'onglets en procédant comme suit :
1. Placez un TabControl, définissez sa propriété d'alignement Align, et dotezle de plusieurs onglets :
2. Sélectionnez un onglet puis le bouton points de suspension dans le champ
Bitmap [...] de la propriété CustomIcon du TTabItem dans l'inspecteur
d'objets :
3. Sélectionnez Modifier... dans le menu déroulant :
4. Dans l'éditeur de bitmaps, cliquez sur le bouton Charger... puis
sélectionnez un fichier PNG. La taille recommandée est 30x30 pixels pour
une résolution normale et 60x60 pixels pour une haute résolution (vous
définirez l'icône BitmapHiRes lors de la prochaine étape) :
Embarcadero Technologies
63
5. Fermez l'éditeur de bitmaps. Dans l'inspecteur d'objets, sélectionnez
l'icône que vous voulez utiliser en haute résolution dans le champ
BitmapHiRes de CustomIcon.
6. Sélectionnez tabitemcustom pour la propriété StyleLookup dans
l'inspecteur d'objets.
7. Dans la propriété Text, changez le texte de l'onglet.
Embarcadero Technologies
64
Les glyphes personnalisés utilisés dans ce tutoriel sont disponibles dans votre
répertoire $(BDS)\Images\GlyFX.
Dès que vous avez défini une icône personnalisé, le framework FireMonkey
génère une image sélectionnée et une image non sélectionnée (estompée) à
partir du fichier .png spécifié. Cette transformation est effectuée en utilisant le
canal alpha des données bitmap. Par exemple :
Image d'origine
Embarcadero Technologies
Image sélectionnée
Image non
sélectionnée
65
DEFINITION DE CONTROLES DANS UN TABCONTROL
Comme nous l'avons vu, chaque page d'onglets peut contenir un nombre
quelconque de contrôles, y compris un autre TabControl. Dans ce cas, vous
pouvez facilement gérer et parcourir les différentes pages d'onglets dans la vue
Structure :
Embarcadero Technologies
66
CHANGEMENT DE PAGE A L'EXECUTION
PAR L'INTERACTION DE L'UTILISATEUR EN TOUCHANT L'ONGLET
Si les onglets sont visibles (c'est-à-dire lorsque la propriété TabPosition est définie
sur toute valeur autre que tpNone), l'utilisateur final peut toucher les onglets
pour passer d'une page à l'autre.
PAR LES ACTIONS ET UNE LISTE D'ACTIONS
Une action correspond à un ou plusieurs éléments de l'interface utilisateur,
comme les commandes de menu, les boutons de barre d'outils et les contrôles.
Les actions ont deux fonctions :


Elles représentent les propriétés communes aux éléments de l'interface
utilisateur, par exemple si un contrôle est activé ou si une case à cocher
est sélectionnée.
Les actions répondent quand un contrôle est déclenché, par exemple
quand l'utilisateur de l'application clique sur un bouton ou choisit un
élément de menu.
Voici les étapes à suivre pour permettre à un utilisateur de se déplacer de page
en page en cliquant sur un bouton :
1. Dans une application mobile FireMonkey, placez un TabControl et dotezle de quelques éléments onglets (TabItem1, TabItem2 et TabItem3).
2. Depuis la Palette d'outils, ajoutez un TButton à la fiche, puis un composant
ActionList :
Embarcadero Technologies
67
3. Sélectionnez le composant Bouton dans l'inspecteur d'objets, puis Action
| Nouvelle action standard | Onglet > TChangeTabAction dans le menu
déroulant. Dès que l'utilisateur clique sur ce bouton, l'action que vous
venez de définir est réalisée (changement de page d’onglet) :
Embarcadero Technologies
68
4. Sélectionnez ChangeTabAction1 dans la vue Structure, puis sélectionnez
TabItem2 pour la propriété Tab dans l'inspecteur d'objets. En liant
TabItem2, cette action entraîne le changement de page vers TabItem2 :
Embarcadero Technologies
69
5. Consécutivement à l'étape précédente, le libellé du bouton (la propriété
Text) est automatiquement remplacé par "Go To Security", car le libellé de
TabItem2 est "Security" dans notre exemple. Changez la taille du bouton
pour que le nouveau libellé puisse s'afficher ou changez la propriété
CustomText du composant ChangeTabAction1 comme illustré ci-dessous :
6. ChangeTabAction supporte également l'animation Glissement (Slide)
pour indiquer une transition entre chaque page. Pour l'utiliser, définissez la
propriété Transition sur ttSlide :
Embarcadero Technologies
70
PAR LE CODE SOURCE
Vous pouvez utiliser l'une quelconque des trois méthodes suivantes pour
changer la page d'onglet active dans votre code source :

Assignez une instance de TTabItem à la propriété ActiveTab :
TabControl1.ActiveTab := TabItem1;

Changez la valeur de la propriété TabIndex. La propriété TabIndex est
une valeur entière à index de base zéro (vous pouvez spécifier un nombre
entre 0 et TabControl1.TabCount - 1).
TabControl1.TabIndex := 1;

Si ChangeTabAction est définie, vous pouvez également exécuter une
action à partir de votre code :
// You can set the target at run time if it is not defined yet.
ChangeTabAction1.Tab := TabItem2;
// Call the action
ChangeTabAction1.Execute;
VOIR AUSSI



Tutoriel iOS : Utilisation d'un composant Bouton avec différents styles dans
une application iOS
Tutoriel iOS : Utilisation du composant Navigateur Web dans une
application iOS
Tutoriel iOS : Utilisation des composants Zone de liste pour afficher une vue
table dans une application iOS
Embarcadero Technologies
71
TUTORIEL IOS : UTILISATION DES
COMPOSANTS ZONE DE LISTE POUR AFFICHER
UNE VUE TABLE DANS UNE APPLICATION IOS
UTILISATION DES COMPOSANTS ZONE DE LISTE POUR
AFFICHER UNE VUE TABLE DANS UNE APPLICATION IOS
Sur la plate-forme iOS, FireMonkey utilise le composant FMX.ListBox.TListBox pour
présenter une vue Table dans le style iOS, comme ces zones de liste :
Ce tutoriel décrit les étapes élémentaires relatives à la construction d'éléments
pour une vue Table dans votre application FireMonkey iOS.
Embarcadero Technologies
72
CREATION DES ELEMENTS SUR LE COMPOSANT ZONE DE LISTE
1. Sélectionnez Fichier > Nouveau > Application mobile FireMonkey - Delphi
> Application vide.
2. Sélectionnez le composant TListBox dans la palette d'outils et déposez-le
sur le Concepteur de fiches mobiles FireMonkey. Pour trouver TListBox,
tapez les premiers caractères (comme "tlist") dans la zone Chercher de la
Palette d'outils :
3. Sélectionnez le composant TListBox sur le Concepteur de fiches mobiles,
accédez à l'inspecteur d'objets et sélectionnez alClient pour la propriété
Align :
4. Sur le Concepteur de fiches mobiles FireMonkey, cliquez avec le bouton
droit sur le composant TListBox, et sélectionnez Editeur d'éléments :
Embarcadero Technologies
73
5. Sur le Concepteur d'éléments, cliquez plusieurs fois sur le bouton Ajouter
un élément pour ajouter plusieurs éléments à la zone de liste :
6. Fermez le Concepteur d'éléments. Vous pouvez maintenant trouver les
éléments de zone de liste sur le composant TListBox. Par exemple :
Embarcadero Technologies
74
AJOUT D'UN EN-TETE
Vous pouvez définir un en-tête sur le composant TListBox en suivant les étapes cidessous :
1. Sur le concepteur de fiches mobiles FireMonkey, cliquez avec le bouton
droit sur le composant TListBox, et sélectionnez Ajouter un élément >
TListBoxHeader :
2. Sur la palette d'outils, sélectionnez le composant TLabel et déposez-le audessus du composant TListBoxHeader que vous venez d'ajouter :
Embarcadero Technologies
75
3. Dans l'inspecteur d'objets, modifiez les propriétés du composant TLabel
comme suit :
Propriété
Valeur
Align
alClient
StyleLookup
toollabel
TextAlign
taCenter
Text
(Valeur texte de votre choix)
AJOUT D'UN GROUPE EN-TETE/PIED A LA LISTE
Vous pouvez définir un en-tête et un pied de groupe pour les éléments de
TListBox en procédant comme suit :
1. Sur le concepteur de fiches mobiles FireMonkey, cliquez avec le bouton
droit sur le composant TListBox, et sélectionnez Editeur d'éléments.
2. Sur le Concepteur d'élément, sélectionnez TListBoxGroupHeader dans la
liste déroulante, puis sélectionnez Ajouter un élément :
Embarcadero Technologies
76
3. Sélectionnez TListBoxGroupFooter dans la liste déroulante, puis
sélectionnez Ajouter un élément.
4. Sélectionnez ListBoxGroupHeader1 dans la liste d'éléments et cliquez sur le
bouton Haut plusieurs fois jusqu'à ce que cet élément devienne le premier
de la liste :
5. Fermez la boîte de dialogue. Vous avez maintenant un en-tête et un pied
de groupe pour le composant TListBox.
AFFICHAGE DES ELEMENTS DE LISTE SOUS FORME D'ELEMENTS
GROUPES SEPARES
Les éléments d'une zone de liste peuvent être affichés sous la forme d'une liste
simple ou d'une liste groupée. Ce choix est contrôlé par les propriétés
GroupingKind et StyleLookup comme affiché sur le graphique suivant :
Affichage des éléments sous la forme
d'une liste simple
Affichage des éléments sous la forme
d'une liste groupée
gsPlain = Valeur de la propriété
GroupingKind
gsGrouped = Valeur de la propriété
GroupingKind
listboxstyle = Valeur de la propriété
StyleLookup
transparentlistboxstyle = Valeur de la
propriété StyleLookup
Embarcadero Technologies
77
Vous pouvez sélectionner l'un ou l'autre des styles pour votre composant TListBox
dans l'inspecteur d'objets.
AJOUT D'UNE CASE A COCHER OU D'UN AUTRE ACCESSOIRE A
UN ELEMENT DE ZONE DE LISTE
Chaque élément d'un TListBox peut utiliser un accessoire tel qu'une case à
cocher via la propriété ItemData.Accessory. L'image suivante affiche la valeur
que vous pouvez affecter à ItemData.Accessory ainsi que l'accessoire ayant
été affecté :
Vous pouvez sélectionner la propriété Accessory dans l'inspecteur d'objets
lorsque l'élément de zone de liste est sélectionné dans le Concepteur de fiches.
Embarcadero Technologies
78
AJOUT D'UNE ICONE A UN ELEMENT DE ZONE DE LISTE
Chaque élément d'un composant Zone de liste peut contenir des données
bitmap, comme une icône, via la propriété ItemData.Bitmap :
Vous pouvez sélectionner la propriété Bitmap dans l'inspecteur d'objets lorsque
l'élément de zone de liste est sélectionné dans le Concepteur de fiches.
AJOUT D'INFORMATIONS DE DETAIL A UN ELEMENT
Vous pouvez ajouter des informations texte supplémentaires pour chaque
élément du composant Zone de liste.
Spécifiez le texte supplémentaire dans la propriété ItemData.Detail et
sélectionnez l'emplacement du texte de détail via la propriété StyleLookup
comme affiché dans le tableau suivant :
Propriété StyleLookup
Apparence
listboxitemnodetail
listboxitembottomdetail
listboxitemrightdetail
listboxitemleftdetail
Embarcadero Technologies
79
AJOUT D'ELEMENTS A UNE ZONE DE LISTE A PARTIR DU CODE
Pour ajouter des éléments réguliers à une zone de liste, il vous suffit d'appeler la
méthode Items.Add comme dans le code suivant :
ListBox1.Items.Add('Text to add');
Si vous voulez créer des éléments autres qu'un élément simple, ou contrôler
d'autres propriétés, vous pouvez créer d'abord une instance de l'élément puis
l'ajouter à la zone de liste.
Le code suivant ajoute des éléments à une zone de liste, comme dans l'image
suivante :
Embarcadero Technologies
80
procedure TForm40.FormCreate(Sender: TObject);
var
c: Char;
i: Integer;
Buffer: String;
ListBoxItem : TListBoxItem;
ListBoxGroupHeader : TListBoxGroupHeader;
begin
ListBox1.BeginUpdate;
for c := 'a' to 'z' do
begin
// Add header ('A' to 'Z') to the List
ListBoxGroupHeader := TListBoxGroupHeader.Create(ListBox1);
ListBoxGroupHeader.Text := UpperCase(c);
ListBox1.AddObject(ListBoxGroupHeader);
// Add items ('a', 'aa', 'aaa', 'b', 'bb', 'bbb', 'c', ...) to the list
for i := 1 to 3 do
begin
// StringOfChar returns a string with a specified number of repeating
characters.
Buffer := StringOfChar(c, i);
// Simply add item
// ListBox1.Items.Add(Buffer);
// or, you can add items by creating an instance of TListBoxItem by yourself
ListBoxItem := TListBoxItem.Create(ListBox1);
ListBoxItem.Text := Buffer;
// (aNone=0, aMore=1, aDetail=2, aCheckmark=3)
ListBoxItem.ItemData.Accessory := TListBoxItemData.TAccessory(i);
ListBox1.AddObject(ListBoxItem);
end;
end;
ListBox1.EndUpdate;
end;
Embarcadero Technologies
81
AJOUT D'UNE ZONE DE RECHERCHE
Vous pouvez ajouter une zone de recherche à une zone de liste. La zone de
recherche permet aux utilisateurs de réduire une sélection à partir d'une longue
liste comme dans les images suivantes :

Pour ajouter une zone de recherche au composant Zone de liste, cliquez
avec le bouton droit sur le composant TListBox et sélectionnez simplement
Ajouter un élément > TSearchBox dans le menu contextuel :
Embarcadero Technologies
82
VOIR AUSSI




FMX.ListBox.TListBox
Tutoriel iOS : Utilisation d'un composant Bouton avec différents styles dans
une application iOS
Tutoriel iOS : Utilisation du composant Navigateur Web dans une
application iOS
Tutoriel iOS : Utilisation des composants Onglet pour afficher des pages
dans une application iOS
Embarcadero Technologies
83
TUTORIEL IOS : UTILISATION DE LA
DISPOSITION POUR AJUSTER DIFFERENTES
TAILLES DE FICHES OU ORIENTATIONS DANS
UNE APPLICATION IOS
Ce tutoriel décrit la stratégie qui consiste à utiliser une fiche commune pour
différents facteurs de forme (comme l'iPhone et l'iPad) sans avoir besoin d'utiliser
des fiches différentes pour chaque facteur de forme.
Dans le Concepteur de fiches mobiles FireMonkey, vous pouvez prévisualiser
l'interface utilisateur sans qu'il soit nécessaire d'exécuter l'application sur un
périphérique ; il vous suffit de choisir un autre périphérique ou de changer
l'orientation dans la liste déroulante située dans le coin supérieur droit :
CHAQUE COMPOSANT FIREMONKEY PEUT AVOIR UN
PROPRIETAIRE, UN PARENT ET DES ENFANTS
Premièrement, chaque composant FireMonkey a le concept de Propriétaire,
Parent et Enfants. Si vous placez un composant sur une fiche, la fiche devient le
propriétaire et le parent du composant.
Si vous ajoutez des composants (tels qu'un Bouton, un Libellé, etc.) dans d'autres
composants (par exemple une Barre d'outils), la Barre d'outils devient le parent
et le propriétaire du Bouton, du Libellé et des autres composants. Cette relation
parent-enfant est représentée dans la vue arborescente de la vue Structure.
La disposition d'un enfant est définie en tant que valeur relative à son parent.
Dans la figure suivante, Label1 est l'enfant de Toolbar1 et la disposition de
Label1 est relative à Toolbar1.
Embarcadero Technologies
84
UTILISATION DES PROPRIETES COMMUNES RELATIVES A LA
DISPOSITION D'UN COMPOSANT FIREMONKEY
UTILISATION DE LA PROPRIETE ALIGN
La propriété Align d'un contrôle détermine s'il est automatiquement repositionné
et/ou redimensionné le long des quatre côtés ou du centre de son parent,
initialement et au fur et à mesure que le parent est redimensionné. La valeur par
défaut de la propriété Align est alNone, ce qui signifie qu'aucun calcul
automatique n'est effectué : le contrôle reste à son emplacement.
Les valeurs typiques de la propriété Align sont comme suit (le bleu ciel indique la
zone relative à l'enfant) :
alNone
alTop
alBottom
alLeft
alRight
alCenter
alClient
Si vous utilisez l'une des valeurs alTop, alBottom, alLeft ou alRight de la propriété
Align pour un composant, les propriétés Align des autres composants utilisent la
zone restante.
La taille et la forme de la zone restante (alClient) changent également en
fonction de l'orientation du périphérique et du facteur de forme (iPhone ou
iPad).
Les images suivantes montrent la disposition en mode paysage (horizontal) et
portrait (vertical) lorsque vous avez deux composants qui utilisent alTop et un
composant qui utilise alClient.
Embarcadero Technologies
85
UTILISATION DE LA PROPRIETE MARGINS
Margins assure la séparation entre des contrôles positionnés automatiquement
par un parent.
Dans l'image suivante, le côté droit du composant (alClient) utilise la propriété
Margins pour garantir un peu d'espace autour du composant.
UTILISATION DE LA PROPRIETE PADDING
Padding définit un espace à part sur l'intérieur de la zone de contenu du parent,
comme les marges d'une page imprimée. Dans l'inspecteur d'objets, vous
pouvez définir les valeurs (en pixels) de la propriété Padding :




Left
Right
Bottom
Top
Dans l'image suivante, le composant parent (qui contient deux régions) utilise la
propriété Padding pour garantir de l'espace à l'intérieur du composant parent :
Embarcadero Technologies
86
UTILISATION DE LA PROPRIETE ANCHORS
Les ancrages sont nécessaires quand un contrôle doit maintenir sa position à
une certaine distance des bords de son parent, ou doit s'étirer tout en
maintenant la distance originale entre ses bords et ceux de son parent. Les
contrôles ancrés sont 'attachés' aux côtés des conteneurs, et aussi étirés si
spécifié.
Propriété Anchors pour le contrôle de saisie
Si un contrôle de saisie est placé sur une barre d'outils, il est souhaitable de
garder une distance fixe entre le bord droit du contrôle de saisie et le bord de
la fiche (plus précisément de la barre d'outils). Les ancrages permettent de
spécifier qu'un contrôle doit rester fixe en relation avec les côtés de ses parents.
Si vous souhaitez que le contrôle de saisie garde la même relation positive avec
la barre d'outils (son parent), vous pouvez définir la propriété Anchors sur akLeft,
akTop, akRight. Lorsque la barre d'outils est redimensionnée, le contrôle de saisie
est également redimensionné en fonction des paramètres de la propriété
Anchors :
Propriété Anchors pour un contrôle Bouton
Si un contrôle Bouton est placé sur l'extrémité droite de la barre d'outils, il est
souhaitable de garder la même distance entre le bord droit du contrôle Bouton
et le bord de la fiche. Toutefois, il n'est pas souhaitable de garder la même
distance entre le bord gauche du contrôle Bouton et le bord gauche de la
fiche. Dans ce cas, vous pouvez définir la propriété Anchors sur akTop, akRight
Embarcadero Technologies
87
(désélectionnez akLeft), afin que le contrôle Bouton conserve les mêmes
distances avec la barre d'outils (le parent) pour Top et Right.
UTILISATION DU COMPOSANT TLAYOUT
TLayout, un composant non visible à l'exécution, peut être utilisé pour regrouper
ses contrôles enfant afin qu'ils puissent être manipulés comme un tout. Par
exemple, vous pouvez définir la visibilité d'un groupe de contrôles à un moment
donné en définissant seulement la propriété Visible de la disposition. TLayout ne
définit pas automatiquement les propriétés de ses enfants.
Pour que les contrôles sélectionnés deviennent les enfants de TLayout, vous
devez utiliser la vue Structure.
Mettez en surbrillance les contrôles que vous voulez déplacer. Faites glisser
ensuite le groupe de contrôles sur le contrôle qui sera le parent, puis déposez les
contrôles à cet endroit. Dans la vue Structure, le groupe de contrôles apparaît
maintenant comme l'enfant du nouveau parent :
1. Etat initial
2. Mettez en surbrillance
les contrôles à déplacer
3. Faites glisser sur le
parent
Vous pouvez utiliser Align, Padding, Margins, Anchors et d'autres propriétés de
TLayout pour définir la disposition d'une zone particulière. Vous pouvez utiliser le
composant TLayout de la même façon qu'une balise DIV en HTML.
Embarcadero Technologies
88
MANIPULATION D'UNE INTERFACE ENCOMBREE : UTILISATION
DU COMPOSANT TVERTSCROLLBOX
Généralement, il faut éviter d'avoir trop d'éléments dans une fiche, car cela
oblige les utilisateurs à faire défiler l'interface utilisateur. Très souvent, le
défilement peut être évité en utilisant un composant TabControl composé de
plusieurs pages.
Si vous devez placer beaucoup d'éléments sur votre fiche, vous pouvez utiliser
un composant TVertScrollBox pour définir une zone de défilement comme décrit
ci-dessous :
1. Sélectionnez Périphérique personnalisé sur le Concepteur de fiches
mobiles FireMonkey.
2. Changez la taille du périphérique personnalisé en faisant glisser le bord du
concepteur de façon à obtenir la forme et la taille voulues.
3. Déposez un composant TVertScrollBox et définissez sa propriété Align sur
alClient. Le composant TVertScrollBox occupe la totalité de la zone client.
4. Localisez les composants sur le composant TVertScrollBox :
Embarcadero Technologies
89
Vous pourrez faire défiler cette fiche à l'exécution par un mouvement de
glissement sur l'interface utilisateur.
VOIR AUSSI






Tutoriel iOS : Utilisation des composants Zone de liste pour afficher une vue
table dans une application iOS
Tutoriel iOS : Utilisation de détecteurs d'emplacement sur le périphérique
iOS
Tutoriel : Utilisation des dispositions FireMonkey
Stratégies des dispositions FireMonkey
Arrangement des contrôles FireMonkey
Mouvements dans FireMonkey
Embarcadero Technologies
90
TUTORIEL IOS : PRENDRE UNE PHOTO ET LA
PARTAGER DANS UNE APPLICATION IOS
Avant de commencer ce tutoriel, il est recommandé de lire et suivre le tutoriel
suivant :

Tutoriel iOS : Utilisation d'un composant Bouton avec différents styles dans
une application iOS
Ce tutoriel couvre les tâches typiques suivantes pour l'utilisation des photos dans
une application iOS :
Prendre une photo avec la
caméra du périphérique iOS
Utiliser une photo de la
bibliothèque de photos
du périphérique iOS
Partage ou impression
d'une photo
Cette fonctionnalité est fournie sous la forme d'actions et vous devez écrire une
seule ligne de code pour chaque tâche.
Une action correspond à un ou plusieurs éléments de l'interface utilisateur,
comme les commandes de menu, les boutons de barre d'outils et les contrôles.
Les actions ont deux fonctions :


Une action représente les propriétés communes aux éléments de
l'interface utilisateur, par exemple si un contrôle est activé ou si une case
à cocher est sélectionnée.
Une action peut répondre quand un contrôle est déclenché, par
exemple quand l'utilisateur clique sur un bouton ou choisit un élément de
menu.
Embarcadero Technologies
91
Dans ce tutoriel, vous apprendrez comment assigner des actions aux éléments
de l'interface utilisateur (tels qu'un bouton) pour chaque fonctionnalité que vous
voulez supporter.
CONSTRUCTION DE L'INTERFACE UTILISATEUR POUR
L'APPLICATION
L'interface utilisateur de cette application exemple est plutôt simple, comme
illustré dans l'image suivante :
Placez les composants suivants sur le Concepteur de fiches :



Composant TToolBar
o Trois composants TButton. Chaque bouton utilise différentes icônes.
o Définissez la propriété StyleLookup pour les trois boutons,
respectivement sur cameratoolbuttonbordered,
searchtoolbuttonbordered et actiontoolbuttonbordered.
Composant TImage
o Définissez la propriété Align sur alClient.
Composant TActionList
PRENDRE UNE PHOTO AVEC LA CAMERA DU PERIPHERIQUE IOS
Vous pouvez définir une action pour prendre une photo à l'aide de la caméra
du périphérique iOS en utilisant les étapes suivantes :
1. Sur le Concepteur de fiches, sélectionnez le bouton (pour prendre une
photo).
Embarcadero Technologies
92
2. Dans l'inspecteur d'objets, sélectionnez la liste déroulante de la propriété
Action.
3. Sélectionnez Nouvelle action standard | Bibliothèque multimédia |
TTakePhotoFromCameraAction :
4. Sur l'onglet Evénements, développez le nœud Action puis double-cliquez
sur l'événement OnDidFinishTaking.
5. Ajoutez le code suivant au gestionnaire d'événements OnDidFinishTaking :
procedure TForm1.TakePhotoFromCameraAction1DidFinishTaking(Image: TBitmap);
begin
Image1.Bitmap.Assign(Image);
end;
Ce code assigne une photo prise à partir de la caméra du périphérique iOS à la
propriété Bitmap du composant TImage.
UTILISATION D'UNE PHOTO DE LA BIBLIOTHEQUE DE PHOTOS DU
PERIPHERIQUE IOS
Vous pouvez définir une action pour utiliser une photo de la bibliothèque de
photos avec les étapes suivantes :
Embarcadero Technologies
93
1. Sur le Concepteur de fiches, choisissez le bouton que vous voulez utiliser
(pour choisir une photo).
2. Dans l'inspecteur d'objets, cliquez sur la liste déroulante de la propriété
Action et sélectionnez Nouvelle action standard | Bibliothèque
multimédia | TTakePhotoFromLibraryAction.
3. Dans l'onglet Evénements, développez le nœud Action puis doublecliquez sur l'événement OnDidFinishTaking.
4. Ajoutez le code suivant au gestionnaire d'événements OnDidFinishTaking :
procedure TForm1.TakePhotoFromLibraryAction1DidFinishTaking(Image: TBitmap);
begin
Image1.Bitmap.Assign(Image);
end;
Le code ci-dessus assigne une photo prise dans la bibliothèque de photos à la
propriété Bitmap du composant TImage.
PARTAGE OU IMPRESSION D'UNE PHOTO
A partir d'une application iOS, vous pouvez partager une photo sur les sites des
réseaux sociaux (tels que Facebook et Twitter), envoyer la photo sur une
imprimante, utiliser la photo comme pièce jointe à un e-mail, l'assigner aux
contacts, et ainsi de suite.
Ce service de partage multiple est appelé Fonctionnalité Feuille de partage et
vous pouvez implémenter cette fonctionnalité en suivant les étapes ci-après :
Embarcadero Technologies
94
1. Sur le Concepteur de fiches, sélectionnez un bouton (pour partager une
photo).
2. Dans l'inspecteur d'objets, cliquez sur la liste déroulante de la propriété
Action et sélectionnez Nouvelle action standard | Bibliothèque
multimédia | ShowShareSheetAction.
3. Sur l'onglet Evénements, développez le nœud Action puis double-cliquez
sur l'événement OnBeforeExecute.
4. Ajoutez le code suivant au gestionnaire d'événements OnBeforeExecute :
procedure TForm1.ShowShareSheetAction1BeforeExecute(Sender: TObject);
begin
ShowShareSheetAction1.Bitmap.Assign(Image1.Bitmap);
end;
Le code ci-dessus assigne une photo sur le composant TImage pour la
"fonctionnalité feuille de partage".
Après la sélection de Facebook dans la liste des services, vous pouvez poster la
photo sur Facebook avec votre commentaire :
VOIR AUSSI







Tutoriel iOS : Utilisation de détecteurs d'emplacement sur le périphérique
iOS
Tutoriel iOS : Utilisation du Centre de notifications sur le périphérique iOS
Actions FireMonkey
FMX.StdCtrls.TButton
FMX.Objects.TImage
FMX.MediaLibrary
http://appleinsider.com/articles/12/02/16/share_sheets_twitter_integration
_to_make_mountain_lion_more_social/
Embarcadero Technologies
95
TUTORIEL IOS : UTILISATION DE DETECTEURS
D'EMPLACEMENT SUR LE PERIPHERIQUE IOS
Avant de commencer ce tutoriel, il est recommandé de lire et suivre les tutoriels
suivants :



Tutoriel iOS : Utilisation des composants Zone de liste pour afficher une vue
table dans une application iOS
Tutoriel iOS : Utilisation du composant Navigateur Web dans une
application iOS
Tutoriel iOS : Utilisation de la disposition pour ajuster différentes tailles de
fiches ou orientations dans une application iOS
Ce tutoriel décrit les étapes élémentaires pour localiser votre périphérique iOS
(en utilisant la latitude et la longitude) et pour utiliser le Géocodage inversé pour
convertir une adresse lisible, comme sur l'image suivante :
Embarcadero Technologies
96
CONCEPTION DE L'INTERFACE UTILISATEUR
Cette application de démonstration est conçue avec deux principaux
composants : un TListBox (sur le côté gauche) et un TWebBrowser.

Dans le TListBox, définissez la propriété Align sur alLeft pour réserver le
côté gauche de l'interface utilisateur. Puis créez les sous-composants
suivants sous la zone de liste :
o un composant TListBoxHeader avec les sous-composants suivants :
 un composant TLabel pour afficher le titre "Location Demo"
 un composant Switch (Switch1) pour sélectionner
l'activation/désactivation de TLocationSensor
o un TListBoxGroupHeader avec le texte "Your Location"
o un TListBoxItem ayant le nom "ListBoxItemLatitude" et le texte
"Latitude"
o un TListBoxItem ayant le nom "ListBoxItemLongitude" et le texte
"Longitude"
o un TListBoxGroupHeader ayant le texte "Current Address"
o un TListBoxItem ayant le nom "ListBoxItemAdminArea" et le texte
"AdminArea"
o un TListBoxItem ayant le nom "ListBoxItemCountryCode" et le texte
"CountryCode"
o un TListBoxItem ayant le nom "ListBoxItemCountryName" et le texte
"CountryName"
o un TListBoxItem ayant le nom "ListBoxItemFeatureName" et le texte
"FeatureName"
o un TListBoxItem ayant le nom "ListBoxItemLocality" et le texte
"Locality"
Embarcadero Technologies
97
un TListBoxItem ayant le nom "ListBoxItemPostalCode" et le texte
"PostalCode"
o un TListBoxItem ayant le nom "ListBoxItemSubAdminArea" et le texte
"SubAdminArea"
o un TListBoxItem ayant le nom "ListBoxItemSubLocality" et le texte
"SubLocality"
o un TListBoxItem ayant le nom "ListBoxItemSubThoroughfare" et le
texte "SubThoroughfare"
o un TListBoxItem ayant le nom "ListBoxItemThoroughfare" et le texte
"Thoroughfare"
un composant TWebBrowser (WebBrowser1) pour afficher la page Web
(Google Maps). Définissez la propriété Align sur alClient.
o

Après avoir créé ces composants, sélectionnez tous les éléments TListBoxItem et
sélectionnez ensuite listboxitemleftdetail dans la propriété StyleLookup.
TListBoxItem peut ainsi afficher à la fois un libellé et du texte détaillé.
LE DETECTEUR D'EMPLACEMENT
Le détecteur d'emplacement est encapsulé par le composant TLocationSensor.
TLocationSensor déclenche un événement OnLocationChanged lorsque le
périphérique détecte un mouvement. Vous pouvez régler la sensibilité de
TLocationSensor en utilisant la propriété Distance. Si vous définissez la distance à
"10", TLocationSensor déclenche un événement OnLocationChanged pour
chaque déplacement de "10 mètres".
LECTURE DES INFORMATIONS D'EMPLACEMENT (LATITUDE,
LONGITUDE) A PARTIR DU COMPOSANT LOCATIONSENSOR
Le composant TLocationSensor doit d'abord être activé pour être utilisé. Vous
pouvez activer/désactiver TLocationSensor en fonction de votre saisie, comme
un composant TSwitch ou d'autres événements Application.
Voici un extrait de code illustrant comment contrôler TLocationSensor en
fonction du changement de la valeur contenue dans le composant TSwitch :
procedure TForm44.Switch1Switch(Sender: TObject);
begin
LocationSensor1.Active := Switch1.IsChecked;
end;
Embarcadero Technologies
98
Comme expliqué précédemment, TLocationSensor déclenche un événement
OnLocationChanged lorsque vous déplacez le périphérique iOS. Vous pouvez
afficher l'emplacement en cours (Latitude et Longitude) en utilisant des
paramètres avec ce gestionnaire d'événements, comme suit :
procedure TForm44.LocationSensor1LocationChanged(Sender: TObject;
const OldLocation, NewLocation: TLocationCoord2D);
begin
// Show current location
ListBoxItemLatitude.ItemData.Detail := NewLocation.Latitude.ToString;
ListBoxItemLongitude.ItemData.Detail := NewLocation.Longitude.ToString;
end;
AFFICHAGE DE L'EMPLACEMENT EN COURS EN UTILISANT
GOOGLE MAPS VIA UN COMPOSANT TWEBBROWSER
Comme expliqué dans le Tutoriel iOS : Utilisation du composant Navigateur Web
dans une application iOS, le composant TWebBrowser encapsule un navigateur
Web pour iOS.
Vous pouvez appeler Google Maps depuis le composant TWebBrowser en
utilisant les paramètres d'URL suivants :
https://maps.google.com/maps?q=(Latitude-value),(Longitudevalue)&output=embed
Vous pouvez alors ajouter cette URL au gestionnaire d'événements que vous
venez de créer, OnLocationChanged, en procédant comme suit :
procedure TForm44.LocationSensor1LocationChanged(Sender: TObject;
const OldLocation, NewLocation: TLocationCoord2D);
var
URLString: String;
begin
// code for previous step goes here
// Show Map using Google Maps
URLString := Format(
'https://maps.google.com/maps?q=%s,%s&output=embed',
[NewLocation.Latitude.ToString, NewLocation.Longitude.ToString]);
WebBrowser1.Navigate(URLString);
end;
Embarcadero Technologies
99
UTILISATION DU GEOCODAGE INVERSE
TGeocoder est un objet qui encapsule le service de géocodage (ou de
Géocodage inversé).
Le Géocodage est le processus qui consiste à transformer des données
géographiques, comme l'adresse et le code postal, en coordonnées
géographiques. Le Géocodage inverse est le processus qui consiste à
transformer des coordonnées géographiques en données géographiques
comme l'adresse.
Dans ce cas, vous devez utiliser TGeocoder pour effectuer le "géocodage
inversé" de votre emplacement (en Latitude et Longitude) en informations
d'adresse lisibles.
Voici la séquence d'actions élémentaires relatives à TGeocoder :
1. Créer une instance de TGeocoder.
2. Définir un événement OnGeocodeReverse afin que vous puissiez par la
suite recevoir l'événement.
3. Définir les données pour exécuter le "Géocodage inversé".
4. TGeocoder accède au service sur le réseau lui permettant de résoudre les
informations d'adresse.
5. TGeocoder déclenche un événement OnGeocodeReverse.
6. Votre application iOS App reçoit les informations d'adresse via le
paramètre de l'événement OnGeocodeReverse et met à jour l'interface
utilisateur.
Comme TGeocoder n'est pas un composant (c'est simplement une classe), vous
devez définir ces étapes via votre code (il n'est pas possible de déposer un
composant ou d'assigner un gestionnaire d'événements via l'inspecteur
d'objets).
Commencez par définir un nouveau champ "FGeocoder : TGeocoder" dans la
section private de la fiche. Vous pouvez aussi définir une procédure
"OnGeocodeReverseEvent" comme dans l'extrait de code suivant.
Embarcadero Technologies
100
type
TForm44 = class(TForm)
// IDE defines visible (or non-visual) components here automatically
private
{ Private declarations }
FGeocoder: TGeocoder;
procedure OnGeocodeReverseEvent(const Address: TCivicAddress);
public
{ Public declarations }
end;
Après avoir défini ces deux lignes, accédez à la ligne de
OnGeocodeReverseEvent et tapez CTRL+SHIFT+C. Cela a pour effet de créer la
procédure suivante dans votre code (vous l'utiliserez plus tard) :
procedure TForm44.OnGeocodeReverseEvent(const Address: TCivicAddress);
begin
end;
Vous pouvez maintenant créer une instance de TGeocoder et la configurer
avec des données en utilisant le code suivant.
TGeocoder.Current donne le type de classe qui implémente le service de
géocodage. Le code dans "TGeocoder.Current.Create" appelle le constructeur
(Create) pour le type spécifié et l'enregistre dans le champ FGeocoder. Vous
devez aussi spécifier un gestionnaire d'événements qui sera déclenché lorsque
TGeocoder terminera le géocodage inversé. Assignez OnGeocodeReverseEvent
(que vous venez de définir lors de l'étape précédente) à
FGeocoder.OnGeocodeReverse.
Pour finir, si vous avez réussi à créer une instance de TGeocoder et que
TGeocoder n'est pas exécuté, appelez TGeocoder.GeocodeReverse avec les
informations d'emplacement. Lorsque TGeocoder reçoit des données,
l'événement OnGeocodeReverseEvent est déclenché.
Embarcadero Technologies
101
procedure TForm44.LocationSensor1LocationChanged(Sender: TObject;
const OldLocation, NewLocation: TLocationCoord2D);
begin
// code for previous steps goes here
// Setup an instance of TGeocoder
if not Assigned(FGeocoder) then
begin
if Assigned(TGeocoder.Current) then
FGeocoder := TGeocoder.Current.Create;
if Assigned(FGeocoder) then
FGeocoder.OnGeocodeReverse := OnGeocodeReverseEvent;
end;
// Translate location to address
if Assigned(FGeocoder) and not FGeocoder.Geocoding then
FGeocoder.GeocodeReverse(NewLocation);
end;
AFFICHAGE D'UNE ADRESSE LISIBLE DANS LE COMPOSANT
ZONE DE LISTE
Comme décrit précédemment, lorsque le géocodage inversé est terminé, un
événement OnGeocodeReverseEvent est déclenché.
Assignez ensuite les propriétés dans le paramètre d'adresse TCivicAddress de
façon à afficher des informations d'adresse lisibles dans les champs de la zone
de liste :
procedure TForm44.OnGeocodeReverseEvent(const Address: TCivicAddress);
begin
ListBoxItemAdminArea.ItemData.Detail
:= Address.AdminArea;
ListBoxItemCountryCode.ItemData.Detail
:= Address.CountryCode;
ListBoxItemCountryName.ItemData.Detail
:= Address.CountryName;
ListBoxItemFeatureName.ItemData.Detail
:= Address.FeatureName;
ListBoxItemLocality.ItemData.Detail
:= Address.Locality;
ListBoxItemPostalCode.ItemData.Detail
:= Address.PostalCode;
ListBoxItemSubAdminArea.ItemData.Detail
:= Address.SubAdminArea;
ListBoxItemSubLocality.ItemData.Detail
:= Address.SubLocality;
ListBoxItemSubThoroughfare.ItemData.Detail := Address.SubThoroughfare;
ListBoxItemThoroughfare.ItemData.Detail
:= Address.Thoroughfare;
end;
Embarcadero Technologies
102
VOIR AUSSI




Tutoriel iOS : Utilisation de la disposition pour ajuster différentes tailles de
fiches ou orientations dans une application iOS
Tutoriel iOS : Utilisation du Centre de notifications sur le périphérique iOS
System.Sensors.TGeocoder
FMX.Sensors.TLocationSensor
Embarcadero Technologies
103
TUTORIEL IOS : UTILISATION DU CENTRE DE
NOTIFICATIONS SUR LE PERIPHERIQUE IOS
Ce tutoriel décrit les étapes élémentaires relatives à l'utilisation du Centre de
notifications sur votre périphérique iOS.
TROIS NOTIFICATIONS ELEMENTAIRES OU STYLES D'ALERTE
Lorsque les utilisateurs définissent des notifications pour des applications sur les
périphériques iOS, elles peuvent être transmises par les applications sous les trois
styles élémentaires suivants. La bannière apparaît rapidement, mais l'alerte
requiert que l'utilisateur la supprime.
BADGE AFFICHE SUR L'ICONE D'APPLICATION
BANNIERE DE NOTIFICATION SUR L'IPAD
ALERTE DE NOTIFICATION
CENTRE DE NOTIFICATIONS SUR L'IPAD
L'image suivante illustre le Centre de notifications sur l'iPad. L'utilisateur peut faire
dérouler la liste des notifications récentes :
Embarcadero Technologies
104
ACCES AU SERVICE DE NOTIFICATIONS
L'interface du service de notifications (IFMXNotificationCenter) est définie
comme l'un des services de plate-forme de FireMonkey (TPlatformServices).
Pour accéder au service de notifications, suivez les deux pas suivants :

Ajoutez les deux unités suivantes à la clause uses si elles ne sont pas
présentes :
uses
FMX.Platform, FMX.Notification;

Exécutez une requête sur les services de plate-forme de FireMonkey en
utilisant le code suivant :
var
NotificationService: IFMXNotificationCenter;
begin
if TPlatformServices.Current.SupportsPlatformService(IFMXNotificationCenter) then
NotificationService :=
TPlatformServices.Current.GetPlatformService(IFMXNotificationCenter) as
IFMXNotificationCenter;
// Use the Notification Service
end;
L'interface IFMXNotificationCenter fournit les services élémentaires pour utiliser le
numéro de badge d'icône ainsi que la notification.
Embarcadero Technologies
105
DEFINITION DU NUMERO DE BADGE D'ICONE A PARTIR DU CODE
IFMXNotificationCenter comporte la méthode SetIconBadgeNumber qui permet
de définir un numéro de badge d'icône :
procedure TForm1.SerIconBadgeNumber;
var
NotificationService: IFMXNotificationCenter;
begin
if TPlatformServices.Current.SupportsPlatformService(IFMXNotificationCenter) then
NotificationService :=
TPlatformServices.Current.GetPlatformService(IFMXNotificationCenter) as
IFMXNotificationCenter;
// Reset Icon Badge Number
if Assigned(NotificationService) then
NotificationService.SetIconBadgeNumber(18);
end;
Une fois le numéro de badge d'icône défini sur 18, il est visible sur votre écran
d'accueil iOS :
Vous pouvez également réinitialiser le numéro de badge d'icône en utilisant la
méthode ResetIconBadgeNumber :
procedure TForm1.ResetIconBadgeNumber;
var
NotificationService: IFMXNotificationCenter;
begin
if TPlatformServices.Current.SupportsPlatformService(IFMXNotificationCenter) then
NotificationService :=
TPlatformServices.Current.GetPlatformService(IFMXNotificationCenter) as
IFMXNotificationCenter;
// Set Icon Badge Number
if Assigned(NotificationService) then
NotificationService.ResetIconBadgeNumber;
end;
Embarcadero Technologies
106
PLANIFICATION DES NOTIFICATIONS
Vous pouvez également planifier les messages de notification en utilisant la
méthode ScheduleNotification :
Pour afficher un message de notification, vous devez créer une instance de la
classe TNotification, puis définir le nom (l'identificateur) et le message :
procedure TForm1.ScheduleNotification;
var
NotificationService: IFMXNotificationCenter;
Notification: TNotification;
begin
if TPlatformServices.Current.SupportsPlatformService(IFMXNotificationCenter) then
NotificationService :=
TPlatformServices.Current.GetPlatformService(IFMXNotificationCenter)
as IFMXNotificationCenter;
if Assigned(NotificationService) then
begin
Notification := TNotification.Create;
try
Notification.Name := 'MyNotification';
Notification.AlertBody := 'Delphi for iOS is here!';
// Fired in 10 second
Notification.FireDate := Now + EncodeTime(0,0,10,0);
// Send notification in Notification Center
NotificationService.ScheduleNotification(Notification);
finally
Notification.Free;
end;
end
end;
Une fois le message de notification défini, il apparaît sur votre écran d'accueil
iOS :
Embarcadero Technologies
107
MISE A JOUR OU ANNULATION D'UN MESSAGE DE NOTIFICATION
Chaque message de notification planifié est identifié par la propriété Name de
l'objet TNotification.
Pour mettre à jour une notification planifiée, appelez simplement
ScheduleNotification une nouvelle fois avec une instance de TNotification qui
porte le même nom (propriété Name).
Pour annuler une notification planifiée, vous pouvez simplement appeler la
méthode CancelNotification avec l'identificateur que vous avez utilisé :
procedure TForm1.CancelNotification;
var
NotificationService: IFMXNotificationCenter;
begin
if TPlatformServices.Current.SupportsPlatformService(IFMXNotificationCenter) then
NotificationService :=
TPlatformServices.Current.GetPlatformService(IFMXNotificationCenter) as
IFMXNotificationCenter;
if Assigned(NotificationService) then
NotificationService.CancelNotification('MyNotification');
end;
Embarcadero Technologies
108
PRESENTATION IMMEDIATE DU MESSAGE DE NOTIFICATION
Vous pouvez également afficher le message de notification immédiatement en
utilisant PresentNotification.
Pour afficher un message de notification, vous devez créer une instance de la
classe TNotification, puis définir le nom (l'identificateur) et le message :
procedure TForm1.PresentNotification;
var
NotificationService: IFMXNotificationCenter;
Notification: TNotification;
begin
if TPlatformServices.Current.SupportsPlatformService(IFMXNotificationCenter) then
NotificationService :=
TPlatformServices.Current.GetPlatformService(IFMXNotificationCenter) as
IFMXNotificationCenter;
if Assigned(NotificationService) then
begin
Notification := TNotification.Create;
try
Notification.Name := 'MyNotification';
Notification.AlertBody := 'Delphi for iOS is here!';
// Set Icon Badge Number as well
Notification.ApplicationIconBadgeNumber := 18;
// Show Notification Message
NotificationService.PresentNotification(Notification);
finally
Notification.Free;
end;
end;
end;
BANNIERE DE NOTIFICATION OU ALERTE DE NOTIFICATION
Par défaut, votre application affiche la bannière de notification :

Bannière de notification sur l'iPad

Alerte de notification
Embarcadero Technologies
109
Pour utiliser une alerte de notification plutôt qu'une bannière de notification,
l'utilisateur final doit changer le style de notification dans la page de
configuration du Centre de notifications :
Embarcadero Technologies
110
AJOUTER DES ACTIONS A L'ALERTE DE NOTIFICATION
Vous pouvez aussi personnaliser une alerte en ajoutant un bouton Action.
Pour personnaliser une action d'alerte, vous devez définir l'action dans la
propriété AlertAction, puis définir la propriété HasAction sur True, comme suit :
Notification := TNotification.Create;
try
Notification.Name := 'MyNotification';
Notification.AlertBody := 'Delphi for iOS is here!';
Notification.AlertAction := 'Code Now!';
Notification.HasAction := True;
// Fired in 10 seconds
Notification.FireDate := Now + EncodeTime(0,0,10,0);
// Show Notification Message
NotificationService.ScheduleNotification(Notification);
finally
Notification.Free;
end;
VOIR AUSSI



Tutoriel iOS : Prendre une photo et la partager dans une application iOS
Tutoriel iOS : Utilisation de détecteurs d'emplacement sur le périphérique
iOS
FMX.Notification.IFMXNotificationCenter
Embarcadero Technologies
111
TUTORIEL IOS : UTILISATION DE INTERBASE
TOGO DANS UNE APPLICATION IOS
Avant de commencer ce tutoriel, il est recommandé de lire et suivre le tutoriel
suivant :

Tutoriel iOS : Utilisation des composants Zone de liste pour afficher une vue
table dans une application iOS
Ce tutoriel décrit les étapes de base permettant de parcourir les données
gérées par InterBase ToGo sur votre périphérique iOS à travers le framework
dbExpress.
UTILISATION DE DBEXPRESS POUR SE CONNECTER A LA BASE
DE DONNEES
dbExpress est un framework d'accès à la base de données très rapide, écrit en
Delphi. RAD Studio fournit des pilotes pour la plupart des bases de données
majeures, telles que InterBase, Oracle, DB2, SQL Server, MySQL, Firebird, SQLite et
ODBC. Vous pouvez accéder à ces diverses bases de données en utilisant des
procédures similaires à la procédure décrite ici.
Embarcadero Technologies
112

Pour la plate-forme iOS, dbExpress supporte InterBase ToGo ainsi que
SQLite. Ces produits de base de données peuvent s'exécuter sur les
périphériques iOS.

Pour les autres bases de données, telles que Oracle, vous devez disposer
d'au moins une bibliothèque client. Sur les plates-formes Windows, la
bibliothèque client est fournie en tant que DLL sur laquelle se connecter.
Par conséquent, vous devez développer les applications en utilisant des
technologies de niveau intermédiaire telles que DataSnap pour la
connexion à ces produits de base de données à partir de périphériques
iOS.
Un autre tutoriel décrit comment se connecter à la base de données
d'entreprise sans utiliser une bibliothèque client sur le périphérique iOS ; voir
Tutoriel iOS : Connexion à une base de données d'entreprise depuis une
application client iOS.
CONCEPTION ET CONFIGURATION DE L'INTERFACE UTILISATEUR
Ce tutoriel utilise un composant TListBox en tant qu'élément de l'interface
utilisateur.
Pour configurer un composant ListBox, suivez les étapes ci-après :
1. Pour créer une application mobile HD FireMonkey, sélectionnez Fichier >
Nouveau > Application mobile FireMonkey - Delphi > Application vide.
2. Déposez un composant TListBox sur la fiche.
3. Dans l'inspecteur d'objets, définissez les propriétés suivantes du ListBox :
o Définissez la propriété Align sur alClient afin que le composant
ListBox utilise la fiche entière.
o Définissez la propriété DefaultItemStyles.ItemStyle sur
listboxitembottomdetail.
4. Cliquez avec le bouton droit sur le composant TListBox dans le
concepteur ou l'éditeur, sélectionnez Ajouter un élément, puis ajoutez les
composants suivants :
o Composant TListBoxHeader.
o Composant TSearchBox.
Embarcadero Technologies
113
5. Fermez le Concepteur d'éléments.
6. Ajoutez un composant TLabel au TListBoxHeader, et définissez les
propriétés suivantes dans l'inspecteur d'objets :
o Définissez la propriété Align du composant TLabel sur alClient.
o Définissez la propriété StyleLookup sur toollabel.
o Définissez la propriété TextAlign sur taCenter.
o Définissez la propriété Text sur DB DEMO.
CONNEXION AUX DONNEES
Voici les étapes fondamentales permettant de se connecter aux données d'une
base de données au moyen de dbExpress :
1. Sur la Palette d'outils, double-cliquez sur le composant TSQLConnection.
Embarcadero Technologies
114
2. Dans l'inspecteur d'objets, définissez les propriétés suivantes pour
TSQLConnection :
1. Cette application utilise InterBase ToGo. Définissez donc la propriété
Driver sur IBLite/ToGo.
2. Définissez la propriété LoginPrompt sur False afin que l'utilisateur ne
reçoive pas une invite de connexion.
3. Cliquez sur les points de suspension [...] relatifs à la propriété
Params, et définissez la valeur Database sur
C:\Utilisateurs\Public\Documents publics\RAD
Studio\11.0\Samples\Data\dbdemos.gdb (emplacement de la
base de données) ; puis fermez la boîte de dialogue :
4. Définissez la propriété Connected sur True.
Embarcadero Technologies
115
Remarque : Si vous obtenez une erreur ("base de données indisponible")
sur l'environnement de développement, cela signifie que vous ne
disposez pas d'une licence en cours pour InterBase. Une licence InterBase
Developer Edition est incluse en tant que partie du produit pour certaines
éditions du produit. Pour plus d'informations, voir Dépannage.
3. Ajoutez un composant TSQLDataSet à la fiche, et définissez les propriétés
suivantes :
1. Définissez la propriété SQLConnection sur SQLConnection1 (celle
ajoutée dans une étape précédente).
2. Définissez la propriété CommandText sur select COMMON_NAME,
SPECIES_NAME from BIOLIFE order by COMMON_NAME.
3. Définissez la propriété Active sur True.
4. Ouvrez le Concepteur LiveBindings et connectez les données et l'interface
utilisateur comme suit :
1. Cliquez sur COMMON_NAME dans BindSourceDB1 et déplacez le
curseur de la souris sur Item.Text dans ListBox1.
2. Cliquez sur SPECIES_NAME dans BindSourceDB1 et déplacez le
curseur de la souris sur Item.Detail dans ListBox1.
Embarcadero Technologies
116
DEPLOIEMENT DE VOTRE APPLICATION SUR IOS
Jusqu'ici, vous avez utilisé InterBase sur votre bureau. Cela signifie que la base
de données réelle est située sur votre disque dur local (par exemple,
C:\Utilisateurs\Public\Documents publics\RAD
Studio\11.0\Samples\Data\dbdemos.gdb). Sur le périphérique iOS,
l'application réside dans le Sandbox, et vous pouvez typiquement lire et écrire
seulement les données qui sont situées dans le dossier Documents sous votre
dossier d'application.
Pour se connecter à une base de données locale sur iOS, vous devez effectuer
les actions suivantes :


Déployer la base de données sur le périphérique iOS.
Changer la configuration (pour se connecter au fichier de base de
données) en un fichier local sous le dossier Documents.
DEPLOYER INTERBASE TOGO, DBEXPRESS DRIVER ET LE FICHIER DE BASE DE
DONNEES SUR IOS
Pour exécuter votre application sur iOS, vous devez déployer les fichiers
suivants :



Interbase ToGo
dbExpress Driver to InterBase
Le fichier de base de données (dbdemos.gdb)
1. Ouvrez le Gestionnaire de déploiement en sélectionnant Projet >
Déploiement.
Embarcadero Technologies
117
2. Sélectionnez Toutes les configurations - Plate-forme Simulateur iOS dans la
liste déroulante des plates-formes cibles en haut du Gestionnaire de
déploiement.
3. Sélectionnez Ajouter des fichiers spécifiques ( ) :
4. Sélectionnez les modules de base de données suivants, puis cliquez sur OK
pour fermer la boîte de dialogue Fichiers spécifiques :
o InterBase ToGo. Vous devez sélectionner la licence à utiliser lors du
déploiement de l'application sur le périphérique. Les fichiers de
licence disponibles sont listés dans la boîte de dialogue Fichiers
spécifiques, sous le nom de modèle suivant : reg_*.slip. Comme
vous pouvez le voir dans l'image ci-dessous, pour ce tutoriel, les
fichiers de licence IBToGo et IBLite sont tout deux sélectionnés.
o DBExpress InterBase Driver
5. Sélectionnez Ajouter des fichiers et sélectionnez le fichier de base de
données (par exemple, C:\Utilisateurs\Public\Documents publics\RAD
Studio\11.0\Samples\Data\dbdemos.gdb).
Embarcadero Technologies
118
6. Sélectionnez dbdemos.gdb et définissez son chemin distant sur
StartUp\Documents\.
7. Sélectionnez la colonne Plates-formes (double-cliquez sur les points de
suspension [...] dans la ligne relative à dbdemos.gdb) :
1. Assurez-vous que Simulateur iOS et Périphérique iOS sont présents pour
dbdemos.gdb.
2. Retirez Win32 de la liste s'il est présent (vous n'avez pas à copier les
fichiers de base de données sur la plate-forme Win32).
Sélectionnez la plate-forme Toutes les configurations - Périphérique iOS et
assurez-vous que dbdemos.gdb est défini pour être déployé sur
StartUp\Documents\.
Le fichier de base de données (dbdemos.gdb) vient d'être configuré pour être
déployé dans le dossier Documents de la zone sandbox de votre application
iOS.
MODIFIER VOTRE CODE POUR SE CONNECTER A UN FICHIER DE BASE DE DONNEES
LOCAL SUR IOS
Comme décrit dans l'étape précédente, le composant TSQLConnection est
connecté à une base de données sur votre système de fichiers local avec un
chemin absolu. Vous devez donc remplacer l'emplacement du fichier avant
d'établir la connexion à la base de données, comme suit :
1. Dans le Concepteur de fiches, sélectionnez le composant
SQLConnection1.
2. Dans l'inspecteur d'objets, double-cliquez sur le champ Valeur de
l'événement BeforeConnect.
3. Ajoutez le code suivant à ce gestionnaire d'événements :
procedure TForm1.SQLConnection1BeforeConnect(Sender: TObject);
begin
{$IFDEF IOS}
SQLConnection1.Params.Values['Database']
:= GetHomePath + PathDelim
+ 'Documents' + PathDelim + 'dbdemos.gdb';
{$ENDIF}
end;
Embarcadero Technologies
119
La fonction GetHomePath vous donne l'emplacement d'origine réel d'une
application iOS. L'utilisation de la constante PathDelim est recommandée, du
fait que PathDelim utilise spécifiquement le délimiteur de chemin de la plateforme cible (au lieu des délimiteurs codés en dur, tels que \ ou /).
EXECUTER VOTRE APPLICATION SUR LE SIMULATEUR IOS OU
SUR UN PERIPHERIQUE IOS
Votre application est maintenant prête pour l'exécution. Vous devriez être en
mesure de parcourir les données de la même façon que dans l'EDI. Vous
pouvez également rétrécir la liste en utilisant la zone de recherche, comme
illustré dans la deuxième image :
Embarcadero Technologies
120
DEPANNAGE
PROBLEMES DE LICENCES INTERBASE
Si vous obtenez une erreur ("base de données indisponible") lors de la connexion
à la base de données dans l'environnement de développement, cela signifie
que vous ne disposez pas d'une licence en cours pour InterBase.


Une licence InterBase Developer Edition est incluse en tant que partie du
produit pour certaines éditions du produit.
Pour activer la licence InterBase Developer Edition pour une installation
de RAD Studio enregistrée, accédez au Gestionnaire des licences des
produits Embarcadero (cliquez sur Démarrer | Tous les programmes |
Embarcadero InterBase XE3).
PROBLEMES DE GESTION DES EXCEPTIONS
Si votre application déclenche une exception sans disposer d'un code de
gestion d'exception adéquat, votre application iOS se plante simplement
(disparaît) à l'exécution.
En présence d'un plantage, vous pouvez vous connecter manuellement à
la base de données pendant la résolution du problème par le biais des
étapes suivantes :
1. Sélectionnez le composant SQLConnection1 et définissez la
propriété Connected sur False.
2. Déposez un bouton sur la fiche et créez le gestionnaire
d'événements suivant pour établir une connexion manuelle à la
base de données :
procedure TForm1.Button1Click(Sender: TObject);
begin
try
SQLConnection1.Connected := True;
SQLDataSet1.Active := True;
except
on e: Exception do
begin
ShowMessage(e.Message);
end;
end;
end;
Embarcadero Technologies
121
ERREURS TYPIQUES ET RESOLUTIONS
Voici des erreurs typiques que vous pouvez rencontrer lors de la connexion à la
base de données, et les suggestions pour la résolution des problèmes :
Erreur sur iOS
Suggestion
Vérifiez que le fichier de base de données
(dbdemos.gdb) est livré dans 'StartUp\Documents\'.
Vérifiez que le fichier de licence est livré pour InterBase
ToGo.
Vérifiez que vous pointez sur le fichier local (ajoutez un
gestionnaire d'événements pour l'événement
OnBeforeConnect du composant SQLConnection1).
VOIR AUSSI




InterBase ToGo avec dbExpress
http://www.embarcadero.com/products/interbase/product-editions
Tutoriel iOS : Utilisation de SQLite dans une application iOS
Tutoriel iOS : Connexion à une base de données d'entreprise depuis une
application client iOS
Embarcadero Technologies
122
TUTORIEL IOS : UTILISATION DE SQLITE DANS
UNE APPLICATION IOS
Avant de commencer ce tutoriel, il est recommandé de lire et suivre le tutoriel
suivant :

Tutoriel iOS : Utilisation des composants Zone de liste pour afficher une vue
table dans une application iOS
Ce tutoriel décrit les étapes fondamentales permettant d'utiliser SQLite en tant
que stockage de données local sur votre périphérique iOS à travers le
framework dbExpress.
Embarcadero Technologies
123
UTILISATION DE DBEXPRESS POUR SE CONNECTER A LA BASE
DE DONNEES
dbExpress est un framework d'accès à la base de données très rapide, écrit en
Delphi. RAD Studio fournit des pilotes pour la plupart des bases de données
majeures, telles que InterBase, Oracle, DB2, SQL Server, MySQL, Firebird, SQLite et
ODBC. Vous pouvez accéder à ces diverses bases de données en utilisant des
procédures similaires à la procédure décrite ici.

Pour la plate-forme iOS, dbExpress supporte InterBase ToGo ainsi que
SQLite. Ces produits de base de données peuvent s'exécuter sur les
périphériques iOS.

Pour les autres bases de données, telles que Oracle, vous devez disposer
d'au moins une bibliothèque client. Sur les plates-formes Windows, la
bibliothèque client est fournie en tant que DLL sur laquelle se connecter.
Par conséquent, vous devez développer les applications en utilisant des
technologies de niveau intermédiaire telles que DataSnap pour la
connexion à ces produits de base de données à partir de périphériques
iOS.
Un autre tutoriel décrit comment se connecter à la base de données
d'entreprise sans utiliser une bibliothèque client sur le périphérique iOS ; voir
Tutoriel iOS : Connexion à une base de données d'entreprise depuis une
application client iOS.
CREATION DE LA BASE DE DONNEES DANS L'ENVIRONNEMENT
WINDOWS A DES FINS DE DEVELOPPEMENT
Vous devez d'abord créer un fichier de base de données SQLite sur votre plateforme de développement Windows. Utilisez les étapes suivantes afin que vous
puissiez utiliser le Concepteur de fiches mobiles pour concevoir l'interface
utilisateur de votre application iOS.
CREER LA BASE DE DONNEES DANS L'EXPLORATEUR DE DONNEES
1. Accédez à l'explorateur de données, cliquez avec le bouton droit sur le
noeud SQLite et sélectionnez Ajouter une nouvelle connexion :
Embarcadero Technologies
124
2. Définissez le nom de la connexion, tel que ShoppingList.
3. Spécifiez l'emplacement du fichier de base de données.
4. Cliquez sur le bouton Avancées et ouvrez le dialogue Propriétés
avancées.
5. Définissez la propriété FailIfMissing sur False, puis fermez le dialogue :
Remarque : La définition de FailIfMissing sur False indique à l'explorateur
de données de créer un nouveau fichier de base de données si le fichier
n'est pas disponible.
6. Cliquez sur le bouton Tester la connexion. Avec cette opération, le
nouveau fichier de base de données est créé si aucun fichier n'existait :
Embarcadero Technologies
125
CREER UNE TABLE SUR L'EXPLORATEUR DE DONNEES
1. Sur l'explorateur de données, sélectionnez le noeud ShoppingList sous la
section SQLite, puis sélectionnez Nouvelle table dans le menu contextuel.
2. Spécifiez une colonne intitulée ShopItem avec comme valeur du type de
données TEXT.
3. Cliquez sur le bouton Enregistrer et spécifiez un nom de table (par
exemple, Item).
Embarcadero Technologies
126
CONCEPTION ET CONFIGURATION DE L'INTERFACE UTILISATEUR
Les composants d'interface utilisateur visibles sont chargés sur le concepteur
Ce tutoriel utilise un composant TListBox en tant qu'élément de l'interface
utilisateur.
Pour configurer un composant ListBox et d'autres éléments de l'interface
utilisateur, suivez les étapes ci-après :
1. Créez une application mobile FireMonkey en utilisant Fichier > Nouveau >
Application mobile FireMonkey - Delphi.
2. Déposez un TToolBar sur la fiche.
3. Déposez un TButton sur le composant ToolBar.
4. Définissez les propriétés suivantes dans l'inspecteur d'objets :
o Définissez la propriété Name sur ButtonAdd.
o Définissez la propriété StyleLookup sur addtoolbuttonbordered.
5. Déposez un TButton sur le composant ToolBar.
6. Définissez les propriétés suivantes dans l'inspecteur d'objets :
o Définissez la propriété Name sur ButtonDelete.
o Définissez la propriété StyleLookup sur deletetoolbutton.
o Définissez la propriété Text sur Delete.
o Définissez la propriété Visible sur False.
7. Déposez un lib_fr:FMX.StdCtrls.TLabel sur le composant ToolBar.
Embarcadero Technologies
127
8. Définissez les propriétés suivantes dans l'inspecteur d'objets :
o Définissez la propriété Align sur alClient.
o Définissez la propriété StyleLookup sur toollabel.
o Définissez la propriété Text sur Shopping List.
o Définissez la propriété TextAlign sur taCenter.
9. Déposez un composant TListBox sur la fiche.
10. Définissez les propriétés suivantes dans l'inspecteur d'objets :
o Définissez la propriété Align sur alClient afin que le composant
ListBox utilise la fiche entière.
CONNEXION AUX DONNEES
Voici les étapes fondamentales permettant de se connecter aux données d'une
base de données qui est déjà définie dans l'explorateur de données :
1. Sélectionnez la table Item sur l'explorateur de données et faites-la glisser
dans le Concepteur de fiches.
Remarque : Cela crée deux composants (ShoppingList: TSQLConnection
et Item: TSQLDataSet) sur la fiche.
2. Sélectionnez le composant ShoppingList sur la fiche, puis définissez la
propriété Connected sur True.
3. Sélectionnez le composant Item sur la fiche, puis définissez la propriété
Active sur True.
4. Sélectionnez Voir > Concepteur LiveBindings et le Concepteur
LiveBindings s'ouvre.
Embarcadero Technologies
128
5. Sélectionnez ShopItem dans le composant Item et faites-glisser ShopItem
sur ListBox1.
Le suivi de ces étapes connecte l'interface utilisateur de l'application aux
données sur une base de données SQLite. Si vous avez utilisé une table avec
des données existantes pour ce tutoriel, vous devriez maintenant voir les
données réelles dans le Concepteur de fiches.
CREATION DU GESTIONNAIRE D'EVENEMENTS AFIN DE RENDRE
VISIBLE LE BOUTON DELETE QUAND L'UTILISATEUR
SELECTIONNE UN ELEMENT DANS LA LISTE
La propriété Visible du bouton Delete est définie sur False. Par conséquent, par
défaut, l'utilisateur final ne voit pas ce bouton. Vous pouvez le rendre visible
quand l'utilisateur sélectionne un élément dans la liste, comme suit :

Sélectionnez ListBox1 et définissez le gestionnaire d'événements suivant
pour l'événement OnItemClick.
procedure TForm1.ListBox1ItemClick(const Sender: TCustomListBox;
const Item: TListBoxItem);
begin
ButtonDelete.Visible := ListBox1.Selected <> nil;
end;
Embarcadero Technologies
129
CREATION DU GESTIONNAIRE D'EVENEMENTS POUR LE BOUTON
ADD AFIN D'AJOUTER UNE ENTREE DANS LA LISTE
Les connexions à la base de données sont également configurées
L'étape suivante consiste à ajouter une fonctionnalité à cette application pour
l'ajout d'un élément à la liste shopping.
1. Déposez un composant TSQLQuery sur la fiche.
2. Définissez les propriétés suivantes dans l'inspecteur d'objets :
o Définissez la propriété Name sur SQLQueryInsert.
o Définissez la propriété SQLConnection sur ShoppingList.
o Définissez la propriété SQL comme suit :
INSERT INTO ITEM (ShopItem) VALUES (:ShopItem)
o
o
Sélectionnez le bouton Expand (...) sur la propriété Params.
Sélectionnez le paramètre ShopItem et définissez la propriété
DataType sur ftString :
Embarcadero Technologies
130
3. Dans le Concepteur de fiches, double-cliquez sur le composant
AddButton. Ajoutez le code suivant à ce gestionnaire d'événements :
procedure TForm1.ButtonAddClick(Sender: TObject);
var
TaskName: String;
begin
try
if InputQuery('Enter New Item', 'Name', TaskName) and (TaskName.Trim <> '') then
begin
SQLQueryInsert.ParamByName('ShopItem').AsString := TaskName;
SQLQueryInsert.ExecSQL();
Item.Refresh;
ButtonDelete.Visible := ListBox1.Selected <> nil;
end;
except
on e: Exception do
begin
ShowMessage(e.Message);
end;
end;
end;
La fonction InputQuery présente une boîte de dialogue demandant à
l'utilisateur final d'entrer du texte. Cette fonction renvoie True quand l'utilisateur
sélectionne OK. Vous pouvez ainsi ajouter des données à la base de données
seulement quand l'utilisateur sélectionne OK, et le texte contient des données.
Embarcadero Technologies
131
CREATION DU GESTIONNAIRE D'EVENEMENTS POUR LE BOUTON
DELETE AFIN DE RETIRER UNE ENTREE DE LA LISTE
L'étape suivante consiste à ajouter une fonctionnalité à cette application pour
retirer un élément de la liste shopping :
1. Déposez un composant TSQLQuery sur la fiche.
2. Définissez les propriétés suivantes dans l'inspecteur d'objets :
o Définissez la propriété Name sur SQLQueryDelete.
o Définissez la propriété SQLConnection sur ShoppingList.
o Définissez la propriété SQL comme suit :
delete from Item where ShopItem = :ShopItem
Sélectionnez le bouton Expand (...) sur la propriété Params.
Sélectionnez le paramètre ShopItem et définissez la propriété
DataType sur ftString.
3. Dans le Concepteur de fiches, double-cliquez sur le composant
DeleteButton. Ajoutez le code suivant à ce gestionnaire d'événements.
o
o
Embarcadero Technologies
132
procedure TForm1.ButtonDeleteClick(Sender: TObject);
var
TaskName: String;
begin
TaskName := ListBox1.Selected.Text;
try
SQLQueryDelete.ParamByName('ShopItem').AsString := TaskName;
SQLQueryDelete.ExecSQL();
Item.Refresh;
ButtonDelete.Visible := ListBox1.Selected <> nil;
except
on e: Exception do
begin
SHowMessage(e.Message);
end;
end;
end;
MODIFICATION DE VOTRE CODE POUR SE CONNECTER A UN
FICHIER DE BASE DE DONNEES LOCAL SUR IOS
Les fonctionnalités de base de cette application sont maintenant
implémentées. Dans l'explorateur de données, vous avez créé un fichier de
base de données sur Windows. Le fichier de base de données n'est pas
disponible sur votre périphérique iOS, sauf si vous l'avez copié sur le périphérique
iOS ou créé à la volée.
Vous pouvez créer une base de données SQLite et une table avec les étapes
suivantes :
SPECIFICATION DE L'EMPLACEMENT DE LA BASE DE DONNEES SQLITE SUR LE
PERIPHERIQUE IOS
1. Dans le Concepteur de fiches, sélectionnez le composant ShoppingList.
2. Dans l'inspecteur d'objets, double-cliquez sur l'événement BeforeConnect.
3. Ajoutez le code suivant à ce gestionnaire d'événements :
procedure TForm1.SQLConnectionSQLiteBeforeConnect(Sender: TObject);
begin
{$IFDEF IOS}
ShoppingList.Params.Values['Database'] := GetHomePath + PathDelim +
'Documents' + PathDelim + 'shoplist.s3db';
{$ENDIF}
end;
Embarcadero Technologies
133
La fonction GetHomePath vous donne l'emplacement d'origine réel d'une
application iOS. L'utilisation de la constante System.SysUtils.PathDelim est
recommandée, du fait que PathDelim utilise spécifiquement le délimiteur de
chemin de la plate-forme cible (au lieu des délimiteurs codés en dur, tels que \
ou /).
CREATION D'UNE TABLE SI AUCUNE N'EXISTE
Avec SQLite, vous pouvez créer une table quand aucune table n'existe, en
utilisant l'instruction CREATE TABLE IF NOT EXISTS. Vous pouvez créer une table
après la connexion du composant TSQLCOnnection à la base de données et
avant la connexion du composant TSQLDataSet à la table. Utilisez les étapes
suivantes :
1. Dans le Concepteur de fiches, sélectionnez le composant ShoppingList.
2. Dans l'inspecteur d'objets, double-cliquez sur l'événement AfterConnect.
3. Ajoutez le code suivant à ce gestionnaire d'événements :
procedure TForm1.ShoppingListAfterConnect(Sender: TObject);
begin
ShoppingList.ExecuteDirect('CREATE TABLE IF NOT EXISTS Item (ShopItem
TEXT NOT NULL)');
end;
Embarcadero Technologies
134
EXECUTION DE VOTRE APPLICATION SUR LE SIMULATEUR IOS
OU SUR UN PERIPHERIQUE IOS
Votre application est maintenant prête pour l'exécution (sélectionnez Exécuter
> Exécuter).
Si vous rencontrez un problème lors de l'exécution de l'application, suivez les
étapes données dans Dépannage.
VOIR AUSSI



Tutoriel iOS : Utilisation de InterBase ToGo dans une application iOS
Tutoriel iOS : Connexion à une base de données d'entreprise depuis une
application client iOS
Support SQLite dans XE3
Embarcadero Technologies
135
TUTORIEL IOS : CONNEXION A UNE BASE DE
DONNEES D'ENTREPRISE DEPUIS UNE
APPLICATION CLIENT IOS
Avant de commencer ce tutoriel, il est recommandé de lire et suivre le tutoriel
suivant :


Tutoriel iOS : Utilisation des composants Zone de liste pour afficher une vue
table dans une application iOS
Tutoriel iOS : Utilisation de InterBase ToGo dans une application iOS
Ce tutoriel décrit comment se connecter à une base de données d'entreprise
depuis une application client iOS.
Pour établir la connexion à une base de données d'entreprise, vous devez
disposer d'une bibliothèque client. Dans la plupart des cas, la bibliothèque
client est fournie par l'éditeur de la base de données au format DLL. Cette
stratégie ne fonctionne pas correctement pour les périphériques iOS car
aucune bibliothèque client n'est disponible. Pour résoudre ce problème, vous
pouvez développer un niveau intermédiaire pour établir la connexion à une
base de données d'entreprise, et votre application iOS peut communiquer avec
le niveau intermédiaire. RAD Studio fournit le framework DataSnap avec lequel
vous pouvez développer le niveau intermédiaire (et y accéder) avec un
minimum de codage. Ce tutoriel décrit les étapes de développement du
niveau intermédiaire et du client iOS.
Embarcadero Technologies
136
CREATION DU NIVEAU INTERMEDIAIRE, UN SERVEUR
DATASNAP
Créez d'abord un serveur DataSnap qui expose une table d'un serveur de base
de données. Ce tutoriel utilise une application Fiches VCL Serveur DataSnap en
tant que serveur DataSnap.
Remarque : Dans ce tutoriel, le serveur DataSnap (application VCL) fonctionne
comme le niveau intermédiaire dans une application de base de données
multiniveau. Vous pouvez facilement créer puis supprimer par la suite une
instance d'un serveur DataSnap. Dès que vous avez assimilé les étapes
élémentaires, vous pouvez convertir le niveau intermédiaire en application de
service Windows.
CREER UNE APPLICATION VCL SERVEUR DATASNAP
1. Créez un nouveau projet. Choisissez Fichier > Nouveau > Autre et
sélectionnez dans le dialogue Nouveaux éléments Projets Delphi > Serveur
DataSnap > Serveur DataSnap afin de créer un nouveau projet Delphi.
2. L'expert Nouveau serveur DataSnap apparaît et vous devez suivre ses
étapes sans modifier trop de paramètres.
Embarcadero Technologies
137
3. Dans l'expert Nouveau serveur DataSnap :
1. A la première étape, choisissez Application Fiches VCL comme type
d'application.
2. A la deuxième étape, choisissez le protocole TCP/IP, Classe de
méthodes serveur et Méthodes exemple dans la liste
Fonctionnalités serveur.
3. A la troisième étape, laissez le port des communications TCP/IP par
défaut sur 211. Cela garantira que la communication entre le client
et le serveur passera par le port DataSnap par défaut.
4. A la quatrième étape (la dernière), sélectionnez TDSServerModule
en tant qu'ancêtre des méthodes serveur.
4. Enregistrez l'unité de fiche sous DataSnapServerUnit.pas.
5. Basculez sur DataSnapServerUnit et définissez la propriété Name de la
fiche sur DSServerForm.
6. Enregistrez l'unité des méthodes serveur (par défaut comme créé par
l'expert : ServerMethodsUnit1) sous ServerModuleUnit.pas.
7. Enregistrez l'unité du conteneur serveur (par défaut comme créé par
l'expert : ServerContainerUnit1) sous ServerContainerUnit.pas.
8. Enregistrez le nouveau projet sous DataSnapServerProject.droj.
Embarcadero Technologies
138
9. Sélectionnez ProjectGroup1 dans le Gestionnaire de projets et enregistrez
le projet sous DataSnapTutorialProjectGroup.groupproj.
DEFINIR UN ENSEMBLE DE DONNEES SUR LE SERVEUR DATASNAP
1. Basculez sur le fichier ServerContainerUnit.pas et remplacez la clause uses
dans l'implémentation par : uses Winapi.Windows, ServerModuleUnit;
2. Basculez sur le fichier ServerModuleUnit.pas.
3. Dans le Concepteur de fiches, définissez la propriété Name du module
serveur sur DSServerModule_EMPLOYEE.
4. Configurez les composants suivants sur le module serveur :
o Déposez un composant TSQLConnection sur le module serveur et
définissez les propriétés suivantes :
TSQLConnection encapsule une connexion dbExpress à un serveur de
base de données.





Définissez la propriété Name sur SQLConnection_EMPLOYEE.
Définissez la propriété LoginPrompt sur False.
Définissez Driver sur InterBase.
Développez le noeud Driver et définissez la propriété
DataBase sur C:\Utilisateurs\Public\Documents publics\RAD
Studio\11.0\Samples\Data\EMPLOYEE.GDB.
Définissez la propriété Connected sur True. Si vous obtenez
une erreur, vérifiez les propriétés sous Driver :
Embarcadero Technologies
139
o
Déposez un composant TSQLDataSet sur le module serveur et
définissez les propriétés suivantes :
TSQLDataSet représente les données récupérées à l'aide de dbExpress.
Définissez la propriété Name sur SQLDataSet_EMPLOYEE.
Définissez la propriété SQLConnection sur
SQLConnection_EMPLOYEE.
 Définissez la propriété CommandType sur ctTable.
 Définissez la propriété CommandText sur EMPLOYEE.
 Définissez la propriété Active sur True. Si vous obtenez une
erreur, vérifiez les propriétés que vous venez de configurer.
Déposez un composant TDataSetProvider sur le module serveur et
définissez les propriétés suivantes :


o
TDataSetProvider conditionne les données d'un ensemble de données et
transmet un ou plusieurs paquets de données transportables au client
DataSnap.


Définissez la propriété Name sur DataSetProvider_EMPLOYEE.
Définissez la propriété DataSet sur SQLDataSet_EMPLOYEE:

Remarque : Ce tutoriel utilise InterBase en tant qu'exemple. Vous pouvez
toutefois vous connecter à n'importe quel serveur de base de données en
Embarcadero Technologies
140
utilisant les mêmes étapes. Sélectionnez le pilote adéquat, ainsi que d'autres
propriétés pour pointer sur votre base de données.
EXPOSER L'ENSEMBLE DE DONNEES A PARTIR DU SERVEUR DATASNAP
Vous venez juste de créer un nouveau module serveur contenant un DataSet et
un DataSetProvider qui conditionne les données dans la couche suivante.
L'étape suivante expose le module serveur au client DataSnap.
1. Dans le Concepteur de fiches, ouvrez ServerContainerUnit.
2. Sélectionnez DSServerClass1 et mettez à jour le gestionnaire
d'événements existant pour l'événement OnGetClass. Ajoutez le code
suivant au gestionnaire d'événements DSServerClass1 :
procedure TServerContainer1.DSServerClass1GetClass(DSServerClass: TDSServerClass;
var PersistentClass: TPersistentClass);
begin
PersistentClass := TDSServerModule_EMPLOYEE;
end;
Avec ce gestionnaire d'événements, le serveur DataSnap expose les fournisseurs
ainsi que les méthodes publiques de cette classe au client DataSnap. Compte
tenu des étapes de la section précédente, vous allez maintenant exposer le
composant DataSetProvider_EMPLOYEE DataSetProvider à votre client
DataSnap.
EXECUTER LE SERVEUR DATASNAP
L'implémentation du serveur DataSnap est terminée. Cliquez avec le bouton
droit sur DataSnapServerProject.exe et sélectionnez Exécuter sans débogage.
.
Embarcadero Technologies
141
Vous pouvez maintenant voir le serveur DataSnap s'exécuter sur votre machine
Windows. Puisque ce serveur DataSnap n'a pas d'élément d'interface utilisateur,
il ressemble à une fiche vide et c'est ce qui est prévu à ce stade.
CREATION D'UNE APPLICATION IOS QUI SE CONNECTE AU
SERVEUR DATASNAP
L'étape suivante consiste à créer l'application client iOS.
1. Dans le Gestionnaire de projets, cliquez avec le bouton droit sur
DataSnapTutorialProjectGroup et sélectionnez Ajouter un nouveau
projet...
2. Sélectionnez Application mobile FireMonkey sur la page Projets Delphi :
Embarcadero Technologies
142
3. Enregistrez la nouvelle unité sous DataSnapClientUnit.pas.
4. Enregistrez le nouveau projet sous DataSnapClientProject.droj.
5. Ouvrez DataSnapClientUnit et définissez la propriété Name de la fiche sur
DSClientForm.
6. Déposez les composants suivants sur le Concepteur de fiches mobiles
FireMonkey :
o Composant TSQLConnection (SQLConnection1)
TSQLConnection encapsule une connexion dbExpress à un serveur de
base de données. Il supporte aussi le serveur DataSnap.




Définissez la propriété Driver sur DataSnap.
Développez la propriété Driver et définissez la propriété
HostName sur le nom d'hôte du serveur DataSnap.
Définissez la propriété LoginPrompt sur False.
Définissez la propriété Connected sur True.
Si vous obtenez une erreur, vérifiez les propriétés que vous venez de
définir.
o
Composant TDSProviderConnection (DSProviderConnection1)
Le composant TDSProviderConnection fournit la connectivité au serveur
DataSnap en utilisant dbExpress.
Définissez la propriété SQLConnection sur SQLConnection1.
Définissez ServerClassName sur TDSServerModule_EMPLOYEE.
Ce nom doit correspondre au nom de la classe du module
serveur du serveur DataSnap.
 Définissez la propriété Connected sur True.
Composant TClientDataSet (ClientDataSet1)


o
Embarcadero Technologies
143
TClientDataSet implémente un ensemble de données indépendant de la
base de données, utilisable en tant que tampon mémoire local des
enregistrements d'un autre ensemble de données.
Définissez la propriété RemoteServer sur
DSProviderConnection1.
 Définissez la propriété ProviderName sur
DataSetProvider_EMPLOYEE. Ce nom doit correspondre au
nom du fournisseur du serveur DataSnap.
 Définissez la propriété Active sur True.
Composant TListBox
 Définissez la propriété Align sur alClient :

o
7. Ouvrez le Concepteur LiveBindings et connectez les données et l'interface
utilisateur comme suit :
1. Cliquez sur FULL_NAME dans BindSourceDB1 et déplacez le curseur
de la souris sur Item.Text dans ListBox1 :
2.
Vous avez à présent créé et configuré le client DataSnap sur
iOS. Vous devriez voir les données provenant du serveur DataSnap
dans l'EDI :
Embarcadero Technologies
144
DEPLOYER LA BIBLIOTHEQUE MIDAS SUR LE SIMULATEUR IOS
Pour exécuter votre application sur le simulateur iOS, vous devez déployer les
fichiers suivants :

Bibliothèque MIDAS
1. Ouvrez le Gestionnaire de déploiement en sélectionnant Projet >
Déploiement.
2. Sélectionnez Ajouter des fichiers spécifiques ( ) :
3. Sélectionnez le module suivant, puis cliquez sur OK pour fermer le
Gestionnaire de déploiement :
o Bibliothèque MIDAS
Embarcadero Technologies
145
EXECUTER VOTRE APPLICATION SUR LE SIMULATEUR IOS OU
SUR UN PERIPHERIQUE IOS
Votre application est maintenant prête pour l'exécution.
Dans le Gestionnaire de projets, sélectionnez le simulateur iOS ou la plate-forme
cible Périphérique iOS et exécutez votre application. Vous devriez être en
mesure de parcourir les données de la même façon que dans l'EDI.
VOIR AUSSI





Tutoriel iOS : Utilisation de InterBase ToGo dans une application iOS
Tutoriel iOS : Utilisation de SQLite dans une application iOS
Développement d'applications DataSnap
Présentation des applications de bases de données multiniveaux
Datasnap.DSServer.TDSServer
Embarcadero Technologies
146
">