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…

On souhaite réaliser un diaporama avec effets graphiques. L’effet de base est illustré dans la vidéo suivante : exemple. La réalisation est en deux parties :

1. réaliser une composition Quartz permettant d’animer l’affichage d’un ensemble d’images
2. intégrer et piloter cette composition depuis une application MacOSX

Première partie : Quartz

Une animation d’image simple comme dans cette vidéo.

1. Lancer Quartz Composer et créer une composition vierge. Modifier la couleur du fond de la composition en modifiant les paramètres du patch Clear.
2. Dans un premier temps on essaie d’afficher une simple image. Pour cela dans la bibliothèque rechercher « image » et retrouver un patch adéquat permettant de charger une image.
3. Dans les patchs de type Render trouver un patch permettant de prendre en entrée une image affin de l’afficher. Connecter vos patchs de sorte que l’image chargée soit affichée.
4. Modifier les paramètres du patch de visualisation afin d’observer l’usage de chacun d’entre eux. Si le patch ne permet pas de faire tourner l’image autour d’un axe vertical, c’est que ce n’est pas le bon patch…
5. À l’aide d’un patch Interpolation animer l’image de sorte qu’elle tourne autour de son axe vertical sans discontinuer (le tout avec une vitesse raisonnable).
6. Rechercher le patch Gradient l’ajouter à la composition. Normalement les affichages précédents disparaissent… Dans chaque patch de rendering (patchs bleus) modifier le numéro d’ordre situé en haut à droite qui permet d’indiquer l’ordre d’affichage des patchs… Trouver un ordre correct permettant d’afficher votre image qui tourne sur un fond dégradé (peut importe les couleurs du dégradé).
7. Sauver la composition pour la garder bien au chaud.

Seconde partie : Quartz — le retour

Une animation contrôlée par le temps voir : vidéo

1. Reprendre la composition précédente. Remplacer le patch Interpolation par un Patch Time et utiliser un patch Mathematical Expression de sorte que l’image tourne sur elle-même à la fréquence d’un tour par seconde.
2. Dupliquer ce qui est nécessaire de sorte que l’on fasse tourner une seconde image en même temps que la première.
3. Ajouter les patchs mathématiques nécessaires de sorte que pour les tours paris la première image soit affichée et l’autre pour les tours impairs. Pour cela utiliser l’entrée Enable…
4. Ajouter un paramètre (une expression mathématique) permettant de régler la vitesse de rotation. 1 – un tour/sec., 2 – un tour/2sec., etc.

Troisième partie : Quartz — le retour de la vengeance qui tue

Cette fois on cherche à charger une image différente en fonction du temps. Trois images sont disponibles i0.png, i1.png, i2.png.

1. Modifier le chargeur d’image (en trouver un autre) permettant de charger une image depuis un URL.
2. Introduire des patchs de sorte que l’un d’entre eux soit le numéro d’une des trois images, la composition devant simplement charger l’image de numéro donné.

Quatrième partie : Arnold Quartzenegger is back

Optimiser afin d’éviter le chargement incessant d’images… Utiliser les itérations…

But : Un diaporama iOS vachement plus mieux que tout ce qui a été fait jusqu’à présent puisqu’il va faire apparaître des composants chouettes…

Technologies : quelques objets particuliers de l’UIKit, (Woody Wood) PickerView,

Des données de Diaporama organisées autrement.

1. Modifier le code de sorte que des diaporamas puissent être affichés. Pour cela, Utiliser une structure à trois dimensions (type, sous-type, image) via des NSArrays, et dans laquelle :
   1. le type est le type générique d’un ensemble de Diaporamas : Montagne, Mer, …
   2. le sous-type raffine le type en proposant diverses déclinaisons, exemple pour Montagne : Alpes, Rocheuses, etc
   3. image est une image appartenant au diaporama de type et sous-type correspondant.
2. Idem pour la musique mais avec une simple liste de musiques/sons… La liste devra être une liste de couples (nom,fichier), le nom servira à l’affichage, et le fichier désignera le nom du fichier contenant la musique.
3. Si l’interface est trop chargée : réfléchir à son allègement (écran secondaire, un seul PickerView additionné de Labels, autres composants, etc.).
4. Les structures de données peuvent éventuellement être reconstruites par analyse de la structure de répertoires contenus dans l’application (attention à la distinction entre répertoires et groupes…)

Une configuration plus complexe

