Создание пользовательского интерфейса в Xamarin.iOS с помощью JSON
MonoTouch.Dialog (MT. D) включает поддержку динамического создания пользовательского интерфейса с помощью данных JSON. В этом руководстве мы рассмотрим, как использовать JSONElement для создания пользовательского интерфейса из JSON, который входит в приложение или загружается из удаленного URL-адреса.
MT. D поддерживает создание пользовательских интерфейсов, объявленных в ФОРМАТЕ JSON. Когда элементы объявляются с помощью JSON, MT. D автоматически создаст связанные элементы. JSON можно загрузить из локального файла, экземпляра JsonObject синтаксического анализа или даже удаленного URL-адреса.
MT. D поддерживает полный спектр функций, доступных в API элементов при использовании JSON. Например, приложение на следующем снимке экрана полностью объявляется с помощью JSON:
Давайте рассмотрим пример из руководства по API элементов, в котором показано, как добавить экран сведений о задаче с помощью JSON.
Настройка MT. D
MT. D распространяется с помощью Xamarin.iOS. Чтобы использовать его, щелкните правой кнопкой мыши узел "Ссылки" проекта Xamarin.iOS в Visual Studio 2017 или Visual Studio для Mac и добавьте ссылку на сборку MonoTouch.Dialog-1. Затем добавьте using MonoTouch.Dialog инструкции в исходный код по мере необходимости.
Пошаговое руководство по JSON
Пример этого пошагового руководства позволяет создавать задачи. При выборе задачи на первом экране отображается экран сведений, как показано ниже.
Создание JSON
В этом примере мы загрузим JSON из файла в проекте с именем task.json. MT. D ожидает, что JSON соответствует синтаксису, зеркало API элементов. Так же, как и использование API элементов из кода, при использовании JSON мы объявляем разделы и в этих разделах мы добавляем элементы. Чтобы объявить разделы и элементы в ФОРМАТЕ JSON, мы используем строки "разделы" и "элементы" соответственно в качестве ключей. Для каждого элемента связанный тип элемента задается с помощью type ключа. Все остальные свойства элементов задаются именем свойства в качестве ключа.
Например, в следующем формате JSON описываются разделы и элементы для сведений о задаче:
{
"title": "Task",
"sections": [
{
"elements" : [
{
"id" : "task-description",
"type": "entry",
"placeholder": "Enter task description"
},
{
"id" : "task-duedate",
"type": "date",
"caption": "Due Date",
"value": "00:00"
}
]
}
]
}
Обратите внимание, что в приведенном выше формате JSON содержится идентификатор для каждого элемента. Любой элемент может содержать идентификатор, чтобы ссылаться на него во время выполнения. Мы посмотрим, как это используется в данный момент, когда мы покажем, как загрузить JSON в коде.
Загрузка JSON в коде
После определения JSON необходимо загрузить его в MT. D с помощью JsonElement класса. Если файл с созданным выше JSON-файлом был добавлен в проект с именем sample.json и задано действие сборки содержимого, загрузка JsonElement выполняется так же просто, как вызов следующей строки кода:
var taskElement = JsonElement.FromFile ("task.json");
Так как мы добавляем это по запросу при каждом создании задачи, мы можем изменить кнопку, щелкнув предыдущий пример API элементов следующим образом:
_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);
};
Доступ к элементам во время выполнения
Вспомним, что мы добавили идентификатор для обоих элементов, когда мы объявили их в JSON-файле. Свойство id можно использовать для доступа к каждому элементу во время выполнения, чтобы изменить их свойства в коде. Например, следующий код ссылается на элементы записи и даты, чтобы задать значения из объекта задачи:
_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);
};
Загрузка JSON из URL-адреса
MT. D также поддерживает динамическое загрузку JSON из внешнего URL-адреса, просто передав URL-адрес конструктору JsonElementобъекта. MT. D развернет иерархию, объявленную в формате JSON по запросу, при переходе между экранами. Например, рассмотрим JSON-файл, например приведенный ниже, расположенный в корне локального веб-сервера:
{
"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"
}
]
}
]
}
Эту загрузку можно загрузить с помощью следующего JsonElement кода:
_rootElement = new RootElement ("Json Example") {
new Section ("") {
new JsonElement ("Load from url", "http://localhost/sample.json")
}
};
Во время выполнения файл будет получен и проанализирован MT. D, когда пользователь переходит во второе представление, как показано на снимке экрана ниже:
Итоги
В этой статье показано, как создать интерфейс с MT. D из JSON. В нем показано, как загрузить JSON, включенный в файл с приложением, а также из удаленного URL-адреса. В нем также показано, как получить доступ к элементам, описанным в JSON во время выполнения.