Hello, Mac – Procédure pas à pasHello, Mac – Walkthrough

Xamarin.Mac permet le développement d’applications Mac entièrement natives en C# et .NET à l’aide des mêmes API macOS que celles utilisées lors du développement en Objective-C ou Swift.Xamarin.Mac allows for the development of fully native Mac apps in C# and .NET using the same macOS APIs that are used when developing in Objective-C or Swift. Comme Xamarin. Mac s’intègre directement à Xcode, le développeur peut utiliser l' Interface Builder de Xcode pour créer les interfaces utilisateur d’une application (ou éventuellement les créer directement en code C#).Because Xamarin.Mac integrates directly with Xcode, the developer can use Xcode's Interface Builder to create an app's user interfaces (or optionally create them directly in C# code).

De plus, étant donné que les applications Xamarin.Mac sont écrites en C# et .NET, le code peut être partagé avec les applications mobiles Xamarin.iOS et Xamarin.Android, tout en proposant une expérience native sur chaque plateforme.Additionally, since Xamarin.Mac applications are written in C# and .NET, code can be shared with Xamarin.iOS and Xamarin.Android mobile apps; all while delivering a native experience on each platform.

Cet article vous présente les concepts clés nécessaires pour créer une application Mac à l’aide de Xamarin.Mac, Visual Studio pour Mac et Interface Builder de Xcode en passant en revue le processus de génération d’une simple application Hello, Mac qui compte le nombre de clics sur un bouton :This article will introduce the key concepts needed to create a Mac app using Xamarin.Mac, Visual Studio for Mac and Xcode's Interface Builder by walking through the process of building a simple Hello, Mac app that counts the number of times a button has been clicked:

Exemple d’application Hello, Mac en cours d’exécutionExample of the Hello, Mac app running

Les concepts suivants sont abordés :The following concepts will be covered:

  • Visual Studio pour Mac : introduction à Visual Studio pour Mac et comment l’utiliser pour créer des applications Xamarin.Mac.Visual Studio for Mac – Introduction to the Visual Studio for Mac and how to create Xamarin.Mac applications with it.
  • Structure d’une application Xamarin.Mac : en quoi consiste une application Xamarin.Mac.Anatomy of a Xamarin.Mac Application – What a Xamarin.Mac application consists of.
  • Interface Builder de Xcode : comment utiliser Interface Builder de Xcode pour définir l’interface utilisateur d’une application.Xcode’s Interface Builder – How to use Xcode’s Interface Builder to define an app’s user interface.
  • Outlets et actions : comment utiliser les outlets et actions pour relier des contrôles dans l’interface utilisateur.Outlets and Actions – How to use Outlets and Actions to wire up controls in the user interface.
  • Déploiement/tests : comment exécuter et tester une application Xamarin.Mac.Deployment/Testing – How to run and test a Xamarin.Mac app.

Configuration requiseRequirements

Le développement d’applications Xamarin.Mac nécessite :Xamarin.Mac application development requires:

Pour exécuter une application générée avec Xamarin.Mac, vous aurez besoin des éléments suivants :To run an application built with Xamarin.Mac, you will need:

  • Un ordinateur Mac exécutant macOS X 10.7 ou version ultérieure.A Mac computer running macOS 10.7 or greater.

Avertissement

La prochaine version de Xamarin.Mac (4.8) prendra uniquement en charge macOS 10.9 ou ultérieur.The upcoming Xamarin.Mac 4.8 release will only support macOS 10.9 or higher. Les versions précédentes de Xamarin.Mac prenaient en charge macOS 10.7 ou ultérieur, mais l’infrastructure TLS des anciennes versions de macOS n’était pas suffisante pour prendre en charge TLS 1.2.Previous versions of Xamarin.Mac supported macOS 10.7 or higher, but these older macOS versions lack sufficient TLS infrastructure to support TLS 1.2. Pour cibler macOS 10.7 ou macOS 10.8, utilisez Xamarin.Mac 4.6 ou antérieur.To target macOS 10.7 or macOS 10.8, use Xamarin.Mac 4.6 or earlier.

Démarrage d’une nouvelle application Xamarin.Mac dans Visual Studio pour MacStarting a new Xamarin.Mac App in Visual Studio for Mac

Comme indiqué ci-dessus, ce guide passe en revue les étapes pour créer une application Mac appelée Hello_Mac qui ajoute un seul bouton et une étiquette à la fenêtre principale.As stated above, this guide will walk through the steps to create a Mac app called Hello_Mac that adds a single button and label to the main window. Quand vous cliquez sur le bouton, l’étiquette affiche le nombre de clics effectués.When the button is clicked, the label will display the number of times it has been clicked.

Pour commencer, suivez les étapes ci-dessous :To get started, do the following steps:

  1. Démarrez Visual Studio pour Mac :Start Visual Studio for Mac:

    Interface de Visual Studio pour Mac principaleThe main Visual Studio for Mac interface

  2. Cliquez sur le bouton Nouveau projet... pour ouvrir la boîte de dialogue Nouveau projet, puis sélectionnez Mac > Application > Application Cocoa et cliquez sur le bouton Suivant :Click on the New Project... button to open the New Project dialog box, then select Mac > App > Cocoa App and click the Next button:

    Sélection d’une application de cacaoSelecting a Cocoa App

  3. Entrez Hello_Mac pour Nom de l’application et gardez toutes les autres valeurs par défaut.Enter Hello_Mac for the App Name, and keep everything else as default. Cliquez sur suivant:Click Next:

    Définition du nom de l’applicationSetting the name of the app

  4. Vérifiez l’emplacement du nouveau projet sur votre ordinateur :Confirm the location of the new project on your computer:

    Vérification des détails de la nouvelle solutionVerifying the new solution details

  5. Cliquez sur le bouton Créer.Click the Create button.

Visual Studio pour Mac crée l’application Xamarin.Mac et affiche les fichiers par défaut qui sont ajoutés à la solution de l’application :Visual Studio for Mac will create the new Xamarin.Mac app and display the default files that get added to the app's solution:

Nouvelle vue par défaut de la solutionThe new solution default view

Visual Studio pour Mac utilise la même structure Solution et Projet que Visual Studio 2019.Visual Studio for Mac uses the same Solution and Project structure as Visual Studio 2019. Une solution est un conteneur qui peut contenir un ou plusieurs projets. les projets peuvent inclure des applications, des bibliothèques de prise en charge, des applications de test, etc. Le fichier > nouveau modèle de projet crée automatiquement une solution et un projet d’application.A solution is a container that can hold one or more projects; projects can include applications, supporting libraries, test applications, etc. The File > New Project template creates a solution and an application project automatically.

Structure d’une application Xamarin.MacAnatomy of a Xamarin.Mac Application

La programmation d’une application Xamarin.Mac est très similaire à l’utilisation de Xamarin.iOS.Xamarin.Mac application programming is very similar to working with Xamarin.iOS. iOS utilise le framework CocoaTouch, qui est une version épurée de Cocoa utilisée par Mac.iOS uses the CocoaTouch framework, which is a slimmed-down version of Cocoa, used by Mac.