1. Modifier la partie configuration de l’application de sorte que deux UIPickerView soient utilisés afin de présenter : pour l’un les choix de type/sous-type des diaporamas, pour l’autre les musiques/sons possibles. Consulter la documentation de UIPIckerView et observer que deux délégués sont utilisés :
   1. le dataSource de type UIPickerViewDataSource et dont le rôle est de fournir des informations sur la composition structurelle du composant (nombre de colonnes, nombre d’éléments par colonne)
   2. le delegate de type UIPickerViewDelegate chargé de fournir les données à afficher dans la PickerView (pickerView:titleForRow:forComponent:) et de répondre à la sélection par l’utilisateur (pickerView:didSelectRow:inComponent:)

But : Un diaporama iOS vachement plus mieux que tout ce qui a été fait jusqu’à présent

Technologies : quelques possibilités supplémentaires de l’UIKit, storyboarding, segue, etc.

Segue…

But : reprendre le code du TP n°3 et le modifier de sorte qu’une fenêtre dédiée à la configuration de l’application soit utilisée

1. revenir à l’édition du storyboard, rajouter un Navigation Controller (consulter la documentation des UINavigationController). a. supprimer immédiatement le Root View Controller (de type Table View Controller) qui lui est associé.
   1. éditer les propriétés du Navigation Controller pour en faire le Initial View Controller, c’est-à-dire le controleur présent au démarrage de l’application.
   2. connecter, en tirant un lien, le contrôleur de navigation à votre controleur de vue et choisissez le type de relation Root View Controller.
   3. modifier le code du délégué de l’application qui recherchait le controleur afin d’y récupérer des informations… Un intermédiaire a été ajouté!
   4. compiler et tester que tout fonctionne à l’identique.
2. ajouter un View Controller supplémentaire dans votre storyboard.
3. ajouter un bouton dans le View Controller principal et le placer dans le coin inférieur droit (en respectant les règles de placement). Modifier le type du bouton en choisissant Info Light.
4. établir un lien de navigation entre le bouton et le second contrôleur. Choisir le type modal. Sélectionner le lien et configurer l’action de transition.
5. compiler et tester qu’une touche sur le bouton provoque l’apparition (via une animation) de la seconde vue.
6. créer une nouvelle classe de nom ConfigViewController sous-classe de UIViewController, et utiliser cette classe comme classe pour le second contrôleur de vue.
7. ajouter dans la seconde vue un bouton de titre approprié comme « Terminé ».
8. établir un lien de type action entre le bouton et le contrôleur qui pilote la vue (nommer cette action donepar exemple).
9. dans le code de cette action ajouter [self dismissViewControllerAnimated:YES completion:nil];. Consulter la documentation de cette méthode et de sa classe associée…
10. Compiler et tester que la navigation entre écrans est correcte.
11. Déplacer le slider et sa gestion dans l’écran de configuration… Modifier le code en conséquence. (Attention le travail n’est pas trivial, il faut lire la documentation… La première piste est la méthode prepareForSegue).
12. capturer les glissements sur la surface (UIGestureRecognizer) pour permettre à l’utilisateur de passer d’une image à l’autre manuellement, en avant ou an arrière…
13. modifier l’écran de configuration de sorte que l’on puisse choisir un mode manuel ou automatique. Le choix doit s’opérer via un élément de type UISwitch.
14. Compiler, tester.

But : Un diaporama pour iOS

Technologies : découverte de l’environnement de programmation pour iPhone/iOS

Première partie : AppDelegate, UIKit

1. créer un projet iOS de type Single View Application. Le disséquer.
2. analyser le cycle de vie d’une application iOS et l’usage du protocole UIApplicationDelegate. Modifier les différentes méthodes de l’objet AppDelegate de sorte que des données soient rechargées/sauvegardées entre différentes incarnations de l’application en utilisant une instance de NSUserDefaults.
3. Compiler, tester.
4. En profiter pour observer les possibilités offertes par le simulateur d’iPhone/iPad.

Seconde partie : UIView

1. consulter la documentation de l’objet UIViewController et en particulier la gestion de la vue (Managing the view) et de ses événements (Responding to view events).
2. ajouter dans la vue principale un objet de type UIImageView contenant une image.
3. Compiler, tester.
4. Modifier le code de sorte que l’image chargée soit tirée au hasard au démarrage de l’application (faut-il une Outlet, capturer un événement particulier, etc).

Troisième partie : Asynchronisme

