#Lier le code et le storyboard

Notre ViewController n’existe que dans le Storyboard pour le moment, à l’instar de ce que nous avions fait pour le TableViewController nous allons créer un fichier Swift pour connecter notre XML avec notre code

Le storyboard n’est qu’un fichier XML de description des vues, comme l’HTML l’est pour les pages web. UIKit est en réalité un framework permettant de rendre dynamique le storyboard, comme VueJS pour une page web.

#C’est reparti pour un fichier Swift

1. Créer un fichier Swift nommé DocumentViewController qui va hériter de UIViewController.
2. Pensez à lier le ViewController du storyboard à notre code (Comme pour le TableViewController), depuis l’inspecteur d’attribut.

#L’étape en plus

Contrairement à notre TableViewController qui est lié automatiquement au TableView du Storyboard lors de la liaison par le nom du fichier Swift, ici nous devons lier manuellement notre ImageView à notre code. Le binding n’est pas automatique.

#Attention c’est sportif et pas intuitif

1. Ouvrez l’assistant d’interface pour lier votre ImageView à votre code.

2. Pour cela, sélectionnez le composant dans le storyboard, puis cliquez sur le bouton Assistant Editor en haut à droite de Xcode.

   

3. Vous devriez voir votre code et votre storyboard côte à côte.

4. Vous pouvez ensuite faire un Ctrl + Drag (et pas Cmd) depuis votre composant vers votre code pour le lier. (Oui oui, je vous ai fait un petit gif pour vous montrer)

Tout fonctionne bien si lorsque vous cliquez sur un élément de la liste, cela ouvre la vue de détail avec l’image d’exemple choisie précédemment.

Sauf que pour le moment l’écran détail ne reçoit aucune donnée spécifique à la ligne choisie.

#Envoyer des données à l’écran de détail

#Intercepter le Segue

Automatiquement, grâce au Segue, nous ouvrons l’écran de détail. Mais le souci c’est que nous n’avons pas accès aux données de la ligne sélectionnée.

Pour cela il va falloir utiliser cette fonction, qui intercepte le Segue pour fournir plus d’informations de contexte.

    // Dans DocumentTableViewController
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // 1. Récuperer l'index de la ligne sélectionnée
        // 2. Récuperer le document correspondant à l'index
        // 3. Cibler l'instance de DocumentViewController via le segue.destination
        // 4. Caster le segue.destination en DocumentViewController
        // 5. Remplir la variable imageName de l'instance de DocumentViewController avec le nom de l'image du document
    }

#🔧 Exercice 1

• Créez une variable imageName dans votre DocumentViewController pour stocker le nom de l’image à afficher.
• Interceptez le Segue pour envoyer les données de la ligne sélectionnée à l’écran de détail, utilisez le code ci-dessus, avec les commentaires pour vous aider.
• Affichez l’image dans l’ImageView de l’écran de détail, en utilisant UIImage(named: imageName) sur l’ImageView.

#Un peu d’aide

Ça devrait ressembler à ça :

    // Dans DocumentViewController

    // Outlet que nous avons configuré en 6.
    @IBOutlet weak var imageView: UIImageView!

    var imageName: String?

    override func viewDidLoad() {
        super.viewDidLoad()
        // 1. Vérifier que imageName n'est pas nil
        // 2. Afficher l'image dans l'ImageView

    }

#Well done 👏

Si vous êtes arrivés jusque là, vous avez réussi à créer une application avec une liste de documents et un écran de détail. Ce qui est déjà pas mal pour une première application, en réalité vous avez utilisé la plupart des composants de base d’une application iOS.

Pour la suite, nous allons voir comment ajouter des fichiers à notre application, et comment les afficher dans notre liste. Mais vous serez moins guidés, car normalement vous êtes bien niveau connaissances.

#Passer à la suite

UIKit - Balèze