Usando JSON para criar uma interface do usuário no Xamarin.iOS
MonoTouch.Dialog (MT. D) inclui suporte para geração dinâmica de interface do usuário por meio de dados JSON. Neste tutorial, veremos como usar um JSONElement para criar uma interface do usuário de JSON incluída em um aplicativo ou carregada de uma URL remota.
MT. D dá suporte à criação de interfaces de usuário declaradas em JSON. Quando os elementos são declarados usando JSON, MT. D criará os elementos associados para você automaticamente. O JSON pode ser carregado de um arquivo local, de uma instância analisada JsonObject ou até mesmo de uma URL remota.
MT. D é compatível com toda a gama de recursos disponíveis na API Elements ao usar JSON. Por exemplo, o aplicativo na captura de tela a seguir é completamente declarado usando JSON:
Vamos revisitar o exemplo do tutorial Passo a passo da API Elements, mostrando como adicionar uma tela de detalhes da tarefa usando JSON.
Configurando o MT. D
MT. D é distribuído com o Xamarin.iOS. Para usá-lo, clique com o botão direito do mouse no nó Referências de um projeto Xamarin.iOS no Visual Studio 2017 ou Visual Studio para Mac e adicione uma referência ao assembly MonoTouch.Dialog-1 . Em seguida, adicione using MonoTouch.Dialog instruções em seu código-fonte conforme necessário.
Passo a passo JSON
O exemplo para este passo a passo permite que tarefas sejam criadas. Quando uma tarefa é marcada na primeira tela, uma tela detalhada é apresentada conforme mostrado:
Criando o JSON
Para este exemplo, carregaremos o JSON de um arquivo no projeto chamado task.json. MT. D espera que o JSON esteja em conformidade com uma sintaxe que espelha a API de elementos. Assim como usar a API de elementos do código, ao usar JSON, declaramos seções e dentro dessas seções adicionamos elementos. Para declarar seções e elementos em JSON, usamos as strings "sections" e "elements", respectivamente, como chaves. Para cada elemento, o tipo de elemento associado é definido usando a type chave. Todas as outras propriedades de elementos são definidas com o nome da propriedade como a chave.
Por exemplo, o JSON a seguir descreve as seções e os elementos para os detalhes da tarefa:
{
"title": "Task",
"sections": [
{
"elements" : [
{
"id" : "task-description",
"type": "entry",
"placeholder": "Enter task description"
},
{
"id" : "task-duedate",
"type": "date",
"caption": "Due Date",
"value": "00:00"
}
]
}
]
}
Observe que o JSON acima inclui um id para cada elemento. Qualquer elemento pode incluir um id para referenciá-lo em runtime. Veremos como isso é usado em um momento em que mostrarmos como carregar o JSON no código.
Carregando o JSON no código
Uma vez que o JSON tenha sido definido, precisamos carregá-lo no MT. D usando a JsonElement classe. Supondo que um arquivo com o JSON que criamos acima tenha sido adicionado ao projeto com o nome sample.json e receba uma ação de compilação de conteúdo, carregar o JsonElement é tão simples quanto chamar a seguinte linha de código:
var taskElement = JsonElement.FromFile ("task.json");
Como estamos adicionando isso sob demanda sempre que uma tarefa é criada, podemos modificar o botão clicado no exemplo anterior da API do Elements da seguinte maneira:
_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);
};
Acessando elementos em tempo de execução
Lembre-se de que adicionamos um id a ambos os elementos quando os declaramos no arquivo JSON. Podemos usar a propriedade id para acessar cada elemento em tempo de execução para modificar suas propriedades no código. Por exemplo, o código a seguir faz referência aos elementos entry e date para definir os valores do objeto task:
_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);
};
Carregando JSON de um URL
MT. D também dá suporte ao carregamento dinâmico de JSON de uma URL externa simplesmente passando a URL para o construtor do JsonElement. MT. D expandirá a hierarquia declarada no JSON sob demanda à medida que você navega entre as telas. Por exemplo, considere um arquivo JSON como o abaixo localizado na raiz do servidor Web local:
{
"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"
}
]
}
]
}
Podemos carregar isso usando o JsonElement as no seguinte código:
_rootElement = new RootElement ("Json Example") {
new Section ("") {
new JsonElement ("Load from url", "http://localhost/sample.json")
}
};
No tempo de execução, o arquivo será recuperado e analisado pelo MT. D quando o usuário navega para a segunda visualização, conforme mostrado na captura de tela abaixo:
Resumo
Este artigo mostrou como criar uma interface de uso com MT. D do JSON. Ele mostrou como carregar o JSON incluído em um arquivo com o aplicativo, bem como de uma URL remota. Ele também mostrou como acessar elementos descritos em JSON em tempo de execução.