RubyMotion - les modèles et les contrôleurs multiples

Maintenant que notre contrôleur est instancié, il nous faut afficher les éléments de formulaire dont nous aurons besoin pour ajouter une tâche. Nous allons en profiter pour agrémenter l'aspect visuel de notre fenêtre.

II-A-1. Fond et entête▲

Retournons dans notre fichier contrôleur pour construire notre mise en page :

app/controllers/task_view_controller.rb

Sélectionnez

class TaskViewController < UIViewController

  private

  def loadView
    layoutView
  end

  def layoutView
    # Initialisation de la vue
    self.view = UIView.alloc.init

    # Utilisation d'un gris léger en couleur de fond
    self.view.backgroundColor = UIColor.colorWithRed(0.902, green: 0.902, blue: 0.902, alpha: 1.0)

    # Ajout d'un entête
    @headerImageView = UIImageView.alloc.initWithFrame([[0, 0], [320, 60]])
    @headerImageView.image = UIImage.imageNamed("bgHeader.png")

    self.view.addSubview(@headerImageView)
  end
end

Nous avons modifié loadView pour qu'elle appelle la méthode layoutView qui va se charger de décorer notre fenêtre et y placer les éléments d'UI.

Dans la méthode layoutView, nous initialisons notre vue pour ensuite définir une couleur de fond gris clair.

Finalement, nous nous servons d'une image comme entête. Cette image a préalablement été ajoutée au répertoire resources. Une version « @2x » est également présente pour être utilisée (automatiquement) sur les écrans « retina ».

Voici ce que nous obtenons :

Ajoutons maintenant un titre à notre entête :

 

Sélectionnez

@headerTitle = UILabel.alloc.initWithFrame([[0, 0], [320, 50]])
@headerTitle.text = "RubyMotion Todo"
@headerTitle.color = UIColor.colorWithRed(0.702, green: 0.702, blue: 0.702, alpha: 1.000)
@headerTitle.backgroundColor = UIColor.clearColor
@headerTitle.textAlignment = UITextAlignmentCenter
@headerTitle.font = UIFont.fontWithName("AvenirNext-Bold", size: 25)

self.view.addSubview(@headerTitle)

Ce code a simplement été ajouté à la fin de la méthode layoutView. On crée donc une instance de UILabel qu'on place par-dessus l'image d'entête. On définit notre texte, la couleur à utiliser et on s'assure que la couleur de fond du label soit bien transparente.

Finalement, on aligne le texte au centre du label puis on définit une police et une taille personnalisée. Vous pouvez obtenir la liste des polices disponibles via UIFont.familyNames dans le REPL par exemple.

Le résultat :

II-A-2. Champs du formulaire▲

Nous pouvons passer à l'ajout du champ texte pour la saisie du titre de la tâche. Ici encore, nous allons personnaliser l'élément pour avoir un rendu plus attractif.

Toujours à la suite de notre méthode layoutView, nous ajoutons le code suivant :

 

Sélectionnez

@titleTextField = UITextField.alloc.initWithFrame([[10, 75], [300, 45]])

@titleTextField.background = UIImage.imageNamed("bgTextField.png")
@titleTextField.textColor = UIColor.colorWithRed(0.451, green:0.451, blue:0.451, alpha:1.0)
@titleTextField.font = UIFont.fontWithName("AvenirNextCondensed-DemiBold", size:25)

@titleTextField.textAlignment = UITextAlignmentCenter
@titleTextField.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter

@titleTextField.placeholder = "Nom de la tâche"

@titleTextField.delegate = self

self.view.addSubview(@titleTextField)

Nous créons une instance d'UITextField pour laquelle nous définissons une image de fond qui a été ajoutée au répertoire resources. Nous personnalisons ensuite la couleur du texte, sa police et sa taille. Nous faisons en sorte que le texte soit centré horizontalement et verticalement dans le champ. Finalement, nous définissons un texte de substitution.

Nous préparons déjà le terrain pour la suite en déléguant ce champ texte à notre contrôleur puis nous l'ajoutons à notre vue.

