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...
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 chargé 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.
Complétez l'exercice en cliquant sur ce lien !
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 le contrôleur SuccessViewController
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 à connaître, 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é.
Comme n'importe quel index, il commence à zéro. Donc si le premier segment est sélectionné, la propriété renvoie 0
.
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é Mâle, 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 œil ici.
Le sélecteur
Le sélecteur ( UIPickerView
) nous permet de parcourir la liste de races. 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 :
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.
Gardez 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
pourUITextField
;la propriété
isOn
pourUISwitch
;la propriété selectedSegmentIndex pour
UISegmentedControl
;la méthode
selectedRow(inComponent: Int)
pourUIPickerView
.
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 !