Examinez les fichiers dans le projet :Take a look at the files in the project:

  • Main.cs ce fichier contient le point d’entrée principal de l’application.Main.cs contains the main entry point of the app. Quand l’application est lancée, la classe Main contient la toute première méthode qui est exécutée.When the app is launched, the Main class contains the very first method that is run.
  • AppDelegate.cs contient la classe AppDelegate qui est chargée d’écouter les événements du système d’exploitation.AppDelegate.cs contains the AppDelegate class that is responsible for listening to events from the operating system.
  • Info.plist contient des propriétés de l’application telles que le nom de l’application, les icônes, etc.Info.plist contains app properties such as the application name, icons, etc.
  • Entitlements.plist contient les droits de l’application et permet d’accéder à des éléments tels que le sandboxing et la prise en charge d’iCloud.Entitlements.plist contains the entitlements for the app and allows access to things such as Sandboxing and iCloud support.
  • Main.storyboard définit l’interface utilisateur (fenêtres et menus) pour une application et prépare les interconnexions entre fenêtres par le biais de Segues.Main.storyboard defines the user interface (Windows and Menus) for an app and lays out the interconnections between Windows via Segues. Les storyboards sont des fichiers XML qui contiennent la définition des vues (éléments de l’interface utilisateur).Storyboards are XML files that contain the definition of views (user interface elements). Ce fichier peut être créé et géré par Interface Builder à l’intérieur de Xcode.This file can be created and maintained by Interface Builder inside of Xcode.
  • ViewController.cs est le contrôleur pour la fenêtre principale.ViewController.cs is the controller for the main window. Les contrôleurs seront abordés en détail dans un autre article, mais pour l’instant, un contrôleur peut être considéré comme étant le moteur principal de n’importe quelle vue particulière.Controllers will be covered in detail in another article, but for now, a controller can be thought of the main engine of any particular view.
  • ViewController.designer.cs contient le code de base qui facilite l’intégration à l’interface utilisateur de l’écran principal.ViewController.designer.cs contains plumbing code that helps integrate with the main screen’s user interface.

Les sections suivantes vont parcourir rapidement certains de ces fichiers.The following sections, will take a quick look through some of these files. Ils seront examinés plus en détail ultérieurement, mais il est judicieux de comprendre leurs concepts de base dès maintenant.Later, they will be explored in more detail, but it’s a good idea to understand their basics now.

Main.csMain.cs

Le fichier Main.cs est très simple.The Main.cs file is very simple. Il contient une méthode Main statique qui crée une instance d’application Xamarin.Mac et transmet le nom de la classe qui gère les événements du système d’exploitation, qui est ici la classe AppDelegate :It contains a static Main method which creates a new Xamarin.Mac app instance and passes the name of the class that will handle OS events, which in this case is the AppDelegate class:

using System;
using System.Drawing;
using Foundation;
using AppKit;
using ObjCRuntime;

namespace Hello_Mac
{
    class MainClass
    {
        static void Main (string[] args)
        {
            NSApplication.Init ();
            NSApplication.Main (args);
        }
    }
}

AppDelegate.csAppDelegate.cs

Le fichier AppDelegate.cs contient une classe AppDelegate, qui est chargée de créer des fenêtres et d’écouter les événements du système d’exploitation :The AppDelegate.cs file contains an AppDelegate class, which is responsible for creating windows and listening to OS events:

using AppKit;
using Foundation;

namespace Hello_Mac
{
    [Register ("AppDelegate")]
    public class AppDelegate : NSApplicationDelegate
    {
        public AppDelegate ()
        {
        }

        public override void DidFinishLaunching (NSNotification notification)
        {
            // Insert code here to initialize your application
        }

        public override void WillTerminate (NSNotification notification)
        {
            // Insert code here to tear down your application
        }
    }
}

Ce code est probablement inconnu, sauf si le développeur a créé une application iOS auparavant, mais il est relativement simple.This code is probably unfamiliar unless the developer has built an iOS app before, but it’s fairly simple.

La méthode DidFinishLaunching est exécutée après l’instanciation de l’application et elle est en fait chargée de créer la fenêtre de l’application et de commencer le processus d’affichage de la vue qu’elle contient.The DidFinishLaunching method runs after the app has been instantiated, and it’s responsible for actually creating the app's window and beginning the process of displaying the view in it.

La méthode WillTerminate est appelée quand l’utilisateur ou le système a instancié un arrêt de l’application.The WillTerminate method will be called when the user or the system has instantiated a shutdown of the app. Le développeur doit utiliser cette méthode pour finaliser l’application avant de quitter (par exemple, l’enregistrement des préférences de l’utilisateur ou de l’emplacement et de la taille de fenêtre).The developer should use this method to finalize the app before it quits (such as saving user preferences or window size and location).

ViewController.csViewController.cs

Cocoa (et, par dérivation, CocoaTouch) utilise le modèle appelé MVC (Model View Controller).Cocoa (and by derivation, CocoaTouch) uses what’s known as the Model View Controller (MVC) pattern. La déclaration ViewController représente l’objet qui contrôle la fenêtre d’application réelle.The ViewController declaration represents the object that controls the actual app window. En règle générale, pour chaque fenêtre créée (et pour de nombreux autres éléments dans les fenêtres), il existe un contrôleur qui est chargé du cycle de vie de la fenêtre, par exemple son affichage, l’ajout de nouvelles vues (contrôles), etc.Generally, for every window created (and for many other things within windows), there is a controller, which is responsible for the window’s lifecycle, such as showing it, adding new views (controls) to it, etc.

La classe ViewController est le contrôleur de la fenêtre principale.The ViewController class is the main window’s controller. Le contrôleur est responsable du cycle de vie de la fenêtre principale.The controller is responsible for the life cycle of the main window. Elle sera étudiée en détail ultérieurement ; pour l’instant, examinons-la rapidement :This will be examined in detail later, for now take a quick look at it:

using System;

using AppKit;
using Foundation;

namespace Hello_Mac
{
    public partial class ViewController : NSViewController
    {
        public ViewController (IntPtr handle) : base (handle)
        {
        }

        public override void ViewDidLoad ()
        {
            base.ViewDidLoad ();

            // Do any additional setup after loading the view.
        }

        public override NSObject RepresentedObject {
            get {
                return base.RepresentedObject;
            }
            set {
                base.RepresentedObject = value;
                // Update the view, if already loaded.
            }
        }
    }
}

ViewController.Designer.csViewController.Designer.cs

Le fichier designer pour la classe de fenêtre principale est initialement vide, mais il sera rempli automatiquement par Visual Studio pour Mac quand l’interface utilisateur sera créée avec Xcode Interface Builder :The designer file for the Main Window class is initially empty, but it will be automatically populated by Visual Studio for Mac as the user interface is created with Xcode Interface Builder:

// WARNING
//
// This file has been generated automatically by Visual Studio for Mac to store outlets and
// actions made in the UI designer. If it is removed, they will be lost.
// Manual changes to this file may not be handled correctly.
//
using Foundation;

namespace Hello_Mac
{
    [Register ("ViewController")]
    partial class ViewController
    {
        void ReleaseDesignerOutlets ()
        {
        }
    }
}

Les fichiers designer ne doivent pas être modifiés directement, car ils sont gérés automatiquement par Visual Studio pour Mac pour fournir le code de base qui permet d’accéder aux contrôles ajoutés aux fenêtres ou vues de l’application.Designer files should not be edited directly, as they’re automatically managed by Visual Studio for Mac to provide the plumbing code that allows access to controls that have been added to any window or view in the app.

