Utilisation des storyboards dans Xamarin.Mac

Un storyboard définit l’interface utilisateur d’une application donnée divisée en une vue d’ensemble fonctionnelle de ses contrôleurs de vue. Dans le Générateur d’interface de Xcode, chacun de ces contrôleurs vit dans sa propre scène.

Le storyboard est un fichier de ressources (avec les extensions de .storyboard) qui est inclus dans l’offre groupée de l’application Xamarin.Mac lorsqu’elle est compilée et livrée. Pour définir le Storyboard de démarrage de votre application, modifiez son fichier et sélectionnez l’interface Info.plist principale dans la zone de liste déroulante :

Chargement à partir du code

Il peut arriver que vous deviez charger un Storyboard spécifique à partir du code et créer manuellement un contrôleur de vue. Vous pouvez utiliser le code suivant pour effectuer cette action :

// Get new window
var storyboard = NSStoryboard.FromName ("Main", null);
var controller = storyboard.InstantiateControllerWithIdentifier ("MainWindow") as NSWindowController;

// Display
controller.ShowWindow(this);

Charge FromName le fichier Storyboard avec le nom donné qui a été inclus dans le bundle de l’application. Crée InstantiateControllerWithIdentifier une instance du contrôleur de vue avec l’identité donnée. Vous définissez l’identité dans le Générateur d’interface de Xcode lors de la conception de l’interface utilisateur :

Si vous le souhaitez, vous pouvez utiliser la InstantiateInitialController méthode pour charger le contrôleur de vue qui a été affecté au contrôleur initial dans le Générateur d’interface :

Il est marqué par le point d’entrée storyboard et la flèche ouverte au-dessus.

Afficher les contrôleurs

Les contrôleurs de vue définissent les relations entre une vue d’informations donnée dans une application Mac et le modèle de données qui fournit ces informations. Chaque scène de niveau supérieur dans le Storyboard représente un contrôleur de vue dans le code de l’application Xamarin.Mac.

Cycle de vie du contrôleur de vue

Plusieurs nouvelles méthodes ont été ajoutées à la NSViewController classe pour prendre en charge les storyboards dans macOS. Il est important de noter que les méthodes suivantes permettent de répondre au cycle de vie de la vue contrôlée par le contrôleur de vue donné :

• ViewDidLoad - Cette méthode est appelée lorsque la vue est chargée à partir du fichier Storyboard.
• ViewWillAppear - Cette méthode est appelée juste avant que l’affichage ne s’affiche à l’écran.
• ViewDidAppear - Cette méthode est appelée directement après l’affichage affiché à l’écran.
• ViewWillDisappear - Cette méthode est appelée juste avant la suppression de l’affichage de l’écran.
• ViewDidDisappear - Cette méthode est appelée directement après la suppression de l’affichage de l’écran.
• UpdateViewConstraints - Cette méthode est appelée lorsque les contraintes qui définissent une position et une taille de disposition automatique d’affichage doivent être mises à jour.
• ViewWillLayout - Cette méthode est appelée juste avant que les sous-vues de cette vue soient disposées à l’écran.
• ViewDidLayout - Cette méthode est appelée directement après que les sous-vues de la vue sont disposées à l’écran.

Chaîne de répondeur

En outre, NSViewControllers font désormais partie de la chaîne de répondeur de la fenêtre :

Ainsi, ils sont câblés pour recevoir et répondre à des événements tels que les sélections d’éléments de menu Couper, Copier et Coller. Cette connexion automatique du contrôleur d’affichage se produit uniquement sur les applications s’exécutant sur macOS Sierra (10.12) et supérieures.

Endiguement

Dans les storyboards, les contrôleurs d’affichage (tels que le contrôleur d’affichage fractionné et le contrôleur d’affichage tabulation) peuvent désormais implémenter l’isolement, de sorte qu’ils puissent « contenir » d’autres contrôleurs de sous-affichage :

Les contrôleurs d’affichage enfant contiennent des méthodes et des propriétés pour les lier à leur contrôleur de vue parent et pour utiliser l’affichage et la suppression des vues de l’écran.

Tous les contrôleurs de vue conteneur intégrés à macOS ont une disposition spécifique que Apple suggère de suivre si vous créez vos propres contrôleurs de vue conteneur personnalisés :

Le contrôleur de vue collection contient un tableau d’éléments de vue de collection, chacun contenant un ou plusieurs contrôleurs de vue qui contiennent leurs propres vues.

Segues

