Développer avec Dashcode et Xcode

Transcription

1 1 Développer avec Dashcode et Xcode Utilisés ensemble, Dashcode et Xcode offrent la puissance et la simplicité d utilisation nécessaires à la création d applications hybrides uniques et passionnantes pour l iphone. Puisque ces deux outils fournissent des modèles personnalisés adaptés aux applications hybrides pour l iphone, vous n avez pas besoin de créer votre propre enveloppe en Objective-C. Les trois premières sections de ce chapitre expliquent comment utiliser les modèles d application existants pour Dashcode et Xcode. Grâce à ces modèles, vous pouvez créer rapidement des applications hybrides pour l iphone. Les quatre dernières sections introduisent les bases d Objective-C et la manière de structurer une application iphone en Objective-C dans les deux outils les plus employés QuickConnectiPhone et PhoneGap.

2 8 Développez des applications pour l iphone Section 1 : utiliser Dashcode et le modèle QuickConnect Dans les applications hybrides pour l iphone, une grande partie de l interface utilisateur et des interactions est créée avec HTML, JavaScript et CSS. Par conséquent, le développement et le débogage se font principalement dans Dashcode. Les possibilités et la facilité d emploi de l outil de construction d interfaces par glisser-déposer fourni par Dashcode sont uniques. Dashcode est utilisé pour créer une grande partie de l application et sert également à la tester en employant le simulateur d iphone et les outils de débogage intégrés. Puisque les applications hybrides pour l iphone ont beaucoup de code en commun, la création d un modèle contenant ce code permet d éviter son écriture ou son importation à chaque début d un nouveau projet. Nous reviendrons sur ce code commun au Chapitre 2. Pour télécharger QuickConnectiPhone, allez sur la page quickconnect. Le paquetage obtenu inclut un modèle Dashcode qui vous aidera à créer des applications hybrides pour l iphone. Le programme d installation de QuickConnect- Family ajoute ce modèle à Dashcode. Malheureusement, au moment de l écriture de ces lignes, les auteurs de PhoneGap ne proposent pas de modèle Dashcode. Après avoir exécuté le programme d installation de QuickConnectFamily et avoir lancé Dashcode, le modèle QuickConnectiPhone est proposé à la fin de la liste affichée dans la rubrique Dashboard Widget. En double-cliquant sur l icône QuickConnectiPhone, vous arrivez directement à l écran principal de Dashcode, avec une interface utilisateur vierge (voir Figure 1.1). Pour comprendre les fichiers inclus dans le framework et les utiliser facilement, nous allons créer une première interface utilisateur simple avec Dashcode et la déployer sur l iphone avec Xcode. Elle sera constituée uniquement d un bouton et d une zone de texte. Lors d un clic sur le bouton, la zone de texte affichera : "Vous l avez fait!" Applications hybrides et boîte d alerte Les développeurs qui ont l habitude de coder en JavaScript utilisent souvent une boîte d alerte pour déboguer l application ou afficher des messages à l utilisateur. La fonction JavaScript alert est en réalité un appel à du code natif dans le navigateur, non une possibilité du moteur JavaScript. Ce fonctionnement n est pas mis en œuvre dans les applications QuickConnectiPhone car l utilisation des boîtes de dialogue est contraire aux standards établis par Apple pour l interface utilisateur des applications iphone. Pour le débogage, vous pouvez vous servir du débogueur de Dashcode. Si vous déplacez votre application dans Xcode, vous pouvez employer la fonction debug pour afficher des messages dans la console de Xcode.

3 Chapitre 1 Développer avec Dashcode et Xcode 9 PhoneGap propose une boîte d alerte, mais pas la fonction de débogage de Xcode. Pour afficher des informations importantes, ajoutez-les dans un élément HTML <div>, ou autre, quel que soit l outil que vous utilisez. N oubliez pas : vous devez être attentif, sans être alarmiste. Figure 1.1 Le modèle QuickConnectiPhone est utilisé dans Dashcode. Le contenu de la bibliothèque standard est affiché. Avant de créer l interface utilisateur, vérifiez que la fenêtre Bibliothèque est ouverte. Ensuite, recherchez l élément Texte dans la bibliothèque des parties et faites-le glisser sur l écran vierge de l application. Une nouvelle zone de texte, contenant le mot "Texte", s affiche en haut de l interface. Par défaut, la taille de cette zone de texte est fixée à 100 %. Dashcode a inséré dynamiquement une balise HTML <div> dans le fichier index.html de l application, ainsi que du code JavaScript pour la compléter par le texte, la couleur d arrière-plan et les autres caractéristiques que vous choisissez. Pour notre exemple, nous souhaitons fixer l identifiant de la balise de texte à display et effacer son contenu. Pour cela, nous allons employer l inspecteur des éléments de l interface.

