Verwenden von JSON zum Erstellen einer Benutzeroberfläche in Xamarin.iOS
MonoTouch.Dialog (MT. D) umfasst Unterstützung für die dynamische UI-Generierung über JSON-Daten. In diesem Lernprogramm erfahren Sie, wie Sie ein JSONElement verwenden, um eine Benutzeroberfläche aus JSON zu erstellen, die entweder in einer Anwendung enthalten ist oder aus einer Remote-URL geladen wird.
MT. D unterstützt das Erstellen von in JSON deklarierten Benutzeroberflächen. Wenn Elemente mithilfe von JSON deklariert werden, mt. D erstellt automatisch die zugehörigen Elemente. Der JSON-Code kann entweder aus einer lokalen Datei, einer analysierten JsonObject Instanz oder sogar einer Remote-URL geladen werden.
MT. D unterstützt die gesamte Palette von Features, die bei Verwendung von JSON in der Element-API verfügbar sind. Die Anwendung im folgenden Screenshot wird beispielsweise vollständig mithilfe von JSON deklariert:
Schauen wir uns das Beispiel aus dem Lernprogramm "Elements API Walkthrough " an, das zeigt, wie Sie einen Aufgabendetailbildschirm mithilfe von JSON hinzufügen.
Einrichten von MT. D
MT. D wird mit Xamarin.iOS verteilt. Zum Verwenden 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 using MonoTouch.Dialog dann nach Bedarf Anweisungen in Ihrem Quellcode hinzu.
JSON-exemplarische Vorgehensweise
Im Beispiel für diese exemplarische Vorgehensweise können Aufgaben erstellt werden. Wenn eine Aufgabe auf dem ersten Bildschirm ausgewählt ist, wird wie gezeigt ein Detailbildschirm 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 Element-API Spiegel. Genau wie die Verwendung der Element-API aus Code deklarieren wir Abschnitte und in diesen Abschnitten, die wir Hinzufügen von Elementen. Um Abschnitte und Elemente in JSON zu deklarieren, verwenden wir die Zeichenfolgen "Abschnitte" bzw. "Elemente" als Schlüssel. Für jedes Element wird der zugeordnete Elementtyp mithilfe des type Schlüssels festgelegt. Jede andere Elementeigenschaft wird mit dem Eigenschaftsnamen als Schlüssel festgelegt.
Der folgende JSON-Code beschreibt beispielsweise die Abschnitte und Elemente für die Aufgabendetails:
{
"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 in einem Moment verwendet wird, wenn wir zeigen, wie der JSON-Code geladen wird.
Laden des JSON-Codes im Code
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 wurde dem Projekt mit dem Namen sample.json und einer Buildaktion von Inhalten hinzugefügt, und das Laden der JsonElement Datei ist so einfach wie das Aufrufen der folgenden Codezeile:
var taskElement = JsonElement.FromFile ("task.json");
Da wir dies bei jeder Erstellung einer Aufgabe bei Bedarf hinzufügen, können wir die Schaltfläche ändern, auf die im vorherigen Element-API-Beispiel geklickt wurde:
_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
Rückruf wir haben beide Elemente eine ID hinzugefügt, wenn wir sie in der JSON-Datei deklariert haben. Wir können die ID-Eigenschaft verwenden, um zur Laufzeit auf jedes Element zuzugreifen, um ihre Eigenschaften im Code zu ändern. Der folgende Code verweist beispielsweise auf die Eintrags- und Datumselemente, um die Werte aus dem Aufgabenobjekt 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 einfach die URL an den Konstruktor der .JsonElement MT. D erweitert die hierarchie, die bei Bedarf im JSON deklariert ist, während Sie zwischen Bildschirmen navigieren. Ziehen Sie z. B. eine JSON-Datei in Betracht, z. B. die folgende Datei, 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 wie JsonElement 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:
Zusammenfassung
In diesem Artikel wurde gezeigt, wie Sie eine using-Schnittstelle mit MT erstellen. D aus JSON. Es wurde gezeigt, wie JSON in einer Datei mit der Anwendung sowie von einer Remote-URL geladen wird. Außerdem wurde gezeigt, wie sie zur Laufzeit auf in JSON beschriebene Elemente zugreifen können.