Une fois le projet d’application Xamarin.Mac créé et quelques notions de base acquises sur ses composants, basculez vers Xcode pour créer l’interface utilisateur à l’aide d’Interface Builder.With the Xamarin.Mac app project created and a basic understanding of its components, switch to Xcode to create the user interface using Interface Builder.

Info.plistInfo.plist

Le fichier Info.plist contient des informations sur l’application Xamarin.Mac telles que son Nom et son Identificateur de bundle :The Info.plist file contains information about the Xamarin.Mac app such as its Name and Bundle Identifier:

L’éditeur Visual Studio pour Mac plistThe Visual Studio for Mac plist editor

Il définit aussi le storyboard qui sera utilisé pour afficher l’interface utilisateur de l’application Xamarin.Mac sous la liste déroulante Interface principale.It also defines the Storyboard that will be used to display the user interface for the Xamarin.Mac app under the Main Interface dropdown. Dans l’exemple ci-dessus, Main dans la liste déroulante fait référence à Main.storyboard dans l’arborescence source du projet dans l’Explorateur de solutions.In example above, Main in the dropdown relates to the Main.storyboard in the project's source tree in the Solution Explorer. Il définit également les icônes de l’application en spécifiant le Catalogue de ressources qui les contient (AppIcon ici).It also defines the app's icons by specifying the Asset Catalog that contains them (AppIcon in this case).

Entitlements.plistEntitlements.plist

Le fichier Entitlements.plist de l’application contrôle les droits détenus par l’application Xamarin.Mac, par exemple Sandboxing et iCloud :The app's Entitlements.plist file controls entitlements that the Xamarin.Mac app has such as Sandboxing and iCloud:

Éditeur de droits Visual Studio pour MacThe Visual Studio for Mac entitlements editor

Pour l’exemple Hello World, aucun droit n’est requis.For the Hello World example, no entitlements will be required. La section suivante montre comment utiliser Interface Builder de Xcode pour modifier le fichier Main.storyboard et définir l’interface utilisateur de l’application Xamarin.Mac.The next section shows how to use Xcode's Interface Builder to edit the Main.storyboard file and define the Xamarin.Mac app's UI.

Introduction à Xcode et Interface BuilderIntroduction to Xcode and Interface Builder

Dans le cadre de Xcode, Apple a créé un outil appelé Interface Builder qui permet à un développeur de créer une interface utilisateur visuellement dans un concepteur.As part of Xcode, Apple has created a tool called Interface Builder, which allows a developer to create a user interface visually in a designer. Xamarin.Mac s’intègre facilement à Interface Builder, ce qui permet de créer l’interface utilisateur avec les mêmes outils que les utilisateurs Objective-C.Xamarin.Mac integrates fluently with Interface Builder, allowing UI to be created with the same tools as Objective-C users.

Pour commencer, double-cliquez sur le fichier Main.storyboard dans l’Explorateur de solutions afin de l’ouvrir pour modification dans Xcode et Interface Builder :To get started, double-click the Main.storyboard file in the Solution Explorer to open it for editing in Xcode and Interface Builder:

Fichier main. Storyboard dans le Explorateur de solutionsThe Main.storyboard file in the Solution Explorer

Cela doit lancer Xcode et ressembler à cette capture d’écran :This should launch Xcode and look like this screenshot:

Vue Interface Builder Xcode par défautThe default Xcode Interface Builder view

Avant de commencer à concevoir l’interface, jetez un coup d’œil à Xcode pour mieux connaître les principales fonctionnalités qui seront utilisées.Before starting to design the interface, take a quick overview of Xcode to orient with the main features that will be used.

Notes

Le développeur n’est pas obligé d’utiliser Xcode et Interface Builder pour créer l’interface utilisateur pour une application Xamarin.Mac ; l’interface utilisateur peut être créée directement à partir du code C#, mais cela n’entre pas dans le cadre de cet article.The developer doesn't have to use Xcode and Interface Builder to create the user interface for a Xamarin.Mac app, the UI can be created directly from C# code but that is beyond the scope of this article. Par souci de simplicité, il utilisera Interface Builder pour créer l’interface utilisateur dans le reste de ce tutoriel.For the sake of simplicity, it will be using Interface Builder to create the user interface throughout the rest of this tutorial.

Composants de XcodeComponents of Xcode

Lors de l’ouverture d’un fichier .storyboard dans Xcode à partir de Visual Studio pour Mac, il s’ouvre avec Navigation dans le projet sur la gauche, Hiérarchie des interfaces et Éditeur d’interface au milieu, et Propriétés et utilitaires sur la droite :When opening a .storyboard file in Xcode from Visual Studio for Mac, it opens with a Project Navigator on the left, the Interface Hierarchy and Interface Editor in the middle, and a Properties & Utilities section on the right:

Les différentes sections de Interface Builder dans XcodeThe various sections of Interface Builder in Xcode

Les sections suivantes décrivent la fonction de chacune de ces fonctionnalités Xcode et comment les utiliser afin de créer l’interface pour une application Xamarin.Mac.The following sections take a look at what each of these Xcode features do and how to use them to create the interface for a Xamarin.Mac app.

Navigation dans le projetProject Navigation

Lors de l’ouverture d’un fichier .storyboard pour modification dans Xcode, Visual Studio pour Mac crée un fichier projet Xcode en arrière-plan pour communiquer les modifications entre lui-même et Xcode.When opening a .storyboard file for editing in Xcode, Visual Studio for Mac creates a Xcode Project File in the background to communicate changes between itself and Xcode. Par la suite, quand le développeur revient à Visual Studio pour Mac à partir de Xcode, toutes les modifications apportées à ce projet sont synchronisées avec le projet Xamarin.Mac par Visual Studio pour Mac.Later, when the developer switches back to Visual Studio for Mac from Xcode, any changes made to this project are synchronized with the Xamarin.Mac project by Visual Studio for Mac.

La section de navigation de projet permet au développeur de naviguer entre tous les fichiers qui composent ce projet XCode de shim .The Project Navigation section allows the developer to navigate between all of the files that make up this shim Xcode project. En règle générale, il est uniquement intéressé par les fichiers .storyboard de cette liste tels que Main.storyboard.Typically, they will only be interested in the .storyboard files in this list such as Main.storyboard.

Hiérarchie des interfacesInterface Hierarchy

La section Hiérarchie des interfaces permet au développeur d’accéder facilement à plusieurs propriétés clés de l’interface utilisateur comme les espaces réservés et la fenêtre principale.The Interface Hierarchy section allows the developer to easily access several key properties of the user interface such as its Placeholders and main Window. Cette section peut être utilisée pour accéder aux éléments individuels (vues) qui composent l’interface utilisateur et ajuster la façon dont ils sont imbriqués en les faisant glisser dans la hiérarchie.This section can be used to access the individual elements (views) that make up the user interface and to adjust the way they are nested by dragging them around within the hierarchy.

Éditeur d’interfaceInterface Editor

La section de l' éditeur d’interface fournit la surface sur laquelle l’interface utilisateur est graphiquement présentée. Faites glisser les éléments de la section bibliothèque de la section Propriétés & utilitaires pour créer la conception.The Interface Editor section provides the surface on which the user interface is graphically laid out. Drag elements from the Library section of the Properties & Utilities section to create the design. Comme les éléments d’interface utilisateur (vues) sont ajoutés à l’aire de conception, ils sont ajoutés à la section Hiérarchie des interfaces dans l’ordre où ils apparaissent dans l’Éditeur d’interface.As user interface elements (views) are added to the design surface, they will be added to the Interface Hierarchy section in the order that they appear in the Interface Editor.