Voici le résultat :

Nous pouvons maintenant ajouter un sélecteur pour l'importance de la tâche : « haute » ou « basse ». Pour ce faire nous allons utiliser un UISegmentedControl :

 

Sélectionnez

# Ajout d'un label pour la priorité
@prorityLabel = UILabel.alloc.initWithFrame([[10, 140], [300, 30]])
@prorityLabel.text = "Priorité"
@prorityLabel.color = UIColor.colorWithRed(0.400, green: 0.400, blue: 0.400, alpha: 1.0)
@prorityLabel.backgroundColor = UIColor.clearColor
@prorityLabel.font = UIFont.fontWithName("AvenirNext-DemiBold", size: 20)
@prorityLabel.textAlignment = UITextAlignmentCenter

self.view.addSubview(@prorityLabel)

# Ajout d'un sélecteur de priorité
@priorityValues = ["Bas", "Haut"]

@prioritySegmentedControl = UISegmentedControl.alloc.initWithItems(@priorityValues)
@prioritySegmentedControl.frame = [[10, 170], [300, 30]]
@prioritySegmentedControl.selectedSegmentIndex = 0

self.view.addSubview(@prioritySegmentedControl)

Nous créons un label pour désigner notre sélecteur à venir, rien que vous ne connaissiez pas déjà ici.

Nous passons ensuite à la création d'un tableau de valeurs qui seront disponibles dans le sélecteur. Nous initialisons ce UISegmentedControl en utilisant le tableau précédemment créé puis nous présélectionnons le premier segment.

Il ne nous reste plus qu'à ajouter le contrôle à notre vue principale.

Comme nous l'avons déjà vu dans les articles précédents, lorsqu'un champ texte est sélectionné, le clavier n'est ensuite jamais masqué quoi qu'on fasse. Ajoutons ce masquage de clavier à l'appui sur « Entrée » :

 

Sélectionnez

def textFieldShouldReturn(textfield)
  textfield.resignFirstResponder
  return true
end

Ce morceau de code est à ajouter dans notre contrôleur avant la section private. Ce code s'assure de masquer le clavier quel que soit le champ texte ayant activé le clavier.

Nous pouvons maintenant passer à l'écriture de notre modèle qui nous permettra de gérer les données saisies par l'utilisateur.

$ mkdir app/models
$ touch app/models/task.rb

Ce modèle sera très simple, il n'est là que pour illustrer la mise en place d'un modèle au sein d'un projet RubyMotion. Libre à vous de l'enrichir pour vos besoins ou d'en créer d'autres. Voici le nôtre :

class Task
  attr_accessor :priority, :name
  attr_reader :done, :created_at

  def initialize
    @done = false
    @created_at = Time.now
  end

  def toggle_status!
    @done = !@done
  end
end

Nous utilisons donc deux accesseurs pour pouvoir interagir sur la priorité et le nom depuis notre formulaire. Nous avons également deux attributs en lecture, l'un pour stocker le statut courant de la tâche et l'autre pour stocker sa date de création.

À l'initialisation de notre objet, nous fixons le statut (@done) à faux et nous remplissons la date de création avec l'heure courante.

Nous avons également une méthode d'instance qui va nous permettre de basculer l'état de la tâche de « non fait » à « fait » et inversement.

Il ne nous reste plus qu'à utiliser ce modèle dans notre contrôleur.

Il nous faut maintenant ajouter un bouton de validation pour notre formulaire et faire en sorte de créer une nouvelle instance de Task lorsqu'il sera cliqué.

Commençons par ajouter le bouton de validation :

  def layoutView
    …

    @validateButton = UIButton.buttonWithType(UIButtonTypeRoundedRect)
    @validateButton.frame = CGRectMake(10, 400, 300, 40)

    @validateButton.setBackgroundImage(UIImage.imageNamed("btnValidate.png"), forState:UIControlStateNormal)
    @validateButton.setTitle("Valider", forState: UIControlStateNormal)
    @validateButton.setTitleColor(UIColor.whiteColor, forState: UIControlStateNormal)
    @validateButton.titleLabel.font = UIFont.fontWithName("AvenirNext-DemiBold", size: 20)

    @validateButton.addTarget(self,
                              action: "addTask:",
                              forControlEvents: UIControlEventTouchUpInside)

    self.view.addSubview(@validateButton)
  end

