• 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 première action

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

Dans le chapitre précédent, nous avons pu connecter notre label et notre code. Désormais, nous allons connecter une action sur le bouton "ET MOI ?" au code. Ainsi dès qu'il sera appuyé, nous pourrons effectuer un peu de logique !

Il va y avoir de l'action !
Il va y avoir de l'action !

Une action ?

Commençons par définir ce qu'est une action au sens de Xcode. En fait, une Action c'est comme un Outlet. C'est une connexion entre un élément de l'interface et le code. Mais il y a un paramètre en plus : l'évènement.

Une action, c'est une connexion entre un élément de l'interface et le code, associée à un évènement.

Et euh... Concrètement ?

Prenons par exemple notre bouton "ET MOI ?". Nous souhaitons faire quelque chose lorsque l'utilisateur appuie dessus. L'évènement c'est donc : l'appui sur le bouton. On pourrait en choisir plein d'autres comme l'appui en dehors du bouton, l'appui long, l'appui avec 2 doigts, le glissé du doigt dans le bouton, etc.

Nous avons donc plein d'évènements possibles. Donc lorsque l'on crée une action, on doit choisir de quel élément elle part (ici notre bouton) et à quel évènement elle se rapporte (ici l'appui sur le bouton).

Assez bavardé, place à l'action ! :zorro:

Pour créer une action, il faut répéter la même opération que pour l'outlet :

  1. Vous vous mettez en vue Assistant (storyboard à gauche, code à droite)

  2. Vous laissez la touche ctrl enfoncée

  3. Vous glissez-déposez depuis le bouton "ET MOI ?" jusque dans le code

Vous allez devenir accro au control-drag !
Vous allez devenir accro au control-drag !

En lâchant, vous allez retrouver la pop-up suivante :

Regardons la un peu en détail :

  • Connection : Le type de connexion que vous souhaitez créer. Ici, on choisit bien sûr Action.

  • Object : Comme au chapitre précédent, l'objet qui reçoit la connexion : notre contrôleur.

  • Name : Le nom de notre action. Ici, je l'appelle changeQuote car, avec cette action, nous allons modifier la citation.

  • Type : Le type de l'élément d'interface concerné par la connexion. Ici, nous avons un bouton (UIButton). Mais vous pouvez laisser Any car nous n'avons pas besoin de ce paramètre.

  • Event : Le type d'évènement que nous allons associer à la connexion. Par défaut, Xcode propose le plus pertinent donc vous aurez rarement à modifier ce paramètre. Ici par exemple, nous avons Touch Up Inside qui signifie précisément un toucher vers le haut à l'intérieur du bouton, c'est-à-dire au moment où le doigt quitte l'écran.

  • Arguments : Je vous invite à passer ce paramètre à None. Nous restons en sous-marin pour la question des arguments ;). 

Vous pouvez maintenant cliquez sur connect et Xcode génère automatiquement le code suivant :

@IBAction func changeQuote() {
}

Et pour bien comprendre ce que veulent dire ces quelques mots, nous devons parler des fonctions !

Les fonctions

Les fonctions, comme les variables précédemment, sont des objets de base en programmation et que vous allez utiliser extrêmement fréquemment. Alors, autant savoir tout de suite ce que c'est !

Pour rappel, une variable associe un nom et une donnée. Et bien une fonction, c'est l'association d'un nom et de logique ou encore l'association d'un nom et de quelques lignes de code.

Prenons un exemple pour mieux comprendre, voici les lignes de code d'un petit jeu :

// Nous créons un héros
var hero = Hero()
hero.nom = "Jean Paul Le Héros"
hero.vie = 500
hero.attaque = 100

// Nous créons un méchant
var ennemi = Diable()
ennemi.nom = "Rémi La Souris qui fait peur"
ennemi.vie = 1000
ennemi.attaque = 30

// Nous combattons l'ennemi
ennemi.vie = ennemi.vie - hero.attaque // L'ennemi perds de la vie
hero.vie = hero.vie - ennemi.attaque // Le héro perds de la vie

Inutile de vous acharner à comprendre ces lignes. Les commentaires vous permettent de saisir ce qu'il se passe.

Nous avons deux problèmes :

  1. Ce n'est pas facile à lire !

  2. Si je veux attaquer à nouveau mon ennemi, il va falloir que je recopie les deux lignes correspondantes correctement. Il n'est pas près de mourir...

Les fonctions vont nous permettre d'y voir plus clair. Pour créer une fonction, rien de plus simple ! Il suffit de suivre la syntaxe suivante :