Propriétés et utilitairesProperties & Utilities

La section Propriétés et utilitaires est divisée en deux sections principales, Propriétés (également appelées inspecteurs) et Bibliothèque :The Properties & Utilities section is divided into two main sections, Properties (also called Inspectors) and the Library:

Inspecteur des propriétésThe Properties Inspector

Initialement, cette section est pratiquement vide, mais si le développeur sélectionne un élément dans Éditeur d’interface ou Hiérarchie des interfaces, la section Propriétés sera remplie avec des informations sur l’élément donné et les propriétés qui peuvent être ajustées.Initially this section is almost empty, however if the developer selects an element in the Interface Editor or Interface Hierarchy, the Properties section will be populated with information about the given element and properties that they can adjust.

Dans la section Propriétés, il existe huit onglets d’inspecteurs différents, comme indiqué dans l’illustration suivante :Within the Properties section, there are eight different Inspector Tabs, as shown in the following illustration:

Vue d’ensemble de tous les inspecteursAn overview of all Inspectors

Types de propriétés et d’utilitairesProperties & Utility Types

De gauche à droite, ces onglets sont :From left-to-right, these tabs are:

  • File Inspector (Inspecteur de fichier) : l’onglet Inspecteur de fichier affiche des informations sur le fichier, telles que l’emplacement et le nom du fichier Xib qui est en cours de modification.File Inspector – The File Inspector shows file information, such as the file name and location of the Xib file that is being edited.
  • Aide rapide : l’onglet Aide rapide fournit une aide contextuelle basée sur la sélection dans Xcode.Quick Help – The Quick Help tab provides contextual help based on what is selected in Xcode.
  • Identity Inspector (Inspecteur d’identité) : l’onglet Inspecteur d’identité fournit des informations sur la vue/le contrôle sélectionné.Identity Inspector – The Identity Inspector provides information about the selected control/view.
  • Attributes Inspector (Inspecteur d’attributs) : l’onglet Inspecteur d’attributs permet au développeur de personnaliser différents attributs de la vue/du contrôle sélectionné.Attributes Inspector – The Attributes Inspector allows the developer to customize various attributes of the selected control/view.
  • Size Inspector (Inspecteur de taille) : l’onglet Inspecteur de taille permet au développeur de contrôler la taille et le comportement de redimensionnement de la vue/du contrôle sélectionné.Size Inspector – The Size Inspector allows the developer to control the size and resizing behavior of the selected control/view.
  • Connections Inspector (Inspecteur de connexions) : l’onglet Inspecteur de connexions affiche les connexions des outlets et actions des contrôles sélectionnés.Connections Inspector – The Connections Inspector shows the Outlet and Action connections of the selected controls. Les outlets et actions sont abordés en détail ci-dessous.Outlets and Actions will be discussed in detail below.
  • Bindings Inspector (Inspecteur de liaisons) : l’onglet Inspecteur de liaisons permet au développeur de configurer des contrôles afin que leurs valeurs soient automatiquement liées aux modèles de données.Bindings Inspector – The Bindings Inspector allows the developer to configure controls so that their values are automatically bound to data models.
  • View Effects Inspector (Inspecteur d’effets sur les vues) : l’onglet Inspecteur d’effets sur les vues permet au développeur de spécifier des effets sur les contrôles, tels que les animations.View Effects Inspector – The View Effects Inspector allows the developer to specify effects on the controls, such as animations.

Utilisez la section Bibliothèque pour rechercher des contrôles et objets à placer dans le concepteur afin de générer graphiquement l’interface utilisateur :Use the Library section to find controls and objects to place into the designer to graphically build the user interface:

Inspecteur de bibliothèque XcodeThe Xcode Library Inspector

Création de l'interface utilisateurCreating the Interface

Les principes de base de l’IDE Xcode et d’Interface Builder couverts, le développeur peut créer l’interface utilisateur pour la vue principale.With the basics of the Xcode IDE and Interface Builder covered, the developer can create the user interface for the main view.

Suivez ces étapes pour utiliser Interface Builder :Follow these steps to use Interface Builder:

  1. Dans Xcode, faites glisser un bouton de commande à partir de la section Bibliothèque :In Xcode, drag a Push Button from the Library Section:

    Sélection d’un NSButton à partir de l’inspecteur de bibliothèqueSelecting a NSButton from the Library Inspector

  2. Placez le bouton sur la vue (sous le Contrôleur de fenêtre) dans l’Éditeur d’interface :Drop the button onto the View (under the Window Controller) in the Interface Editor:

    Ajout d’un bouton à la conception de l’interfaceAdding a Button to the interface design

  3. Cliquez sur la propriété Titre dans l’inspecteur d’attributs et remplacez le titre du bouton par Click Me :Click on the Title property in the Attribute Inspector and change the button's title to Click Me:

    Définition des propriétés du boutonSetting the button's properties

  4. Faites glisser une étiquette à partir de la section Bibliothèque :Drag a Label from the Library Section:

    Sélection d’une étiquette à partir de l’inspecteur de bibliothèqueSelecting a Label from the Library Inspector

  5. Placez l’étiquette sur la fenêtre à côté du bouton dans l’Éditeur d’interface :Drop the label onto the Window beside the button in the Interface Editor:

    Ajout d’une étiquette à la conception de l’interfaceAdding a Label to the Interface Design

  6. Saisissez la poignée droite de l’étiquette et faites-la glisser jusqu’à ce qu’elle soit près du bord de la fenêtre :Grab the right handle on the label and drag it until it is near the edge of the window:

    Redimensionnement de l’étiquetteResizing the Label

  7. Sélectionnez le bouton que vous venez d’ajouter dans l’Éditeur d’interface, puis cliquez sur l’icône Constraints Editor (Éditeur de contraintes) au bas de la fenêtre :Select the Button just added in the Interface Editor, and click the Constraints Editor icon at the bottom of the window:

    Ajout de contraintes au boutonAdding constraints to the button

  8. En haut de l’éditeur, cliquez sur les traits rouges en forme de I en haut et à gauche.At the top of the editor, click the Red I-Beams at the top and left. Quand la fenêtre est redimensionnée, le bouton reste au même emplacement dans le coin supérieur gauche de l’écran.As the window is resized, this will keep the button in the same location at the top left corner of the screen.

  9. Vérifiez ensuite les zones Hauteur et Largeur, et utilisez les tailles par défaut.Next, check the Height and Width boxes and use the default sizes. Le bouton conserve la même taille quand la fenêtre est redimensionnée.This keeps the button at the same size when the window resizes.

  10. Cliquez sur le bouton Add 4 Constraints (Ajouter 4 contraintes) pour ajouter les contraintes et fermer l’éditeur.Click the Add 4 Constraints button to add the constraints and close the editor.

  11. Sélectionnez l’étiquette, puis cliquez à nouveau sur l’icône de l' éditeur de contraintes :Select the label and click the Constraints Editor icon again:

    Ajout de contraintes à l’étiquetteAdding constraints to the label

  12. Un clic sur les traits rouges en forme de I en haut, à droite et à gauche de l’Éditeur de contraintes indique à l’étiquette de rester aux emplacements X et Y donnés, et d’augmenter ou de réduire sa taille quand la fenêtre est redimensionnée dans l’application en cours d’exécution.By clicking Red I-Beams at the top, right and left of the Constraints Editor, tells the label to be stuck to its given X and Y locations and to grow and shrink as the window is resized in the running application.

  13. Là encore, vérifiez la zone Hauteur et utilisez la taille par défaut, puis cliquez sur le bouton Ajouter 4 contraintes pour ajouter les contraintes et fermer l’éditeur.Again, check the Height box and use the default size, then click the Add 4 Constraints button to add the constraints and close the editor.

  14. Enregistrez les modifications apportées à l’interface utilisateur.Save the changes to the user interface.

