Tworzenie interfejsu użytkownika w środowisku Xamarin.iOS przy użyciu kodu JSON

MonoTouch.Dialog (MT. D) obejmuje obsługę dynamicznego generowania interfejsu użytkownika za pośrednictwem danych JSON. W tym samouczku omówimy sposób użycia elementu JSONElement w celu utworzenia interfejsu użytkownika na podstawie kodu JSON dołączonego do aplikacji lub załadowania z zdalnego adresu URL.

MT. Język D obsługuje tworzenie interfejsów użytkownika zadeklarowanych w formacie JSON. Gdy elementy są deklarowane przy użyciu formatu JSON, MT. D automatycznie utworzy skojarzone elementy. Kod JSON można załadować z pliku lokalnego, wystąpienia przeanalizowanego JsonObject , a nawet zdalnego adresu URL.

MT. Język D obsługuje pełny zakres funkcji, które są dostępne w interfejsie API elementów w przypadku korzystania z formatu JSON. Na przykład aplikacja na poniższym zrzucie ekranu jest całkowicie zadeklarowana przy użyciu kodu JSON:

Wróćmy do przykładu z samouczka z przewodnikiem po interfejsie API elementów, pokazując, jak dodać ekran szczegółów zadania przy użyciu kodu JSON.

Konfigurowanie usługi MT. D

MT. Język D jest dystrybuowany za pomocą platformy Xamarin.iOS. Aby go użyć, kliknij prawym przyciskiem myszy węzeł Odwołania projektu Xamarin.iOS w programie Visual Studio 2017 lub Visual Studio dla komputerów Mac i dodaj odwołanie do zestawu MonoTouch.Dialog-1. Następnie dodaj using MonoTouch.Dialog instrukcje w kodzie źródłowym w razie potrzeby.

Przewodnik JSON

Przykład tego przewodnika umożliwia tworzenie zadań. Po wybraniu zadania na pierwszym ekranie zostanie wyświetlony ekran szczegółów, jak pokazano:

Tworzenie kodu JSON

W tym przykładzie załadujemy kod JSON z pliku w projekcie o nazwie task.json. MT. D oczekuje, że kod JSON będzie zgodny ze składnią dublowania interfejsu API elementów. Podobnie jak w przypadku używania interfejsu API elementów z kodu, w przypadku korzystania z formatu JSON deklarujemy sekcje i w tych sekcjach dodajemy elementy. Aby zadeklarować sekcje i elementy w formacie JSON, używamy odpowiednio ciągów "sekcje" i "elementy" jako klucze. Dla każdego elementu skojarzony typ elementu jest ustawiany przy użyciu type klucza. Każda inna właściwość elementów jest ustawiana z nazwą właściwości jako kluczem.

Na przykład poniższy kod JSON opisuje sekcje i elementy szczegółów zadania:

{
    "title": "Task",
    "sections": [
        {
            "elements" : [
                {
                    "id" : "task-description",
                    "type": "entry",
                    "placeholder": "Enter task description"
                },
                {
                    "id" : "task-duedate",
                    "type": "date",
                    "caption": "Due Date",
                    "value": "00:00"
                }
            ]
        }
    ]
}

Zwróć uwagę, że powyższy kod JSON zawiera identyfikator dla każdego elementu. Dowolny element może zawierać identyfikator, aby odwoływać się do niego w czasie wykonywania. Zobaczymy, jak jest to używane w chwili, gdy pokażemy, jak załadować kod JSON w kodzie.

Ładowanie kodu JSON

Po zdefiniowaniu kodu JSON musimy załadować go do usługi MT. D przy użyciu JsonElement klasy . Zakładając, że plik z utworzonym powyżej plikiem JSON został dodany do projektu o nazwie sample.json i podanej akcji kompilacji zawartości, ładowanie pliku JsonElement jest tak proste, jak wywołanie następującego wiersza kodu:

var taskElement = JsonElement.FromFile ("task.json");

Ponieważ dodajemy to na żądanie za każdym razem, gdy zadanie jest tworzone, możemy zmodyfikować przycisk kliknięty z wcześniejszego przykładu interfejsu API elementów w następujący sposób:

_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);
};

Uzyskiwanie dostępu do elementów w czasie wykonywania

Przypomnij sobie, że dodaliśmy identyfikator do obu elementów, gdy zadeklarowaliśmy je w pliku JSON. Możemy użyć właściwości id, aby uzyskać dostęp do każdego elementu w czasie wykonywania, aby zmodyfikować ich właściwości w kodzie. Na przykład poniższy kod odwołuje się do elementów wpisu i daty w celu ustawienia wartości z obiektu zadania:

_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);
};

Ładowanie kodu JSON z adresu URL

MT. Język D obsługuje również dynamiczne ładowanie kodu JSON z zewnętrznego adresu URL, przekazując adres URL do konstruktora .JsonElement MT. D rozszerzy hierarchię zadeklarowaną w formacie JSON na żądanie podczas przechodzenia między ekranami. Rozważmy na przykład plik JSON, taki jak poniższy znajdujący się w katalogu głównym lokalnego serwera internetowego:

{
    "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"
                }
            ]
        }
    ]
}

Możemy to załadować przy użyciu kodu JsonElement w następujący sposób:

_rootElement = new RootElement ("Json Example") {
    new Section ("") {
        new JsonElement ("Load from url", "http://localhost/sample.json")
    }
};

W czasie wykonywania plik zostanie pobrany i przeanalizowany przez usługę MT. D, gdy użytkownik przejdzie do drugiego widoku, jak pokazano na poniższym zrzucie ekranu:

Podsumowanie

W tym artykule pokazano, jak utworzyć interfejs przy użyciu usługi MT. D z formatu JSON. Pokazano, jak załadować kod JSON uwzględniony w pliku z aplikacją, a także ze zdalnego adresu URL. Pokazano również, jak uzyskać dostęp do elementów opisanych w formacie JSON w czasie wykonywania.

Last updated on 2015-11-25

Udostępnij przez