Notre interface est toute belle et nous avons vu comment nous allons organiser notre application entre le contrôleur et la vue. Dans les deux chapitres suivants, nous allons connecter le code et l'interface !
L'objectif
Avant de nous lancer, rappelons-nous l'objectif ! Nous voulons qu'à l'appui sur le bouton "Et moi ?", le label contenant pour l'instant la phrase "Je suis le Steve Jobs de la raclette party !" se transforme en une autre phrase générée aléatoirement comme : "Je suis le Zinedine Zidane du dancefloor !".
Pour pouvoir faire évoluer notre interface, il va falloir :
Détecter l'appui sur le bouton "Et moi ?"
Modifier le contenu du label
Pour cela, il faut que le code ( ViewController.swift ) sache ce qu'il y a sur l'interface ( Main.storyboard ) et ce qu'il s'y passe. Pour cela, nous allons créer ce que l'on appelle des connexions.
Le mode assistant
Pour créer une connexion, il faut se placer en mode assistant. En haut, nous avons trois boutons que nous n'avons pas encore utilisés :
Ils correspondent à différentes fonctionnalités d’édition du code :
Enable Code Review : un environnement dédié au Code Review qui consiste à faire des observations sur le code écrit par un collaborateur.
Options d’édition : ce bouton ouvre un menu avec plusieurs options de paramétrage de l’espace d’édition.
AddEditor on Right : il permet d'ajouter un espace d’édition en plus à droite.
C'est le deuxième bouton "Options d'édition" qui nous intéresse ici. Choisissez le storyboard (fichier Main) dans le navigateur, puis cliquez sur le deuxième bouton. Vous devriez obtenir le storyboard à gauche et le code à droite.
L'outlet
Nous allons maintenant pouvoir faire la connexion et créer ce qu'on appelle un outlet.
Un outlet est une connexion entre un objet de la vue (un bouton, un label, etc.) et le contrôleur. Il permet d'avoir accès, dans le code, aux propriétés de l'objet et de les modifier. Les propriétés disponibles dépendent de l'objet, mais on y retrouve par exemple pour le label : son titre, sa police, sa position, sa taille, sa couleur, etc.
Pour créer l'outlet, il faut suivre un protocole bien particulier :
Laissez appuyée la touche
CtrlGlissez-déposez depuis le label jusque dans le code.
Vous allez voir une ligne bleue apparaître :
Lorsque vous voyez la mention "Insert Outlet or Outlet Collection", vous pouvez lâcher. Une pop-up s'affiche alors :
Cette pop-up nous permet de compléter les informations de l'outlet que nous allons rajouter. Voyons ce qu'on y trouve :
Connection : le type de connexion que l'on souhaite. Ici, c'est bien un outlet que l'on veut.
Object : l'objet qui reçoit la connexion : notre contrôleur.
Name : le nom que l'on veut donner à notre outlet. Ici comme il s'agit de la citation (quote en anglais), j'ai appelé ça
quoteLabel.
Vous pouvez écrire le nom que vous souhaitez ici, mais je vous encourage à choisir un nom anglais car Swift, comme presque tous les langages de programmation, est basé sur l'anglais.
Type : le type d'objet que nous connectons. Ici, il s'agit bien d'un Label.
Storage : c'est une notion assez avancée de programmation. Inutile d'en parler pour le moment. #sous-marin
Vous pouvez maintenant cliquer sur Connect :
Et magie ! Xcode a rajouté automatiquement la ligne suivante dans votre code :
@IBOutlet weak var quoteLabel: UILabel!Je me doutais bien que la programmation c'était compliqué !
Faux ! OK, ça fait un peu peur. Mais d'ici quelques minutes, vous comprendrez cette ligne sans problème.
En résumé
Nous avons vu les éléments qui sont par défaut dans le contrôleur.
Et nous avons vu comment créer un outlet qui est une connexion d’un élément de notre vue avec notre code.
Dans le prochain chapitre, nous allons parler d’une notion très importante en Swift : les variables !