Lors du redimensionnement et du déplacement des contrôles, notez qu’Interface Builder donne de brèves indications utiles basées sur Human Interface Guidelines pour macOS.While resizing and moving controls around, notice that Interface Builder gives helpful snap hints that are based on macOS Human Interface Guidelines. Ces instructions aident le développeur à créer des applications de haute qualité avec un aspect familier pour les utilisateurs Mac.These guidelines will help the developer to create high quality apps that will have a familiar look and feel for Mac users.

Examinez la section Hiérarchie des interfaces pour connaître la manière dont la disposition et la hiérarchie des éléments qui composent l’interface utilisateur sont affichés :Look in the Interface Hierarchy section to see how the layout and hierarchy of the elements that make up the user interface are shown:

Sélection d’un élément dans la hiérarchie d’interfaceSelecting an element in the Interface Hierarchy

À partir de là, le développeur peut sélectionner des éléments à modifier ou à déplacer pour réorganiser les éléments d’interface utilisateur, si nécessaire.From here the developer can select items to edit or drag to reorder UI elements if needed. Par exemple, si un élément d’interface utilisateur a été couvert par un autre élément, il peut le faire glisser vers le bas de la liste pour qu’il devienne le premier élément de la fenêtre.For example, if a UI element was being covered by another element, they could drag it to the bottom of the list to make it the top-most item on the window.

Une fois l’interface utilisateur créée, le développeur doit exposer les éléments d’interface utilisateur pour que Xamarin.Mac puisse y accéder et interagir avec eux dans le code C#.With the user interface created, the developer will need to expose the UI items so that Xamarin.Mac can access and interact with them in C# code. La section suivante, Outlets et actions, montre comment procéder.The next section, Outlets and Actions, shows how to do this.

Outlets et actionsOutlets and Actions

Que sont les outlets et actions ?So what are Outlets and Actions? Dans la programmation de l’interface utilisateur .NET traditionnelle, un contrôle dans l’interface utilisateur est automatiquement exposé en tant que propriété quand il est ajouté.In traditional .NET user interface programming, a control in the user interface is automatically exposed as a property when it’s added. Le fonctionnement est différent dans Mac : le simple ajout d’un contrôle à une vue ne le rend pas accessible au code.Things work differently in Mac, simply adding a control to a view doesn’t make it accessible to code. Le développeur doit exposer explicitement l’élément d’interface utilisateur au code.The developer must explicitly expose the UI element to code. Pour ce faire, Apple fournit deux options :In order do this, Apple provides two options:

  • Outlets : les outlets ressemblent à des propriétés.Outlets – Outlets are analogous to properties. Si le développeur relie un contrôle à un outlet, il est exposé au code via une propriété afin de pouvoir effectuer des opérations comme attacher des gestionnaires d’événements, appeler des méthodes, etc.If the developer wires up a control to an Outlet, it’s exposed to the code via a property, so they can do things like attach event handlers, call methods on it, etc.
  • Actions : les actions ressemblent au modèle de commande dans WPF.Actions – Actions are analogous to the command pattern in WPF. Par exemple, quand une action est effectuée sur un contrôle, comme un clic sur un bouton, le contrôle appelle automatiquement une méthode dans le code.For example, when an Action is performed on a control, say a button click, the control will automatically call a method in the code. Les actions sont efficaces et pratiques, car le développeur peut associer plusieurs contrôles à la même action.Actions are powerful and convenient because the developer can wire up many controls to the same Action.

Dans Xcode, les outlets et actions sont ajoutés directement dans le code via un déplacement des contrôles.In Xcode, Outlets and Actions are added directly in code via Control-dragging. Plus précisément, cela signifie que, pour créer un outlet ou une action, le développeur choisit un élément de contrôle auquel ajouter un outlet ou une action, maintient la touche Ctrl enfoncée sur le clavier et fait glisser ce contrôle directement dans le code.More specifically, this means that to create an Outlet or Action, the developer will choose a control element to add an Outlet or Action to, hold down the Control key on the keyboard, and drag that control directly into the code.

Pour les développeurs Xamarin.Mac, cela signifie que le développeur fait glisser dans le stub Objective-C des fichiers qui correspondent au fichier C# à l’endroit où il souhaite créer l’outlet ou l’action.For Xamarin.Mac developers, this means that the developer will drag into the Objective-C stub files that correspond to the C# file where they want to create the Outlet or Action. Visual Studio pour Mac a créé un fichier appelé ViewController.h dans le cadre du projet Xcode shim qu’il a généré pour utiliser Interface Builder :Visual Studio for Mac created a file called ViewController.h as part of the shim Xcode Project it generated to use Interface Builder:

Affichage de la source dans XcodeViewing source in Xcode

Ce fichier stub .h reflète le fichier ViewController.designer.cs ajouté automatiquement à un projet Xamarin.Mac quand un NSWindow est créé.This stub .h file mirrors the ViewController.designer.cs that is automatically added to a Xamarin.Mac project when a new NSWindow is created. Ce fichier permet de synchroniser les modifications apportées par Interface Builder et représente l’emplacement où les outlets et actions sont créés afin que les éléments d’interface utilisateur soient exposés au code C#.This file will be used to synchronize the changes made by Interface Builder and is where the Outlets and Actions are created so that UI elements are exposed to C# code.

Ajout d’un outletAdding an Outlet

Une fois quelques notions de base acquises sur les outlets et actions, créez un outlet pour exposer l’étiquette créée à notre code C#.With a basic understanding of what Outlets and Actions are, create an Outlet to expose the Label created to our C# code.

