{"id":1500,"date":"2014-09-05T12:41:16","date_gmt":"2014-09-05T16:41:16","guid":{"rendered":"http:\/\/tim.cstj.qc.ca\/cours\/xcode\/wp\/?page_id=1500"},"modified":"2014-09-05T12:41:16","modified_gmt":"2014-09-05T16:41:16","slug":"tim-flix-swift","status":"publish","type":"page","link":"https:\/\/ve2cuy.com\/xcode\/tim-flix-swift\/","title":{"rendered":"TIM.Flix.swift"},"content":{"rendered":"<h1>Laboratoire \u00e0 r\u00e9aliser en classe<\/h1>\n<p><span style=\"color: #ff0000;\"><strong>Note<\/strong><\/span>: \u00a0<em>Ne pas suivre les \u00e9tapes de ce document, r\u00e9f\u00e9rez-vous plut\u00f4t au labo \u00ab\u00a0Les amis de la science\u00a0\u00bb pour le fonctionement de UITableView + segue.<\/em><br \/>\nDe plus, ne pas utiliser les classes NSArray et NSDictionary &#8211; sauf pour<\/p>\n<p style=\"text-align: center;\"><em><span style=\"color: #00ccff;\">tableauDesVideos<\/span> = NSArray(contentsOfFile: path) as! Array<\/em><\/p>\n<p>T\u00e9l\u00e9chargement des ressources de d\u00e9part: \u00a0<a href=\"\/xcode\/wp-content\/uploads\/2014\/09\/TIM.FLIX_.images.zip\">TIM.FLIX.images<\/a><br \/>\n<span style=\"color: #ff0000;\">Il faut remettre votre projet (format zip) dans le dossier remise.<\/span><\/p>\n<hr \/>\n<h1><\/h1>\n<h1>Description<\/h1>\n<p>Avec ce tutoriel, nous apprendrons \u00e0 construire une application qui affiche, grace \u00e0 &lsquo;UITableView&rsquo; et une cellule personnalis\u00e9e, une liste de titres vid\u00e9os renseign\u00e9e par un fichier de propri\u00e9t\u00e9s (plist).<br \/>\nUne page contenant le d\u00e9tail de la vid\u00e9o sera affich\u00e9e &#8211; par un &lsquo;segue&rsquo; &#8211; suite \u00e0 la s\u00e9lection d&rsquo;un \u00e9l\u00e9ment de la table.<br \/>\nVoici le &lsquo;storyboard&rsquo;:<br \/>\n<div id=\"attachment_64\" style=\"width: 810px\" class=\"wp-caption alignnone\"><a href=\"\/xcode\/index.php\/labo\/timflix-delegation-et-uitableview-personnalisee\/timflix-storyboard\/\" rel=\"attachment wp-att-64\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-64\" class=\"size-medium wp-image-64\" src=\"\/xcode\/wp-content\/uploads\/2013\/10\/TIMFlix-storyboard-800x370.png\" alt=\"\" width=\"800\" height=\"370\" \/><\/a><p id=\"caption-attachment-64\" class=\"wp-caption-text\">Figure 1<\/p><\/div><br \/>\nAinsi qu&rsquo;une vid\u00e9o du r\u00e9sultat final:<br \/>\n<iframe loading=\"lazy\" width=\"700\" height=\"394\" src=\"https:\/\/www.youtube.com\/embed\/Kq_U0TWATdo?feature=oembed\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<h1>Objectifs<\/h1>\n<p>Savoir cr\u00e9er un tableau de type &lsquo;NSArray&rsquo; \u00e0 partir d&rsquo;un fichier de propri\u00e9t\u00e9s. \u00a0Comprendre et utiliser la d\u00e9l\u00e9gation de l&rsquo;objet &lsquo;UITableView&rsquo;. \u00a0Etre capable de pr\u00e9parer et lancer par programmation, une transition vers une autre sc\u00e8ne (&lsquo;segue&rsquo;). \u00a0Savoir programmer une &lsquo;UITableViewCell&rsquo; personnalis\u00e9e (design et classe).<br \/>\n\u00c9l\u00e9ments de contenu:<\/p>\n<ul>\n<li>Storyboard<\/li>\n<li>UITableView<\/li>\n<li>UITableViewCell &#8211; dequeueReusableCellWithIdentifier<\/li>\n<li>UITableViewDelegate &#8211; didSelectRowAtIndexPath<\/li>\n<li>UITableViewDataSource &#8211; numberOfRowsInSection, cellForRowAtIndexPath<\/li>\n<li>Seque &#8211; prepareForSegue, performSegueWithIdentifier:@\u00a0\u00bbidentificateur\u00a0\u00bb<\/li>\n<li>performSelector:@selector(unSelecteur) afterDelay:<\/li>\n<li>NSArray &#8211;\u00a0arrayWithContentsOfFile:[NSBundle&#8230;]<\/li>\n<\/ul>\n<p>Le projet de d\u00e9part:\u00a0<a href=\"\/xcode\/wp-content\/uploads\/2014\/09\/TIMFLIX.swift_.-depart.zip\">TIMFLIX.swift. depart<\/a><br \/>\n&nbsp;<\/p>\n<hr \/>\n<h1>\u00c9tape 1 &#8211; Design et navigation<\/h1>\n<p>\u00c0 cette \u00e9tape, nous allons mettre en place les sc\u00e8nes du projet, programmer une transition (segue), de la page de chargement vers la liste, positionner un UITableView puis finalement, renseigner une transition de la liste vers la sc\u00e8ne de d\u00e9tail.<br \/>\n<span style=\"color: #ff0000;\"><strong>Action 1\u00a0<\/strong><\/span>&#8211; Ouvrons le &lsquo;Storyboard&rsquo; du projet de d\u00e9part:<br \/>\n<div id=\"attachment_104\" style=\"width: 549px\" class=\"wp-caption alignnone\"><a href=\"\/xcode\/index.php\/labo\/timflix-delegation-et-uitableview-personnalisee\/timflix-figure01\/\" rel=\"attachment wp-att-104\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-104\" class=\" wp-image-104\" src=\"\/xcode\/wp-content\/uploads\/2013\/10\/timflix-figure01-539x600.png\" alt=\"\" width=\"539\" height=\"600\" \/><\/a><p id=\"caption-attachment-104\" class=\"wp-caption-text\">figure 2<\/p><\/div><br \/>\n&nbsp;<br \/>\n<span style=\"color: #ff0000;\"><strong>Action 2<\/strong><\/span>\u00a0&#8211; Ajoutons deux nouvelles sc\u00e8nes avec leur classe: Intro.swift et DetailVideo.swift:<br \/>\n&nbsp;<br \/>\n<div id=\"attachment_112\" style=\"width: 810px\" class=\"wp-caption alignnone\"><a href=\"\/xcode\/wp-content\/uploads\/2013\/10\/timflix-figure021.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-112\" class=\"size-medium wp-image-112\" src=\"\/xcode\/wp-content\/uploads\/2013\/10\/timflix-figure021-800x400.png\" alt=\"timflix-figure02\" width=\"800\" height=\"400\" \/><\/a><p id=\"caption-attachment-112\" class=\"wp-caption-text\">figure 3<\/p><\/div><br \/>\n<span style=\"color: #ff0000;\"><strong>Action 3<\/strong><\/span> &#8211;\u00a0 Renseignons la propri\u00e9t\u00e9 &lsquo;Is initial View Controller&rsquo; de la sc\u00e8ne &lsquo;Intro&rsquo;<\/p>\n<h4>Vid\u00e9o \u00e9tape01<\/h4>\n<p><iframe loading=\"lazy\" width=\"700\" height=\"394\" src=\"https:\/\/www.youtube.com\/embed\/8a5Qhrv97Qo?feature=oembed\" frameborder=\"0\" allowfullscreen><\/iframe><br \/>\n<span style=\"color: #ff0000;\"><strong>Action 4<\/strong><\/span>\u00a0&#8211; Ajoutons de la couleur, un UITableView ainsi qu&rsquo;un d\u00e9placement (segue) \u00e0 partir la liste des vid\u00e9os vers la sc\u00e8ne de d\u00e9tail:<br \/>\n<div id=\"attachment_121\" style=\"width: 810px\" class=\"wp-caption alignnone\"><a href=\"\/xcode\/wp-content\/uploads\/2013\/10\/timflix-figure03.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-121\" class=\"size-medium wp-image-121\" src=\"\/xcode\/wp-content\/uploads\/2013\/10\/timflix-figure03-800x434.png\" alt=\"timflix-figure03\" width=\"800\" height=\"434\" \/><\/a><p id=\"caption-attachment-121\" class=\"wp-caption-text\">figure 4<\/p><\/div><\/p>\n<h4>\u00a0Vid\u00e9o \u00e9tape01.1<\/h4>\n<p><iframe loading=\"lazy\" width=\"700\" height=\"394\" src=\"https:\/\/www.youtube.com\/embed\/p6eVOvuDqXo?feature=oembed\" frameborder=\"0\" allowfullscreen><\/iframe><br \/>\n<span style=\"color: #ff0000;\"><strong>Action 5<\/strong><\/span> &#8211; Programmons la transition de la sc\u00e8ne &lsquo;Intro&rsquo; vers la sc\u00e8ne &lsquo;Liste des vid\u00e9os&rsquo;<br \/>\n<strong>Note<\/strong>: \u00a0La programmation de la transition, de la sc\u00e8ne d&rsquo;introduction vers la sc\u00e8ne \u00a0de la liste des vid\u00e9os, est r\u00e9alis\u00e9e avec les m\u00e9thodes &lsquo;NSTimer.scheduledTimerWithTimeInterval&rsquo; et &lsquo;performSegueWithIdentifier&rsquo;.<br \/>\nVoici le code \u00e0 ajouter \u00e0 la classe de la sc\u00e8ne d&rsquo;introduction:<\/p>\n<pre class=\"toolbar:1 lang:default mark:5,8-10 decode:true\">    override func viewDidLoad() {\n        super.viewDidLoad()\n        \/\/ Do any additional setup after loading the view.\n        let timer = NSTimer.scheduledTimerWithTimeInterval(2.0, target: self, selector: Selector(\"tournerLaPage\"), userInfo: nil, repeats: false)\n    }  \/\/ viewDidLoad\n    func tournerLaPage() {\n        performSegueWithIdentifier(\"listeVideos\", sender:self)\n    } \/\/ tournerLaPage\n<\/pre>\n<p>&nbsp;<\/p>\n<hr \/>\n<h1>\u00c9tape 2 &#8211; Afficher la liste des vid\u00e9os<\/h1>\n<p><strong>Objectifs:<\/strong><\/p>\n<ul>\n<li>Cr\u00e9er un tableau contenant les enregistrements du fichier\u00a0\u00a0&lsquo;Listes des videos.plist&rsquo;.<\/li>\n<li>Renseigner la d\u00e9l\u00e9gation des protocoles &lsquo;donn\u00e9es&rsquo; et &lsquo;d&rsquo;\u00e9v\u00e9nements&rsquo; de la classe UITableView.<\/li>\n<li>Programmer les m\u00e9thodes protocoles &lsquo;tableView:numberOfRowsInSection:&rsquo; et &lsquo;tableView: cellForRowAtIndexPath:&rsquo;<\/li>\n<li>Renseigner les propri\u00e9t\u00e9s &lsquo;labelText&rsquo; et &lsquo;image&rsquo; de la &lsquo;UITableViewCell&rsquo; \u00e0 partir des donn\u00e9es du tableau.<\/li>\n<li>Tester l&rsquo;affichage de la table.<\/li>\n<\/ul>\n<h3>\u00c9tape 2.1 &#8211; Charger les donn\u00e9es<\/h3>\n<p>Commen\u00e7ons par cr\u00e9er un tableau &lsquo;<strong>NSArray<\/strong>&lsquo; \u00e0 partir de la liste de propri\u00e9t\u00e9s &lsquo;<strong>Listes des videos.plist&rsquo;<\/strong>. \u00a0Note, ce fichier est dans le projet de d\u00e9part.<br \/>\nVoici un extrait du fichier contenant les donn\u00e9es des vid\u00e9os:<\/p>\n<pre class=\"toolbar:1 lang:default decode:true\">&lt;array&gt;\n\t&lt;dict&gt;\n\t\t&lt;key&gt;titre&lt;\/key&gt;\n\t\t&lt;string&gt;Pirates du cyberspace&lt;\/string&gt;\n\t\t&lt;key&gt;duree&lt;\/key&gt;\n\t\t&lt;string&gt;1 h 48 m&lt;\/string&gt;\n\t\t&lt;key&gt;classement&lt;\/key&gt;\n\t\t&lt;string&gt;18A&lt;\/string&gt;\n\t\t&lt;key&gt;pochette&lt;\/key&gt;\n\t\t&lt;string&gt;pochette-000.jpg&lt;\/string&gt;\n\t\t&lt;key&gt;annee&lt;\/key&gt;\n\t\t&lt;string&gt;1995&lt;\/string&gt;\n\t\t&lt;key&gt;description&lt;\/key&gt;\n\t\t&lt;string&gt;L&amp;apos;utilisation des ordinateurs lui \u00e9tant bannie pour des ann\u00e9es, un ex-enfant prodige replonge dans le monde du crime informatique avec trois autres pirates.&lt;\/string&gt;\n\t\t&lt;key&gt;cote&lt;\/key&gt;\n\t\t&lt;string&gt;4&lt;\/string&gt;\n\t&lt;\/dict&gt;\n\t&lt;dict&gt;\n\t\t&lt;key&gt;titre&lt;\/key&gt;\n\t\t&lt;string&gt;Star trek: The Next Generation &lt;\/string&gt;\n\t\t&lt;key&gt;duree&lt;\/key&gt;\n\t\t&lt;string&gt;1 h 48 m&lt;\/string&gt;\n\t\t&lt;key&gt;classement&lt;\/key&gt;\n\t\t&lt;string&gt;18A&lt;\/string&gt;\n\t\t&lt;key&gt;pochette&lt;\/key&gt;\n\t\t&lt;string&gt;pochette-007.jpg&lt;\/string&gt;\n\t\t&lt;key&gt;annee&lt;\/key&gt;\n\t\t&lt;string&gt;1987&lt;\/string&gt;\n\t\t&lt;key&gt;description&lt;\/key&gt;\n\t\t&lt;string&gt;In the year 2364, Capt. Jean-Luc Picard leads the new Enterprise on missions of discovery. First Officer William Riker, engineer Geordi La Forge, and Klingon crewmember Worf join Picard as they explore the universe and interact with alien species.&lt;\/string&gt;\n\t\t&lt;key&gt;cote&lt;\/key&gt;\n\t\t&lt;string&gt;4&lt;\/string&gt;\n\t&lt;\/dict&gt;\n...\n&lt;array&gt;<\/pre>\n<p>Ce fichier va nous permettre de cr\u00e9er un tableau &lsquo;NSArray&rsquo; qui contiendra des objets de type &lsquo;NSDictionary&rsquo;<br \/>\n<strong>Note<\/strong>: \u00a0Nous utilisons la classe NSArray au lieu de la classe Array car cette derni\u00e8re ne propose pas de m\u00e9thode pour cr\u00e9er un tableau \u00e0 partir d&rsquo;un fichier de propri\u00e9t\u00e9s.<br \/>\nNous pourrons acc\u00e9der aux \u00e9l\u00e9ments du tableau avec la syntaxe:<br \/>\ntableauDesVideos[noElement]<br \/>\net<br \/>\ntableauDesVideos[noElement][\u00ab\u00a0pochette\u00a0\u00bb], &#8230;<br \/>\n<span style=\"color: #ff0000;\"><strong>Action 6<\/strong><\/span>\u00a0&#8211;\u00a0Modifions la classe de la sc\u00e8ne &lsquo;Liste des vid\u00e9os&rsquo;.<br \/>\n<strong>Note<\/strong>: \u00a0nous voulons cr\u00e9er le tableau des vid\u00e9os au chargement de la sc\u00e8ne &lsquo;Liste des vid\u00e9os&rsquo;, c&rsquo;est pourquoi nous modifions le fichier &lsquo;ViewController.swift&rsquo;.<\/p>\n<pre class=\"toolbar:1 lang:default decode:true\">\/\/  ViewController.swift\n\/\/  TIMFLIX\nimport UIKit\n\/\/\/  Classe de la sc\u00e8ne \"Liste des vid\u00e9os\"\nclass ViewController: UIViewController {\n    \/\/\/ Tableau renseign\u00e9 par le fichier \"Liste des videos.plist\"\n    var tableauDesVideos = NSArray()\n    \/\/\/ M\u00e9thode de d\u00e9part...\n    override func viewDidLoad() {\n        super.viewDidLoad()\n        \/\/ Chargement de la liste des vid\u00e9os\n        if let path = NSBundle.mainBundle().pathForResource(\"Listes des videos\", ofType: \"plist\")\n        {\n            tableauDesVideos = NSArray(contentsOfFile: path)\n        }\n        else {\n            println(\"Erreur: Le chemin vers le fichier de donn\u00e9es est invalide \")\n        } \/\/ if let path ...\n        \/\/ Trace temporaire\n        println(tableauDesVideos)\n    } \/\/ viewDidLoad\n} \/\/ class ViewController<\/pre>\n<p>&nbsp;<br \/>\n<strong>Note<\/strong>: Nous pourrions \u00a0cr\u00e9er un objet de type NSDictionary \u00e0 partir d&rsquo;un des \u00e9l\u00e9ments du &lsquo;tableauDesVideos&rsquo; en proc\u00e9dant comme suit:<\/p>\n<pre class=\"toolbar:1 lang:default decode:true\">let unFilm = tableauDesVideos[0] as NSDictionary\nlet titre = unFilm[\"titre\"] as String\nprintln(\"Le titre du film est: \\(titre)\")\n<\/pre>\n<p>&nbsp;<br \/>\nAction 5.2 &#8211; Pratiquer l&rsquo;acc\u00e8s au tableau<\/p>\n<pre class=\"lang:swift decode:true\">\/\/ D\u00e9finition non typ\u00e9e\nvar tableauDesVideos = []\n\/\/ Acc\u00e8s typ\u00e9\n\/\/ Temporaire - tester l'acc\u00e8s au tableau\nvar titre:String\nvar duree:String\nvar pochette:String\nif let temp = (tableauDesVideos[0] as NSDictionary)[\"titre\"] as? String{\n   titre = temp\n} else { titre = \"\"}\n\/\/ Ceci est valide aussi\nif let temp = tableauDesVideos[0][\"duree\"] as? String{\n  duree = temp\n} else {duree=\"\"}\nif let temp = tableauDesVideos[0][\"pochette\"] as? String{\n  pochette = temp\n} else {pochette=\"\"}\nprintln(\"Nom: \\(titre),\\nDur\u00e9e: \\(duree)\\nPochette: \\(pochette)\")<\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"lang:swift decode:true \">\/\/ D\u00e9finition typ\u00e9e\nvar tableauDesVideos: Array&lt; Dictionary &lt;String,String&gt; &gt; = []\n\/\/ Temporaire - tester l'acc\u00e8s au tableau\nvar titre:String\nvar duree:String\nvar pochette:String\nif let temp = tableauDesVideos[0][\"titre\"]{\n  titre = temp\n} else { titre = \"\"}\nif let temp = tableauDesVideos[0][\"duree\"]{\n  duree = temp\n} else {duree=\"\"}\nif let temp = tableauDesVideos[0][\"pochette\"]{\n  pochette = temp\n} else {pochette=\"\"}\nprintln(\"Nom: \\(titre),\\nDur\u00e9e: \\(duree)\\nPochette: \\(pochette)\")\nlet imagePochette = UIImageView(image: UIImage(named: pochette))\nimagePochette.center = view.center\nview.addSubview(imagePochette)\n<\/pre>\n<p>Action 5.3 &#8211; Modifions la structure du fichier de donn\u00e9es pour y ajouter un tableau d&rsquo;acteurs<\/p>\n<pre class=\"lang:swift mark:4-11 decode:true\">&lt;array&gt;\n\t&lt;dict&gt;\n\t\t&lt;key&gt;acteurs&lt;\/key&gt;\n\t\t&lt;array&gt;\n\t\t\t&lt;dict&gt;\n\t\t\t\t&lt;key&gt;nom&lt;\/key&gt;\n\t\t\t\t&lt;string&gt;Bob&lt;\/string&gt;\n\t\t\t\t&lt;key&gt;age&lt;\/key&gt;\n\t\t\t\t&lt;string&gt;99&lt;\/string&gt;\n\t\t\t&lt;\/dict&gt;\n\t\t&lt;\/array&gt;\n\t\t&lt;key&gt;titre&lt;\/key&gt;\n\t\t&lt;string&gt;Pirates du cyberspace&lt;\/string&gt;\n\t\t&lt;key&gt;duree&lt;\/key&gt;\n\t\t&lt;string&gt;1 h 48 m&lt;\/string&gt;\n\t\t&lt;key&gt;classement&lt;\/key&gt;\n\t\t&lt;string&gt;18A&lt;\/string&gt;\n\t\t&lt;key&gt;pochette&lt;\/key&gt;\n\t\t&lt;string&gt;netflix-000.jpg&lt;\/string&gt;\n\t\t&lt;key&gt;annee&lt;\/key&gt;\n\t\t&lt;string&gt;1995&lt;\/string&gt;\n\t\t&lt;key&gt;description&lt;\/key&gt;\n\t\t&lt;string&gt;L&amp;apos;utilisation des ordinateurs lui \u00e9tant bannie pour des ann\u00e9es, un ex-enfant prodige replonge dans le monde du crime informatique avec trois autres pirates.&lt;\/string&gt;\n\t\t&lt;key&gt;cote&lt;\/key&gt;\n\t\t&lt;string&gt;4&lt;\/string&gt;\n\t&lt;\/dict&gt;\n...\n&lt;\/array&gt;<\/pre>\n<p>Action 5.4 &#8211; Obtenons le nom du premier acteur<\/p>\n<pre class=\"lang:swift decode:true \">if let temp = (((tableauDesVideos[0] as NSDictionary)[\"acteurs\"] as NSArray)[0] as NSDictionary)[\"nom\"] as? String{\n  nomActeur = temp\n} else { nomActeur = \"\"}\n<\/pre>\n<p>Note: Pour l&rsquo;acc\u00e8s dynamique vers des structures de type tableau ou dictionnaire, il faut utiliser des classes NS.<br \/>\n&nbsp;<\/p>\n<h4>Vid\u00e9o \u00e9tape02.1.5<\/h4>\n<p><iframe loading=\"lazy\" width=\"700\" height=\"394\" src=\"https:\/\/www.youtube.com\/embed\/CRC0Uav5lEQ?feature=oembed\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<h3><\/h3>\n<h3>\u00c9tape 2.2 &#8211;\u00a0Renseigner et programmer la d\u00e9l\u00e9gation de l&rsquo;objet UITableView<\/h3>\n<p>Pour \u00eatre en mesure d&rsquo;utiliser un objet de type UITableView dans un projet, il faudra se d\u00e9clarer d\u00e9l\u00e9gu\u00e9 d&rsquo;au moins le protocole &lsquo;<a href=\"https:\/\/developer.apple.com\/library\/prerelease\/ios\/documentation\/UIKit\/Reference\/UITableViewDataSource_Protocol\/index.html#\/\/apple_ref\/occ\/intf\/UITableViewDataSource\">UITableViewDataSource<\/a>&lsquo; et au besoin &lsquo;<a href=\"https:\/\/developer.apple.com\/library\/prerelease\/ios\/documentation\/UIKit\/Reference\/UITableViewDelegate_Protocol\/index.html#\/\/apple_ref\/occ\/intf\/UITableViewDelegate\">UITableViewDelegate<\/a>&lsquo;.<br \/>\nEtre d\u00e9l\u00e9gu\u00e9 pour un objet, c&rsquo;est devoir impl\u00e9menter des m\u00e9thodes dont les signatures sont prescrites par la super classe.<br \/>\nPar exemple, pour \u00eatre en mesure de populer notre UITableView \u00a0\u00e0 partir du tableau des vid\u00e9os, une de nos classes devra souscrire au protocole &lsquo;UITableViewDataSource&rsquo; et programmer les deux m\u00e9thodes obligatoires suivantes:<\/p>\n<blockquote>\n<p style=\"color: #002d7a;\"><span style=\"color: #801b80;\">func\u00a0<\/span><span style=\"color: #004ed0;\">tableView<\/span><span style=\"color: #323333;\">(<\/span>tableView<span style=\"color: #016fe0;\">: <\/span>UITableView<span style=\"color: #323333;\">,<\/span><span style=\"color: #016fe0;\">\u00a0\u00a0<\/span>numberOfRowsInSection<span style=\"color: #016fe0;\">: <\/span>NSInteger<span style=\"color: #323333;\">)<\/span><span style=\"color: #016fe0;\"> -&gt; <\/span><span style=\"color: #801b80;\">Int<\/span><\/p>\n<p style=\"color: #004ed0;\"><span style=\"color: #801b80;\">func\u00a0<\/span>tableView<span style=\"color: #323333;\">(<\/span><span style=\"color: #002d7a;\">tableView<\/span><span style=\"color: #016fe0;\">: <\/span><span style=\"color: #002d7a;\">UITableView<\/span><span style=\"color: #323333;\">,<\/span>cellForRowAtIndexPath <span style=\"color: #002d7a;\">indexPath<\/span><span style=\"color: #016fe0;\">: <\/span><span style=\"color: #002d7a;\">NSIndexPath<\/span><span style=\"color: #323333;\">)<\/span><span style=\"color: #016fe0;\"> -&gt; <\/span>UITableViewCell<span style=\"color: #016fe0;\">!<\/span><\/p>\n<p><span style=\"font-size: 13px; line-height: 19px;\">Le fichier.swift (ou .h) d&rsquo;une classe \u00a0nous renseigne sur les m\u00e9thodes de d\u00e9l\u00e9gation, le niveau de prescription (@required ou @optional) ainsi que sur la syntaxe.<\/span><\/p><\/blockquote>\n<p>&nbsp;<br \/>\nVoici un extrait du fichier UITableView.h<\/p>\n<pre class=\"toolbar:1 lang:default decode:true\">@protocol UITableViewDataSource&lt;NSObject&gt;\n@required\n- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;\n\/\/ Row display. Implementers should *always* try to reuse cells by setting each cell's reuseIdentifier and querying for available reusable cells with dequeueReusableCellWithIdentifier:\n\/\/ Cell gets various attributes set automatically based on table (separators) and data source (accessory views, editing controls)\n- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;\n@optional\n- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;              \/\/ Default is 1 if not implemented\n...\n@protocol UITableViewDelegate&lt;NSObject, UIScrollViewDelegate&gt;\n@optional\n...\n\/\/ Called after the user changes the selection.\n- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath;\n...<\/pre>\n<p>&nbsp;<br \/>\nUne source d&rsquo;information sur les protocoles et m\u00e9thodes de d\u00e9l\u00e9gation d&rsquo;une classe est la documentation developpeur Apple.<br \/>\nPar exemple, pour UITableView:<br \/>\nhttps:\/\/developer.apple.com\/library\/ios\/documentation\/uikit\/reference\/UITableViewDataSource_Protocol\/Reference\/Reference.html<br \/>\nhttps:\/\/developer.apple.com\/library\/ios\/documentation\/uikit\/reference\/UITableViewDelegate_Protocol\/Reference\/Reference.html<br \/>\nPassons \u00e0 l&rsquo;action. \u00a0Dans la prochaine vid\u00e9o, nous allons localiser le fichier ent\u00eate de la classe UITableView pour indentifier et impl\u00e9meter les m\u00e9thodes d\u00e9l\u00e9gu\u00e9es qui vont nous permettre de renseigner les donn\u00e9es \u00e0 afficher via le UITableView de la sc\u00e8ne &lsquo;Liste des vid\u00e9os&rsquo;.<br \/>\n&nbsp;<br \/>\n<iframe loading=\"lazy\" width=\"700\" height=\"394\" src=\"https:\/\/www.youtube.com\/embed\/mf1q_ZjN6KU?feature=oembed\" frameborder=\"0\" allowfullscreen><\/iframe><br \/>\n&nbsp;<br \/>\n<span style=\"color: #ff0000;\"><strong>Action 7<\/strong><\/span> &#8211; Ajoutons le code suivant au fichier &lsquo;ViewController.swift&rsquo;:<\/p>\n<pre class=\"toolbar:1 lang:default decode:true\">\/\/ Les m\u00e9thodes de d\u00e9l\u00e9gation pour un UITableView\n\/\/ ********************************************************************\nfunc tableView(tableView: UITableView,  numberOfRowsInSection: NSInteger) -&gt; Int\n\/\/ ********************************************************************\n{\n  return tableauDesVideos.count\n} \/\/ numberOfRowsInSection\n\/\/ ********************************************************************\nfunc tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -&gt; UITableViewCell!\n\/\/ ********************************************************************\n{\n  var videoCourant = tableauDesVideos[indexPath.row] as NSDictionary\n  var celluleCourante = UITableViewCell()\n  celluleCourante.textLabel.text = videoCourant[\"titre\"] as String\n  celluleCourante.imageView.image = UIImage(named:videoCourant[\"pochette\"] as String)\n  return celluleCourante\n} \/\/ cellForRowAtIndexPath<\/pre>\n<p>&nbsp;<br \/>\n<span style=\"color: #ff0000;\"><strong>Action 8<\/strong><\/span> &#8211; Tra\u00e7ons un lien entre la propri\u00e9t\u00e9 &lsquo;dataSource&rsquo; de notre objet &lsquo;UITableView&rsquo; et le &lsquo;ViewController&rsquo; de la sc\u00e8ne &lsquo;Liste des vid\u00e9os&rsquo;<br \/>\n&nbsp;<br \/>\n<div id=\"attachment_169\" style=\"width: 566px\" class=\"wp-caption alignnone\"><a href=\"\/xcode\/wp-content\/uploads\/2013\/10\/timflix-figure04.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-169\" class=\" wp-image-169\" src=\"\/xcode\/wp-content\/uploads\/2013\/10\/timflix-figure04-556x600.png\" alt=\"timflix-figure04\" width=\"556\" height=\"600\" \/><\/a><p id=\"caption-attachment-169\" class=\"wp-caption-text\">figure 5<\/p><\/div><br \/>\n&nbsp;<br \/>\nSi nous testons l&rsquo;application nous allons constater que le bouton, permettant de passer \u00e0 la sc\u00e8ne de d\u00e9tail n&rsquo;est pas affich\u00e9. \u00a0Il n&rsquo;est donc pas possible de lancer la transition suite \u00e0 la s\u00e9lection d&rsquo;un item de la liste.<br \/>\nCela s&rsquo;explique par le fait que nous n&rsquo;avons pas utilis\u00e9 le mod\u00e8le de la cellule personnalis\u00e9e pour dessiner les cellules. \u00a0Dans ce cas, le UITableView utilise le mod\u00e8le par d\u00e9faut de UITableViewCell. \u00a0Ce mod\u00e8le poss\u00e8de des propri\u00e9t\u00e9s visuelles comme celles que nous avons utilis\u00e9es pr\u00e9c\u00e9demment; celluleCourante.imageView, celluleCourante.textLabel &#8230;<br \/>\nPour utiliser le mod\u00e8le personnalis\u00e9 de notre UITableViewCell il faut:<\/p>\n<ol>\n<li>Donner un identificateur \u00e0 la cellule.<\/li>\n<li>Cr\u00e9er la cellule avec la m\u00e9thode &lsquo;dequeueReusableCellWithIdentifier&rsquo; du param\u00e8tre &lsquo;tableView&rsquo;<\/li>\n<\/ol>\n<p>&nbsp;<br \/>\n<span style=\"color: #ff0000;\"><strong>Action \u00a09<\/strong><\/span> &#8211; Renseignons l&rsquo;identificateur de UITableViewCell<br \/>\n<div id=\"attachment_175\" style=\"width: 634px\" class=\"wp-caption alignnone\"><a href=\"\/xcode\/wp-content\/uploads\/2013\/10\/timflix-figure06.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-175\" class=\" wp-image-175\" src=\"\/xcode\/wp-content\/uploads\/2013\/10\/timflix-figure06.png\" alt=\"timflix-figure06\" width=\"624\" height=\"325\" \/><\/a><p id=\"caption-attachment-175\" class=\"wp-caption-text\">figure 6<\/p><\/div><br \/>\n&nbsp;<br \/>\n<span style=\"color: #ff0000;\"><strong>Action 10<\/strong><\/span> &#8211; Modifions la m\u00e9thode &lsquo;cellForRowAtIndexPath: indexPath:&rsquo; du fichier &lsquo;ViewController.swift&rsquo;<br \/>\n<span style=\"color: #ff0000;\">Attention, ce code n&rsquo;est plus \u00e0 jour &#8211; voir les Amis de la science!!!<\/span><\/p>\n<pre class=\"toolbar:1 lang:default decode:true\">\/\/ ********************************************************************\nfunc tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -&gt; UITableViewCell!\n\/\/ ********************************************************************\n{\n  var videoCourant = tableauDesVideos[indexPath.row] as NSDictionary\n  var celluleCourante:UITableViewCell\n  \/\/ Cr\u00e9er une cellule de fa\u00e7on \u00e9cologique\n  if let celluleRecyclee = tableView.dequeueReusableCellWithIdentifier(\"modeleCellule\") as? UITableViewCell  {\n      \/\/ oui\n      celluleCourante = celluleRecyclee\n    } else\n    {  \/\/  Non, alors cr\u00e9er une nouvelle cellule \u00e0 partir de la classe UITableViewCell\n       celluleCourante = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: \"modeleCellule\")\n    } \/\/ !cell\n  celluleCourante.textLabel.text = videoCourant[\"titre\"] as String\n  celluleCourante.imageView.image = UIImage(named:videoCourant[\"pochette\"] as String)\n  return celluleCourante\n} \/\/ cellForRowAtIndexPath\n<\/pre>\n<p><span style=\"color: #ff0000;\"><strong>Action 11<\/strong> <\/span>&#8211; Il ne reste maintenant plus qu&rsquo;\u00e0 d\u00e9finir un lien IBAction sur le bouton de la sc\u00e8ne d\u00e9tail (m\u00e9thode: revenirScenePrecedente) et y ajouter le code suivant:<\/p>\n<pre class=\"toolbar:1 lang:default decode:true\">\/\/  DetailVideo.swift\n@IBAction func retour(sender: AnyObject) {\n  self.dismissViewControllerAnimated(true, completion:nil);\n} \/\/ retour\n<\/pre>\n<h4>\u00a0R\u00e9sultat final de l&rsquo;\u00e9tape 2<\/h4>\n<p><iframe loading=\"lazy\" width=\"700\" height=\"394\" src=\"https:\/\/www.youtube.com\/embed\/eMGri_tk-TM?feature=oembed\" frameborder=\"0\" allowfullscreen><\/iframe><br \/>\nL&rsquo;\u00e9tape 2 compl\u00e9t\u00e9e:\u00a0<a href=\"\/xcode\/wp-content\/uploads\/2014\/09\/TIMFLIX.swift_.-etape02.zip\">TIMFLIX.swift. etape02<\/a><\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<h1>\u00c9tape 3 &#8211; Personnaliser la cellule du UITableView<\/h1>\n<p>Objectifs:<\/p>\n<ul>\n<li>\u00c9laborer, en mode &lsquo;Interface Builder&rsquo; un design personnalis\u00e9 pour la cellule de notre &lsquo;UITableView&rsquo;.<\/li>\n<li>\u00c9laborer le design de la sc\u00e8ne &lsquo;D\u00e9tail&rsquo;<\/li>\n<li>D\u00e9finir des propri\u00e9t\u00e9s \u00e0 la sc\u00e8ne &lsquo;d\u00e9tail&rsquo; qui permettront de recevoir le d\u00e9tail de la s\u00e9lection courante.<\/li>\n<li>Cr\u00e9er et associer une classe personnalis\u00e9e, \u00e0 partir de &lsquo;UITableViewCell&rsquo;, \u00e0 la cellule de\u00a0\u00a0notre &lsquo;UITableView&rsquo;.<\/li>\n<li>D\u00e9finir des liens MVC sur les \u00e9l\u00e9ments visuelles de la cellule.<\/li>\n<li>Pr\u00e9parer et envoyer les donn\u00e9es (titre, dur\u00e9e, pochette, cote de la vid\u00e9o, &#8230;) vers la sc\u00e8ne &lsquo;D\u00e9tail&rsquo;<\/li>\n<\/ul>\n<p>&nbsp;<br \/>\n\u00c9tape 3.1<br \/>\n<span style=\"color: #ff0000;\"><strong>Action 12<\/strong><\/span> &#8211; R\u00e9alisons le design de la cellule<br \/>\n<div id=\"attachment_181\" style=\"width: 331px\" class=\"wp-caption alignnone\"><a href=\"\/xcode\/wp-content\/uploads\/2013\/10\/timflix-figure06.5.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-181\" class=\"size-medium wp-image-181\" src=\"\/xcode\/wp-content\/uploads\/2013\/10\/timflix-figure06.5-321x600.png\" alt=\"timflix-figure06.5\" width=\"321\" height=\"600\" \/><\/a><p id=\"caption-attachment-181\" class=\"wp-caption-text\">figure 7<\/p><\/div><br \/>\n<span style=\"color: #ff0000;\"><strong>Action 13<\/strong><\/span> &#8211; Testons l&rsquo;application<br \/>\n<div id=\"attachment_180\" style=\"width: 332px\" class=\"wp-caption alignnone\"><a href=\"\/xcode\/wp-content\/uploads\/2013\/10\/timflix-figure07.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-180\" class=\"size-medium wp-image-180\" src=\"\/xcode\/wp-content\/uploads\/2013\/10\/timflix-figure07-322x600.png\" alt=\"timflix-figure07\" width=\"322\" height=\"600\" \/><\/a><p id=\"caption-attachment-180\" class=\"wp-caption-text\">figure 8<\/p><\/div><br \/>\nNote: Les objets visuels du mod\u00e8le de cellule par d\u00e9faut entrent en conflits avec nos \u00e9l\u00e9ments de design.<br \/>\n<span style=\"color: #ff0000;\"><strong>Action 14<\/strong><\/span> &#8211; Pour l&rsquo;instant, pla\u00e7ons les lignes suivantes en commentaire:<\/p>\n<pre class=\"toolbar:1 lang:default decode:true\">func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -&gt; UITableViewCell!\n\/\/ ********************************************************************\n...    {\n\/\/ **** -&gt;  Placer en commentaire les 2 lignes suivantes:\n\/\/celluleCourante.textLabel.text = videoCourant[\"titre\"] as String\n\/\/celluleCourante.imageView.image = UIImage(named:videoCourant[\"pochette\"] as String)\n<\/pre>\n<p>Ce qui produit ceci \u00e0 l&rsquo;ex\u00e9cution de l&rsquo;application:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1506\" src=\"\/xcode\/wp-content\/uploads\/2014\/09\/TIM.FLIX-etape3.figure9.png\" alt=\"TIM.FLIX-etape3.figure9\" width=\"481\" height=\"743\" \/><br \/>\n\u00c9tape 3.2<br \/>\n<span style=\"color: #ff0000;\"><strong>Action 15<\/strong> <\/span>&#8211; R\u00e9alisons le design de la sc\u00e8ne &lsquo;D\u00e9tail&rsquo;<br \/>\n<em><strong>\u00a0<\/strong><\/em><br \/>\n<div id=\"attachment_185\" style=\"width: 682px\" class=\"wp-caption alignnone\"><a href=\"\/xcode\/wp-content\/uploads\/2013\/10\/timflix-figure09.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-185\" class=\"size-medium wp-image-185\" src=\"\/xcode\/wp-content\/uploads\/2013\/10\/timflix-figure09-672x600.png\" alt=\"timflix-figure09\" width=\"672\" height=\"600\" \/><\/a><p id=\"caption-attachment-185\" class=\"wp-caption-text\">figure 10<\/p><\/div><br \/>\n&nbsp;<\/p>\n<h4>\u00c9tape 3.3 &#8211; Classe personnalis\u00e9e pour notre &lsquo;UITableViewCell&rsquo;<\/h4>\n<p>&nbsp;<br \/>\nNous allons ajouter une nouvelle classe \u00e0 notre projet. \u00a0Cette classe sera d\u00e9riv\u00e9e de la classe UITableViewCell. \u00a0Elle deviendra la classe de notre cellule personnalis\u00e9e. \u00a0Cela nous permettra de d\u00e9finir des liens MVC et de renseigner correctement les \u00e9l\u00e9ments visuels \u00e0 l&rsquo;int\u00e9rieur de la m\u00e9thode &lsquo;cellForRowAtIndexPath: indexPath:\u00a0\u00bb.<br \/>\n&nbsp;<br \/>\n<span style=\"color: #ff0000;\"><strong>Action 16<\/strong><\/span> &#8211; Ajoutons une nouvelle classe &lsquo;perso&rsquo; pour la cellule du film:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1508\" src=\"\/xcode\/wp-content\/uploads\/2014\/09\/TIM.Flix_.etape3_.3.figure2.png\" alt=\"TIM.Flix.etape3.3.figure2\" width=\"735\" height=\"432\" \/> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1509\" src=\"\/xcode\/wp-content\/uploads\/2014\/09\/TIM.Flix_.etape3_.3.figure1.png\" alt=\"TIM.Flix.etape3.3.figure1\" width=\"989\" height=\"432\" \/><br \/>\n&nbsp;<br \/>\n<iframe loading=\"lazy\" width=\"700\" height=\"394\" src=\"https:\/\/www.youtube.com\/embed\/H14kNuHtpQU?feature=oembed\" frameborder=\"0\" allowfullscreen><\/iframe><br \/>\n&nbsp;<br \/>\n<span style=\"color: #ff0000;\"><strong>Action 17<\/strong><\/span> &#8211; D\u00e9finissons des liens MVC entre les objets de la cellule et sa classe<br \/>\n&nbsp;<\/p>\n<pre class=\"toolbar:1 lang:default decode:true\">\/\/  CelluleVideo.swift\n\/\/  projet-TIMFlix-etape03\n@IBOutlet var titre: UILabel!\n@IBOutlet var cote: UIImageView!\n@IBOutlet var imageVideo: UIImageView!\n@IBOutlet var annee: UILabel!\n<\/pre>\n<p>&nbsp;<br \/>\n<span style=\"color: #ff0000;\"><strong>Action 18<\/strong><\/span> &#8211; Modifications le code du fichier &lsquo;ViewController.swift&rsquo; pour y renseigner ces nouveaux objets.<br \/>\n<span style=\"color: #ff0000;\">Attention, ce code n&rsquo;est plus \u00e0 jour &#8211; voir les Amis de la science!!!<\/span><\/p>\n<pre class=\"toolbar:1 lang:default decode:true \">       \/\/ ********************************************************************\n    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -&gt; UITableViewCell!\n        \/\/ ********************************************************************\n    {\n        println(tableauDesVideos[indexPath.row])\n        var videoCourant = tableauDesVideos[indexPath.row] as NSDictionary\n        var celluleCourante:CelluleVideo\n        let cote = videoCourant[\"cote\"] as String\n        \/\/ Cr\u00e9er une cellule de fa\u00e7on \u00e9cologique\n        if let celluleRecyclee = tableView.dequeueReusableCellWithIdentifier(\"modeleCellule\") as? CelluleVideo  {\n           \/\/ oui\n           celluleCourante = celluleRecyclee\n        } else\n        {  \/\/  Non, alors cr\u00e9er une nouvelle cellule \u00e0 partir de la classe CelluleNetflixCell\n            celluleCourante = CelluleVideo(style: UITableViewCellStyle.Default, reuseIdentifier: \"modeleCellule\")\n        } \/\/ !cell\n        celluleCourante.titre.text = videoCourant[\"titre\"] as String\n        celluleCourante.annee.text = videoCourant[\"annee\"] as String\n        celluleCourante.cote.image  = UIImage(named:\"\\(cote)-star-rating.png\")\n        celluleCourante.imageVideo.image = UIImage(named:videoCourant[\"pochette\"] as String)\n        return celluleCourante\n    } \/\/ cellForRowAtIndexPath<\/pre>\n<p>&nbsp;<\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<h1>\u00c9tape 4 &#8211; Programmer la sc\u00e8ne des d\u00e9tails du film<\/h1>\n<p><strong>Objectifs:<\/strong><\/p>\n<ul>\n<li>D\u00e9finir des propri\u00e9t\u00e9s, \u00e0 la sc\u00e8ne &lsquo;d\u00e9tail&rsquo;, ce qui permettra de recevoir les informations de la s\u00e9lection courante.<\/li>\n<li>D\u00e9finir des liens MVC sur les \u00e9l\u00e9ments visuels de la\u00a0\u00a0sc\u00e8ne &lsquo;d\u00e9tail&rsquo;.<\/li>\n<li>Pr\u00e9parer et envoyer &#8211; &lsquo;<strong>prepareForSegue&rsquo;<\/strong>\u00a0&#8211; \u00a0les donn\u00e9es (titre, dur\u00e9e, pochette, cote de la vid\u00e9o, &#8230;) vers la sc\u00e8ne &lsquo;D\u00e9tail&rsquo;<\/li>\n<\/ul>\n<p>&nbsp;<br \/>\n<span style=\"color: #ff0000;\"><strong>Action 19<\/strong><\/span> &#8211; Modifions le contenu du fichier &lsquo;DetailVideo.swift&rsquo;<\/p>\n<pre class=\"toolbar:1 lang:default decode:true\">\/\/\n\/\/  DetailVideo.swift\n\/\/  TIMFLIX\n\/\/\n\/\/  Created by Alain on 2014-07-16.\n\/\/  Copyright (c) 2014-2015 TIM. All rights reserved.\n\/\/\nimport UIKit\nclass DetailVideo: UIViewController {\n    var detailsVideo:Dictionary&lt;String,String&gt;?\n    var test:String?\n    @IBOutlet var imageVideo: UIImageView!\n    @IBOutlet var descriptionVideo: UITextView!\n    @IBOutlet var cote: UIImageView!\n    @IBOutlet var titre: UILabel!\n    @IBOutlet var classement: UILabel!\n    @IBOutlet var duree: UILabel!\n    @IBOutlet var annee: UILabel!\n    @IBAction func retour(sender: AnyObject) {\n        self.dismissViewControllerAnimated(true, completion:nil);\n    }\n    override func viewDidLoad() {\n        super.viewDidLoad()\n        \/\/ Do any additional setup after loading the view.\n        \/\/ Cr\u00e9er un tabloTempo si detailsVideo!nil\n        println(detailsVideo!)\n        if let _detailsVideo = detailsVideo {\n            \/\/ \u00c0 compl\u00e9ter par l'\u00e9tudiant\n            \/\/ Placer les valeurs re\u00e7ues \u00e0 l'\u00e9cran.\n        }\n        else{\n            println(\"Oups, petit probl\u00e8me: aucun detail sur la vid\u00e9o...\")\n        }\n    } \/\/ viewDidLoad\n    override func didReceiveMemoryWarning() {\n        super.didReceiveMemoryWarning()\n        \/\/ Dispose of any resources that can be recreated.\n    }\n    \/*\n    \/\/ #pragma mark - Navigation\n    \/\/ In a storyboard-based application, you will often want to do a little preparation before navigation\n    override func prepareForSegue(segue: UIStoryboardSegue!, sender: AnyObject!) {\n        \/\/ Get the new view controller using segue.destinationViewController.\n        \/\/ Pass the selected object to the new view controller.\n    }\n    *\/\n}<\/pre>\n<p>&nbsp;<br \/>\n<span style=\"color: #ff0000;\"><strong>Action 20<\/strong><\/span> &#8211; D\u00e9finissons un lien MVC sur le \u00ab\u00a0UITableView\u00a0\u00bb de la sc\u00e8ne &lsquo;Liste des vid\u00e90&rsquo;:<br \/>\n<span style=\"color: #c32275;\">@IBOutlet<\/span> <span style=\"color: #c32275;\">var<\/span> TViewVideos: <span style=\"color: #6122ae;\">UITableView<\/span>!<br \/>\n&nbsp;<br \/>\n<span style=\"color: #ff0000;\"><strong>Action 21<\/strong> <\/span>&#8211; Ajoutons le code suivant au fichier\u00a0ViewController.swift<\/p>\n<pre class=\"toolbar:1 lang:default decode:true\">\/\/ Lanc\u00e9e automatiquement avant une transition 'segue'\n    override func prepareForSegue(segue: UIStoryboardSegue!, sender: AnyObject!) {\n        \/\/ 1 - pointer sur le controlleur de destination\n        var vc: DetailVideo = segue.destinationViewController as DetailVideo\n        \/\/ 2 - Obtenir la cellule s\u00e9lectionn\u00e9e\n        \/\/ sender -&gt; pointe sur la cellule s\u00e9lectionn\u00e9e\n        let selectionCourante = self.TViewVideos.indexPathForCell(sender as UITableViewCell).row;\n        \/\/ 3 - renseigner les valeurs \u00e0 passer\n        vc.detailsVideo = tableauDesVideos[selectionCourante] as? Dictionary &lt;String,String&gt;\n    }<\/pre>\n<p>&nbsp;<br \/>\n<span style=\"color: #ff0000;\"><strong>Action 22<\/strong><\/span> &#8211; Testons l&rsquo;application finale<br \/>\n&nbsp;<br \/>\nAm\u00e9liorations \u00e0 apporter:<\/p>\n<ul>\n<li>Placer un bouton invisible sur 66% de la sc\u00e8ne de d\u00e9tail pour permettre le retour sans avoir \u00e0 appuyer sur le bouton du haut.<\/li>\n<li>Lancer \u00a0la transition &lsquo;segue&rsquo; en s\u00e9lectionnant un \u00e9l\u00e9ment du &lsquo;UITableView&rsquo;, au lieu d&rsquo;avoir \u00e0 appuyer sur le bouton accessoire.<\/li>\n<li>Obtenir la liste des vid\u00e9os via un service web.<\/li>\n<li>Permettre \u00e0 l&rsquo;utilisateur d&rsquo;\u00e9valuer \u00a0les vid\u00e9os (cote).<\/li>\n<li>Permettre \u00e0 l&rsquo;utilisateur d&rsquo;envoyer un message sur &lsquo;twitter&rsquo; indiquant qu&rsquo;il a aim\u00e9 la vid\u00e9o s\u00e9lectionn\u00e9e<\/li>\n<\/ul>\n<p>&nbsp;<br \/>\nL&rsquo;\u00e9tape 4 compl\u00e9t\u00e9e:\u00a0TIMFLIX.swift.solution (Note, le solutionnaire n&rsquo;est plus disponible)<\/p>\n<hr \/>\n<p>&nbsp;<br \/>\n&nbsp;<\/p>\n<h6>Didacticiel pr\u00e9par\u00e9 par Alain Boudreault, enseignant en Techniques d&rsquo;int\u00e9gration multim\u00e9dia du c\u00e9gep de Saint-J\u00e9r\u00f4me. \u00a0Version 1.2 &#8211; R\u00e9vision 2015.10.05<\/h6>\n","protected":false},"excerpt":{"rendered":"<p>Laboratoire \u00e0 r\u00e9aliser en classe Note: \u00a0Ne pas suivre les \u00e9tapes de ce document, r\u00e9f\u00e9rez-vous plut\u00f4t au labo \u00ab\u00a0Les amis de la science\u00a0\u00bb pour le fonctionement de UITableView + segue. De plus, ne pas utiliser les classes NSArray et NSDictionary &#8211; sauf pour tableauDesVideos = NSArray(contentsOfFile: path) as! Array T\u00e9l\u00e9chargement des ressources de d\u00e9part: \u00a0TIM.FLIX.images [&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-1500","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ve2cuy.com\/xcode\/wp-json\/wp\/v2\/pages\/1500","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=1500"}],"version-history":[{"count":0,"href":"https:\/\/ve2cuy.com\/xcode\/wp-json\/wp\/v2\/pages\/1500\/revisions"}],"wp:attachment":[{"href":"https:\/\/ve2cuy.com\/xcode\/wp-json\/wp\/v2\/media?parent=1500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}