Après avoir réalisé une composition Quartz dans le TP1, on souhaite l’intégrer à une application MacOSX.

Les objectifs de ce TP :

• Découvrir XCode
• Ajouter des composants graphiques
• Créer des actions et les lier aux composants
• Intégrer une composition Quartz et la déclencher par un bouton

La liaison des paramètres de la composition avec des variables de l’application se fera dans un prochain TP (suspense…)

Partie préliminaire : les supports de cours

Pour ce TP, on utilisera Objective-C et le framework Foundation.

1. Télécharger les deux supports de cours pdf et les enregistrer
2. Ouvrir chacun de ces pdf et les mettre en affichage « Planche contact » (Alt-Cmd-4) puis grossir au maximum le zoom (Cmd-+).
3. Conserver ces documents ouverts et y chercher des informations ou des exemples chaque fois que nécessaire.

Première partie : prise en main

1. Lancer xcode (qui se trouve normalement dans le répertoire /Applications) et créer une application de type Cocoa Application (attention à sélectionner le template dans la rubrique OS X et non la rubrique iOS).
2. Compiler et tester l’application (vide) afin de vérifier que l’environnement de développement est correctement installé et configuré. Une fois lancée (avec Cmd-R), l’application se comporte comme n’importe quelle application MacOSX : lorsqu’elle est sélectionnée, son menu s’affiche tout en haut de l’écran. Pour la retrouver lorsqu’on a sélectionné une autre application active, on peut utiliser Cmd-Tab, et pour la quitter, on utilise son menu ou Cmd-Q.
3. De retour dans XCode, sélectionner le fichier MainMenu.xib. La feuille quadrillée qui s’affiche est destinée à contenir les fenêtres de l’application. C’est l’éditeur d’interface. Le volet vertical situé entre cette feuille quadrillée et le volet de navigation permet de voir les objets que l’on manipulera. Si ce n’est pas fait par défaut, développer ce volet, soit en cliquant sur l’icône en bas à gauche de la feuille quadrillée, soit par le menu Editor > Show Document Outline.
4. Dans le volet Document outline, sélectionner l’objet représentant la fenêtre, et si ce n’est pas fait par défaut, déployer son contenu. La fenêtre contient une vue. Toujours dans le volet Document outline, sélectionner la vue, puis à nouveau la fenêtre qui la contient, et observer la différence d’affichage sur la fenêtre de l’application (sur la feuille quadrillée).
5. S’il ne l’est pas par défaut, afficher le volet des utilitaires, soit par Cmd-Alt-0 (idem pour le cacher), soit par le menu View > Utilities > Show Utilities. Notez à ce propos, que si par suite d’une mauvaise manipulation, vous perdez le volet de navigation (celui de gauche), vous pouvez le retrouver par Cmd-0 ou par View > Navigators > Show Navigator
6. Sélectionner la vue, puis chercher, dans la bibliothèque d’objets (panneau en bas à droite), un objet de type Label, et le glisser sur la fenêtre de l’application. Remarquer les modifications sur le volet Document outline : deux objets encapsulés ont été ajoutée. Observer les différences d’affichage lorsqu’on sélectionne successivement ces deux nouveaux objets (remarquer en particulier la barre d’adresse, tout en haut de l’éditeur, affichant le chemin complet vers l’objet sélectionné. Chaque noeud de ce chemin est cliquable…)
7. Modifier le texte de la cellule de texte, enregistrer, compiler puis exécuter l’application.
8. Ajouter un bouton à la fenêtre de l’application, enregistrer, compiler, tester.
9. Modifier diverses propriétés d’affichage des objets ajoutés, au moyen des inspecteurs de taille et d’attributs, dans le volet des inspecteurs, en haut à droite.
10. L’éditeur d’interface comporte également le menu de l’application. Déplacer le menu Format juste avant le menu Help, supprimer le menu Window, enregister, compiler, tester.
11. Observer dans le Document Outline le type des objets constituant le menu, et ajouter un élément dans le menu View. Renommer cet élément « Message in Console ». Enregistrer, compiler, tester.

Deuxième partie : un peu de code (ou pas)