1. consulter la documentation de la classe NSTimer.
2. utiliser un timer pour obtenir la modification de l’image à intervalles réguliers (les images seront embarquées dans l’application).
3. compiler, tester.
4. ajouter un UISlider permettant de modifier le temps d’exposition de chaque image.
5. compiler, tester.

Quatrième partie : Defaults

1. faire en sorte que le temps d’exposition soit sauvegardé, ainsi que l’image courante entre différentes incarnations de l’application.
2. compiler, tester.

Cinquième partie : Guetta’s death…

1. consulter la documentation de la classe AVAudioPlayer.
2. rajouter un bouton play/pause, permettant de déclencher le jeu d’un fichier de musique (avec répétition en boucle).
3. compiler/tester
4. faire en sorte que l’état (play/pause, position courante dans la musique) soit sauvegardée entre les incarnations de l’application.
5. compiler, tester.

But : Terminer le diaporama pour MacOSX…

Technologies : Bindings, FileSystem

Note : le projet sera à rendre par binôme…

Première partie : File System

1. Modifier le projet du TP n°2 de sorte que les images visualisées dans le diaporama puissent être choisies via l’option File > Open.... Pour cela il faudra utiliser un NSOpenPanel (consulter sa documentation)

Seconde partie : Bindings

1. On souhaite permettre la modification du délai pour le fondu via un NSSlider. Pour cela il faut :
   1. Modifier la composition Quartz de sorte que le délai soit une entrée publique.
   2. Établir un lien (bindings) entre le potentiomètre et le délai. Attention car ce lien ne peut être direct car on ne peut généralement pas établir de lien vers des objets GUI. par conséquent il est nécessaire de passer par un NSObjectController qui devra être instancié dans le .xib, attaché par son outlet content à la QCView. Ensuite le bindings pourra s’effectuer sur le controller avec comme paramètre Controller Key égal à selection et Model Key Path à patch.ce_qui_va_bien_pour_que_ca_fonctionne....

Troisième partie : Enable/Disable bindings

1. On souhaite que les boutons qui servent à démarrer et arrêter le diaporama soient actifs ou inactifs lorsque nécessaire. Pour cela il est nécessaire de les lier (via bindings) à un booléen qui représente l’état courant de l’exécution du diaporama :
   1. Rajouter une propriété booléenne à votre QCView qui sera correctement mise à jour lorsque le diaporama est en cours d’exécution ou non (pensez à startRendering et autres méthodes du même acabi – consulter la documentation!)
   2. Effectuer le bindings du bouton d’arrêt à ce booléen ainsi que celui du bouton de démarrage à ce même booléen via de controlleur de la QCView.
   3. Pour l’un de ces deux boutons, il faudra utiliser un Value Transformer dans le binding (un NSNegateBoolean) afin d’obtenir la négation de la condition sur l’exécution.

Quatrième partie : Menu pour les sportifs assoiffés de MacOSX…

1. Ajouter un menu Style avec deux options mutuellement exclusives permettant de sélectionner une fonction de transition parmi deux possibles (celle déjà développée et une autre composition avec les mêmes paramètres – deux images et un délai). Attention : la manipulation des menus est parfois délicate, car de nombreuses choses peuvent être automatisées mais il faut lire très attentivement la documentation…

Cinquième partie : Livraison

1. RESPECTEZ IMPÉRATIVEMENT LES CONSIGNES DE LIVRAISON, EN PARTICULIER POUR LES NOMS DES RÉPERTOIRES, ETC., sous peine d’énerver le correcteur qui se retrouvera irremédiablement emberlificoté avec des répertoires et fichiers partout éparpillés… Note : L’énervement du correcteur ne l’aide pas à devenir clément lorsque nécessaire… Attention aussi, les instructions suivantes concernent la version 4.5.2 de xcode, mais l’esprit reste le même pour les versions antérieures (il faut peut-être fouiller un peu).
2. Fignoler l’application avant de la livrer (la franciser entièrement, lui adjoindre une icône, etc).
3. Pour livrer l’exécutable (qu’on prendra soin de tester indépendamment de xcode!!!!) il suffit de demander son archivage via Product > Archive. Ensuite sélectionner l’archive correrspondante dans l’organiseur, cliquer sur Distribute..., Export as Application…
4. Pour livrer le code source il faut :
   1. Faire un nettoyage via Product > Clean
   2. Puis créer un cliché (snapshot) du projet, celui-ci ne contiendra que les dernières versions des sources et pas tout l’historique, pour cela File > Create Snapshot.
   3. Aller dans Window > Organizer, choisir l’onglet Projects, sélectionnez le cliché puis cliquer sur le bouton Export Snapshot en bas à gauche…