On crée donc une instance d'un UIButton à bords arrondis qu'on place en bas de l'écran sur presque toute la largeur. Pour embellir ce bouton, nous utilisons une image de fond. On définit ensuite le titre du bouton, sa police et sa couleur.

Au passage on en profite pour affecter au clic sur le bouton une action addTask qui reste à écrire. C'est elle qui se chargera de créer une instance de notre modèle Task et de définir ses attributs.

Finalement nous ajoutons notre bouton à la vue principale ce qui nous donne :

Il nous faut maintenant écrire la méthode addTask,mais, tout d'abord, il faut améliorer notre classe Task pour pouvoir y stocker les tâches créées, mais également avoir un moyen de les récupérer, voici donc notre classe enrichie :

class Task
  @@list = []

  attr_accessor :priority, :name
  attr_reader :done, :created_at

  def initialize
    @done = false
    @created_at = Time.now

    @@list << self
  end

  def self.list
    @@list
  end

  def toggle_status!
    @done = !@done
  end
end

Nous avons ajouté une variable de classe pour stocker nos tâches (nous verrons la persistance dans un prochain article). À l'initialisation de l'objet, nous l'ajoutons donc à notre tableau. Nous avons également ajouté une méthode de classe pour nous retourner les tâches qui ont été enregistrées.

Passons maintenant à l'écriture de la méthode addTask dans notre contrôleur :

def addTask(sender)
  task = Task.new
  task.name = @titleTextField.text

  priority_index = @prioritySegmentedControl.selectedSegmentIndex
  task.priority = @priorityValues[priority_index]

  @titleTextField.text = ""
  @prioritySegmentedControl.selectedSegmentIndex = 0

  NSLog("%@", Task.list.map { |task| "#{task.name} (#{task.priority})" }.join(", "))
end

La méthode qui reçoit l'événement doit prendre un paramètre sender qui lui permet de savoir d'où vient l'action.

Nous créons une instance de Task et nous définissons son nom en récupérant la valeur de notre champ texte.

Nous récupérons ensuite l'index actuellement sélectionné du contrôle segmenté puis nous nous servons de cet index pour récupérer la valeur correspondante dans notre tableau des valeurs de priorités.

Une fois notre objet rempli, nous pouvons vider le formulaire et nous en profitons également pour loguer les tâches actuellement disponibles dans notre variable de classe.

Faites plusieurs ajouts et vérifiez votre console, vous devriez y voir quelque chose de ce genre :

(main)> 2013-08-13 14:24:22.942 Todo[17738:c07] Foo (Haut)
(main)> 2013-08-13 14:24:30.681 Todo[17738:c07] Foo (Haut), Bar (Bas)

Créons donc le fichier app/controllers/list_view_controller.rb :

class ListViewController < UIViewController

  def loadView
    layoutView
  end

  private

  def layoutView
    # Initialisation de la vue
    self.view = UIView.alloc.init

    # Utilisation d'un gris léger en couleur de fond
    self.view.backgroundColor = UIColor.colorWithRed(0.902, green: 0.902, blue: 0.902, alpha: 1.0)

    # Ajout d'un entête
    @headerImageView = UIImageView.alloc.initWithFrame([[0, 0], [320, 60]])
    @headerImageView.image = UIImage.imageNamed("bgHeader.png")

    self.view.addSubview(@headerImageView)

    # Ajout d'un titre à l'image d'entête
    @headerTitle = UILabel.alloc.initWithFrame([[0, 0], [320, 50]])
    @headerTitle.text = "RubyMotion Todo"
    @headerTitle.color = UIColor.colorWithRed(0.702, green: 0.702, blue: 0.702, alpha: 1.000)
    @headerTitle.backgroundColor = UIColor.clearColor
    @headerTitle.textAlignment = UITextAlignmentCenter
    @headerTitle.font = UIFont.fontWithName("AvenirNext-Bold", size: 25)

    self.view.addSubview(@headerTitle)

    # Ajout d'un label pour lister les tâches
    @taskNamesLabel = UILabel.alloc.initWithFrame([[10, 50], [300, 40]])
    @taskNamesLabel.color = UIColor.colorWithRed(0.400, green: 0.400, blue: 0.400, alpha: 1.0)
    @taskNamesLabel.backgroundColor = UIColor.clearColor
    @taskNamesLabel.text = Task.list.map { |task| "#{task.name} (#{task.priority})" }.join(", ")

    self.view.addSubview(@taskNamesLabel)
  end