1. Ajouter une nouvelle classe au projet à l’aide du menu File > New… (Cmd-N), en sélectionnant une Objective-C class, et en prenant bien soin de la définir commoe sous-classe de NSObject. Deux fichier, .h et .m s’affichent alors dans le navigateur du projet. Laisser pour le moment ces fichiers intacts, mais observer que lorsqu’on édite l’un des deux, il est possible de basculer de l’un à l’autre par les touches Ctrl-Cmd-↑ et ↓.
2. Pour faire de la place, cacher (momentanément) le volet des utilitaires (Cmd-Alt-0, idem pour le faire réapparaître).
3. Faire apparaître l’éditeur assistant (Alt-Cmd-Enter ; ou View > Assistant Editor > Show ; ou l’icône du milieu dans le groupe d’icônes Editor tout en haut à droite !)
4. Dans l’éditeur principal, sélectionner le fichier .m nouvellement créé et dans la barre d’adresse de l’éditeur assistant, si le fichier .h ne s’est pas affiché automatiquement, cliquer sur le premier mot pour sélectionner Counterparts > .h
5. Sélectionner à nouveau MainMenu.xib, fermer (momentanément) l’assistant éditeur (petite croix tout à droite de sa barre d’adresse) et faire revenir le volet des utilitaires. Ajouter aux objets de l’interface (mais en dehors de la fenêtre de l’application) un NSObject.
6. Au moyen de l’inspecteur d’identité, modifier le type de l’objet, pour que ce soit la nouvelle classe créée.
7. Faire à nouveau apparaître l’éditeur assistant (et éventuellement cacher le volet des utilitaires), et sur sa barre d’adresse, cliquer sur le premier mot pour faire apparaître, dans le menu Automatic, le fichier .h de la nouvelle classe. (Il est aussi possible d’y revenir directement avec la flèche qui reprend le fichier précédent, puisque c’est lui qui avait été affiché dans le cas présent).
8. Dans l’éditeur d’interface, faire apparaître l’élément ajouté précédemment dans le menu View de l’application (Message in Console). Attention, magie, cliquer avec le bouton droit sur ce menu (ou Ctrl-clic si pas de bouton droit) et maintenir appuyé pour tirer un fil bleu depuis le menu vers le contenu du fichier .h dans l’éditeur assistant. Relâcher juste en dessous de la ligne @interface. Dans la boîte qui apparaît, sélectionner Action comme type de connexion, et taper message comme nom d’action, puis valider. La déclaration d’une nouvelle action a dû s’ajouter au code du fichier.
9. Basculer sur le .m et écrire, comme première ligne de code de ce TP, une instruction qui fait afficher un message quelconque sur la console au moyen de la méthode NSLog (consulter la documentation, et prendre bien garde à la syntaxe des constantes de type NSString, voir le cours Foundation à partir de la page 6).
10. Enregistrer, compiler, exécuter l’application et tester l’effet du nouveau menu.

Troisième partie : la même chose, à la main

1. Fermer l’éditeur assistant
2. Ajouter à la main (!) une action de nom click dans le .h et le .m de la classe. L’effet de cette action sera d’afficher un autre message que précédemment sur la console. Enregistrer.
3. Dans l’éditeur d’interface, sélectionner le bouton ajouté initialement à la fenêtre de l’application et tirer un fil bleu vers l’instance de la nouvelle classe. Le menu qui s’affiche permet de choisir l’action qui vient d’être créée.
4. Dans l’inspecteur des connexions, vérifier que la connexion est bien présente. Enregistrer, compiler, tester.
5. Pour bien prendre le pli, supprimer la connexion dans l’inspecteur, et constater qu’il est là aussi possible de la reformer, en cliquant sur le petit rond pour tirer un fil bleu à nouveau vers l’instance de la classe. De même, la connexion pouvait s’établir de l’instance de la classe via l’inspecteur des connexions de celle-ci, vers le bouton.

Quatrième partie : Quartz is back

1. Ajouter à la fenêtre de l’application un objet de type QCView.
2. À l’aide de l’inspecteur des propriétés, éditer l’objet QCView pour qu’il charge la composition Quartz créée au TP précédent, penser à paramétrer cet objet.
3. Par une des deux méthodes vues précédemment (par l’éditeur assistant ou à la main), ajouter une connexion du QCView vers AppDelegate.h, mais cette fois la connexion sera un outlet (et non une action), de nom renderer, et sa méthode de stockage sera weak.
   (Un Outlet est une propriété visible de l’éditeur d’interface à laquelle on peut associer un objet, c’est une propriété représentant une association au sens UML. Désormais l’objet App Delegate connaît la QCView de l’interface via la propriété renderer). 
   Penser à enregistrer les deux fichiers : l’interface et AppDelegate.h.
4. Pour que l’objet QCView soit connu du compilateur, il faut ajouter au projet le framework Quartz, et importer Quartz/Quartz.h.
5. Dans l’interface, associer le bouton au déclenchement de l’action play: de la QCView. Enregistrer, compiler, tester.

Pour aller plus loin

AppDelegateObserver les connexions de l’objet App Delegate et constater que cet objet est connu d’un autre de nom File's Owner via un Outlet à l’intérieur de celui-ci. Observer l’objet File's Owner et constater que sa classe est NSApplication. Utiliser la documentation pour comprendre à quoi ces objets sont utiles.Les projets XCodeDans le navigateur, sélectionner la toute première ligne, qui représente l’intégralité du projet, et observer les différentes options de configuration du projet et de la cible (métadonnées, options de compilation, etc). Attention à ne rien changer que vous ne sauriez remettre en l’état…