5. Préparer un répertoire de nom TPOSX-votre_nom_et_celui_de_vôtre_binome_séparés_par_un- et contenant : le cliché du projet xcode (nettoyé correctement via Clean), l’application obtenue après archivage et un fichier README.txt contenant les noms et prénoms des binômes!
6. Livrer le tout via UPS, La Poste ou http://www.firstpizzapp.biz/. Attention à respecter la date limite… Bien vérifier que ce qui est livré est correct…
7. Ne pas oublier de rédiger une décharge stipulant : (1) l’abandon de vos droits et (2) autorisant explicitement vos enseignants à faire fortune avec votre merveilleuse application.

But : réaliser un diaporama pour MacOSX…

Technologies : Compositions Quartz, KVC

Première partie : Une composition Quartz

1. Lancer Quartz Composer et créer une composition vierge (de type Basic Composition).
2. Ajouter à cette composition un Billboard, à l’aide de l’inspecteur, modifier sa largeur de sorte quelle soit égale à 2.
3. Déclarer l’Input de nom image du Billboard comme étant une entrée publique (à l’aide du menu contextuel, Publish Inputs) et choisir un nom adéquat pour cette entrée (disons image1). Sauver la composition.

Seconde partie : Intégration d’une composition Quartz dans une application, Application Delegate, Outlets

1. Lancer xcode et créer un projet OSX/Cocoa Application.
2. Éditer l’interface pour y ajouter un objet de type QCView.
3. À l’aide de l’inspecteur des propriétés, éditer l’objet QCView pour qu’il charge la composition Quartz créée, penser à le paramétrer.
4. Modifier le code AppDelegate.hpour y ajouter @property (weak) IBOutlet QCView *renderer; (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). Sauver le fichier.
5. Revenir à l’édition de l’interface et tirer un lien entre l’objet App Delegate et la QCView, choisir l’outlet renderer. Désormais l’objet App Delegate connaît la QCView de l’interface via la propriété renderer (ils sont associés).
6. Observer les Connections 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. Pour le mécanisme de délégation, vous pouvez interroger les enseignants (ou rechercher sur le web).
7. Dans l’interface rajouter un bouton et lui associer le déclenchement de l’action play: de la QCView.
8. Ajouter une image quelconque au projet (supposons qu’elle s’appelle toto.jpg).
9. Dans l’implémentation AppDelegate.m modifier le code de la méthode applicationDidFinishLaunching: (en profiter pour consulter la documentation de cette méthode) en lui rajoutant le code suivant :NSImage *image = [NSImage imageNamed:@"toto"];

[self.renderer setValue:image forKeyPath:@ »patch.image1.value »]

; On en profitera pour lire la documentation relative à la classe `NSImage`. La seconde instruction correspond à l’association de l’image chargée à l’entrée de la composition Quartz (il peut donc être nécessaire de la modifier en conséquence). Compiler (sans oublier de rajouter le framework Quartz.framework au projet). Et Tester.

Troisième partie : Une composition Quartz plus complexe

1. Modifier la composition Quartz (ou en créer une autre) avec deux Billboards dont les entrées seront toutes deux publiées sous le nom image1 et image2 par exemple.
2. Utiliser, Interpolation, Mathematical Expression et deux RGB Color afin de contrôler l’entrée Color des deux Billboards. Paramétrer l’interpolateur pour passer de la valeur 0 à la valeur 1 en trois secondes. Utiliser la sortie de l’inerpolateur pour modifier le canal Alpha (qui représente la transparence dans les couleurs) des deux RGB Color, lorsque l’un sera à la valeur x, l’autre sera à la la valeur 1-_x_. Les couleurs de sortie des RGB Color seront branchés en entrée des Billboards.
3. Tester et mettre au point la compositionen utilisant le visionneur de paramètres (Parameters) afin d’y placer des entrées en test.
4. Sauver cette composition.

Quatrième partie : Un diaporama plus complet (awakeFromNib, subclassing, …)

1. Ajouter à l’application précédente une sous-classe de QCView de votre cru (MyQCView). Modifier la classe du QCView de l’interface pour qu’elle soit positionnée à la nouvelle classe créé.
2. Ajouter une seconde image à l’application.
3. Modifier la nouvelle classe créé en surchargeant la méthode startRendering afin d’y positionner les deux entrées de la composition Quartz.
4. Compiler. Tester