Segues fournit les relations entre toutes les scènes qui définissent l’interface utilisateur de votre application. Si vous êtes familiarisé avec l’utilisation de Storyboards dans iOS, vous savez que Segues pour iOS définit généralement des transitions entre les vues plein écran. Cela diffère de macOS, lorsque Segues définit généralement « Containment », où une scène est l’enfant d’une scène parente.

Dans macOS, la plupart des applications ont tendance à regrouper leurs vues dans la même fenêtre à l’aide d’éléments d’interface utilisateur tels que les affichages fractionnés et les onglets. Contrairement à iOS, où les vues doivent être transférées sur et hors écran, en raison d’un espace d’affichage physique limité.

Présentation de Segues

Étant donné les tendances de macOS à l’endiguement, il existe des situations où la présentation segues est utilisée, comme les fenêtres modales, les vues de feuille et les popovers. macOS fournit les types segue intégrés suivants :

• Afficher : affiche la cible du Segue en tant que fenêtre non modale. Par exemple, utilisez ce type de Segue pour présenter une autre instance d’une fenêtre de document dans votre application.
• Modal : présente la cible du Segue en tant que fenêtre modale. Par exemple, utilisez ce type de Segue pour présenter la fenêtre Préférences de votre application.
• Feuille : présente la cible du Segue sous la forme d’une feuille attachée à la fenêtre parente. Par exemple, utilisez ce type de segue pour présenter une feuille rechercher et remplacer.
• Popover - Présente la cible du Segue comme dans une fenêtre contextuelle. Par exemple, utilisez ce type Segue pour présenter des options lorsqu’un élément d’interface utilisateur est cliqué par l’utilisateur.
• Personnalisé : présente la cible du Segue à l’aide d’un type Segue personnalisé défini par le développeur. Pour plus d’informations, consultez la section Création de segues personnalisés ci-dessous.

Lorsque vous utilisez Presentation Segues, vous pouvez remplacer la PrepareForSegue méthode du contrôleur de vue parent pour la présentation afin d’initialiser et de variables et de fournir toutes les données au contrôleur de vue présenté.

Segues déclenché

Segues déclenché vous permet de spécifier segues nommés (via leur propriété d’identificateur dans le Générateur d’interface) et de les déclencher par des événements tels que l’utilisateur qui clique sur un bouton ou en appelant la méthode dans le PerformSegue code :

// Display the Scene defined by the given Segue ID
PerformSegue("MyNamedSegue", this);

L’ID Segue est défini à l’intérieur du Générateur d’interface de Xcode lorsque vous définissez l’interface utilisateur de l’application :

Dans le contrôleur de vue qui agit comme source du Segue, vous devez remplacer la PrepareForSegue méthode et effectuer une initialisation requise avant l’exécution du segue et le contrôleur de vue spécifié s’affiche :

public override void PrepareForSegue (NSStoryboardSegue segue, NSObject sender)
{
    base.PrepareForSegue (segue, sender);

    // Take action based on Segue ID
    switch (segue.Identifier) {
    case "MyNamedSegue":
        // Prepare for the segue to happen
        ...
        break;
    }
}

Si vous le souhaitez, vous pouvez remplacer la ShouldPerformSegue méthode et contrôler si la Segue est réellement exécutée via du code C#. Pour les contrôleurs d’affichage présentés manuellement, appelez leur DismissController méthode pour les supprimer de l’affichage lorsqu’ils ne sont plus nécessaires.

Création de segues personnalisés

Il peut arriver que votre application nécessite un type Segue non fourni par le segues de build défini dans macOS. Si c’est le cas, vous pouvez créer un segue personnalisé qui peut être affecté dans le Générateur d’interface de Xcode lors de la disposition de l’interface utilisateur de votre application.

Par exemple, pour créer un nouveau type Segue qui remplace le contrôleur d’affichage actuel à l’intérieur d’une fenêtre (au lieu d’ouvrir la scène cible dans une nouvelle fenêtre), nous pouvons utiliser le code suivant :

using System;
using AppKit;
using Foundation;

namespace OnCardMac
{
    [Register("ReplaceViewSeque")]
    public class ReplaceViewSeque : NSStoryboardSegue
    {
        #region Constructors
        public ReplaceViewSeque() {

        }

        public ReplaceViewSeque (string identifier, NSObject sourceController, NSObject destinationController) : base(identifier,sourceController,destinationController) {

        }

        public ReplaceViewSeque (IntPtr handle) : base(handle) {
        }

        public ReplaceViewSeque (NSObjectFlag x) : base(x) {
        }
        #endregion

