Compartilhar via

Criando um aplicativo Xamarin.iOS usando a API do Elements

  • Artigo

Este artigo baseia-se nas informações apresentadas no artigo Introdução à caixa de diálogo MonoTouch. Ele apresenta um passo a passo que mostra como usar o MonoTouch.Dialog (MT. D) Elements API para começar rapidamente a construir uma aplicação com MT.D.

Neste passo a passo, usaremos o MT. API D Elements para criar um estilo mestre-detalhe do aplicativo que exibe uma lista de tarefas. Quando o usuário seleciona o + botão na barra de navegação, uma nova linha será adicionada à tabela para a tarefa. A seleção da linha irá navegar até a tela de detalhes que nos permite atualizar a descrição da tarefa e a data de conclusão, conforme ilustrado abaixo:

Selecionar a linha navegará até a tela de detalhes que nos permite atualizar a descrição da tarefa e a data de conclusão

Configurando o MT. D

MT. D é distribuído com 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 no 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 da API do Elements

No artigo Introdução ao MonoTouch Dialog, obtivemos uma sólida compreensão das diferentes partes do MT.D. Vamos usar a API do Elements para colocá-los todos juntos em um aplicativo.

Configurando o aplicativo multitela

Para iniciar o processo de criação da tela, MonoTouch.Dialog cria um DialogViewControllere adiciona um RootElementarquivo .

Para criar um aplicativo multi-tela com MonoTouch.Dialog, precisamos:

  1. Criar um UINavigationController.
  2. Criar um DialogViewController.
  3. Adicione o DialogViewController como a raiz do UINavigationController.
  4. Adicione um RootElement ao DialogViewController.
  5. Adicionar Sections e Elements ao RootElement.

Usando um UINavigationController

Para criar um aplicativo de estilo de navegação, precisamos criar um UINavigationController, e adicioná-lo como o RootViewControllerFinishedLaunching no método do AppDelegate. Para fazer o UINavigationController trabalho com MonoTouch.Dialog, adicionamos um DialogViewController ao UINavigationController como mostrado abaixo:

public override bool FinishedLaunching (UIApplication app, NSDictionary options)
{
    _window = new UIWindow (UIScreen.MainScreen.Bounds);
            
    _rootElement = new RootElement ("To Do List"){new Section ()};

    // code to create screens with MT.D will go here …

    _rootVC = new DialogViewController (_rootElement);
    _nav = new UINavigationController (_rootVC);
    _window.RootViewController = _nav;
    _window.MakeKeyAndVisible ();
            
    return true;
}

O código acima cria uma instância de a RootElement e a passa para o DialogViewController. O DialogViewController sempre tem um RootElement no topo de sua hierarquia. Neste exemplo, o RootElement é criado com a cadeia de caracteres "To Do List", que serve como título na barra de navegação do controlador de navegação. Neste ponto, a execução do aplicativo apresentaria a tela mostrada abaixo:

Executando o aplicativo irá apresentar a tela mostrada aqui

Vamos ver como usar a estrutura hierárquica do MonoTouch.Dialog e SectionsElements adicionar mais telas.

Criando as telas de diálogo

A DialogViewController é uma UITableViewController subclasse que MonoTouch.Dialog usa para adicionar telas. MonoTouch.Dialog cria telas adicionando um RootElement a , DialogViewControllercomo vimos acima. O RootElement pode ter Section instâncias que representam as seções de uma tabela. As seções são compostas de elementos, outras seções, ou mesmo outros RootElements. Ao aninhar RootElementso , o MonoTouch.Dialog cria automaticamente um aplicativo de estilo de navegação, como veremos a seguir.

Usando DialogViewController

O DialogViewController, sendo uma UITableViewController subclasse, tem como UITableView sua visão. Neste exemplo, queremos adicionar itens à tabela sempre que o + botão for tocado. Uma vez que o DialogViewController foi adicionado a um UINavigationController, podemos usar a NavigationItempropriedade 's RightBarButton para adicionar o + botão, como mostrado abaixo:

_addButton = new UIBarButtonItem (UIBarButtonSystemItem.Add);
_rootVC.NavigationItem.RightBarButtonItem = _addButton;

Quando criamos o RootElement anterior, passamos uma única Section instância para que pudéssemos adicionar elementos à medida que o + botão é tocado pelo usuário. Podemos usar o código a seguir para fazer isso no manipulador de eventos do botão:

_addButton.Clicked += (sender, e) => {                
    ++n;
                
    var task = new Task{Name = "task " + n, DueDate = DateTime.Now};
                
    var taskElement = new RootElement (task.Name) {
        new Section () {
            new EntryElement (task.Name, "Enter task description", task.Description)
        },
        new Section () {
            new DateElement ("Due Date", task.DueDate)
        }
    };
    _rootElement [0].Add (taskElement);
};

Esse código cria um novo Task objeto cada vez que o botão é tocado. A seguir mostra a implementação simples da Task classe:

public class Task
{   
    public Task ()
    {
    }
      
    public string Name { get; set; }
        
    public string Description { get; set; }

    public DateTime DueDate { get; set; }
}

A propriedade da Name tarefa é usada para criar a legenda RootElementdo junto com uma variável de contador chamada n que é incrementada para cada nova tarefa. MonoTouch.Dialog transforma os elementos nas linhas que são adicionadas ao TableView quando cada um taskElement é adicionado.

Apresentando e gerenciando telas de diálogo

Usamos um para que o RootElement MonoTouch.Dialog criasse automaticamente uma nova tela para os detalhes de cada tarefa e navegasse até ela quando uma linha fosse selecionada.

A própria tela de detalhes da tarefa é composta por duas seções; Cada uma dessas seções contém um único elemento. O primeiro elemento é criado a partir de um EntryElement para fornecer uma linha editável para a propriedade da Description tarefa. Quando o elemento é selecionado, um teclado para edição de texto é apresentado como mostrado abaixo:

Quando o elemento é selecionado, um teclado para edição de texto é apresentado como mostrado

A segunda seção contém um DateElement que nos permite gerenciar a propriedade da DueDate tarefa. A seleção da data carrega automaticamente um seletor de data, conforme mostrado:

A seleção da data carrega automaticamente um seletor de data como

Em ambos os EntryElement casos e DateElement (ou para qualquer elemento de entrada de dados em MonoTouch.Dialog), quaisquer alterações nos valores são preservadas automaticamente. Podemos demonstrar isso editando a data e, em seguida, navegando para frente e para trás entre a tela raiz e vários detalhes da tarefa, onde os valores nas telas de detalhes são preservados.

Resumo

Este artigo apresentou um passo a passo que mostrou como usar a API MonoTouch.Dialog Elements. Ele cobriu as etapas básicas para criar um aplicativo multi-tela com MT. D, incluindo como usar um DialogViewController e como adicionar elementos e seções para criar telas. Além disso, mostrou como usar a MT. D em conjunto com um UINavigationController.