Effectuez les actions suivantes :Do the following:

  1. Dans Xcode, dans le coin supérieur tout à droite de l’écran, cliquez sur le bouton Double Circle (Cercle double) pour ouvrir l’Assistant Editor (Éditeur d’Assistant) :In Xcode at the far right top-hand corner of the screen, click the Double Circle button to open the Assistant Editor:

    Affichage de l’éditeur de l’AssistantDisplaying the Assistant Editor

  2. Xcode passe en mode fractionné avec l’Éditeur d’interface d’un côté et un Éditeur de code de l’autre.The Xcode will switch to a split-view mode with the Interface Editor on one side and a Code Editor on the other.

  3. Notez que Xcode a automatiquement sélectionné le fichier ViewController.m dans l’Éditeur de code, ce qui est incorrect.Notice that Xcode has automatically picked the ViewController.m file in the Code Editor, which is incorrect. Suite à la discussion sur la définition des outlets et actions ci-dessus, le développeur doit sélectionner le fichier ViewController.h.From the discussion on what Outlets and Actions are above, the developer will need to have the ViewController.h selected.

  4. En haut de l’Éditeur de code cliquez sur le Automatic Link (Lien automatique) et sélectionnez le fichier ViewController.h :At the top of the Code Editor click on the Automatic Link and select the ViewController.h file:

    Sélection du fichier appropriéSelecting the correct file

  5. Le fichier approprié doit maintenant être sélectionné pour Xcode :Xcode should now have the correct file selected:

    Affichage du fichier ViewController. hViewing the ViewController.h file

  6. La dernière étape était très importante ! : si vous n’avez pas sélectionné le fichier approprié, vous ne pourrez pas créer des outlets ni des actions, ou ils seront exposés à la classe incorrecte en C# !The last step was very important!: if you didn't have the correct file selected, you won't be able to create Outlets and Actions, or they will be exposed to the wrong class in C#!

  7. Dans l’Éditeur d’interface, maintenez la touche Ctrl enfoncée sur le clavier, puis cliquez et faites glisser l’étiquette créée précédemment sur l’éditeur de code sous le code @interface ViewController : NSViewController {} :In the Interface Editor, hold down the Control key on the keyboard and click-drag the label created above onto the code editor just below the @interface ViewController : NSViewController {} code:

    Glissement pour créer un orificeDragging to create an Outlet

  8. Une boîte de dialogue s’affiche.A dialog box will be displayed. Laissez l’option Connexion définie sur Outlet et entrez ClickedLabel pour Nom :Leave the Connection set to Outlet and enter ClickedLabel for the Name:

    Définition de la sortieDefining the Outlet

  9. Cliquez sur le bouton Se connecter pour créer l’outlet :Click the Connect button to create the Outlet:

    Affichage de la sortie finaleViewing the final Outlet

  10. Enregistrez les modifications du fichier.Save the changes to the file.

Ajout d’une actionAdding an Action

Ensuite, exposez le bouton au code C#.Next, expose the button to C# code. Tout comme l’étiquette ci-dessus, le développeur peut associer le bouton à un outlet.Just like the Label above, the developer could wire the button up to an Outlet. Étant donné que nous voulons uniquement répondre au bouton sur lequel le clic est effectué, utilisez une action à la place.Since we only want to respond to the button being clicked, use an Action instead.

Effectuez les actions suivantes :Do the following:

  1. Vérifiez que Xcode est encore dans l’Éditeur d’Assistant et que le fichier ViewController.h est visible dans l’Éditeur de code.Ensure that Xcode is still in the Assistant Editor and the ViewController.h file is visible in the Code Editor.

  2. Dans l’Éditeur d’interface, maintenez la touche Ctrl enfoncée sur le clavier, puis cliquez et faites glisser le bouton créé précédemment sur l’éditeur de code sous le code @property (assign) IBOutlet NSTextField *ClickedLabel; :In the Interface Editor, hold down the Control key on the keyboard and click-drag the button created above onto the code editor just below the @property (assign) IBOutlet NSTextField *ClickedLabel; code:

    Glissement pour créer une actionDragging to create an Action

  3. Remplacez le type de Connexion par Action :Change the Connection type to Action:

    Définition de l’actionDefining the Action

  4. Entrez ClickedButton comme Nom :Enter ClickedButton as the Name:

    Attribution d’un nom à la nouvelle actionNaming the new Action

  5. Cliquez sur le bouton Se connecter pour créer l’action :Click the Connect button to create Action:

    Affichage de l’action finaleViewing the final Action

  6. Enregistrez les modifications du fichier.Save the changes to the file.

Avec l’interface utilisateur reliée et exposée au code C#, revenez à Visual Studio pour Mac et laissez-le synchroniser les modifications effectuées dans Xcode et Interface Builder.With the user interface wired-up and exposed to C# code, switch back to Visual Studio for Mac and let it synchronize the changes made in Xcode and Interface Builder.

Notes

Il a probablement fallu beaucoup de temps pour créer l’interface utilisateur et les prises et actions pour cette première application, et cela peut sembler un travail considérable, mais un grand nombre de nouveaux concepts ont été introduits et beaucoup de temps ont été consacrés à la nouvelle terre.It probably took a long time to create the user interface and Outlets and Actions for this first app, and it may seem like a lot of work, but a lot of new concepts were introduced and a lot of time was spent covering new ground. Après avoir utilisé Interface Builder pendant un certain temps, cette interface ainsi que l’ensemble des outlets et actions peuvent être créés en seulement une ou deux minutes.After practicing for a while and working with Interface Builder, this interface and all its Outlets and Actions can be created in just a minute or two.

Synchronisation des modifications avec XcodeSynchronizing Changes with Xcode

Quand le développeur revient à Visual Studio pour Mac à partir de Xcode, toutes les modifications apportées à Xcode sont automatiquement synchronisées avec le projet Xamarin.Mac.When the developer switches back to Visual Studio for Mac from Xcode, any changes that they have made in Xcode will automatically be synchronized with the Xamarin.Mac project.

Sélectionnez le fichier ViewController.designer.cs dans l’Explorateur de solutions pour voir comment l’outlet et l’action ont été reliés dans le code C# :Select the ViewController.designer.cs in the Solution Explorer to see how the Outlet and Action have been wired up in the C# code:

Synchronisation des modifications avec XcodeSynchronizing changes with Xcode

Notez comment les deux définitions dans le fichier ViewController.designer.cs :Notice how the two definitions in the ViewController.designer.cs file:

[Outlet]
AppKit.NSTextField ClickedLabel { get; set; }

[Action ("ClickedButton:")]
partial void ClickedButton (Foundation.NSObject sender);

S’alignent sur les définitions dans le fichier ViewController.h dans Xcode :Line up with the definitions in the ViewController.h file in Xcode:

@property (assign) IBOutlet NSTextField *ClickedLabel;
- (IBAction)ClickedButton:(id)sender;

Visual Studio pour Mac écoute les modifications apportées au fichier .h, puis synchronise automatiquement ces modifications dans le fichier . designer.cs respectif pour les exposer à l’application.Visual Studio for Mac listens for changes to the .h file, and then automatically synchronizes those changes in the respective .designer.cs file to expose them to the app. Notez que ViewController.designer.cs étant une classe partielle, Visual Studio pour Mac n’a pas à modifier ViewController.cs, ce qui remplacerait toutes les modifications que le développeur a apportées à la classe.Notice that ViewController.designer.cs is a partial class, so that Visual Studio for Mac doesn't have to modify ViewController.cs which would overwrite any changes that the developer has made to the class.

Normalement, le développeur ne devra jamais ouvrir ViewController.designer.cs ; il est présenté ici à des fins pédagogiques uniquement.Normally, the developer will never need to open the ViewController.designer.cs, it was presented here for educational purposes only.

Notes

Dans la plupart des cas, Visual Studio pour Mac détecte automatiquement les modifications effectuées dans Xcode et les synchronise avec le projet Xamarin.Mac.In most situations, Visual Studio for Mac will automatically see any changes made in Xcode and sync them to the Xamarin.Mac project. Dans le cas isolé où la synchronisation ne se produit pas automatiquement, revenez à Xcode, puis à nouveau à Visual Studio pour Mac.In the off occurrence that synchronization doesn't automatically happen, switch back to Xcode and then back to Visual Studio for Mac again. Cela déclenche normalement un cycle de synchronisation.This will normally kick off a synchronization cycle.

Écriture du codeWriting the Code