Cinquième partie : Encore plus complet

1. Modifier la sous-classe de QCView de sorte qu’à son extraction du fichier d’interface, un tableau d’images soit initialisé, avec un ensemble d’images contenues dans le bundle de l’application (surcharger la méthode awakeFromNib).
2. Surcharger la méthode renderAtTime:arguments: de sorte que les images d’entrée de la composition soient modifiées lorsque nécessaire afin d’obtenir un diaporama de l’ensemble des images chargées (consulter attentivement la documentation de cette méthode).
3. Modifier la composition, l’interface et le code de sorte que le temps de défilement entre les images soit un paramètre qui vaut 3 secondes par défaut et soit modifiable en temps réél via un slider et que les délais puissent varier de 1 à 10 secondes.

Première partie : une prise en main

1. Lancer xcode (qui se trouve normalement dans le répertoire /Applications) et créer une application de type Cocoa Application. Compiler et tester le modèle par défaut afin de vérifier que l’environnement de développement est correctement installé et configuré.
2. Explorer le projet afin d’en anaylser la structure (fichiers sources, ressources, frameworks, etc).
3. Revenir à la sélection du premier élément représentant le 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…
4. Sélectionner le fichier MainMenu.xib et éditer l’interface de sorte que lui soit rajoutée un objet permettant de visualiser une image (piste : NSImageView).
5. Configurer ce visualiseur d’image de sorte qu’une image de votre choix y soit présente au lancement de l’application. Attention, cela nécessitera sans doute d’ajouter cette image dans le projet lui-même… Tester.
6. Modifier les caractéristiques de cet objet visualiseur d’image de sorte qu’il soit autorisé de déposer une image quelconque depuis l’extérieur de l’application. Tester.

Seconde partie : un peu de code…

1. Créer un nouveau projet vierge de type Cocoa Application. Le configurer.
2. Y ajouter une nouvelle classe à l’aide du menu File > New > File.... Observer l’instanciation d’un modèle de source de classe Objective-C.
3. Ajouter, dans l’interface de l’objet une action de nom click:. Pour se faire, la signature devra en être - (IBAction)click:(id)sender;.
4. Ajouter, dans l’implémentation de la classe, le code de la méthode click: de sorte qu’un message soit affiché (via NSLog). Pour avoir des informations plus précises sur NSLog, ouvrir la documentation viaWindow > Organizer, onglet Documentation puis NSLog dans le champ de recherche (prendre patience).
5. Éditer MainMenu.xib afin d’ajouter à l’interface un simple bouton.
6. Dans la partie Objects de l’interface, rajouter une instance d’objet (NSObject). Modifier la classe de cet objet en choisissant la classe précédemment créée.
7. En tenant le bouton droit de la souris, tirer un trait du bouton vers l’objet instancié. Dans le menu contextuel qui apparaît choisir l’action adéquate… Observer le lien créé via l’inspecteur du bouton et/ou de l’objet : onglet Connections inspector en partie droite de la fenêtre principale.
8. Compiler et tester votre première application Mac.

Troisième partie : le monde est vaste… (internationalisation)

1. Reprendre l’application précédente et y ajouter un fichier de ressources de type Strings File de nom Localizable.
2. Modifier le projet de sorte que la localisation dans une autre langue que l’anglais soit disponible. Revenir sur le fichier de localisation créé précédemment et le rendre localisable (via l’inspecteur) en choisissant une langue parmi celles offertes.
3. Une entrée d’un tel fichier est toujour au format "clé" = "valeur";. Modifier les fichiers de localisation de sorte qu’à la clé "clic" soit associé un texte particulier pour chaque langue.
4. Modifier le source de la classe de sorte que NSLog affiche un message localisée selon l’environnement. Pour cela, on peut utiliser la méthode NSLocalizedString (consulter la documentation pour en connaître les détails).
5. Compiler et tester que le message s’affiche correctement.
6. Modifier la langue de l’environnement (via les Préférences Systèmes…) et relancer l’application pour constater que la localisation fonctionne.
7. Par glisser-déposer, faites apparaître l’application sur votre Bureau en sélectionnant le Product adéquat à l’aide de la souris et de la touche alt.
8. Observer le contenu du Bundle.

Quatrième partie : une bonne livraison…

1. Explorer les options du projet et des fichiers de méta-données de sorte que l’application possède une icône, etc. Bref, qu’elle ressemble à une vraie application Mac…