func creerHero() {
    
}
  1. On écrit le mot clé func.

  2. On écrit le nom de la fonction (on choisit ce qu'on veut !).

  3. On rajoute des parenthèses ().

  4. On ouvre et on ferme des accolades.

Il ne reste plus qu'à écrire le code à l'intérieur des accolades :

// Cette fonction permet de créer un héro
func creerHero() {
    var hero = Hero()
    hero.nom = "Jean Paul Le Héros"
    hero.vie = 500
    hero.attaque = 100
}

Bon super, mais dans l'histoire on a rallongé le code...

Pour l'instant ! Car maintenant, si on veut créer un héros, il ne nous reste plus qu'à appeler la fonction comme ceci :

creerHero()

En écrivant simplement le nom de la fonction et les parenthèses, l'ordinateur comprend qu'il doit exécuter toutes les lignes suivantes :

var hero = Hero()
hero.nom = "Jean Paul Le Héros"
hero.vie = 500
hero.attaque = 100

En créant de la même façon les fonctions creerMechant et attaquer, le code initial devient :

creerHero()
creerMechant()
attaquer()

D'une part, c'est beaucoup plus court et d'autre part, c'est beaucoup plus simple à lire ! Et en plus si je veux attaquer plusieurs fois, je n'ai qu'à écrire :

attaquer()
attaquer()
attaquer()

Ça devient presque violent notre histoire...:pirate:

Donc en résumé, les fonctions sont immensément pratiques pour simplifier la lecture de notre code et son utilisation. Elles permettent d'encapsuler des lignes de code et de les associer au nom de son choix pour être réutilisées ensuite.

En résumé, pour les déclarer :

func leNomDeMaFonction() {
    // Ici on écrit le code
}

Et pour les utiliser :

leNomDeMaFonction()

Retournons à nos moutons

On refait le même exercice ? Et si vous deviez déclarer une fonction qui s'appelle changeQuote, qu'écririez-vous ?

// Allez jouer le jeu sans tricher !
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// Vous n'êtes pas en train de tricher quand même ?
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// Et hop !

func changeQuote() {
}

Félicitations à tous ceux qui ont cherché :) !

Il n'y a pas de grande différence avec ce qu'avait généré Xcode pour nous :

@IBAction func changeQuote() {
}

Xcode rajoute juste le mot clé @IBAction pour savoir que cette fonction peut faire l'objet d'une connexion avec un élément de l'interface (IBAction : Interface Builder Action).  

Une action, c'est donc une connexion entre un élément de l'interface et une fonction, associée à un évènement !

Bon, c'est bien formidable tout ça, mais il s'agit désormais de tester cette action.

La fonction print

Une fonction pour en tester une autre ! Je vous présente la fonction print. Cette fonction permet d'écrire des choses dans la zone de débogage. 

La zone de débogage ?

Hmm... Je vois qu'on s'est planqué au fond de la classe et qu'on a pas tout suivi...:p

Pas grave, voici une image qui devrait vous remettre les choses en tête :

Ça fait tilt ?! Parfait !

Pour utiliser cette fonction, il faut lui passer un paramètre. Un paramètre est une des possibilités qu'ont les fonctions et que nous détaillerons dans le prochain cours. Sachez seulement que ça s'écrit entre les parenthèses de notre fonction.

Par exemple, cela donne avec la fonction print :

@IBAction func changeQuote() {
    print("Youpi ! Notre action fonctionne parfaitement !")
}

Cliquez sur Run (oucmd + r). L'application se lance. Vous pouvez contrôler que la zone de débogage est vide. Maintenant, cliquez sur le bouton "ET MOI ?". Et vous devriez voir ceci apparaître dans la console (la partie droite de la zone de débogage). Evidemment, cela s'affiche autant de fois que vous cliquez sur le bouton :

Bravo ! Notre bouton est bien relié à la fonction changeQuote et nous allons maintenant pouvoir modifier le contenu de cette fonction pour faire fonctionner notre application !

En résumé

Les fonctions :

  • Les fonctions permettent d'encapsuler des lignes de code et de les associer au nom de son choix pour pouvoir être réutilisées ensuite.

  • Pour créer une fonction, on utilise le mot clé func.

Les actions :

  • Une action, c'est une connexion entre un élément de l'interface et une fonction, associée à un évènement.

  • Pour créer une action, il suffit de faire un control-drag depuis un élément de l'interface vers le code et de choisir ensuite le type de connexion : Action.

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