• 15 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Créez votre premier outlet

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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 !

Attention ! Vous êtes en train de devenir des programmeurs...

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 :

  1. Détecter l'appui sur le bouton "Et moi ?"

  2. 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 à trois modes d'affichage du panneau central :

  1. Standard Editor : Le premier affiche simplement le contenu du fichier sélectionné.

  2. Assistant Editor : Le deuxième affiche deux fichiers côte à côte. Le premier est le fichier sélectionné dans le navigateur. Le deuxième est un fichier choisi automatiquement par Xcode pour sa pertinence avec le premier.

  3. Version Editor : Il permet d'ouvrir deux versions différentes d'un même fichier pour revenir sur des corrections que l'on a pu faire. 

C'est le deuxième qui nous intéresse ici. Choisissez le storyboard dans le navigateur puis cliquez sur le deuxième bouton. Vous devriez obtenir le storyboard à gauche et le code à droite.

Le mode assistant
Le mode assistant

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 :

  1. Laissez appuyée la touche Ctrl

  2. Glissez-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.

  •  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 :magicien: ! 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. Pour cela, nous avons besoin d'introduire notre première notion de Swift : les variables.

Les variables

Tous les langages de programmation reposent sur ce concept. Et il est très simple !

Une variable est un objet nommé qui contient une valeur. C'est tout.

Créer une variable

Pour créer une variable avec le langage Swift, il faut utiliser le mot clé var. Voici un exemple :

var monAge = 24

Cette ligne signifie : "crée une variable, appelle la monAge et affecte-lui la valeur 24."

OK, mais quel est l'intérêt ? 

Vous avez réussi à stocker une information ! Et donc vous allez pouvoir utiliser cela n'importe où dans votre code pour afficher cette information à l'écran, pour la modifier, etc. Une variable c'est juste une donnée à laquelle vous avez donné un nom pour la retrouver. 

Modifier une variable

Par exemple, le jour de mon anniversaire, comme je change d'âge, je vais pouvoir effectuer la commande suivante :

monAge = 25

Et hop ! La variable monAge contient maintenant la valeur 25.

Le type d'une variable

On sait maintenant qu'une variable possède un nom et une valeur. Mais elle contient une troisième information : son type. En effet, il existe une infinité de types différents et je vais même vous apprendre à en créer. Une variable peut contenir un nombre entier, un nombre décimal, une chaîne de caractères (des mots ;)),  mais aussi des objets comme des labels, des boutons et même des contrôleurs entiers !

Pour préciser le type d'une variable lors de la création, il faut rajouter LeTypeDeMaVariable. Par exemple :

var monAge: Int = 24

Cette ligne signifie donc : "crée une variable, qui est un nombre entier, appelle la monAge et affecte-lui la valeur 24."

Comme cela, nous savons que monAge est un nombre entier et nous ne risquons pas d'y écrire n'importe quoi !

Swift permet même de déclarer une variable sans lui attribuer de valeur, à condition de préciser son type. On peut donc écrire ceci :

var ageDeMaSoeur: Int

Comme je ne sais plus l'âge de ma soeur, je le laisse vide :lol: ! Je lui attribuerai une valeur plus tard...

En résumé, nous avons donc trois façons de déclarer une variable :

var leNomDeMaVariable = uneValeur // Un nom et une valeur
var leNomDeMaVariable: SonType = uneValeur // Un nom, un type et une valeur
var leNomDeMaVariable: SonType // Un nom et un type

Revenons à nos moutons

Maintenant que vous avez compris ce qu'était une variable et comment la déclarer : comment déclareriez-vous une variable de type UILabel que l'on appellerait quoteLabel ? Je pose la question au hasard...

// Essayez de trouver seul !
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// Ne trichez pas !
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// Suspens...
// |
// |
// |
// |
// |
// |
// |

var quoteLabel: UILabel // Tadaa !

Bravo si vous avez trouvé !

Hmmm... Mais ça ne vous dit pas quelque chose cette déclaration de variable ? Et si l’on comparait avec ce que Xcode a généré pendant la création de l'outlet :

@IBOutlet weak var quoteLabel: UILabel!

La création de l'outlet a donc généré la déclaration d'une variable de type UILabel.

À quelques différences près, non ?

Certes... Parcourons-les :

  •  @IBOutlet : Ce mot clé permet juste à Xcode de savoir que la variable en question peut être connectée à l'Interface Builder (d'où le IB).

  •  weak : Comme expliqué plus tôt, nous restons en mode sous-marin pour cette notion compliquée.

  •  ! : Idem, désolé de vous décevoir, mais nous découvrirons l'utilité du point d'exclamation dans le prochain cours sur Swift

Nous avons maintenant une variable qui contient notre label disponible dans le code. Nous allons donc pouvoir consulter et modifier ses propriétés depuis le code, et donc notamment modifier son contenu !

En résumé

  • Un outlet est une connexion entre un objet de la vue et le contrôleur.

  • Pour créer une connexion, il faut :

    • Passer en vue Assistant Editor

    • Faire un control-drag de l'objet de la vue vers le code

    • Choisir un nom pour l'outlet

    • Cliquer sur connect

  • Une variable est objet qui contient trois informations :

    • Un nom

    • Un type

    • Une valeur

  • Une variable est déclarée avec le mot clé var.

  • La création d'un outlet génère la déclaration d'une variable.

Exemple de certificat de réussite
Exemple de certificat de réussite