4 10 Développez des applications pour l iphone Cliquez sur l icône Inspecteur dans la barre supérieure de Dashcode de manière à activer la boîte de dialogue correspondante. Sélectionnez l onglet Attributs (de couleur rouge et blanc) dans le coin supérieur gauche de l inspecteur, fixez le champ Identifiant à display et effacez le contenu du champ Étiquette. Ajoutez un bouton poussoir à l interface, en faisant glisser et en déposant la partie correspondante sous la zone de texte. L inspecteur affiche à présent les informations concernant ce bouton, non plus celles du champ de texte. Ouvrez l onglet Comportements en cliquant sur le cube bleu dans le coin supérieur droit de l inspecteur. Il permet de définir les fonctions JavaScript qui serviront de gestionnaires pour les types d événements listés. Vous remarquerez que plusieurs des événements standard de la souris sont absents. Ils ont été remplacés par ongesturestart, ongesturechange et ongestureend. Saisissez changetext dans la colonne Gestionnaires de l événement onclick. Cette opération ajoute une fonction changetext dans le fichier main.js et affiche son contenu à l écran afin que vous puissiez saisir le code exécuté lorsque l événement onclick est déclenché. Pour notre exemple simple, placez le code suivant dans la fonction changetext : document.getelementbyid( display ).innerhtml = "Vous l avez fait!"; Notre application peut à présent être exécutée dans le simulateur d iphone 1. Cliquez sur l icône Exécuter dans le coin supérieur gauche de Dashcode. Le simulateur est alors démarré et l application y est exécutée (voir Figure 1.2). Puisque l application est déboguée et terminée, vous pouvez déplacer le code dans Xcode en vue de son déploiement sous forme d une application installable. Tout d abord, vous devez utiliser Dashcode pour déployer l application actuelle. En effet, le code est caché dans le projet Dashcode et contient des directives que seul Dashcode peut comprendre. Cliquez sur l icône Partager dans la partie gauche de Dashcode afin d afficher l écran de déploiement. Vous pourrez ainsi enregistrer l intégralité des fichiers HTML, CSS et JavaScript sur le disque de manière à les inclure dans votre application. Dans le champ Chemin, saisissez un nom pour le nouveau répertoire dans lequel seront placés ces fichiers. Ils peuvent à présent être importés dans Xcode. La Figure 1.3 montre l écran de déploiement. Pour de plus amples informations concernant les fichiers JavaScript inclus dans ce modèle et leur utilisation pour simplifier la création d une application, consultez le Chapitre N.d.T. : par défaut, le simulateur d iphone est normalement configuré pour la langue anglaise. Pour le passer en français, utilisez l application Réglages.

5 Chapitre 1 Développer avec Dashcode et Xcode 11 Figure 1.2 L application en cours d exécution dans le simulateur d iphone de Dashcode. Figure 1.3 L écran de déploiement affiche l application terminée en cours de déploiement vers le répertoire Exemple1_Chapitre1.

6 12 Développez des applications pour l iphone Section 2 : utiliser Xcode et le modèle QuickConnect Puisque vous avez exécuté le programme d installation de QuickConnectFamily, le modèle Xcode pour les applications QuickConnectiPhone a été installé. Nous allons l utiliser pour créer le projet Xcode de notre application hybride QuickConnectiPhone. Cette section décrit les différentes étapes de la procédure. Le wiki QuickConnectFamily propose une vidéo qui décrit cette procédure ( Dashcode-projects-to-Xcode). Commencez par sélectionner File > New Project, puis iphone OS > Applications. Double-cliquez sur l icône QuickConnect iphone Application et nommez le projet (le répertoire correspondant est créé sur le disque dur). Xcode crée un projet qui comprend les fichiers Objective-C nécessaires à l exécution de l application JavaScript directement sur l appareil, sans disposer d un accès réseau ou d un accès Internet. Dans le groupe Resources de l application, vous trouverez un ensemble de fichiers HTML, CSS et JavaScript. L un de ces fichiers se nomme index.html. Il contient tout le code HTML, CSS et Java- Script d un exemple d application prête à fonctionner. La Figure 1.4 montre l exécution de cet exemple sur le simulateur sous forme d une application installée. Avant de l essayer, vous devez préciser à Xcode d utiliser le simulateur de l iphone. Pour cela, ouvrez le menu Project > Set Active SDK, puis choisissez un simulateur dans la liste. Figure 1.4 L application QuickConnect par défaut.

