Vytvoření uživatelského rozhraní v Xamarin.iOS pomocí JSON
MonoTouch.Dialog (MT. D) zahrnuje podporu dynamického generování uživatelského rozhraní prostřednictvím dat JSON. V tomto kurzu si ukážeme, jak pomocí JSONElement vytvořit uživatelské rozhraní z FORMÁTU JSON, které je součástí aplikace nebo načteno ze vzdálené adresy URL.
MT. D podporuje vytváření uživatelských rozhraní deklarovaných ve formátu JSON. Když jsou elementy deklarovány pomocí JSON, MT. D automaticky vytvoří přidružené prvky. JSON lze načíst buď z místního souboru, analyzované JsonObject instance, nebo dokonce ze vzdálené adresy URL.
MT. D podporuje celou řadu funkcí, které jsou k dispozici v rozhraní Elements API při použití FORMÁTU JSON. Například aplikace na následujícím snímku obrazovky je plně deklarována pomocí json:
Podívejme se na příklad z kurzu Návod k rozhraní Elements API a ukážeme si, jak přidat obrazovku podrobností úkolu pomocí kódu JSON.
Nastavení MT. D
MT. D se distribuuje s Xamarin.iOS. Pokud ho chcete použít, klikněte pravým tlačítkem myši na uzel Odkazy projektu Xamarin.iOS v sadě Visual Studio 2017 nebo Visual Studio pro Mac a přidejte odkaz na sestavení MonoTouch.Dialog-1. Potom podle potřeby přidejte using MonoTouch.Dialog do zdrojového kódu příkazy.
Názorný postup JSON
Příklad pro tento názorný postup umožňuje vytvoření úloh. Když je úkol vybraný na první obrazovce, zobrazí se obrazovka podrobností, jak je znázorněno:
Vytvoření JSON
V tomto příkladu načteme JSON ze souboru v projektu s názvem task.json. MT. D očekává, že JSON odpovídá syntaxi, která zrcadlí rozhraní Elements API. Stejně jako při použití rozhraní Elements API z kódu deklarujeme oddíly a v těchto oddílech přidáme prvky. K deklarování oddílů a prvků ve formátu JSON používáme jako klíče řetězce "sections" a "elements". Pro každý prvek je přidružený typ elementu type nastaven pomocí klíče. Každá ostatní vlastnost elementů je nastavena s názvem vlastnosti jako klíč.
Následující JSON například popisuje oddíly a prvky podrobností úkolu:
{
"title": "Task",
"sections": [
{
"elements" : [
{
"id" : "task-description",
"type": "entry",
"placeholder": "Enter task description"
},
{
"id" : "task-duedate",
"type": "date",
"caption": "Due Date",
"value": "00:00"
}
]
}
]
}
Všimněte si, že výše uvedený kód JSON obsahuje ID pro každý prvek. Libovolný prvek může obsahovat ID, aby na něj bylo možné odkazovat za běhu. Uvidíme, jak se tento kód použije během okamžiku, když si ukážeme, jak načíst JSON v kódu.
Načtení KÓDU JSON v kódu
Jakmile je json definovaný, musíme ho načíst do MT. D pomocí JsonElement třídy. Za předpokladu, že do projektu byl přidán soubor s kódem JSON, který jsme vytvořili výše, s názvem sample.json a vzhledem k akci sestavení obsahu je načtení JsonElement jednoduché jako volání následujícího řádku kódu:
var taskElement = JsonElement.FromFile ("task.json");
Vzhledem k tomu, že tento postup přidáváme na vyžádání při každém vytvoření úlohy, můžeme tlačítko klikané na předchozí příklad rozhraní Elements API upravit následujícím způsobem:
_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);
};
Přístup k elementům za běhu
Vzpomeňte si, že jsme do obou prvků přidali ID, když jsme je deklarovali v souboru JSON. Vlastnost ID můžeme použít pro přístup ke každému prvku za běhu a upravit jejich vlastnosti v kódu. Následující kód například odkazuje na elementy položky a data, které nastaví hodnoty z objektu úkolu:
_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);
};
Načítání JSON z adresy URL
MT. D také podporuje dynamické načítání JSON z externí adresy URL jednoduše předáním adresy URL konstruktoru objektu JsonElement. MT. D rozšíří hierarchii deklarovanou ve formátu JSON na vyžádání při procházení mezi obrazovkami. Představte si například soubor JSON, například následující soubor umístěný v kořenovém adresáři místního webového serveru:
{
"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"
}
]
}
]
}
Můžeme to načíst pomocí JsonElement následujícího kódu:
_rootElement = new RootElement ("Json Example") {
new Section ("") {
new JsonElement ("Load from url", "http://localhost/sample.json")
}
};
Za běhu se soubor načte a parsuje mt. D, když uživatel přejde do druhého zobrazení, jak je znázorněno na následujícím snímku obrazovky:
Shrnutí
Tento článek ukázal, jak vytvořit rozhraní pomocí MT. D z JSON. Ukázalo se, jak načíst JSON zahrnutý do souboru s aplikací i ze vzdálené adresy URL. Také ukázal, jak získat přístup k prvkům popsaným v kódu JSON za běhu.