Avec l’interface utilisateur créée et ses éléments d’interface utilisateur exposés au code via des prises et des actions, nous sommes enfin prêts à écrire le code pour donner vie au programme.With the user interface created and its UI elements exposed to code via Outlets and Actions, we are finally ready to write the code to bring the program to life.

Pour cet exemple d’application, à chaque clic sur le premier bouton, l’étiquette est actualisée pour afficher le nombre de clics effectués.For this sample app, every time the first button is clicked, the label will be updated to show how many times the button has been clicked. Pour ce faire, ouvrez le fichier ViewController.cs pour modification en double-cliquant dessus dans l’Explorateur de solutions :To accomplish this, open the ViewController.cs file for editing by double-clicking it in the Solution Explorer:

Affichage du fichier ViewController.cs dans Visual Studio pour MacViewing the ViewController.cs file in Visual Studio for Mac

Tout d’abord, créez une variable de niveau classe dans la classe ViewController pour effectuer le suivi du nombre de clics effectués.First, create a class-level variable in the ViewController class to track the number of clicks that have happened. Modifiez la définition de classe pour qu’elle ressemble à ce qui suit :Edit the class definition and make it look like the following:

namespace Hello_Mac
{
    public partial class ViewController : NSViewController
    {
        private int numberOfTimesClicked = 0;
        ...

Ensuite, dans la même classe (ViewController), remplacez la méthode ViewDidLoad et ajoutez du code afin de définir le message initial pour l’étiquette :Next, in the same class (ViewController), override the ViewDidLoad method and add some code to set the initial message for the label:

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();

    // Set the initial value for the label
    ClickedLabel.StringValue = "Button has not been clicked yet.";
}

Utilisez ViewDidLoad au lieu d’une autre méthode comme Initialize, car ViewDidLoad est appelée après que le système d’exploitation a chargé et instancié l’interface utilisateur à partir du fichier .storyboard.Use ViewDidLoad, instead of another method such as Initialize, because ViewDidLoad is called after the OS has loaded and instantiated the user interface from the .storyboard file. Si le développeur tente d’accéder au contrôle label avant le chargement et l’instanciation complets du fichier .storyboard, il obtient une erreur NullReferenceException, car le contrôle label n’existe pas encore.If the developer tried to access the label control before the .storyboard file has been fully loaded and instantiated, they would get a NullReferenceException error because the label control would not exist yet.

Ensuite, ajoutez le code pour répondre à l’utilisateur qui clique sur le bouton.Next, add the code to respond to the user clicking the button. Ajoutez la méthode partielle suivante à la classe ViewController :Add the following partial method to the ViewController class:

partial void ClickedButton (Foundation.NSObject sender) {
    // Update counter and label
    ClickedLabel.StringValue = string.Format("The button has been clicked {0} time{1}.",++numberOfTimesClicked, (numberOfTimesClicked < 2) ? "" : "s");
}

Ce code est associé à l’action créée dans Xcode et Interface Builder, et est appelé chaque fois que l’utilisateur clique sur le bouton.This code attaches to the Action created in Xcode and Interface Builder and will be called any time the user clicks the button.

Test de l’applicationTesting the Application

Il est temps de générer et d’exécuter l’application pour vérifier qu’elle s’exécute comme prévu.It’s time to build and run the app to make sure it runs as expected. Le développeur peut la générer et l’exécuter en une seule étape, ou il peut la générer sans l’exécuter.The developer can build and run all in one step, or they can build it without running it.

Chaque fois qu’une application est générée, le développeur peut choisir le type de génération :Whenever an app is built, the developer can choose what kind of build they want:

  • Debug : une version Debug est compilée dans un fichier .app (application) avec un ensemble de métadonnées supplémentaires qui permettent au développeur de procéder au débogage pendant que l’application est en cours d’exécution.Debug – A debug build is compiled into an .app (application) file with a bunch of extra metadata that allows the developer to debug what’s happening while the app is running.
  • Release : une version Release crée également un fichier .app, mais qui n’inclut pas les informations de débogage ; il est donc plus petit et s’exécute plus rapidement.Release – A release build also creates an .app file, but it doesn’t include debug information, so it’s smaller and executes faster.

Le développeur peut sélectionner le type de génération à partir du Sélecteur de configurations dans le coin supérieur gauche de l’écran Visual Studio pour Mac :The developer can select the type of build from the Configuration Selector at the upper left-hand corner of the Visual Studio for Mac screen:

Sélection d’une version DebugSelecting a Debug build

Génération de l'applicationBuilding the Application

Dans le cas de cet exemple, comme nous voulons simplement une version Debug, vérifiez que l’option Debug est sélectionnée.In the case of this example, we just want a debug build, so ensure that Debug is selected. Générez d’abord l’application en appuyant sur ⌘+B ou, à partir du menu **Générer **, choisissez Générer tout.Build the app first by either pressing ⌘B, or from the Build menu, choose Build All.

Si aucune erreur ne s’affiche, un message La génération a réussi apparaît dans la barre d’état Visual Studio pour Mac.If there weren't any errors, a Build Succeeded message will be displayed in Visual Studio for Mac's status bar. Si des erreurs s’affichent, passez en revue le projet et vérifiez que les étapes décrites ci-dessus ont été correctement suivies.If there were errors, review the project and make sure that the steps above have been followed correctly. Commencez par confirmer que le code (à la fois dans Xcode et dans Visual Studio pour Mac) correspond au code dans le didacticiel.Start by confirming that the code (both in Xcode and in Visual Studio for Mac) matches the code in the tutorial.

Exécution de l'applicationRunning the Application

Il existe trois façons d’exécuter l’application :There are three ways to run the app:

  • Appuyez sur ⌘ + entrée.Press ⌘+Enter.
  • Dans le menu Exécuter, choisissez Déboguer.From the Run menu, choose Debug.
  • Cliquez sur le bouton Play (Lire) dans la barre d’outils Visual Studio pour Mac (juste au-dessus de l’Explorateur de solutions).Click the Play button in the Visual Studio for Mac toolbar (just above the Solution Explorer).

L’application est générée (si ce n’est pas déjà fait), démarre en mode débogage et affiche sa fenêtre d’interface principale :The app will build (if it hasn’t been built already), start in debug mode and display its main interface window:

Exécution de l'applicationRunning the application

Si plusieurs clics sont effectués sur le bouton, l’étiquette doit être mise à jour avec le nombre :If the button is clicked a few times, the label should be updated with the count:

Indication des résultats d’un clic sur le boutonShowing the results of clicking the button

Étapes suivantesWhere to Next

Les principes de base de l’utilisation d’une application Xamarin.Mac étant acquis, examinez les documents suivants pour approfondir vos connaissances :With the basics of working with a Xamarin.Mac application down, take a look at the following documents to get a deeper understanding:

