• 12 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 26/02/2020

Récupérez les données du formulaire

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

Notre formulaire est fin prêt et fonctionnel ! Bravo ! Il ne nous reste plus qu'à récupérer les données de ce formulaire ! Sinon... il ne sert à rien... o_O

Avant cela, nous allons corriger quelque chose qui vous chagrine, je le sais. Notre application n'a pas de modèle ! Or, c'est le modèle qui est responsable de sauvegarder les données ou de discuter avec un éventuel serveur. Et c'est donc lui qui va nous permettre de récupérer les informations du formulaire correctement.

Donc avant de récupérer nos données, nous allons créer le modèle. Et vous allez faire ça avec l'exercice ci-dessous.

Console de code
Houston... ?
Il semblerait que votre ordinateur ne soit pas connecté à Internet.
Vous n'êtes pas connecté

Connectez-vous pour accéder aux exercices de codes et testez vos nouvelles compétences.

Pensez à vous entraîner avant de terminer ce chapitre.

Bouton Valider

Pour l'instant, notre bouton Valider lance une transition modale vers le SuccessViewController. Or, avant de passer à la page suivante, nous voulons :

  • récupérer les données du formulaire : on va faire ça juste en dessous.

  • vérifier que les données sont valides : on va faire ça dans la prochaine partie.

  • les envoyer sur un serveur, les sauvegarder en base de données, etc. : si on travaillait sur un véritable projet...

Du coup, on ne peut pas déclencher automatiquement le segue modal puisqu'il faut faire tout ça avant. À la place, nous allons créer une action pour sauvegarder les données.

Donc commencez par supprimer le segue Modal entre le bouton.

Et maintenant vous pouvez créer une action pour le bouton que nous allons simplement appeler validate :

@IBAction func validate() {
}

Ensuite, je vous suggère de créer une fonction privée dans laquelle nous allons faire la première moitié du travail : créer un objet Pet.

@IBAction func validate() {
createPetObject()
}
private func createPetObject() {
}

Récupérons les informations

Maintenant nous allons récupérer les informations de nos différents composants. Pour les récupérer, il va nous falloir créer des outlets pour tous les composants.

Vous êtes des pros, je vous laisse faire :

@IBOutlet weak var racePickerView: UIPickerView!
@IBOutlet weak var majoritySwitch: UISwitch!
@IBOutlet weak var nameTextField: UITextField!
@IBOutlet weak var phoneTextField: UITextField!
@IBOutlet weak var genderSegmentedControl: UISegmentedControl!

Et maintenant à l'attaque !

Les champs de texte

Les champs de texte sont très simples. Ils ont une propriété text de type String? qui contient le texte entré par l'utilisateur. Vous allez donc pouvoir écrire dans la fonction createPetObject :

let name = nameTextField.text
let phone = phoneTextField.text

Nous stockons les textes dans deux constantes pour l'instant.

Le switch

Le switch ne peut prendre que deux valeurs On ou Off. C'est donc un booléen. La propriété qui permet de récupérer ce booléen se nomme isOn. Donc vous pouvez écrire :

let hasMajority = majoritySwitch.isOn

Le contrôle segmenté

Le contrôle segmenté (UISegmentedControl) est un composant qui a plusieurs segments. Et l'utilisateur peut en sélectionner un. L'information intéressante à connaitre, c'est donc : quel segment est sélectionné ? Cette information est donnée par la propriété selectedSegmentIndex. Cette propriété est un entier, qui représente l'index du segment sélectionné.

On peut donc commencer par récupérer l'index :

let genderIndex = genderSegmentedControl.selectedSegmentIndex

Ensuite, on sait que si l'index vaut 0, l'utilisateur a sélectionné Male et s'il vaut 1 il a sélectionné Femelle.

On peut donc écrire :

var gender: Pet.Gender
if genderIndex == 0 {
gender = .male
} else {
gender = .female
}
let gender: Pet.Gender = (genderSegmentedControl.selectedSegmentIndex == 0) ? .male : .female

Si les ternaires ne vous disent rien, vous pouvez jeter un oeil ici.

Le sélecteur

Le sélecteur (UIPickerView) nous permet de parcourir la liste de race. L'information qui nous intéresse ici c'est : quel élément de la liste a été sélectionné ? Même chose que pour le contrôle segmenté, on va récupérer l'index de l'élément sélectionné, mais cette fois-ci avec une méthode :

let raceIndex = racePickerView.selectedRow(inComponent: 0)

Cette méthode prend en argument la colonne (component) dont on veut récupérer l'élément sélectionné. Nous n'avons qu'une seule colonne, donc on peut écrire 0.

Maintenant que nous avons l'index, il ne nous reste plus qu'à l'utiliser dans notre tableau de races : dogRaces.

let race = dogRaces[raceIndex]

Créez l'objet

Voilà, nous avons récupéré toutes les informations de notre formulaire. Il ne nous reste plus qu'à créer l'objet Pet correspondant. Vous êtes capable de faire ça sans moi. Donc, essayez !

Voici la correction :

let dog = Pet(name: name, hasMajority: hasMajority, phone: phone, race: race, gender: gender)

Notre objet est maintenant créé, il va pouvoir être sauvegardé, utilisé dans une autre page, envoyé dans un serveur, etc.

Les actions

Dans ce cours, nous avons vu ces composants uniquement comme outlets, c'est à dire des objets dont on peut obtenir une information. Mais ces objets peuvent aussi être à l'origine d'actions, comme l'est un bouton. Voici quelques exemples en iOS :

Vous pouvez voir ici que le switch est utilisé pour afficher une section et que le contrôle segmenté permet de modifier l'aspect de la carte.

Garder en tête que tous ces composants peuvent donc à la fois servir pour recueillir des informations, mais aussi pour contrôler votre interface.

En résumé

  • Pour récupérer des informations des différents composants, on utilise :

    • la propriété text pour UITextField

    • la propriété isOn pour UISwitch

    • la propriété selectedSegmentIndex pour UISegmentedControl

    • la méthode selectedRow(inComponent: Int) pour UIPickerView

Dans la prochaine partie, nous allons contrôler la validité des informations de notre formulaire, présenter des alertes, passer des données entre contrôleurs et d'autres bonnes surprises ! À tout de suite

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