Gérez la navigation et les formulaires sur iOS

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  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 !