Verwenden von JSON zum Erstellen einer Benutzeroberfläche in Xamarin.iOS

  • Artikel

MonoTouch.Dialog (MT. D) unterstützt die dynamische UI-Generierung über JSON-Daten. In diesem Tutorial erfahren Sie, wie Sie ein JSONElement verwenden, um eine Benutzeroberfläche aus JSON zu erstellen, die entweder in einer Anwendung enthalten oder aus einer Remote-URL geladen wird.

MT. D unterstützt das Erstellen von Benutzeroberflächen, die in JSON deklariert wurden. Wenn Elemente mithilfe von JSON, MT deklariert werden. D erstellt die zugeordneten Elemente automatisch für Sie. Der JSON-Code kann entweder aus einer lokalen Datei, einer analysierten JsonObject instance oder sogar aus einer Remote-URL geladen werden.

MT. D unterstützt den gesamten Funktionsumfang, der in der Elemente-API verfügbar ist, wenn JSON verwendet wird. Beispielsweise wird die Anwendung im folgenden Screenshot mit JSON vollständig deklariert:

Beispielsweise wird die Anwendung in diesem Screenshot vollständig mithilfe von JSON deklariert. Beispielsweise wird die Anwendung in diesem Screenshot vollständig mithilfe von JSON deklariert.

Lassen Sie uns das Beispiel aus dem Tutorial "Exemplarische Vorgehensweise" der Elemente-API wiederholen, in dem gezeigt wird, wie Sie mithilfe von JSON einen Bildschirm zum Aufgabendetails hinzufügen.

Einrichten von MT. D

MT. D wird mit Xamarin.iOS verteilt. Klicken Sie mit der rechten Maustaste auf den Knoten Verweise eines Xamarin.iOS-Projekts in Visual Studio 2017 oder Visual Studio für Mac, und fügen Sie einen Verweis auf die MonoTouch.Dialog-1-Assembly hinzu. Fügen Sie dann nach Bedarf Anweisungen im Quellcode hinzu using MonoTouch.Dialog .

Exemplarische Vorgehensweise für JSON

Das Beispiel für diese exemplarische Vorgehensweise ermöglicht das Erstellen von Aufgaben. Wenn eine Aufgabe auf dem ersten Bildschirm ausgewählt ist, wird ein Detailbildschirm wie folgt angezeigt:

Wenn eine Aufgabe auf dem ersten Bildschirm ausgewählt wird, wird ein Detailbildschirm wie gezeigt angezeigt

Erstellen des JSON-Codes

In diesem Beispiel laden wir den JSON-Code aus einer Datei im Projekt mit dem Namen task.json. MT. D erwartet, dass der JSON-Code einer Syntax entspricht, die die Elemente-API widerspiegelt. Genau wie bei der Verwendung der Elemente-API aus Code deklarieren wir bei verwendung von JSON Abschnitte, und in diesen Abschnitten fügen wir Elemente hinzu. Zum Deklarieren von Abschnitten und Elementen in JSON verwenden wir die Zeichenfolgen "Sections" bzw. "elements" als Schlüssel. Für jedes Element wird der zugeordnete Elementtyp mithilfe des Schlüssels type festgelegt. Jede andere Elementeigenschaft wird mit dem Eigenschaftennamen als Schlüssel festgelegt.

Im folgenden JSON-Code werden beispielsweise die Abschnitte und Elemente für die Aufgabendetails beschrieben:

{
    "title": "Task",
    "sections": [
        {
            "elements" : [
                {
                    "id" : "task-description",
                    "type": "entry",
                    "placeholder": "Enter task description"
                },
                {
                    "id" : "task-duedate",
                    "type": "date",
                    "caption": "Due Date",
                    "value": "00:00"
                }
            ]
        }
    ]
}

Beachten Sie, dass der obige JSON-Code eine ID für jedes Element enthält. Jedes Element kann eine ID enthalten, um zur Laufzeit darauf zu verweisen. Wir werden sehen, wie dies verwendet wird, wenn wir zeigen, wie der JSON-Code geladen wird.