7 Chapitre 1 Développer avec Dashcode et Xcode 13 Pour inclure dans ce projet les fichiers créés précédemment dans Dashcode, commencez par supprimer les fichiers suivants à partir du groupe Resources : index.html ; main.css ; main.js ; les éventuels fichiers du sous-groupe Parts ; les éventuels fichiers du sous-groupe Images. Ensuite, importez les fichiers index.html, main.css et main.js de l exemple précédent. Pour cela, maintenez enfoncée la touche Contrôle et cliquez du bouton droit sur le groupe Resources, puis sélectionnez Add > Existing Files. Allez dans le répertoire dans lequel vous avez déployé l application Dashcode et sélectionnez index.html, main.css et main.js. Vous pouvez copier les fichiers dans le projet Xcode ou les utiliser à partir de leur emplacement actuel. Pour cet exemple, cochez la case Copy items into destination group s folder (if needed). Copier ou ne pas copier, telle est la question C est à vous de décider si vous devez copier les fichiers existants ou laisser Xcode utiliser des références vers ces fichiers. Comment prendre votre décision? Chaque méthode présente des avantages. Si vous copiez les fichiers, le répertoire du projet est complet et peut être passé à d autres développeurs sans qu ils aient besoin de reproduire la structure de répertoires de la machine d où proviennent les fichiers d origine. Avec les références, vous pouvez retourner dans Dashcode pour apporter des modifications et exporter ensuite le projet de manière à actualiser les fichiers. Vous n avez pas besoin de les importer à nouveau dans Xcode. Cliquez ensuite du bouton droit sur le groupe Parts (s il n existe pas sur le disque dur, il est affiché en rouge et vous devrez le créer avant l importation) et importez les fichiers qui se trouvent dans le dossier Parts. Répétez cette opération pour le groupe Images et le dossier Images. L application est quasiment prête à être exécutée. Puisque des fichiers ont été ajoutés au groupe Resources, il faut indiquer à Xcode qu il doit les inclure dans les ressources de l application. Ouvrez la rubrique Targets, puis développez votre application et Copy Bundle Resources. Vous voyez alors les fichiers de ressources requis par l application. Sélectionnez les fichiers, non les groupes, que vous

8 14 Développez des applications pour l iphone venez d ajouter dans votre projet et faites-les glisser dans la liste Copy Bundle Resources. Ensuite, développez la rubrique Compile Sources et supprimez tous les fichiers Java- Script, car ils ne pourront évidemment pas être compilés. Pour cela, maintenez enfoncée la touche Ctrl, cliquez du bouton droit sur chacun d eux et sélectionnez Delete. Les fichiers sont supprimés de la liste des fichiers à compiler, mais ils ne sont pas retirés du projet ou du disque. Puisque Dashcode utilise des répertoires et que Xcode utilise des groupes, vous devez apporter deux autres modifications avant de pouvoir exécuter l application. La première concerne la section <head> du fichier index.html. Puisque les fichiers JavaScript et les autres fichiers référencés sont placés dans le répertoire des ressources de l application finale, les références aux répertoires Parts et QCiPhone doivent être supprimées. Par exemple, avant la suppression des références, voici l aspect d une balise <script> : <script type="text/javascript" src="parts/utilities.js" charset="utf-8"></script> Elle doit devenir la suivante : <script type="text/javascript" src="utilities.js" charset="utf-8"></script> Puisque des images sont utilisées pour les boutons et autres éléments créés dans Dashcode, vous devez également retrouver les instances de la chaîne Images/ dans l ensemble du projet et les remplacer par une chaîne vide. Cette opération est très facile en ouvrant le menu Edit, en choisissant Find > Find in Project et en recherchant Images/. La Figure 1.5 montre les résultats de la recherche dans notre exemple, avant la modification du fichier PushButton.js. Vous pouvez à présent installer et exécuter votre application en sélectionnant l icône Build and Go, qui se trouve dans la barre supérieure de l application Xcode. Si vous recevez le message d erreur "No provisioned iphone OS device is connected", vous pouvez installer et exécuter l application dans le simulateur à la place de votre appareil. Pour cela, cliquez sur Succeeded dans le coin inférieur droit de la fenêtre Xcode, ouvrez la liste Device Debug et sélectionnez une version du simulateur. Notez que vous pouvez également choisir Release ou Debug dans cette liste déroulante. Cette boîte de dialogue est fréquemment utilisée au cours des développements pour effectuer ce type de modification. La Figure 1.6 montre l application installée et en cours d exécution dans le simulateur. Félicitations, vous venez de terminer votre première application hybride pour l iphone.