end

Comme vous pouvez le noter, il y a de la duplication avec l'autre contrôleur, il aurait été judicieux de créer un helper qui se charge de définir la couleur de fond, l'image d'entête et son texte associé.

Une fois cette mise en forme achevée, nous créons un label qui nous permettra d'afficher une simple chaîne résultant de la concaténation des informations des tâches comme vu précédemment.

Maintenant que notre contrôleur est prêt pour utilisation, il ne nous reste plus qu'à mettre en place la transition entre contrôleurs au moment voulu. Dans notre cas, nous souhaitons basculer vers la liste des tâches à chaque ajout d'une tâche.

Nous allons donc tout naturellement faire cette transition dans la méthode addTask :

def addTask(sender)
  …

  @listViewController = ListViewController.alloc.init
  @listViewController.view.frame = self.view.frame

  UIView.transitionFromView(self.view,
                            toView: @listViewController.view,
                            duration: 0.3,
                            options: UIViewAnimationOptionTransitionFlipFromLeft,
                            completion: nil)
end

Il est très simple de créer une transition, en effet il suffit d'instancier le contrôleur cible, de définir la taille de sa vue puis d'appeler la méthode de transition transitionFromView de UIView.

Cette méthode prend en premier paramètre la vue de départ, le paramètre toView définit la vue cible de la transition. On précise ensuite la durée de la transition, éventuellement le type de transition (ici nous avons choisi une transition de gauche à droite avec un axe de rotation au milieu de la vue) puis pour finir un éventuel callback de complétion qui sera appelé une fois la transition terminée.

Pour finaliser, ajoutons un bouton de retour au formulaire pour pouvoir ajouter plusieurs tâches, la transition associée sera différente par souci de découverte :

def layoutView
  …

  # Ajout du bouton de retour au formulaire
  @backButton = UIButton.buttonWithType(UIButtonTypeRoundedRect)
  @backButton.frame = CGRectMake(10, 400, 300, 40)

  @backButton.setBackgroundImage(UIImage.imageNamed("btnValidate.png"), forState:UIControlStateNormal)
  @backButton.setTitle("Ajouter une tâche", forState: UIControlStateNormal)
  @backButton.setTitleColor(UIColor.whiteColor, forState: UIControlStateNormal)
  @backButton.titleLabel.font = UIFont.fontWithName("AvenirNext-DemiBold", size: 20)

  @backButton.addTarget(self,
                        action: "goBack:",
                        forControlEvents: UIControlEventTouchUpInside)

  self.view.addSubview(@backButton)
end

Nous ajoutons ici un bouton, tout est classique, il est à noter qu'on lie ce bouton sur la méthode goBack que nous allons donc ajouter à notre contrôleur :

def goBack(sender)
  @taskViewController = TaskViewController.alloc.init
  @taskViewController.view.frame = self.view.frame
  UIView.transitionFromView(self.view,
                            toView: @taskViewController.view,
                            duration: 0.5,
                            options: UIViewAnimationOptionTransitionCurlDown,
                            completion: nil)
end

Encore une fois, rien de nouveau, nous instancions notre contrôleur contenant le formulaire puis nous créons une transition vers ce dernier. Nous avons juste changé la transition qui ressemblera ici à une page qui se déroule vers le bas.

Voici une démonstration de l'application finalisée pour mieux vous représenter les effets de transition :