{"id":1742,"date":"2014-09-28T20:22:19","date_gmt":"2014-09-29T00:22:19","guid":{"rendered":"http:\/\/tim.cstj.qc.ca\/cours\/xcode\/wp\/?page_id=1742"},"modified":"2014-09-28T20:22:19","modified_gmt":"2014-09-29T00:22:19","slug":"les-amis-de-la-science","status":"publish","type":"page","link":"https:\/\/ve2cuy.com\/xcode\/les-amis-de-la-science\/","title":{"rendered":"Les amis de la science"},"content":{"rendered":"

Introduction \u00e0 ‘UITableView’ et ‘UICollectionView’<\/h1>\n

Note: Ce document a \u00e9t\u00e9 converti vers Xcode 9 et swift 4<\/span><\/span><\/h4>\n
\n

\u00a0Mise en contexte:<\/h2>\n

Les classes UITableView<\/strong><\/span> et UICollectionView<\/strong><\/span> permettent \u00a0l\u2019affichage d\u2019une liste d\u2019\u00e9l\u00e9ments soit sur\u00a0une ou sur plusieurs colonnes.
\nExemples:
\n

\"amis-de-la-science-20\"

UICollectionView<\/p><\/div>
\n

\"timflix-figure08\"

UITableView<\/p><\/div>
\n\"iOS-preferences\"<\/a>
\n <\/p>\n

\n

UITableView<\/h1>\n

La classe UITableView permet l\u2019affichage d\u2019une liste d\u2019\u00e9l\u00e9ments sur\u00a0une seule colonne.
\nUITableView est une sous-classe de UIScrollView, qui permet aux utilisateurs de faire d\u00e9filer les \u00e9l\u00e9ments de la table.
\nC\u2019est une classe id\u00e9ale lorsqu\u2019il est n\u00e9cessaire d\u2019afficher une grande quantit\u00e9 de donn\u00e9es sous la forme d\u2019un tableau.
\nPar d\u00e9faut, UITableView propose des cellules qui contiennent un titre, un sous-titre, une image \u00e0 gauche et un accessoire \u00e0 droite.
\nVoici un exemple d’un UITableView avec un titre, sous-titre et une image:<\/strong>
\n\"tvcellstyle_subtitle\"
\nVoici un exemple d’un UITableView avec un\u00a0accessoire:<\/strong>
\n\"tv_plain_style\"<\/p>\n

\n

Les protocoles<\/h1>\n

UITableView<\/strong> et UICollectionView<\/strong> proposent deux protocoles: \u00a0dataSource et delegate (plus prefetchDataSource pour UICollectionView) .
\nIl est obligatoire de souscrire au protocole dataSource<\/strong> pour lier\u00a0les contr\u00f4les \u00e0 une source de donn\u00e9es.
\nPar exemple, si nous voulions utiliser un UICollectionView sur une sc\u00e8ne, il faudrait ajouter UICollectionViewDataSource \u00e0 la suite du nom de la super classe \u00a0du contr\u00f4leur de la sc\u00e8ne:<\/p>\n

class ViewController: UIViewController, UICollectionViewDataSource<\/strong><\/span> {
\n\/\/ et
\nviewDidLoad(){
\n\u00a0 \u00a0unCV.dataSource = self<\/span>
\n<\/strong>}<\/p><\/blockquote>\n

\n

Sources de donn\u00e9es<\/h1>\n

Les donn\u00e9es \u00e0 afficher, via UITableVite et UICollectionView peuvent provenir de trois sources:<\/p>\n

    \n
  1. Un tableau cod\u00e9 en\u00a0dur.<\/li>\n
  2. Un tableau cr\u00e9\u00e9 \u00e0 partir d’un fichier de donn\u00e9e – liste de propri\u00e9t\u00e9s.<\/li>\n
  3. Un tableau cr\u00e9\u00e9 suite \u00e0 une requ\u00eate lanc\u00e9e vers\u00a0une API web (plist, json, XML, …).<\/li>\n<\/ol>\n

     <\/p>\n

    \n

    \u00c9tape1 – Afficher les \u00e9l\u00e9ments d’un tableau<\/h1>\n

    \u00c0 cette \u00e9tape, nous allons cr\u00e9er une application qui affiche, via un UITableView, les enregistrements d’un tableau (Array) local.
    \nAction 1.0<\/strong><\/span> – T\u00e9l\u00e9chargeons les ressources du projet<\/a>
    \nAction 1.1<\/strong><\/span> –\u00a0Cr\u00e9ons un nouveau projet \u00ab\u00a0Les amis de la science\u00a0\u00bb
    \nAction 1.2<\/strong><\/span>\u00a0– \u00a0Ajoutons, dans le groupe ‘Ressources’, \u00a0les ressources du\u00a0projet (t\u00e9l\u00e9charg\u00e9es \u00e0 l’\u00e9tape 1.0)
    \nAction 1.3<\/span><\/strong> – \u00a0Rempla\u00e7ons le contenu du fichier ‘ViewController.swift’ par;<\/p>\n

    \/\/\n\/\/  ViewController.swift\n\/\/  Les amis de la science\n\/\/\n\/\/  Cr\u00e9\u00e9 par Alain Boudreault le 2014-09-28.\n\/\/  Copyright (c) 2014-2016 Alain. All rights reserved.\n\/\/  ------------------------------------------------------------------\n\/\/  m-a-j: 2016.08.23 - conversion du projet vers Xcode 8 et swift 3\n\/\/         2016.10.16 - fin de la conversion vers swift 3\n\/\/         2017.10.15 - conversion vers Xcode 9 et swift 4\n\/\/  ------------------------------------------------------------------\nimport UIKit\nclass ViewController: UIViewController {\n    \/\/ ou bien: Array<Dictionary<String,String>>\n    let lesAmisDeLaScienceData:[Dictionary<String,String>] = [\n        [\"nom\":\"Albert Einstein\",       \"photo\":\"Albert Einstein.jpg\",          \"texte\":\"lorem ipsum01 ...\", \"naissance\":\"1900\"],\n        [\"nom\":\"Albert Jacquard\",       \"photo\":\"Albert Jacquard.jpg\",          \"texte\":\"lorem ipsum02 ...\", \"naissance\":\"1900\"],\n        [\"nom\":\"Blaise Pascal\",         \"photo\":\"Blaise Pascal.jpg\",            \"texte\":\"lorem ipsum03 ...\", \"naissance\":\"1900\"],\n        [\"nom\":\"Braun\",                 \"photo\":\"Braun.jpg\",                    \"texte\":\"lorem ipsum04 ...\", \"naissance\":\"1900\"],\n        [\"nom\":\"Christian Huygens\",     \"photo\":\"Christian Huygens.jpg\",        \"texte\":\"lorem ipsum05 ...\", \"naissance\":\"1900\"],\n        [\"nom\":\"Daniel Fahrenheit\",     \"photo\":\"Daniel Fahrenheit.jpg\",        \"texte\":\"lorem ipsum06 ...\", \"naissance\":\"1900\"],\n        [\"nom\":\"Dennis Ritchie\",        \"photo\":\"Dennis Ritchie.jpg\",           \"texte\":\"lorem ipsum07 ...\", \"naissance\":\"1900\"],\n        [\"nom\":\"Galileo Galilei\",       \"photo\":\"Galil\u00e9e.jpg\",                  \"texte\":\"lorem ipsum08 ...\", \"naissance\":\"1900\"],\n        [\"nom\":\"Henri Becquerel\",       \"photo\":\"Henri Becquerel.jpg\",          \"texte\":\"lorem ipsum09 ...\", \"naissance\":\"1900\"],\n        [\"nom\":\"Heinrich Hertz\",        \"photo\":\"Hertz.jpg\",                    \"texte\":\"lorem ipsum10 ...\", \"naissance\":\"1900\"],\n        [\"nom\":\"Jean Perrin\",           \"photo\":\"Jean Perrin.jpg\",              \"texte\":\"lorem ipsum11 ...\", \"naissance\":\"1900\"],\n        [\"nom\":\"Karl Guthe Jansky\",     \"photo\":\"Karl Guthe Jansky.jpg\",        \"texte\":\"lorem ipsum12 ...\", \"naissance\":\"1900\"],\n        [\"nom\":\"Marie Curie\",           \"photo\":\"Marie Curie.jpg\",              \"texte\":\"lorem ipsum13 ...\", \"naissance\":\"1900\"],\n        [\"nom\":\"James Clerk Maxwell\",   \"photo\":\"maxwell.jpg\",                  \"texte\":\"lorem ipsum14 ...\", \"naissance\":\"1900\"],\n        [\"nom\":\"Steve Jobs\",            \"photo\":\"Steve Jobs.jpg\",               \"texte\":\"lorem ipsum15 ...\", \"naissance\":\"1900\"],\n        [\"nom\":\"Wilhelm Conrad Rontgen\",\"photo\":\"Wilhelm Conrad Rontgen.jpg\",   \"texte\":\"lorem ipsum16 ...\", \"naissance\":\"1900\"],\n    ] \/\/ lesAmisDeLaScienceData\n    \/\/ *****************************************************\n    override func viewDidLoad()\n    \/\/ *****************************************************\n    {\n        super.viewDidLoad()\n        if let nomFichierImage = lesAmisDeLaScienceData[0][\"photo\"] {\n            let uneImage = UIImageView(image: UIImage(named: nomFichierImage))\n            view.addSubview(uneImage)\n        } \/\/ if let\n    } \/\/ viewDidLoad\n}  \/\/ ViewController<\/pre>\n
     
    \nAction 1.4<\/span><\/strong>\u00a0– Testons l’application dans le simulateur.
    \n\"amis
    \n 
    \nAction 1.5<\/strong> <\/span>– Analysons le code; le tableau de dictionnaires et l’image charg\u00e9e par programmation.
    \n 
    \nNote<\/strong>: Par inf\u00e9rence, le tableau est sign\u00e9 [Dictionary <String, String>]. \u00a0Cela repr\u00e9sente le mode d’utilisation le plus simple qui soit. \u00a0Il ne sera pas n\u00e9cessaire de signer les acc\u00e8s. \u00a0Par exemple, comme ceci:<\/p>\n
    (lesAmisDeLaScienceData[2] as Dictionary<String, AnyObject>)[\u00ab\u00a0nom\u00a0\u00bb] as String<\/p><\/blockquote>\n
     
    \nAction 1.6<\/strong>\u00a0<\/span>– Glissons un UITableView sur la sc\u00e8ne
    \n\"Les
    \nAction 1.7<\/strong>\u00a0<\/span>– Observons les protocoles disponibles pour l’objet UITableView<\/strong>\u00a0.
    \n\"Screen
    \n 
    \nAction 1.8<\/strong>\u00a0<\/span>–\u00a0Souscrivons, le contr\u00f4leur de la sc\u00e8ne, au protocole ‘dataSource’ du UITableView.
    \n\"Les
    \nAction 1.9<\/strong>\u00a0<\/span>– Ajoutons le nom du protocole \u00e0 la suite de la d\u00e9finition de la classe du contr\u00f4leur de la sc\u00e8ne.
    \nNote<\/strong>: Cette op\u00e9ration est redonnante avec 1.8. \u00a0Elle permet d’indiquer \u00e0 Xcode de nous afficher les m\u00e9thodes du protocole lorsqu’en mode ‘compl\u00e9tion de code’.<\/p>\n
    class ViewController: UIViewController, UITableViewDataSource {\n\/\/ Note: Cette ligne sera en erreur tant que les m\u00e9thodes obligatoires du\n\/\/ protocole dataSource ne seront pas d\u00e9clar\u00e9es dans la classe du contr\u00f4leur.\n}<\/pre>\n
     
    \nAction 1.10<\/strong>\u00a0<\/span>–\u00a0Mettons en commentaire les lignes suivantes de la m\u00e9thode ‘viewDidLoad’.<\/p>\n
        \/\/ *****************************************************\n    override func viewDidLoad()\n    \/\/ *****************************************************\n    {\n        super.viewDidLoad()\n    \/\/let uneImage = UIImageView(image: UIImage(named: lesAmisDeLaScienceData[0][\"photo\"]!))\n    \/\/view.addSubview(uneImage)\n    } \/\/ viewDidLoad\n<\/pre>\n
     <\/p>\n
    \n
    M\u00e9thodes obligatoires \u00a0du protocole dataSource<\/h1>\n
    Lorsqu’une de nos classes adopte le protocole ‘dataSource’<\/strong> de la classe ‘UITableView<\/strong>‘ \u00a0nous avons l’obligation de programmer les deux m\u00e9thodes suivantes:<\/p>\n