{"id":1139,"date":"2014-07-14T10:44:16","date_gmt":"2014-07-14T14:44:16","guid":{"rendered":"http:\/\/tim.cstj.qc.ca\/cours\/xcode\/wp\/?page_id=1139"},"modified":"2014-07-14T10:44:16","modified_gmt":"2014-07-14T14:44:16","slug":"premier-projet-xcode-swift-capitaine-haddock","status":"publish","type":"page","link":"https:\/\/ve2cuy.com\/xcode\/premier-projet-xcode-swift-capitaine-haddock\/","title":{"rendered":"Projet &#8211; Capitaine Haddock"},"content":{"rendered":"<h1>Labo &#8211; Introduction \u00e0 Xcode et Swift<\/h1>\n<h2><span style=\"color: #ff0000;\">Note: \u00a0Ce laboratoire a \u00e9t\u00e9 test\u00e9 sur Xcode 8 beta 5<\/span><\/h2>\n<h1>Contenu<\/h1>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-625 alignleft\" style=\"margin-right: 50px;\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/projet.Haddock.02.png\" alt=\"projet.Haddock.02\" width=\"241\" height=\"383\" \/><\/p>\n<ul>\n<li>Xcode, d\u00e9marrage, \u00a0survole des panneaux<\/li>\n<li>Storyboard, sc\u00e8ne, \u00a0vue (View), objets visuels et propri\u00e9t\u00e9s<\/li>\n<li>Design d&rsquo;une sc\u00e8ne<\/li>\n<li>Le mod\u00e8le MVC, @IBOutlet, @IBAction<\/li>\n<li>\u00c9diteur, assistant \u00e9diteur<\/li>\n<li>Propri\u00e9t\u00e9s de classe: uneClasse{ let, var &#8230; }<\/li>\n<li>Tableau (Array), \u00e9num\u00e9ration rapide, acc\u00e8s d&rsquo;un \u00e9l\u00e9ment al\u00e9atoire<\/li>\n<li>Chargement d&rsquo;une image par programmation &#8211; UIImage(named:)<\/li>\n<li>Ajout d&rsquo;\u00e9l\u00e9ments existants au projet; \u00a0image, police de caract\u00e8res<\/li>\n<\/ul>\n<p><strong>Pr\u00e9-requis: \u00a0\u00a0<\/strong>Avoir compl\u00e9t\u00e9 les modules 1 \u00e0 8 de l&rsquo;<a href=\"swift-introduction\">introduction au langage Swift<\/a>.<br \/>\n<strong>Niveau de difficult\u00e9 des apprentissages:\u00a0<span style=\"color: #008000;\">D\u00e9butant<\/span><\/strong><\/p>\n<h1>Vid\u00e9o du r\u00e9sultat final<\/h1>\n<p><span style=\"color: #000000;\">[embedyt]http:\/\/www.youtube.com\/watch?v=_6XtKWc5KyU[\/embedyt]<\/span><\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<h1>Description du projet<\/h1>\n<p>\u00c0 partir de Xcode, du langage Swift, d&rsquo;une sc\u00e8ne, de chaines de caract\u00e8res (String) stock\u00e9es dans un tableau (Array) et d&rsquo;une banque d&rsquo;images (UIImage):<br \/>\nnous r\u00e9aliserons\u00a0une application pour l&rsquo;iPhone qui permettra d&rsquo;afficher \u00e0 l&rsquo;\u00e9cran du t\u00e9l\u00e9phone, suite au clic d&rsquo;un bouton, une expression al\u00e9atoire color\u00e9e du l\u00e9gendaire personnage Capitaine <a href=\"http:\/\/fr.wikipedia.org\/wiki\/Capitaine_Haddock\">Haddock<\/a> ainsi qu&rsquo;un image d&rsquo;accompagnement.<br \/>\nLe projet sera r\u00e9alis\u00e9 en 4 \u00e9tapes:<\/p>\n<ol>\n<li><strong>\u00c9laborer l&rsquo;interface de la sc\u00e8ne (View) principale<\/strong><\/li>\n<li><strong>D\u00e9clarer les\u00a0r\u00e9f\u00e9rences (liens)\u00a0MVC<\/strong><\/li>\n<li><strong>Programmer l&rsquo;interactivit\u00e9 de l&rsquo;application<\/strong><\/li>\n<li><strong>Charger des images par programmation<\/strong><\/li>\n<\/ol>\n<h1><\/h1>\n<h1>Objectif principal<\/h1>\n<ul>\n<li>Se familiariser avec l&rsquo;application Xcode, ses panneaux, le storyboard, la sc\u00e8ne (View) principale, la classe de la sc\u00e8ne principale, les d\u00e9clarations MVC et le langage Swift.<\/li>\n<\/ul>\n<h1><\/h1>\n<h1>Objectifs secondaires<\/h1>\n<ul>\n<li>Programmer les r\u00e8gles\u00a0syntaxiques du document &lsquo;<a href=\"swift-introduction\">introduction au langage Swift<\/a>&lsquo; &#8211; module 1 \u00e0 8.<\/li>\n<li>Tester la plateforme Xcode et le simulateur iOS<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<h1>\u00c9tape 1 &#8211; \u00c9laborer l&rsquo;interface de la sc\u00e8ne principale<\/h1>\n<p>&nbsp;<br \/>\n<strong>Note<\/strong>: <em>L&rsquo;expression &lsquo;<span style=\"color: #ff0000;\"><strong>Action n<\/strong><\/span>&lsquo; repr\u00e9sente une op\u00e9ration qu&rsquo;il faut r\u00e9aliser, selon les directions de l&rsquo;enseignant, en laboratoire.<\/em><br \/>\n&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 1<\/span><\/strong> &#8211; Cr\u00e9ons un nouveau projet Xcode.<br \/>\nSi Xcode est d\u00e9j\u00e0 ouvert; option menu <strong>File<\/strong>, <strong>New<\/strong>, <strong>Projet<\/strong>&#8230; (<strong>Shift+Cmd+N<\/strong>).<br \/>\nOu bien lors du\u00a0d\u00e9marrage de Xcode via l&rsquo;option &lsquo;<strong>Create a new Xcode project<\/strong>&lsquo;.<br \/>\n<div id=\"attachment_1151\" style=\"width: 704px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1151\" class=\"wp-image-1151 size-full\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/Screenshot-2014-07-14-06.52.43.png\" alt=\"Screenshot 2014-07-14 06.52.43\" width=\"694\" height=\"558\" \/><p id=\"caption-attachment-1151\" class=\"wp-caption-text\">image01<\/p><\/div><br \/>\n&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 2<\/span><\/strong>\u00a0&#8211; Renseignons le type de projet \u00e0 cr\u00e9er : Application iOS \u00e0 une sc\u00e8ne.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1141\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran01.png\" alt=\"premier.projet.swift.ecran01\" width=\"735\" height=\"428\" \/><br \/>\n&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 3<\/span><\/strong>\u00a0&#8211; Renseignons les options du projet: le\u00a0nom:<strong>Expressions.Capitaine.Haddock<\/strong>, le langage:<strong>swift<\/strong> et l&rsquo;appareil:<strong>iPhone<\/strong>.<br \/>\n<a href=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran02.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1142\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran02.png\" alt=\"premier.projet.swift.ecran02\" width=\"731\" height=\"427\" \/><\/a><br \/>\n&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 4<\/span><\/strong>\u00a0&#8211; Renseignons la localisation du dossier du projet.<br \/>\n<a href=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran03.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1143\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran03.png\" alt=\"premier.projet.swift.ecran03\" width=\"607\" height=\"482\" \/><\/a><br \/>\n&nbsp;<br \/>\nNous sommes maintenant devant la fen\u00eatre de l&rsquo;application Xcode.<br \/>\n&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 5<\/span><\/strong>\u00a0&#8211; Identifions les diff\u00e9rents panneaux de l&rsquo;application Xcode.<br \/>\n<a href=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran04.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1144\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran04.png\" alt=\"premier.projet.swift.ecran04\" width=\"1049\" height=\"657\" \/><\/a><\/p>\n<h1><\/h1>\n<hr \/>\n<h1><\/h1>\n<h1><\/h1>\n<h1>Plan des principaux panneaux de Xcode<\/h1>\n<p>&nbsp;<br \/>\n<a href=\"\/xcode\/wp-content\/uploads\/2014\/07\/Xcode-Carte-des-panneaux.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1241\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/Xcode-Carte-des-panneaux.png\" alt=\"Xcode-Carte des panneaux\" width=\"1920\" height=\"1080\" \/><\/a><br \/>\n<span style=\"color: #ff0000;\"><strong>Note<\/strong><\/span>: <strong>\u00c0 partir de Xcode 8, il est possible d&rsquo;afficher la sc\u00e8ne en fonction d&rsquo;un appareil iOS:<\/strong><br \/>\n<a href=\"\/xcode\/wp-content\/uploads\/2014\/07\/xcode-traits.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2779\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/xcode-traits.png\" alt=\"xcode-traits\" width=\"606\" height=\"723\" \/><\/a><\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<h1>Placer des \u00e9l\u00e9ments sur la sc\u00e8ne<\/h1>\n<p><strong><span style=\"color: #ff0000;\">Action 6<\/span><\/strong>\u00a0&#8211; Ajoutons\u00a0un titre \u00ab\u00a0<strong>UILabel<\/strong>\u00a0\u00bb sur la sc\u00e8ne et modifions le contenu du texte.<br \/>\n<span style=\"color: #0000ff;\"><strong>M\u00e9thode<\/strong><\/span>: \u00a0Pour placer un objet sur la sc\u00e8ne, il faut le glisser de la librairie des objets vers la sc\u00e8ne.<br \/>\n<strong><span style=\"color: #008000;\">Astuce<\/span><\/strong>: \u00a0Il est possible de dupliquer un objet de la sc\u00e8ne avec <strong>Alt+Glisser<\/strong>.<br \/>\n<a href=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran05.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1145\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran05.png\" alt=\"premier.projet.swift.ecran05\" width=\"960\" height=\"749\" \/><\/a><br \/>\n&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 7<\/span><\/strong>\u00a0&#8211; Ajustons la taille de l&rsquo;objet, la taille de la police de caract\u00e8res et l&rsquo;alignement du texte dans l&rsquo;objet.<br \/>\n<span style=\"color: #0000ff;\"><strong>M\u00e9thode<\/strong><\/span>: S\u00e9lectionner l&rsquo;objet, afficher l&rsquo;inspecteur des propri\u00e9t\u00e9s, renseigner les valeurs.<br \/>\n<span style=\"color: #008000;\"><strong>Astuce<\/strong><\/span>: Avec une s\u00e9lection multiple, il est possible de modifier les propri\u00e9t\u00e9s de plusieurs objets \u00e0 la fois.<br \/>\n<a href=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran06.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1146\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran06.png\" alt=\"premier.projet.swift.ecran06\" width=\"663\" height=\"425\" \/><\/a><br \/>\n&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 8<\/span><\/strong>\u00a0&#8211; Ajoutons une zone de texte (<strong>UITextView<\/strong>) pour l&rsquo;affichage des expressions d&rsquo;Haddock.<br \/>\n<span style=\"color: #008000;\"><strong>Astuce<\/strong><\/span>: L&rsquo;utilisation de la zone de filtre permet d&rsquo;acc\u00e9l\u00e9rer la localisation d&rsquo;un objet dans la librairie.<br \/>\n<a href=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran07.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1147\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran07.png\" alt=\"premier.projet.swift.ecran07\" width=\"736\" height=\"638\" \/><\/a><br \/>\n&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 9<\/span><\/strong>\u00a0&#8211; Ajoutons un bouton (<strong>UIButton)<\/strong>\u00a0sur la sc\u00e8ne. \u00a0Ce bouton permettra d&rsquo;afficher au hasard, une expression d&rsquo;Haddock.<br \/>\n<a href=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran08.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1148\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran08.png\" alt=\"premier.projet.swift.ecran08\" width=\"629\" height=\"572\" \/><\/a><br \/>\n&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 10<\/span><\/strong>\u00a0&#8211; Ajoutons un objet \u00ab\u00a0<strong>UIImageView<\/strong>\u00a0\u00bb sur la sc\u00e8ne.<br \/>\nCet objet permettra l&rsquo;affichage, via sa propri\u00e9t\u00e9 &lsquo;<strong>image<\/strong>&lsquo;, de fichiers de type <strong>gif<\/strong>, <strong>png<\/strong> et <strong>jpg<\/strong>.<br \/>\n<a href=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran09.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1149\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran09.png\" alt=\"premier.projet.swift.ecran09\" width=\"654\" height=\"609\" \/><\/a><\/p>\n<h1><\/h1>\n<hr \/>\n<h1>Ressources du projet<\/h1>\n<p>&nbsp;<br \/>\nNous avons maintenant besoin d&rsquo;ajouter une image \u00e0 notre projet.<br \/>\nUne des fa\u00e7ons de faire est d&rsquo;enregistrer une image d&rsquo;une page WEB et ensuite de la glisser dans le projet.<br \/>\nVoici donc une image d&rsquo;Haddock de tr\u00e8s bonne humeur:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1152\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/haddock.gif\" alt=\"haddock\" width=\"510\" height=\"369\" \/><br \/>\n&nbsp;<\/p>\n<hr \/>\n<p>&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 11\u00a0<\/span><\/strong>&#8211; Enregistrons l&rsquo;image pr\u00e9c\u00e9dente dans le dossier &lsquo;<strong>Downloads<\/strong>&lsquo; de l&rsquo;ordinateur.<br \/>\n<span style=\"color: #0000ff;\"><strong>M\u00e9thode<\/strong><\/span>: \u00a0<strong>Ctrl+clic<\/strong>; Save image to &#8230;<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1155\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran10.png\" alt=\"premier.projet.swift.ecran10\" width=\"803\" height=\"747\" \/><br \/>\n&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 12<\/span><\/strong> &#8211; Ajoutons l&rsquo;image t\u00e9l\u00e9charg\u00e9e au projet:<br \/>\n<span style=\"color: #0000ff;\"><strong>M\u00e9thode<\/strong><\/span>: \u00c0 partir du dossier &lsquo;<strong>Downloads<\/strong>&lsquo; (finder), il faut <strong>glisser\/coller<\/strong> la ressource vers le panneau de navigation du projet Xcode.<br \/>\n<span style=\"color: #008000;\"><strong>Astuce<\/strong><\/span>: \u00a0Il est possible de regrouper des ressources \u00e0 l&rsquo;int\u00e9rieur d&rsquo;un groupe (New group).<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1156\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran11.png\" alt=\"premier.projet.swift.ecran11\" width=\"518\" height=\"713\" \/><br \/>\n&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 13<\/span><\/strong>\u00a0&#8211; Laissons tomber l&rsquo;image sous le dossier du projet (<strong>Expression.Capitaine.Haddock<\/strong>):<br \/>\n<span style=\"color: #008000;\"><strong>Astuce<\/strong><\/span>: Un guide bleu indiquera la position d&rsquo;insertion.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1157\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran12.png\" alt=\"premier.projet.swift.ecran12\" width=\"228\" height=\"172\" \/><br \/>\n&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 14<\/span><\/strong>\u00a0&#8211; Renseignons les param\u00e8tres d&rsquo;ajout de la ressource au projet.<br \/>\nNote: \u00a0Il est important de s&rsquo;assurer, en cochant la case &lsquo;<strong>Destination<\/strong>&lsquo;, que la ressource sera copi\u00e9e et non pas li\u00e9e.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1158\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran13.png\" alt=\"premier.projet.swift.ecran13\" width=\"729\" height=\"427\" \/><br \/>\n&nbsp;<br \/>\nIl est maintenant possible d&rsquo;afficher la nouvelle image grace \u00e0 l&rsquo;objet \u00ab\u00a0<strong>UIImageView<\/strong>\u00a0\u00bb que nous avons ajout\u00e9 \u00e0 la sc\u00e8ne.<br \/>\n&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 15<\/span><\/strong>\u00a0&#8211; Renseignons la propri\u00e9t\u00e9 &lsquo;<strong>image<\/strong>&lsquo; de l&rsquo;objet <strong>UIImage<\/strong> de notre sc\u00e8ne avec \u00ab\u00a0<strong>haddock.gif<\/strong>\u00ab\u00a0.<br \/>\n<span style=\"color: #008000;\"><strong>Astuce<\/strong><\/span> &#8211; Il est possible de combiner les actions &lsquo;Ajouter <strong>UIImageView<\/strong>&lsquo; et &lsquo;Renseigner propri\u00e9t\u00e9 <strong>image<\/strong>&lsquo; en glissant l&rsquo;image \u00e0 partir de la librairie des m\u00e9dias.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1159 size-full\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran14.png\" alt=\"premier.projet.swift.ecran14\" width=\"960\" height=\"690\" \/><br \/>\n&nbsp;<\/p>\n<hr \/>\n<h1><\/h1>\n<h1>Partie 2 &#8211; D\u00e9clarer les r\u00e9f\u00e9rences MVC<\/h1>\n<h1><\/h1>\n<h1>Le mod\u00e8le MVC &#8211; Mod\u00e8le, Vue, Contr\u00f4leur<\/h1>\n<h2><\/h2>\n<h2>Explication<\/h2>\n<p>Xcode utilise l&rsquo;approche du mod\u00e8le <a href=\"http:\/\/fr.wikipedia.org\/wiki\/Mod\u00e8le-vue-contr\u00f4leur\">MVC<\/a>.<br \/>\nAvec cette technique, les interfaces utilisateurs (<strong>Vue<\/strong>) sont s\u00e9par\u00e9es\u00a0du code (<strong>Contr\u00f4leur<\/strong>) et des structure de donn\u00e9es (<strong>Mod\u00e8le<\/strong>). \u00a0Les trois ensembles\u00a0existent dans des univers herm\u00e9tiques et isol\u00e9s.<br \/>\nPour avoir acc\u00e8s aux propri\u00e9t\u00e9s ou aux \u00e9v\u00e9nements (dans le cas d&rsquo;un bouton par exemple) des objets pr\u00e9sents dans une interface utilisateur (Vue) au niveau du code. \u00a0il faut d\u00e9clarer des <strong>r\u00e9f\u00e9rences<\/strong> (liens)\u00a0<strong>MVC<\/strong> entre la <strong>Vue<\/strong> et le <strong>Contr\u00f4leur<\/strong>.<br \/>\nDans Xcode, il est possible de d\u00e9clarer deux types de liens entre une <strong>Vue<\/strong> et un <strong>Contr\u00f4leur<\/strong>; \u00a01) <strong>IBOutlet<\/strong> &#8211; pour acc\u00e9der aux propri\u00e9t\u00e9s et 2) <strong>IBAction<\/strong> &#8211; pour pouvoir programmer les \u00e9v\u00e9nements (clic, s\u00e9lection, &#8230;) des objets.<\/p>\n<h1><\/h1>\n<h1>Classe de la sc\u00e8ne principale<\/h1>\n<h2><\/h2>\n<h2>Explication<\/h2>\n<p>\u00c0 la cr\u00e9ation d&rsquo;un projet de type \u00ab\u00a0<strong>application &#8211; iOS &#8211; single View<\/strong>\u00ab\u00a0, une <strong>Vue<\/strong> (sc\u00e8ne principale) et un <strong>Contr\u00f4leur<\/strong> ( le fichier \u00ab\u00a0<strong>ViewController.swift<\/strong>\u00ab\u00a0) seront automatiquement ajout\u00e9s au projet.<br \/>\nLe fichier &lsquo;<strong>ViewController.swift<\/strong>&lsquo; contient la d\u00e9claration de la\u00a0classe &lsquo;<strong>ViewController<\/strong>&lsquo; d\u00e9riv\u00e9e de la classe &lsquo;<strong>UIViewController<\/strong>&lsquo;. \u00a0Cette classe est le contr\u00f4leur associ\u00e9 \u00e0 la sc\u00e8ne principale.<br \/>\nC&rsquo;est entre ces deux \u00e9l\u00e9ments qui nous d\u00e9clarerons des r\u00e9f\u00e9rences MVC.<br \/>\n<strong>Note<\/strong>: \u00a0Sous Xcode, le <strong>Mod\u00e8le<\/strong> sera repr\u00e9sent\u00e9 par la d\u00e9claration des propri\u00e9t\u00e9s (variables et structures de donn\u00e9es) de la classe contr\u00f4leur.<\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<h1>Suite du laboratoire<\/h1>\n<p>Nous allons maintenant d\u00e9finir des r\u00e9f\u00e9rences\u00a0entre l&rsquo;image, le bouton et la classe de la sc\u00e8ne pour que nous puissions acc\u00e9der aux propri\u00e9t\u00e9s et aux \u00e9v\u00e9nements de ces deux objets \u00e0 partir de notre code swift.<br \/>\n<strong><span style=\"color: #ff0000;\">Action 16<\/span><\/strong>\u00a0&#8211; Cr\u00e9ons un r\u00e9f\u00e9rence\u00a0MVC de type &lsquo;<strong>IBOutlet<\/strong>&lsquo; sur l&rsquo;objet &lsquo;<strong>UITextView<\/strong>&lsquo; de la sc\u00e8ne.<br \/>\n<span style=\"color: #0000ff;\"><strong>M\u00e9thode<\/strong><\/span>: Il faut glisser l&rsquo;objet, de la sc\u00e8ne vers la classe de la sc\u00e8ne (code source) utilisant la s\u00e9quence &lsquo;<strong>Ctrl+Glisser<\/strong>&lsquo; ou &lsquo;<strong>clicDroit+Glisser<\/strong>&lsquo;<br \/>\n<strong><span style=\"color: #008000;\">Astuce<\/span><\/strong>: <strong>Cmd+Alt+Enter<\/strong> permet d&rsquo;afficher le panneau de l&rsquo;assistant \u00e9diteur. \u00a0<strong>Cmd+Enter<\/strong> pour le fermer.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1162\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran16.png\" alt=\"premier.projet.swift.ecran16\" width=\"1353\" height=\"846\" \/><br \/>\n&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 17<\/span><\/strong>\u00a0&#8211; Renseignons les propri\u00e9t\u00e9s de la connexion; le type (<strong>Outlet, Action<\/strong>), son nom, &#8230;<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1163\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran17.png\" alt=\"premier.projet.swift.ecran17\" width=\"585\" height=\"256\" \/><br \/>\n&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 18<\/span><\/strong>\u00a0&#8211; Observons, Xcode a ajout\u00e9 le code de la d\u00e9claration du lien, dans la classe de la sc\u00e8ne.<br \/>\n<span style=\"color: #008000;\"><strong>Astuce<\/strong><\/span> &#8211; Il est possible de programmer le lien, en inscrivant le code \u00ab\u00a0<strong>@IBOutlet var nom:type<\/strong>\u00a0\u00bb puis de glisser le point de lien &lsquo; (+) en marge de gauche&rsquo; vers l&rsquo;objet de la sc\u00e8ne.<br \/>\n<strong>Note<\/strong>: Si les points de lien n&rsquo;apparaissent pas, reconstruire le projet avec <strong>Cmd+B<\/strong>.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1164\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran18.png\" alt=\"premier.projet.swift.ecran18\" width=\"954\" height=\"244\" \/><br \/>\n&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 19<\/span><\/strong>\u00a0&#8211; Cr\u00e9ons un lien MVC de type &lsquo;<strong>IBAction<\/strong>&lsquo; sur l&rsquo;objet &lsquo;<strong>UIButton<\/strong>&lsquo; de la sc\u00e8ne:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1165\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran19.png\" alt=\"premier.projet.swift.ecran19\" width=\"465\" height=\"364\" \/><br \/>\n&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 20<\/span><\/strong>\u00a0&#8211; Observons les d\u00e9clarations &lsquo;<strong>IBOutlet<\/strong>&lsquo; et &lsquo;<strong>IBAction<\/strong>\u00a0\u00bb qui ont \u00e9t\u00e9 ajout\u00e9es \u00e0 notre code. \u00a0La d\u00e9finition d&rsquo;un &lsquo;<strong>IBAction&rsquo;<\/strong> a ajout\u00e9 une nouvelle m\u00e9thode \u00e0 notre code.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1166\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran20.png\" alt=\"premier.projet.swift.ecran20\" width=\"1360\" height=\"846\" \/><\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<h1><\/h1>\n<h1>\u00c9tape 3 &#8211; Programmer l&rsquo;interactivit\u00e9 de l&rsquo;application<\/h1>\n<p>En ajoutant un lien de type &lsquo;<strong>IBAction<\/strong>&lsquo; sur le bouton de la sc\u00e8ne, Xcode a ajout\u00e9 une m\u00e9thode &lsquo;<strong>afficherUneExpression<\/strong>&lsquo; \u00e0 la classe de la sc\u00e8ne. \u00a0Les instructions que nous ajouterons \u00e0 cette m\u00e9thode, seront ex\u00e9cut\u00e9es lorsque l&rsquo;utilisateur appuiera sur le bouton.<br \/>\n&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 21<\/span><\/strong>\u00a0&#8211; \u00a0Ajoutons du code dans la m\u00e9thode &lsquo;<strong>afficherUneExpression<\/strong>&lsquo;.<br \/>\n<span style=\"color: #008000;\"><strong>Astuce<\/strong><\/span>: Lors du d\u00e9veloppement, utiliser un &lsquo;<strong>print()<\/strong>&lsquo; dans vos m\u00e9thodes \u00e9v\u00e9nementielles pour obtenir une r\u00e9troaction.<\/p>\n<pre class=\"lang:swift mark:5 decode:true\">@IBAction func afficherUneExpression(sender: AnyObject) {\n  \/\/ Le code de cette fonction sera\n  \/\/ ex\u00e9cut\u00e9 suite \u00e0 un clic du bouton\n  expHaddock.text = \"Bonjour TIM!\"\n}  \/\/ afficherUneExpression()<\/pre>\n<p>&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 22<\/span><\/strong>\u00a0&#8211; Testons l&rsquo;application dans le simulateur.<br \/>\n<span style=\"color: #008000;\"><strong>Astuce<\/strong><\/span>: Si le mod\u00e8le de l&rsquo;appareil est d\u00e9j\u00e0 renseigner, utiliser la s\u00e9quence \u00a0<strong>Cmd+R<\/strong> pour ex\u00e9cuter l&rsquo;application.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1167\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran21.png\" alt=\"premier.projet.swift.ecran21\" width=\"319\" height=\"501\" \/><br \/>\n&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 23<\/span><\/strong>\u00a0&#8211; \u00a0Ajoutons \u00a01) un tableau d&rsquo;expressions du capitaine Haddock, 2) une s\u00e9lection al\u00e9atoire d&rsquo;un des \u00e9l\u00e9ments du tableau suite \u00e0 un clic du bouton<\/p>\n<pre class=\"lang:swift mark:7-18,29-31 decode:true \">\/\/\/\/ ici : class ViewController: UIViewController {\n    \/\/ D\u00e9claration des propri\u00e9t\u00e9s de la classe\n    \/\/\/ Tableau contenant de savoureuses expressions\n    \/\/\/ du personnage 'Capitain Haddock'\n    let expressionsHaddock = [\n        \"Bachi-bouzouk\",\n        \"Mille millions de mille sabords\",\n        \"Bougres de faux jetons \u00e0 la sauce tartare\",\n        \"Esp\u00e8ce de porc-\u00e9pic mal embouch\u00e9\",\n        \"Patagon de zoulous\",\n        \"Bougre d\u2019extrait de cornichon\",\n        \"Simili-martien \u00e0 la graisse de cabestan\",\n        \"Sombre oryct\u00e9rope\",\n        \"Tra\u00eene-potence\",\n        \"Bougres d\u2019extrait de cr\u00e9tins des Alpes\",\n    ]\n    \/\/ ** Fin de -&gt; D\u00e9claration des propri\u00e9t\u00e9s de la classe\n    @IBAction func afficherUneExpression(sender: AnyObject) {\n        \/\/ Le code de cette fonction sera\n        \/\/ ex\u00e9cut\u00e9 suite \u00e0 un clic du bouton\n        \/\/ retournera un nombre entre 0 et nbElementsTableauExpressions - 1\n        \/\/ Ou bien arc4random_uniform(n)\n        let indice = Int(arc4random() % UInt32(expressionsHaddock.count))\n        print(indice)\n        expHaddock.text = expressionsHaddock[indice]\n    }  \/\/ afficherUneExpression()\n<\/pre>\n<p>&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 24<\/span><\/strong>\u00a0&#8211; Testons l&rsquo;application dans le simulateur.<\/p>\n<hr \/>\n<p>&nbsp;<br \/>\n&nbsp;<\/p>\n<h1>\u00c9tape 4 &#8211; Charger des images par programmation<\/h1>\n<p>&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 25<\/span><\/strong>\u00a0&#8211; T\u00e9l\u00e9chargeons et ajoutons le <a href=\"\/xcode\/wp-content\/uploads\/2014\/07\/images.haddock.zip\">dossier suivant<\/a> au projet.<br \/>\n<span style=\"color: #0000ff;\"><strong>M\u00e9thode<\/strong><\/span>: Suivre le lien de t\u00e9l\u00e9chargement, d\u00e9compresser le fichier, glisser le dossier obtenu vers le navigateur du projet.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1171\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran22.png\" alt=\"premier.projet.swift.ecran22\" width=\"1097\" height=\"765\" \/><br \/>\n&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 26<\/span><\/strong>\u00a0&#8211; Observons la structure du nom des fichiers que nous venons d&rsquo;ajouter au projet.<br \/>\nLe nom est constitu\u00e9 de la chaine \u00ab\u00a0<strong>haddock<\/strong>\u00a0\u00bb + <strong>1&#8230;10<\/strong> + \u00ab\u00a0<strong>jpg<\/strong>\u00a0\u00bb<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1172\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran23.png\" alt=\"premier.projet.swift.ecran23\" width=\"513\" height=\"423\" \/><br \/>\nAvec l&rsquo;expression d&rsquo;interpolation de chaine suivante: <strong>\u00ab\u00a0haddock\\(indice).jpg\u00a0\u00bb,<\/strong> \u00a0il sera possible de construire un chaine contenant le nom d&rsquo;un des fichiers.<br \/>\n&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 27<\/span><\/strong>\u00a0&#8211; Ajoutons un lien &lsquo;<strong>IBOutlet<\/strong>&lsquo; sur l&rsquo;image de la sc\u00e8ne pour que nous puissions, par la suite, renseigner sa propri\u00e9t\u00e9 &lsquo;<strong>image<\/strong>&lsquo; par programmation.<br \/>\n&nbsp;<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1173\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran24.png\" alt=\"premier.projet.swift.ecran24\" width=\"847\" height=\"289\" \/><br \/>\n&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 28<\/span><\/strong>\u00a0&#8211; Ajoutons la ligne de code suivante \u00e0 la m\u00e9thode &lsquo;<strong>afficherUneExpression<\/strong>&lsquo;.<\/p>\n<pre class=\"lang:swift mark:3 decode:true\">@IBAction func afficherUneExpression(sender: AnyObject) {\n  ...\n  imageHaddock.image = UIImage(named: \"haddock\\(indice + 1).jpg\")\n}  \/\/ afficherUneExpression()\n<\/pre>\n<p>&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 29<\/span><\/strong>\u00a0&#8211; Testons l&rsquo;application.<br \/>\n<strong>Note<\/strong>: \u00a0Votre r\u00e9sultat visuel sera diff\u00e9rent, j&rsquo;ai prit de l&rsquo;avance sur le design de la maquette.<br \/>\n[table]<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-1255 \" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/projet.Haddock04.png\" alt=\"projet.Haddock04\" width=\"252\" height=\"396\" \/>,<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1256\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/projet.Haddock05.png\" alt=\"projet.Haddock05\" width=\"252\" height=\"395\" \/><br \/>\n[\/table]<br \/>\n&nbsp;<br \/>\n<strong><span style=\"color: #ff0000;\">Action 30<\/span><\/strong>\u00a0&#8211; <strong>Vous devez terminer le design de la maquette principale en laboratoire.<\/strong><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1204\" src=\"\/xcode\/wp-content\/uploads\/2014\/07\/premier.projet.swift_.ecran25b.png\" alt=\"premier.projet.swift.ecran25b\" width=\"718\" height=\"762\" \/><br \/>\nFIN du laboratoire!<br \/>\n<span style=\"color: #008080;\"><strong>D\u00e9fi: Ajuster les contraintes de mise en page pour que l&rsquo;application fonctionne sur tous les appareils et toutes les orientations.<\/strong><\/span><br \/>\n&nbsp;<br \/>\n<a href=\"https:\/\/bitbucket.org\/alain_boudreault\/expressions.capitaine.haddock.swift3\/get\/d8bcfa980048.zip\">T\u00e9l\u00e9charger la version finale du projet &#8211; version Xcode 8 + swift 3<\/a>.<\/p>\n<hr \/>\n<h6 style=\"text-align: right;\">Document r\u00e9alis\u00e9 par Alain Boudreault &#8211; Juillet 2014, m-a-j swift 3 en ao\u00fbt 2016<\/h6>\n<h6><\/h6>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Labo &#8211; Introduction \u00e0 Xcode et Swift Note: \u00a0Ce laboratoire a \u00e9t\u00e9 test\u00e9 sur Xcode 8 beta 5 Contenu Xcode, d\u00e9marrage, \u00a0survole des panneaux Storyboard, sc\u00e8ne, \u00a0vue (View), objets visuels et propri\u00e9t\u00e9s Design d&rsquo;une sc\u00e8ne Le mod\u00e8le MVC, @IBOutlet, @IBAction \u00c9diteur, assistant \u00e9diteur Propri\u00e9t\u00e9s de classe: uneClasse{ let, var &#8230; } Tableau (Array), \u00e9num\u00e9ration rapide, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1139","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ve2cuy.com\/xcode\/wp-json\/wp\/v2\/pages\/1139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ve2cuy.com\/xcode\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ve2cuy.com\/xcode\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ve2cuy.com\/xcode\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ve2cuy.com\/xcode\/wp-json\/wp\/v2\/comments?post=1139"}],"version-history":[{"count":0,"href":"https:\/\/ve2cuy.com\/xcode\/wp-json\/wp\/v2\/pages\/1139\/revisions"}],"wp:attachment":[{"href":"https:\/\/ve2cuy.com\/xcode\/wp-json\/wp\/v2\/media?parent=1139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}