Menggunakan JSON untuk membuat antarmuka pengguna di Xamarin.iOS
MonoTouch.Dialog (MT. D) mencakup dukungan untuk pembuatan UI dinamis melalui data JSON. Dalam tutorial ini, kita akan membahas cara menggunakan JSONElement untuk membuat antarmuka pengguna dari JSON yang disertakan dengan aplikasi, atau dimuat dari Url jarak jauh.
GUNUNG. D mendukung pembuatan antarmuka pengguna yang dideklarasikan dalam JSON. Ketika elemen dinyatakan menggunakan JSON, MT. D akan membuat elemen terkait untuk Anda secara otomatis. JSON dapat dimuat baik dari file lokal, instans yang diurai JsonObject , atau bahkan Url jarak jauh.
GUNUNG. D mendukung berbagai fitur yang tersedia di Elements API saat menggunakan JSON. Misalnya, aplikasi dalam cuplikan layar berikut dinyatakan sepenuhnya menggunakan JSON:
Mari kita lihat kembali contoh dari tutorial Panduan Api Elements, memperlihatkan cara menambahkan layar detail tugas menggunakan JSON.
Menyiapkan MT. D
GUNUNG. D didistribusikan dengan Xamarin.iOS. Untuk menggunakannya, klik kanan pada simpul Referensi proyek Xamarin.iOS di Visual Studio 2017 atau Visual Studio untuk Mac dan tambahkan referensi ke rakitan MonoTouch.Dialog-1 . Kemudian, tambahkan using MonoTouch.Dialog pernyataan dalam kode sumber Anda seperlunya.
Panduan JSON
Contoh untuk panduan ini memungkinkan tugas dibuat. Saat tugas dipilih pada layar pertama, layar detail disajikan seperti yang diperlihatkan:
Membuat JSON
Untuk contoh ini, kita akan memuat JSON dari file dalam proyek bernama task.json. GUNUNG. D mengharapkan JSON agar sesuai dengan sintaks yang mencerminkan Elements API. Sama seperti menggunakan ELEMENTS API dari kode, saat menggunakan JSON, kami mendeklarasikan bagian dan di dalam bagian tersebut kami menambahkan elemen. Untuk mendeklarasikan bagian dan elemen di JSON, kami masing-masing menggunakan string "bagian" dan "elemen" sebagai kunci. Untuk setiap elemen, jenis elemen terkait diatur menggunakan type kunci . Setiap properti elemen lainnya diatur dengan nama properti sebagai kunci.
Misalnya, JSON berikut menjelaskan bagian dan elemen untuk detail tugas:
{
"title": "Task",
"sections": [
{
"elements" : [
{
"id" : "task-description",
"type": "entry",
"placeholder": "Enter task description"
},
{
"id" : "task-duedate",
"type": "date",
"caption": "Due Date",
"value": "00:00"
}
]
}
]
}
Perhatikan bahwa JSON di atas menyertakan id untuk setiap elemen. Elemen apa pun dapat menyertakan id, untuk mereferensikannya pada runtime. Kita akan melihat bagaimana ini digunakan dalam sesaat ketika kita menunjukkan cara memuat JSON dalam kode.
Memuat JSON dalam kode
Setelah JSON didefinisikan, kita perlu memuatnya ke MT. D menggunakan JsonElement kelas . Dengan asumsi file dengan JSON yang kami buat di atas telah ditambahkan ke proyek dengan nama sample.json dan diberikan tindakan build konten, memuat sesemangat JsonElement memanggil baris kode berikut:
var taskElement = JsonElement.FromFile ("task.json");
Karena kami menambahkan ini sesuai permintaan setiap kali tugas dibuat, kita dapat memodifikasi tombol yang diklik dari contoh API Elements sebelumnya sebagai berikut:
_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);
};
Mengakses elemen saat runtime
Ingat bahwa kami menambahkan id ke kedua elemen ketika kami mendeklarasikannya dalam file JSON. Kita dapat menggunakan properti id untuk mengakses setiap elemen pada runtime untuk memodifikasi propertinya dalam kode. Misalnya, kode berikut mereferensikan elemen entri dan tanggal untuk mengatur nilai dari objek tugas:
_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);
};
Memuat JSON dari url
GUNUNG. D juga mendukung pemuatan JSON secara dinamis dari Url eksternal hanya dengan meneruskan Url ke konstruktor JsonElement. GUNUNG. D akan memperluas hierarki yang dideklarasikan dalam JSON sesuai permintaan saat Anda menavigasi antar layar. Misalnya, pertimbangkan file JSON seperti yang ada di bawah ini di akar server web lokal:
{
"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"
}
]
}
]
}
Kita dapat memuat ini menggunakan JsonElement seperti dalam kode berikut:
_rootElement = new RootElement ("Json Example") {
new Section ("") {
new JsonElement ("Load from url", "http://localhost/sample.json")
}
};
Pada runtime, file akan diambil dan diurai oleh MT. D saat pengguna menavigasi ke tampilan kedua, seperti yang ditunjukkan pada cuplikan layar di bawah ini:
Ringkasan
Artikel ini menunjukkan cara membuat antarmuka menggunakan dengan MT. D dari JSON. Ini menunjukkan cara memuat JSON yang disertakan dalam file dengan aplikasi serta dari Url jarak jauh. Ini juga menunjukkan cara mengakses elemen yang dijelaskan dalam JSON saat runtime.