Partager via

Création d’une application Xamarin.iOS à l’aide de l’API Elements

  • Article

Cet article s’appuie sur les informations présentées dans l’article Présentation de la boîte de dialogue MonoTouch. Il présente une procédure pas à pas qui montre comment utiliser MonoTouch.Dialog (MT). D) API Elements pour commencer rapidement à créer une application avec MT.D.

Dans cette procédure pas à pas, nous allons utiliser le mt. API D Elements pour créer un style maître-détail d’application qui affiche une liste de tâches. Lorsque l’utilisateur sélectionne le + bouton dans la barre de navigation, une nouvelle ligne est ajoutée à la table de la tâche. La sélection de la ligne accède à l’écran de détail qui nous permet de mettre à jour la description de la tâche et la date d’échéance, comme illustré ci-dessous :

La sélection de la ligne accède à l’écran de détail qui nous permet de mettre à jour la description de la tâche et la date d’échéance

Configuration de MT. D

MT. D est distribué avec Xamarin.iOS. Pour l’utiliser, cliquez avec le bouton droit sur le nœud Références d’un projet Xamarin.iOS dans Visual Studio 2017 ou Visual Studio pour Mac et ajoutez une référence à l’assembly MonoTouch.Dialog-1. Ensuite, ajoutez using MonoTouch.Dialog des instructions dans votre code source si nécessaire.

Procédure pas à pas de l’API Elements

Dans l’article Introduction à MonoTouch Dialog , nous avons acquis une compréhension solide des différentes parties de MT.D. Utilisons l’API Elements pour les regrouper dans une application.

Configuration de l’application multi-écran

Pour démarrer le processus de création d’écran, MonoTouch.Dialog crée un DialogViewController, puis ajoute un RootElement.

Pour créer une application multi-écran avec MonoTouch.Dialog, nous devons :

  1. Créez une classe UINavigationController.
  2. Créez une classe DialogViewController.
  3. Ajoutez la DialogViewController valeur en tant que racine du UINavigationController.
  4. Ajouter un RootElement à l’élément DialogViewController.
  5. Ajouter Sections et Elements à l’élément RootElement.

Utilisation d’un UINavigationController

Pour créer une application de style de navigation, nous devons créer un UINavigationController, puis l’ajouter comme RootViewController dans la FinishedLaunching méthode du AppDelegate. Pour effectuer l’utilisation UINavigationController de MonoTouch.Dialog, nous ajoutons un DialogViewController à l’exemple UINavigationController ci-dessous :

public override bool FinishedLaunching (UIApplication app, NSDictionary options)
{
    _window = new UIWindow (UIScreen.MainScreen.Bounds);
            
    _rootElement = new RootElement ("To Do List"){new Section ()};

    // code to create screens with MT.D will go here …

    _rootVC = new DialogViewController (_rootElement);
    _nav = new UINavigationController (_rootVC);
    _window.RootViewController = _nav;
    _window.MakeKeyAndVisible ();
            
    return true;
}

Le code ci-dessus crée une instance d’un RootElement et le transmet dans le DialogViewController. Le DialogViewController tout a toujours en RootElement haut de sa hiérarchie. Dans cet exemple, le fichier RootElement est créé avec la chaîne « To Do List », qui sert de titre dans la barre de navigation du contrôleur de navigation. À ce stade, l’exécution de l’application présente l’écran ci-dessous :

L’exécution de l’application présente l’écran affiché ici

Voyons comment utiliser la structure hiérarchique de Sections MonoTouch.Dialog et Elements ajouter d’autres écrans.

Création des écrans de boîte de dialogue

A DialogViewController est une UITableViewController sous-classe que MonoTouch.Dialog utilise pour ajouter des écrans. MonoTouch.Dialog crée des écrans en ajoutant un RootElement à un DialogViewController, comme nous l’avons vu ci-dessus. Les RootElement instances peuvent Section avoir des instances qui représentent les sections d’une table. Les sections sont constituées d’éléments, d’autres sections ou même d’autres RootElements. En imbrication RootElements, MonoTouch.Dialog crée automatiquement une application de style de navigation, comme nous le verrons ensuite.