Laden des JSON-Codes

Nachdem der JSON-Code definiert wurde, müssen wir ihn in MT laden. D mit der JsonElement -Klasse. Angenommen, eine Datei mit dem oben erstellten JSON-Code wurde dem Projekt mit dem Namen sample.json hinzugefügt und einer Buildaktion des Inhalts zugewiesen, ist das Laden von JsonElement so einfach wie das Aufrufen der folgenden Codezeile:

var taskElement = JsonElement.FromFile ("task.json");

Da wir dies bei jedem Erstellen einer Aufgabe bei Bedarf hinzufügen, können wir die Schaltfläche, auf die aus dem vorherigen Element-API-Beispiel geklickt wurde, wie folgt ändern:

_addButton.Clicked += (sender, e) => {
    ++n;

    var task = new Task{Name = "task " + n, DueDate = DateTime.Now};

    var taskElement = JsonElement.FromFile ("task.json");

    _rootElement [0].Add (taskElement);
};

Zugreifen auf Elemente zur Laufzeit

Denken Sie daran, dass wir beiden Elementen eine ID hinzugefügt haben, als wir sie in der JSON-Datei deklariert haben. Wir können die id-Eigenschaft verwenden, um zur Laufzeit auf jedes Element zuzugreifen, um deren Eigenschaften im Code zu ändern. Der folgende Code verweist beispielsweise auf die Elemente Eintrag und Datum, um die Werte aus dem Taskobjekt festzulegen:

_addButton.Clicked += (sender, e) => {
    ++n;

    var task = new Task{Name = "task " + n, DueDate = DateTime.Now};

    var taskElement = JsonElement.FromFile ("task.json");

    taskElement.Caption = task.Name;

    var description = taskElement ["task-description"] as EntryElement;

    if (description != null) {
        description.Caption = task.Name;
        description.Value = task.Description;       
    }

    var duedate = taskElement ["task-duedate"] as DateElement;

    if (duedate != null) {                
        duedate.DateValue = task.DueDate;
    }
    _rootElement [0].Add (taskElement);
};

Laden von JSON aus einer URL

MT. D unterstützt auch das dynamische Laden von JSON aus einer externen URL, indem die URL einfach an den Konstruktor des JsonElementübergeben wird. MT. D erweitert die im JSON-Code deklarierte Hierarchie bei Bedarf, wenn Sie zwischen Bildschirmen navigieren. Betrachten Sie beispielsweise eine JSON-Datei wie die folgende, die sich im Stammverzeichnis des lokalen Webservers befindet:

{
    "type": "root",
    "title": "home",
    "sections": [
        {
            "header": "Nested view!",
            "elements": [
                {
                    "type": "boolean",
                    "caption": "Just a boolean",
                    "id": "first-boolean",
                    "value": false
                },
                {
                    "type": "string",
                    "caption": "Welcome to the nested controller"
                }
            ]
        }
    ]
}

Wir können dies mithilfe von JsonElement wie im folgenden Code laden:

_rootElement = new RootElement ("Json Example") {
    new Section ("") {
        new JsonElement ("Load from url", "http://localhost/sample.json")
    }
};

Zur Laufzeit wird die Datei von MT abgerufen und analysiert. D, wenn der Benutzer zur zweiten Ansicht navigiert, wie im folgenden Screenshot gezeigt:

Die Datei wird von MT abgerufen und analysiert. D, wenn der Benutzer zur zweiten Ansicht navigiert

Zusammenfassung

In diesem Artikel wurde gezeigt, wie Sie eine using-Schnittstelle mit MT erstellen. D aus JSON. Es wurde gezeigt, wie JSON geladen wird, der in einer Datei mit der Anwendung und aus einer Remote-URL enthalten ist. Außerdem wurde gezeigt, wie zur Laufzeit auf elemente zugegriffen werden kann, die in JSON beschrieben sind.