        #region Override Methods
        public override void Perform ()
        {
            // Cast the source and destination controllers
            var source = SourceController as NSViewController;
            var destination = DestinationController as NSViewController;

            // Swap the controllers
            source.View.Window.ContentViewController = destination;

            // Release memory
            source.RemoveFromParentViewController ();
        }
        #endregion

    }

}

Voici quelques points à noter :

• Nous utilisons l’attribut Register pour exposer cette classe à Objective-C/macOS.
• Nous substituons la Perform méthode pour effectuer réellement l’action de notre Segue personnalisé.
• Nous remplaçons le contrôleur de ContentViewController la fenêtre par celui défini par la cible (destination) du Segue.
• Nous supprimons le contrôleur de vue d’origine pour libérer de la mémoire à l’aide de la RemoveFromParentViewController méthode.

Pour utiliser ce nouveau type Segue dans le Générateur d’interface de Xcode, nous devons d’abord compiler l’application, puis basculer vers Xcode et ajouter un nouveau Segue entre deux scènes. Définissez le style sur Custom et la classe ReplaceViewSegue Segue sur (le nom de notre classe Segue personnalisée) :

Contrôleurs de fenêtre

Les contrôleurs de fenêtre contiennent et contrôlent les différents types de fenêtres que votre application macOS peut créer. Pour les storyboards, ils ont les fonctionnalités suivantes :

1. Ils doivent fournir un contrôleur de vue de contenu. Il s’agit du même contrôleur de vue de contenu que celui de la fenêtre enfant.
2. La Storyboard propriété contient le Storyboard à partir duquel le contrôleur de fenêtre a été chargé, sinon null , s’il n’est pas chargé à partir d’un Storyboard.
3. Vous pouvez appeler la DismissController méthode pour fermer la fenêtre donnée et la supprimer de l’affichage.

Comme les contrôleurs d’affichage, les contrôleurs de fenêtre implémentent les PerformSeguePrepareForSegueShouldPerformSegue méthodes et peuvent être utilisés comme source d’une opération Segue.

Le contrôleur de fenêtre est responsable des fonctionnalités suivantes d’une application macOS :

• Ils gèrent une fenêtre spécifique.
• Ils gèrent la barre de titre et la barre d’outils de la fenêtre (le cas échéant).
• Ils gèrent le contrôleur d’affichage de contenu pour afficher le contenu de la fenêtre.

Reconnaissances de mouvements

Les modules de reconnaissance des mouvements pour macOS sont presque identiques à leurs équivalents dans iOS et permettent au développeur d’ajouter facilement des mouvements (tels que cliquer sur un bouton de souris) aux éléments de l’interface utilisateur de votre application.

Toutefois, où les mouvements dans iOS sont déterminés par la conception de l’application (par exemple, en appuyant sur l’écran avec deux doigts), la plupart des mouvements dans macOS sont déterminés par le matériel.

À l’aide de Gesture Recognizers, vous pouvez réduire considérablement la quantité de code nécessaire pour ajouter des interactions personnalisées à un élément de l’interface utilisateur. Comme ils peuvent déterminer automatiquement entre les clics doubles et simples, cliquez et faites glisser des événements, etc.

Au lieu de remplacer l’événement MouseDown dans votre contrôleur d’affichage, vous devez utiliser un Mouvement Recognizer pour gérer l’événement d’entrée utilisateur lors de l’utilisation de Storyboards.

Les modules de reconnaissance de mouvement suivants sont disponibles dans macOS :

• NSClickGestureRecognizer - Inscrire les événements de souris vers le bas et vers le haut.
• NSPanGestureRecognizer - Inscrit le bouton de la souris vers le bas, faites glisser et relâchez les événements.
• NSPressGestureRecognizer - Inscrit la suspension d’un bouton de la souris pour un événement de temps donné.
• NSMagnificationGestureRecognizer - Inscrit un événement d’agrandissement à partir du matériel trackpad.
• NSRotationGestureRecognizer - Inscrit un événement de rotation à partir du matériel trackpad.

Utilisation de références de table de montage séquentiel

Une référence de storyboard vous permet de prendre une conception de storyboard volumineuse et complexe et de la décomposer en petits storyboards qui sont référencés à partir de l’original, ce qui permet de supprimer la complexité et de rendre les storyboards individuels qui en résultent plus faciles à concevoir et à gérer.

En outre, une référence de storyboard peut fournir une ancre à une autre scène dans le même Storyboard ou une scène spécifique sur une autre.

Référencement d’un storyboard externe

Pour ajouter une référence à un Storyboard externe, procédez comme suit :