Utilisation de DialogViewController

Le DialogViewController, étant une UITableViewController sous-classe, a comme UITableView vue. Dans cet exemple, nous voulons ajouter des éléments au tableau chaque fois que le + bouton est appuyé. Étant donné que le DialogViewController fichier a été ajouté à un UINavigationController, nous pouvons utiliser la NavigationItempropriété de RightBarButton l’utilisateur pour ajouter le + bouton, comme indiqué ci-dessous :

_addButton = new UIBarButtonItem (UIBarButtonSystemItem.Add);
_rootVC.NavigationItem.RightBarButtonItem = _addButton;

Lorsque nous avons créé le RootElement précédent, nous l’avons passé une seule Section instance afin que nous puissions ajouter des éléments au fur et à mesure que le + bouton est appuyé par l’utilisateur. Nous pouvons utiliser le code suivant pour effectuer cette opération dans le gestionnaire d’événements pour le bouton :

_addButton.Clicked += (sender, e) => {                
    ++n;
                
    var task = new Task{Name = "task " + n, DueDate = DateTime.Now};
                
    var taskElement = new RootElement (task.Name) {
        new Section () {
            new EntryElement (task.Name, "Enter task description", task.Description)
        },
        new Section () {
            new DateElement ("Due Date", task.DueDate)
        }
    };
    _rootElement [0].Add (taskElement);
};

Ce code crée un Task objet chaque fois que le bouton est appuyé. Les éléments suivants illustrent l’implémentation simple de la Task classe :

public class Task
{   
    public Task ()
    {
    }
      
    public string Name { get; set; }
        
    public string Description { get; set; }

    public DateTime DueDate { get; set; }
}

La propriété de Name la tâche est utilisée pour créer le légende de la RootElementtâche, ainsi qu’une variable de compteur nommée n incrémentée pour chaque nouvelle tâche. MonoTouch.Dialog transforme les éléments en lignes ajoutées au TableView moment où chacun taskElement est ajouté.

Présentation et gestion des écrans de dialogue

Nous avons utilisé une RootElement option pour que MonoTouch.Dialog crée automatiquement un nouvel écran pour les détails de chaque tâche et y accède lorsqu’une ligne est sélectionnée.

L’écran détails de la tâche lui-même se compose de deux sections ; chacune de ces sections contient un seul élément. Le premier élément est créé à partir d’une EntryElement ligne modifiable pour la propriété de Description la tâche. Lorsque l’élément est sélectionné, un clavier pour la modification de texte est présenté comme indiqué ci-dessous :

Lorsque l’élément est sélectionné, un clavier pour la modification de texte est présenté comme indiqué

La deuxième section contient un DateElement qui nous permet de gérer la propriété de DueDate la tâche. La sélection de la date charge automatiquement un sélecteur de dates comme indiqué :

La sélection de la date charge automatiquement un sélecteur de dates en tant que

Dans les EntryElement deux cas DateElement (ou pour tout élément d’entrée de données dans MonoTouch.Dialog), toutes les modifications apportées aux valeurs sont conservées automatiquement. Nous pouvons le démontrer en modifiant la date, puis en accédant de retour et de retour entre l’écran racine et divers détails de tâche, où les valeurs des écrans de détails sont conservées.

Résumé

Cet article a présenté une procédure pas à pas qui a montré comment utiliser l’API Éléments MonoTouch.Dialog. Il a abordé les étapes de base pour créer une application multi-écran avec MT. D, notamment comment utiliser un DialogViewController élément et comment ajouter des éléments et des sections pour créer des écrans. En outre, il a montré comment utiliser MT. D conjointement avec un UINavigationController.