Uso di JSON per creare un'interfaccia utente in Xamarin.iOS
MonoTouch.Dialog (MT. D) include il supporto per la generazione dinamica dell'interfaccia utente tramite dati JSON. In questa esercitazione verrà illustrato come usare jsonElement per creare un'interfaccia utente da JSON inclusa in un'applicazione o caricata da un URL remoto.
MONTE. D supporta la creazione di interfacce utente dichiarate in JSON. Quando gli elementi vengono dichiarati tramite JSON, MT. D creerà automaticamente gli elementi associati. Il codice JSON può essere caricato da un file locale, da un'istanza analizzata JsonObject o anche da un URL remoto.
MONTE. D supporta l'intera gamma di funzionalità disponibili nell'API Elements quando si usa JSON. Ad esempio, l'applicazione nello screenshot seguente viene dichiarata completamente usando JSON:
Si esaminerà ora l'esempio dell'esercitazione procedura dettagliata sull'API Elements, che illustra come aggiungere una schermata dei dettagli dell'attività usando JSON.
Configurazione di MT. D
MONTE. D viene distribuito con Xamarin.iOS. Per usarlo, fare clic con il pulsante destro del mouse sul nodo Riferimenti di un progetto Xamarin.iOS in Visual Studio 2017 o Visual Studio per Mac e aggiungere un riferimento all'assembly MonoTouch.Dialog-1. using MonoTouch.Dialog Aggiungere quindi istruzioni nel codice sorgente in base alle esigenze.
Procedura dettagliata JSON
L'esempio per questa procedura dettagliata consente la creazione di attività. Quando un'attività viene selezionata nella prima schermata, viene visualizzata una schermata di dettaglio come illustrato:
Creazione del codice JSON
Per questo esempio, il codice JSON verrà caricato da un file nel progetto denominato task.json. MONTE. D prevede che il codice JSON sia conforme a una sintassi che rispecchia l'API Elements. Analogamente all'uso dell'API Elements dal codice, quando si usa JSON, si dichiarano sezioni e all'interno di tali sezioni vengono aggiunti elementi. Per dichiarare sezioni ed elementi in JSON, si usano le stringhe "sections" e "elements" rispettivamente come chiavi. Per ogni elemento, il tipo di elemento associato viene impostato usando la type chiave . Ogni proprietà di altri elementi viene impostata con il nome della proprietà come chiave.
Ad esempio, il codice JSON seguente descrive le sezioni e gli elementi per i dettagli dell'attività:
{
"title": "Task",
"sections": [
{
"elements" : [
{
"id" : "task-description",
"type": "entry",
"placeholder": "Enter task description"
},
{
"id" : "task-duedate",
"type": "date",
"caption": "Due Date",
"value": "00:00"
}
]
}
]
}
Si noti che il codice JSON precedente include un ID per ogni elemento. Qualsiasi elemento può includere un ID per farvi riferimento in fase di esecuzione. Si vedrà come viene usato in un momento in cui viene illustrato come caricare il codice JSON nel codice.
Caricamento del codice JSON nel codice
Dopo aver definito il codice JSON, è necessario caricarlo in MT. D utilizzando la JsonElement classe . Supponendo che un file con il codice JSON creato in precedenza sia stato aggiunto al progetto con il nome sample.json e dato un'azione di compilazione del contenuto, il caricamento JsonElement di è semplice come chiamare la riga di codice seguente:
var taskElement = JsonElement.FromFile ("task.json");
Poiché viene aggiunto su richiesta ogni volta che viene creata un'attività, è possibile modificare il pulsante selezionato nell'esempio precedente dell'API Elements come indicato di seguito:
_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);
};
Accesso agli elementi in fase di esecuzione
Ricordare che è stato aggiunto un ID a entrambi gli elementi quando sono stati dichiarati nel file JSON. È possibile usare la proprietà id per accedere a ogni elemento in fase di esecuzione per modificarne le proprietà nel codice. Ad esempio, il codice seguente fa riferimento agli elementi di immissione e data per impostare i valori dell'oggetto attività:
_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);
};
Caricamento di JSON da un URL
MONTE. D supporta anche il caricamento dinamico di JSON da un URL esterno semplicemente passando l'URL al costruttore di JsonElement. MONTE. D espanderà la gerarchia dichiarata in JSON su richiesta durante lo spostamento tra le schermate. Si consideri ad esempio un file JSON, ad esempio quello riportato di seguito nella radice del server Web locale:
{
"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"
}
]
}
]
}
È possibile caricare questo codice usando come JsonElement nel codice seguente:
_rootElement = new RootElement ("Json Example") {
new Section ("") {
new JsonElement ("Load from url", "http://localhost/sample.json")
}
};
In fase di esecuzione, il file verrà recuperato e analizzato da MT. D quando l'utente passa alla seconda visualizzazione, come illustrato nello screenshot seguente:
Riepilogo
Questo articolo ha illustrato come creare un'interfaccia con MT. D da JSON. È stato illustrato come caricare JSON incluso in un file con l'applicazione e da un URL remoto. Ha anche illustrato come accedere agli elementi descritti in JSON in fase di esecuzione.