  • Introduction aux storyboards : Cet article présente l’utilisation des storyboards dans une application Xamarin.Mac.Introduction to Storyboards - This article provides an introduction to working with Storyboards in a Xamarin.Mac app. Il aborde la création et la gestion de l’interface utilisateur de l’application à l’aide de storyboards et d’Interface Builder de Xcode.It covers creating and maintaining the app's UI using storyboards and Xcode's Interface Builder.
  • Fenêtres : Cet article aborde l’utilisation des fenêtres et des panneaux dans une application Xamarin.Mac.Windows - This article covers working with Windows and Panels in a Xamarin.Mac application. Il aborde la création et la gestion des fenêtres et des panneaux dans Xcode et Interface Builder, le chargement des fenêtres et des panneaux à partir des fichiers .xib, l’utilisation des fenêtres et la réponse aux fenêtres en code C#.It covers creating and maintaining Windows and Panels in Xcode and Interface builder, loading Windows and Panels from .xib files, using Windows and responding to Windows in C# code.
  • Boîtes de dialogue : Cet article aborde l’utilisation des boîtes de dialogue et des fenêtres modales dans une application Xamarin.Mac.Dialogs - This article covers working with Dialogs and Modal Windows in a Xamarin.Mac application. Il aborde la création et la gestion des fenêtres modales dans Xcode et Interface Builder, l’utilisation des boîtes de dialogue standard, l’affichage des fenêtres et la réponse aux fenêtres en code C#.It covers creating and maintaining Modal Windows in Xcode and Interface builder, working with standard dialogs, displaying and responding to Windows in C# code.
  • Alertes : Cet article aborde l’utilisation des alertes dans une application Xamarin.Mac.Alerts - This article covers working with Alerts in a Xamarin.Mac application. Il aborde la création et l’affichage des alertes à partir de code C# ainsi que la réponse aux alertes.It covers creating and displaying Alerts from C# code and responding to Alerts.
  • Menus : les menus sont utilisés dans différentes parties de l’interface utilisateur d’une application Mac, du menu principal de l’application en haut de l’écran jusqu’aux menus contextuels qui peuvent apparaître n’importe où dans une fenêtre.Menus - Menus are used in various parts of a Mac application's user interface; from the application's main menu at the top of the screen to pop up and contextual menus that can appear anywhere in a window. Les menus sont une partie intégrante de l’expérience utilisateur d’une application Mac.Menus are an integral part of a Mac application's user experience. Cet article aborde l’utilisation des menus Cocoa dans une application Xamarin.Mac.This article covers working with Cocoa Menus in a Xamarin.Mac application.
  • Barres d’outils : Cet article aborde l’utilisation des barres d’outils dans une application Xamarin.Mac.Toolbars - This article covers working with Toolbars in a Xamarin.Mac application. Il aborde la création et la maintenance.It covers creating and maintaining. Les barres d’outils dans Xcode et Interface Builder, l’exposition des éléments de barres d’outils au code à l’aide des outlets et actions, l’activation et la désactivation des éléments de barres d’outils, et enfin la réponse aux éléments de barres d’outils en code C#.Toolbars in Xcode and Interface builder, how to expose the Toolbar Items to code using Outlets and Actions, enabling and disabling Toolbar Items and finally responding to Toolbar Items in C# code.
  • Vues Table : Cet article aborde l’utilisation des vues Table dans une application Xamarin.Mac.Table Views - This article covers working with Table Views in a Xamarin.Mac application. Il aborde la création et la gestion des vues Table dans Xcode et Interface Builder, l’exposition des éléments des vues Table au code à l’aide des outlets et actions, le remplissage des éléments des vues Table et enfin la réponse aux éléments des vues Table en code C#.It covers creating and maintaining Table Views in Xcode and Interface builder, how to expose the Table View Items to code using Outlets and Actions, populating Table Items and finally responding to Table View Items in C# code.
  • Modes Plan : Cet article aborde l’utilisation des modes Plan dans une application Xamarin.Mac.Outline Views - This article covers working with Outline Views in a Xamarin.Mac application. Il aborde la création et la gestion des modes Plan dans Xcode et Interface Builder, l’exposition des éléments des modes Plan au code à l’aide des outlets et actions, le remplissage des éléments des modes Plan et enfin la réponse aux éléments des modes Plan en code C#.It covers creating and maintaining Outline Views in Xcode and Interface builder, how to expose the Outline View Items to code using Outlets and Actions, populating Outline Items and finally responding to Outline View Items in C# code.
  • Listes de sources : Cet article aborde l’utilisation des listes de sources dans une application Xamarin.Mac.Source Lists - This article covers working with Source Lists in a Xamarin.Mac application. Il aborde la création et la gestion des listes de sources dans Xcode et Interface Builder, l’exposition des éléments des listes de sources au code à l’aide des outlets et actions, le remplissage des éléments des listes de sources et enfin la réponse aux éléments des listes de sources en code C#.It covers creating and maintaining Source Lists in Xcode and Interface builder, how to expose the Source Lists Items to code using Outlets and Actions, populating Source List Items and finally responding to Source List Items in C# code.
  • Vues des collections : Cet article aborde l’utilisation des vues des collections dans une application Xamarin.Mac.Collection Views - This article covers working with Collection Views in a Xamarin.Mac application. Il aborde la création et la gestion des vues des collections dans Xcode et Interface Builder, l’exposition des éléments des vues des collections au code à l’aide des outlets et actions, le remplissage des vues des collections et enfin la réponse aux vues des collections en code C#.It covers creating and maintaining Collection Views in Xcode and Interface builder, how to expose the Collection View elements to code using Outlets and Actions, populating Collection Views and finally responding to Collection Views in C# code.
  • Utilisation des images : Cet article aborde l’utilisation des images et icônes dans une application Xamarin.Mac.Working with Images - This article covers working with Images and Icons in a Xamarin.Mac application. Il aborde la création et la gestion des images nécessaires pour créer l’icône d’une application et l’utilisation des images à la fois dans le code C# et dans Interface Builder de Xcode.It covers creating and maintaining the images needed to create an app's Icon and using Images in both C# code and Xcode's Interface Builder.

La Galerie d’exemples Mac contient des exemples de code prêts à l’emploi pour vous aider à vous familiariser avec Xamarin.Mac.The Mac Samples Gallery contains ready-to-use code examples to help learn Xamarin.Mac.

L’exemple d’application SourceWriter est un exemple d’une application Xamarin.Mac complète qui inclut une grande partie des fonctionnalités qu’un utilisateur s’attend à trouver dans une application Mac classique.One complete Xamarin.Mac app that includes many of the features a user would expect to find in a typical Mac application is the SourceWriter Sample App. SourceWriter est un éditeur de code source simple qui assure la prise en charge de la complétion de code et de la coloration syntaxique de base.SourceWriter is a simple source code editor that provides support for code completion and simple syntax highlighting.

Le code SourceWriter a été entièrement commenté et, le cas échéant, des liens ont été fournis à partir des principales technologies ou méthodes vers des informations pertinentes dans la documentation Xamarin.Mac.The SourceWriter code has been fully commented and, where available, links have been provided from key technologies or methods to relevant information in the Xamarin.Mac documentation.

RécapitulatifSummary

Cet article a couvert les principes de base d’une application Xamarin.Mac standard.This article covered the basics of a standard Xamarin.Mac app. Il a abordé la création d’une application dans Visual Studio pour Mac, la conception de l’interface utilisateur dans Xcode et Interface Builder, l’exposition des éléments d’interface utilisateur au code C# à l’aide des outlets et actions, l’ajout de code pour utiliser les éléments d’interface utilisateur et, enfin, la génération et le test d’une application Xamarin.Mac.It covered creating a new app in Visual Studio for Mac, designing the user interface in Xcode and Interface Builder, exposing UI elements to C# code using Outlets and Actions, adding code to work with the UI elements and finally, building and testing a Xamarin.Mac app.