1. Dans le Explorateur de solutions, cliquez avec le bouton droit sur le nom du projet, puis sélectionnez Ajouter>un nouveau fichier...>Table de montage séquentiel Mac>. Entrez un nom pour le nouveau Storyboard, puis cliquez sur le bouton Nouveau :

   

2. Dans le Explorateur de solutions, double-cliquez sur le nouveau nom storyboard pour l’ouvrir pour la modification dans le Générateur d’interface de Xcode.

3. Concevez la disposition des scènes du nouveau Storyboard comme vous le feriez normalement et enregistrez vos modifications :

   

4. Basculez vers le Storyboard auquel vous allez ajouter la référence dans le Générateur d’interface.

5. Faites glisser une référence de storyboard à partir de la bibliothèque d’objets sur l’aire de conception :

   

6. Dans l’inspecteur d’attribut, sélectionnez le nom du Storyboard que vous avez créé ci-dessus :

   

7. Cliquez sur un widget d’interface utilisateur (comme un bouton) sur une scène existante et créez un segue dans la référence storyboard que vous venez de créer. Dans le menu contextuel, sélectionnez Afficher pour terminer le Segue :

   

8. Enregistrez vos modifications dans le Storyboard.

9. Revenez à Visual Studio pour Mac pour synchroniser vos modifications.

Lorsque l’application est exécutée et que l’utilisateur clique sur l’élément d’interface utilisateur à partir duquel vous avez créé le Segue, le contrôleur de fenêtre initial à partir du storyboard externe spécifié dans la référence de storyboard s’affiche.

Référencement d’une scène spécifique dans un storyboard externe

Pour ajouter une référence à une scène spécifique, un Storyboard externe (et non le contrôleur de fenêtre initial), procédez comme suit :

1. Dans le Explorateur de solutions, double-cliquez sur le Storyboard externe pour l’ouvrir pour modification dans le Générateur d’interface de Xcode.

2. Ajoutez une nouvelle scène et concevez sa disposition comme vous le feriez normalement :

   

3. Dans l’inspecteur d’identité, entrez un ID storyboard pour le contrôleur de fenêtre de la nouvelle scène :

   

4. Ouvrez le Storyboard auquel vous allez ajouter la référence dans le Générateur d’interface.

5. Faites glisser une référence de storyboard à partir de la bibliothèque d’objets sur l’aire de conception :

   

6. Dans l’inspecteur d’identité, sélectionnez le nom du Storyboard et l’ID de référence (ID storyboard) de la scène que vous avez créée ci-dessus :

   

7. Cliquez sur un widget d’interface utilisateur (comme un bouton) sur une scène existante et créez un segue dans la référence storyboard que vous venez de créer. Dans le menu contextuel, sélectionnez Afficher pour terminer le Segue :

   

8. Enregistrez vos modifications dans le Storyboard.

9. Revenez à Visual Studio pour Mac pour synchroniser vos modifications.

Lorsque l’application est exécutée et que l’utilisateur clique sur l’élément d’interface utilisateur à partir duquel vous avez créé le Segue, la scène avec l’ID storyboard donné à partir du Storyboard externe spécifié dans la référence de storyboard s’affiche.

Référencement d’une scène spécifique dans le même storyboard

Pour ajouter une référence à une scène spécifique, procédez comme suit :

1. Dans le Explorateur de solutions, double-cliquez sur le Storyboard pour l’ouvrir pour modification.

2. Ajoutez une nouvelle scène et concevez sa disposition comme vous le feriez normalement :

   

3. Dans l’inspecteur d’identité, entrez un ID storyboard pour le contrôleur de fenêtre de la nouvelle scène :

   

4. Faites glisser une référence de table de montage séquentiel à partir de la boîte à outils sur l’aire de conception :

   

5. Dans l’inspecteur d’attribut, sélectionnez l’ID de référence (ID storyboard) de la scène que vous avez créée ci-dessus :

   

6. Cliquez sur un widget d’interface utilisateur (comme un bouton) sur une scène existante et créez un segue dans la référence storyboard que vous venez de créer. Dans le menu contextuel, sélectionnez Afficher pour terminer le Segue :

   

7. Enregistrez vos modifications dans le Storyboard.

8. Revenez à Visual Studio pour Mac pour synchroniser vos modifications.

Lorsque l’application est exécutée et que l’utilisateur clique sur l’élément d’interface utilisateur à partir duquel vous avez créé le Segue, la scène avec l’ID storyboard donné dans le même storyboard spécifié dans la référence storyboard s’affiche.

Liens associés

• Hello, Mac
• Utilisation de Windows
• OS X Human Interface Guidelines
• Présentation de Windows