Wprowadzenie do interfejsu MonoTouch.Dialog dla platformy Xamarin.iOS

  • Artykuł

MonoTouch.Dialog, określany jako MT. D krótko mówiąc, to szybki zestaw narzędzi deweloperskich interfejsu użytkownika, który umożliwia deweloperom tworzenie ekranów aplikacji i nawigacji przy użyciu informacji, a nie tedium tworzenia kontrolerów widoków, tabel itp. W związku z tym zapewnia znaczne uproszczenie tworzenia i zmniejszania kodu interfejsu użytkownika. Rozważmy na przykład następujący zrzut ekranu:

For example, consider this screenshot

Następujący kod został użyty do zdefiniowania całego ekranu:

public enum Category
{
    Travel,
    Lodging,
    Books
}
        
public class Expense
{
    [Section("Expense Entry")]

    [Entry("Enter expense name")]
    public string Name;
    [Section("Expense Details")]
  
    [Caption("Description")]
    [Entry]
    public string Details;
        
    [Checkbox]
    public bool IsApproved = true;
    [Caption("Category")]
    public Category ExpenseCategory;
}

Podczas pracy z tabelami w systemie iOS często występuje mnóstwo powtórzonego kodu. Na przykład za każdym razem, gdy tabela jest potrzebna, źródło danych jest potrzebne do wypełnienia tej tabeli. W aplikacji, która ma dwa ekrany oparte na tabeli połączone za pośrednictwem kontrolera nawigacji, każdy ekran udostępnia wiele tego samego kodu.

MT. D upraszcza to, hermetyzując cały ten kod do ogólnego interfejsu API na potrzeby tworzenia tabel. Następnie zapewnia abstrakcję na podstawie tego interfejsu API, która umożliwia deklaratywne składnię powiązania obiektu, która jeszcze bardziej ułatwia. W związku z tym w usłudze MT są dostępne dwa interfejsy API. D:

  • Interfejs API elementów niskiego poziomu — interfejs API elementów jest oparty na tworzeniu hierarchicznego drzewa elementów reprezentujących ekrany i ich składniki. Interfejs API elementów zapewnia deweloperom największą elastyczność i kontrolę podczas tworzenia interfejsów użytkownika. Ponadto interfejs API elementów ma zaawansowaną obsługę deklaratywnej definicji za pośrednictwem formatu JSON, co umożliwia zarówno niezwykle szybką deklarację, jak i dynamiczne generowanie interfejsu użytkownika z serwera.
  • Interfejs API Emocje ion wysokiego poziomu — znany również jako interfejs API powiązań, w którym klasy są oznaczone adnotacjami za pomocą wskazówek interfejsu użytkownika, a następnie usługi MT. D automatycznie tworzy ekrany na podstawie obiektów i zapewnia powiązanie między wyświetlanymi elementami (i opcjonalnie edytowanym) na ekranie oraz bazowym obiektem zapasowym. W powyższym przykładzie pokazano użycie interfejsu API Emocje ion. Ten interfejs API nie zapewnia szczegółowej kontroli wykonywanej przez interfejs API elementów, ale jeszcze bardziej zmniejsza złożoność, automatycznie tworząc hierarchię elementów na podstawie atrybutów klasy.

MT. Rozwiązanie D zawiera duży zestaw wbudowanych elementów interfejsu użytkownika na potrzeby tworzenia ekranu, ale także rozpoznaje potrzebę dostosowania elementów i zaawansowanych układów ekranu. W związku z tym rozszerzalność jest pierwszoklasową funkcją upieczoną w interfejsie API. Deweloperzy mogą rozszerzać istniejące elementy lub tworzyć nowe, a następnie bezproblemowo integrować.

Ponadto mt. D ma wiele typowych funkcji środowiska użytkownika systemu iOS wbudowanych, takich jak obsługa "ściągania do odświeżenia", asynchroniczne ładowanie obrazów i obsługa wyszukiwania.

W tym artykule przedstawiono kompleksową pracę z usługą MT. D, w tym:

  • MT. Składniki D — skoncentrują się na zrozumieniu klas tworzących mt. D, aby umożliwić szybkie przyspieszenie.
  • Odwołanie do elementów — kompleksowa lista wbudowanych elementów MT.D.
  • Zaawansowane użycie — obejmuje to zaawansowane funkcje, takie jak ściąganie do odświeżenia, wyszukiwanie, ładowanie obrazu tła, używanie linQ do tworzenia hierarchii elementów oraz tworzenie niestandardowych elementów, komórek i kontrolerów do użycia z usługą MT.D.

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.

Informacje o elementach MT. D

Nawet w przypadku korzystania z interfejsu API Emocje ion MT. D tworzy hierarchię elementów pod maską, tak jakby została utworzona bezpośrednio za pośrednictwem interfejsu API elementów. Ponadto obsługa kodu JSON wymieniona w poprzedniej sekcji tworzy również elementy. Z tego powodu ważne jest, aby mieć podstawową wiedzę na temat elementów składowych MT.D.

MT. D tworzy ekrany z następującymi czterema częściami:

  • Kontrolka DialogView
  • Element główny
  • Obszar
  • Element

Kontrolka DialogView

Kontrolka DialogViewController lub DVC w skrócie dziedziczy z UITableViewController tabeli i dlatego reprezentuje ekran z tabelą. Kontrolery DVC można wypchnąć do kontrolera nawigacji tak samo jak zwykły kontroler UITableViewController.

Element główny

Element RootElement to kontener najwyższego poziomu dla elementów, które przechodzą do kontrolera DVC. Zawiera sekcje, które mogą następnie zawierać elementy. Elementy główne nie są renderowane; zamiast tego są to po prostu kontenery dla tego, co faktycznie jest renderowane. Element RootElement jest przypisywany do kontrolera DVC, a następnie dvC renderuje jego elementy podrzędne.

Sekcja

Sekcja jest grupą komórek w tabeli. Podobnie jak w przypadku normalnej sekcji tabeli, opcjonalnie może mieć nagłówek i stopkę, która może być tekstem, a nawet widokami niestandardowymi, jak na poniższym zrzucie ekranu:

As with a normal table section, it can optionally have a header and footer that can either be text, or even custom views, as in this screenshot

Element

Element reprezentuje rzeczywistą komórkę w tabeli. MT. Rozwiązanie D zawiera szeroką gamę elementów reprezentujących różne typy danych lub różne dane wejściowe. Na przykład na poniższych zrzutach ekranu przedstawiono kilka dostępnych elementów:

For example, this screenshots illustrate a few of the available elements

Więcej informacji na temat sekcji i elementów głównych

Teraz bardziej szczegółowo omówimy elementy RootElements i Sekcje.

Elementy główne

Do uruchomienia procesu MonoTouch.Dialog wymagany jest co najmniej jeden element RootElement.

Jeśli element RootElement jest inicjowany z wartością sekcji/elementu, ta wartość jest używana do zlokalizowania elementu podrzędnego, który będzie zawierać podsumowanie konfiguracji, która jest renderowana po prawej stronie ekranu. Na przykład poniższy zrzut ekranu przedstawia tabelę po lewej stronie z komórką zawierającą tytuł ekranu szczegółów po prawej stronie "Deser" wraz z wartością wybranej pustyni.

This screenshot shows a table on the left with a cell containing the title of the detail screen on the right, Dessert, along with the value of the selected desertThis screenshot below shows a table on the left with a cell containing the title of the detail screen on the right, Dessert, along with the value of the selected desert

Elementy główne mogą być również używane wewnątrz sekcji, aby wyzwolić ładowanie nowej zagnieżdżonej strony konfiguracji, jak pokazano powyżej. W przypadku użycia w tym trybie podane podpis jest używany podczas renderowania wewnątrz sekcji i jest również używany jako tytuł podstrony. Na przykład:

var root = new RootElement ("Meals") {
    new Section ("Dinner") {
        new RootElement ("Dessert", new RadioGroup ("dessert", 2)) {
            new Section () {
                new RadioElement ("Ice Cream", "dessert"),
                new RadioElement ("Milkshake", "dessert"),
                new RadioElement ("Chocolate Cake", "dessert")
            }
        }
    }
};

W powyższym przykładzie, gdy użytkownik naciśnie pozycję "Deser", aplikacja MonoTouch.Dialog utworzy nową stronę i przejdzie do niej z elementem głównym "Deser" i grupą radiową z trzema wartościami.

W tym konkretnym przykładzie grupa radiowa wybierze pozycję "Chocolate Cake" w sekcji "Deser", ponieważ przekazaliśmy wartość "2" do grupy radiowej. Oznacza to wybranie drugiego elementu na liście (zero-index).

Wywołanie metody Add lub użycie składni inicjatora języka C# 4 dodaje sekcje. Metody Insert są udostępniane do wstawiania sekcji z animacją.

W przypadku utworzenia elementu RootElement z wystąpieniem grupy (zamiast grupy radiowej) wartość podsumowania elementu RootElement w przypadku wyświetlania w sekcji będzie skumulowaną liczbą wszystkich elementów logicznych i Elementów Pola wyboru, które mają ten sam klucz co wartość Group.Key.

Sekcje

Sekcje są używane do grupowania elementów na ekranie i są jedynymi prawidłowymi bezpośrednimi elementami podrzędnym elementu RootElement. Sekcje mogą zawierać dowolne standardowe elementy, w tym nowe elementy RootElements.

Elementy główne osadzone w sekcji służą do przechodzenia do nowego poziomu głębiej.

Sekcje mogą zawierać nagłówki i stopki jako ciągi lub jako kontrolki UIView. Zazwyczaj będziesz używać tylko ciągów, ale do tworzenia niestandardowych interfejsów użytkownika można użyć dowolnego elementu UIView jako nagłówka lub stopki. Możesz użyć ciągu, aby utworzyć je w następujący sposób:

var section = new Section ("Header", "Footer");

Aby użyć widoków, wystarczy przekazać widoki do konstruktora:

var header = new UIImageView (Image.FromFile ("sample.png"));
var section = new Section (header);

Otrzymywanie powiadomień

Obsługa NSAction

MT. D powierzchni jako NSAction delegat do obsługi wywołań zwrotnych. Załóżmy na przykład, że chcesz obsłużyć zdarzenie dotykowe dla komórki tabeli utworzonej przez MT.D. Podczas tworzenia elementu za pomocą usługi MT. D, po prostu podaj funkcję wywołania zwrotnego, jak pokazano poniżej:

new Section () {
    new StringElement ("Demo Callback", delegate { Console.WriteLine ("Handled"); })
}

Pobieranie wartości elementu

W połączeniu z właściwością Element.Value wywołanie zwrotne może pobrać wartość ustawioną w innych elementach. Rozważmy na przykład następujący kod:

var element = new EntryElement (task.Name, "Enter task description", task.Description);
                
var taskElement = new RootElement (task.Name) {
    new Section () { element },
    new Section () { new DateElement ("Due Date", task.DueDate) },
    new Section ("Demo Retrieving Element Value") {
        new StringElement ("Output Task Description", delegate { Console.WriteLine (element.Value); })
    }
};

Ten kod tworzy interfejs użytkownika, jak pokazano poniżej. Pełny przewodnik po tym przykładzie można znaleźć w samouczku Przewodnik po interfejsie API elementów.

Combined with the Element.Value property, the callback can retrieve the value set in other elements

Gdy użytkownik naciska dolną komórkę tabeli, kod w funkcji anonimowej jest wykonywany, zapisując wartość z element wystąpienia do okienka Danych wyjściowych aplikacji w Visual Studio dla komputerów Mac.

Wbudowane elementy

MT. Element D jest dostarczany z wieloma wbudowanymi elementami komórek tabeli znanymi jako Elementy. Te elementy są używane do wyświetlania różnych typów w komórkach tabeli, takich jak ciągi, zmiennoprzecinki, daty, a nawet obrazy, aby wymienić tylko kilka. Każdy element odpowiednio wyświetla typ danych. Na przykład element logiczny wyświetli przełącznik, aby przełączyć jego wartość. Podobnie element zmiennoprzecinkowy wyświetli suwak, aby zmienić wartość zmiennoprzecinkową.

Istnieją jeszcze bardziej złożone elementy do obsługi bogatszych typów danych, takich jak obrazy i html. Na przykład element html, który otworzy element UIWebView w celu załadowania strony internetowej po wybraniu, wyświetla podpis w komórce tabeli.

Praca z wartościami elementów

Elementy używane do przechwytywania danych wejściowych użytkownika uwidaczniają właściwość publiczną Value , która w dowolnym momencie przechowuje bieżącą wartość elementu. Jest on automatycznie aktualizowany, gdy użytkownik korzysta z aplikacji.

Jest to zachowanie wszystkich elementów, które są częścią okna MonoTouch.Dialog, ale nie jest wymagane dla elementów utworzonych przez użytkownika.

String, element

Element StringElement pokazuje podpis po lewej stronie komórki tabeli i wartość ciągu po prawej stronie komórki.

A StringElement shows a caption on the left side of a table cell and the string value on the right side of the cell

Aby użyć elementu StringElement jako przycisku, podaj delegata.

new StringElement ("Click me", () => { 
    new UIAlertView("Tapped", "String Element Tapped", null, "ok", null).Show();
});

To use a StringElement as a button, provide a delegate

Stylizowany element ciągu

Element StyledStringElement umożliwia prezentowanie ciągów przy użyciu wbudowanych stylów komórek tabeli lub niestandardowego formatowania.

A StyledStringElement allows strings to be presented using either built-in table cell styles or with custom formatting

Klasa StyledStringElement pochodzi z StringElementklasy , ale umożliwia deweloperom dostosowanie kilku właściwości, takich jak Czcionka, kolor tekstu, kolor komórki tła, tryb podziału linii, liczba wierszy do wyświetlenia i czy należy wyświetlić akcesorium.

Wielowierszowy element

Multiline Element

Entry, element

Parametr EntryElement, jak wskazuje nazwa, służy do pobierania danych wejściowych użytkownika. Obsługuje zwykłe ciągi lub hasła, w których znaki są ukryte.

The EntryElement is used to get user input

Jest inicjowany z trzema wartościami:

  • Podpis dla wpisu, który zostanie wyświetlony użytkownikowi.
  • Tekst zastępczy (jest to tekst wyszarzony, który zawiera wskazówkę dla użytkownika).
  • Wartość tekstu.

Symbol zastępczy i wartość mogą mieć wartość null. Jednak podpis jest wymagany.

W dowolnym momencie uzyskanie dostępu do właściwości Value może pobrać wartość EntryElement.

KeyboardType Ponadto właściwość można ustawić w czasie tworzenia na styl typu klawiatury żądany dla wpisu danych. Można go użyć do skonfigurowania klawiatury przy użyciu wartości UIKeyboardType wymienionych poniżej:

  • Liczbowe
  • Phone
  • Url
  • Email

Boolean, element

Boolean Element

Element pola wyboru

Checkbox Element

Element radiowy

Element RadioElement wymaga RadioGroup określenia elementu w obiekcie RootElement.

mtRoot = new RootElement ("Demos", new RadioGroup("MyGroup", 0));

A RadioElement requires a RadioGroup to be specified in the RootElement

RootElements są również używane do koordynowania elementów radiowych. Elementy RadioElement członkowskie mogą obejmować wiele sekcji (na przykład zaimplementować coś podobnego do selektora tonu pierścienia i oddzielić niestandardowe odcienie dzwonków od dzwonków systemowych). Widok podsumowania spowoduje wyświetlenie aktualnie wybranego elementu radiowego. Aby użyć tego polecenia, utwórz element RootElement z konstruktorem grupy, w następujący sposób:

var root = new RootElement ("Meals", new RadioGroup ("myGroup", 0));

Nazwa grupy w RadioGroup jest używana do wyświetlania wybranej wartości na stronie zawierającej (jeśli istnieje) i wartości, która jest równa zero w tym przypadku, jest indeksem pierwszego wybranego elementu.

Znaczek, element

Badge Element

Float, element

Float Element

Activity, element

Activity Element

Date, element

Date Element

Po wybraniu komórki odpowiadającej elementowi DateElement zostanie wyświetlony selektor dat, jak pokazano poniżej:

When the cell corresponding to the DateElement is selected, a date picker is presented as shown

Time, element

Time Element

Po wybraniu komórki odpowiadającej elementowi TimeElement zostanie wyświetlony selektor czasu, jak pokazano poniżej:

When the cell corresponding to the TimeElement is selected, a time picker is presented as shown

DateTime, element

DateTime Element

Po wybraniu komórki odpowiadającej elementowi DateTimeElement zostanie wyświetlony selektor daty/godziny, jak pokazano poniżej:

When the cell corresponding to the DateTimeElement is selected, a datetime picker is presented as shown

HTML, element

HTML Element

Spowoduje to HTMLElement wyświetlenie wartości jej Caption właściwości w komórce tabeli. Zaznaczonahe, przypisana Url do elementu jest ładowana w kontrolce UIWebView , jak pokazano poniżej:

Whe selected, the Url assigned to the element is loaded in a UIWebView control as shown below

Message, element

Message Element

Załaduj więcej elementów

Użyj tego elementu, aby umożliwić użytkownikom ładowanie większej liczby elementów na liście. Można dostosować normalne i ładowane podpis, a także czcionkę i kolor tekstu. Wskaźnik UIActivity rozpoczyna animowanie, a podpis ładowania jest wyświetlany, gdy użytkownik naciągnie komórkę, a następnie NSAction zostanie wykonany przekazany do konstruktora. Po zakończeniu NSAction kodu wskaźnik przestaje animować, UIActivity a normalny podpis jest ponownie wyświetlany.

UIView, element

Ponadto można wyświetlić dowolny niestandardowy element UIView przy użyciu elementu UIViewElement.

Element rysowany przez właściciela

Ten element musi być podklasowany, ponieważ jest to klasa abstrakcyjna. Należy zastąpić metodę Height(RectangleF bounds) , w której należy zwrócić wysokość elementu, a także Draw(RectangleF bounds, CGContext context, UIView view) w którym należy wykonać wszystkie dostosowane rysunki w ramach podanych granic przy użyciu parametrów kontekstu i widoku. Ten element wykonuje ciężkie podnoszenie podklasy UIView, a umieszczenie go w komórce do zwrócenia, pozostawiając tylko konieczność zaimplementowania dwóch prostych przesłonięć. Lepszą przykładową implementację można zobaczyć w przykładowej DemoOwnerDrawnElement.cs aplikacji w pliku .

Oto bardzo prosty przykład implementacji klasy:

public class SampleOwnerDrawnElement : OwnerDrawnElement
{
    public SampleOwnerDrawnElement (string text) : base(UITableViewCellStyle.Default, "sampleOwnerDrawnElement")
    {
        this.Text = text;
    }

    public string Text { get; set; }

    public override void Draw (RectangleF bounds, CGContext context, UIView view)
    {
        UIColor.White.SetFill();
        context.FillRect(bounds);

        UIColor.Black.SetColor();   
        view.DrawString(this.Text, new RectangleF(10, 15, bounds.Width - 20, bounds.Height - 30), UIFont.BoldSystemFontOfSize(14.0f), UILineBreakMode.TailTruncation);
    }

    public override float Height (RectangleF bounds)
    {
        return 44.0f;
    }
}

JSON, element

Jest JsonElement to podklasa RootElementRootElement , która rozszerza klasę , aby móc załadować zawartość zagnieżdżonego elementu podrzędnego z lokalnego lub zdalnego adresu URL.

Element JsonElement jest elementem RootElement , który można utworzyć w dwóch formach. Jedna wersja tworzy obiekt RootElement , który załaduje zawartość na żądanie. Są one tworzone przy użyciu JsonElement konstruktorów, które przyjmują dodatkowy argument na końcu, adres URL, aby załadować zawartość z:

var je = new JsonElement ("Dynamic Data", "https://tirania.org/tmp/demo.json");

Drugi formularz tworzy dane z pliku lokalnego lub istniejącego System.Json.JsonObject , który został już przeanalizowany:

var je = JsonElement.FromFile ("json.sample");
using (var reader = File.OpenRead ("json.sample"))
    return JsonElement.FromJson (JsonObject.Load (reader) as JsonObject, arg);

Aby uzyskać więcej informacji na temat używania formatu JSON z usługą MT. D, zobacz samouczek przewodnik po elementach JSON.

Inne funkcje

Obsługa ściągania do odświeżania

Pull-to-Refresh to efekt wizualny pierwotnie znaleziony w aplikacji Tweetie2, który stał się popularnym efektem wśród wielu aplikacji.

Aby dodać obsługę automatycznego ściągania do odświeżania w oknach dialogowych, wystarczy wykonać tylko dwie czynności: podłączyć program obsługi zdarzeń, aby otrzymywać powiadomienia, gdy użytkownik ściąga dane i powiadamia DialogViewController , kiedy dane zostały załadowane, aby wrócić do stanu domyślnego.

Podłączanie powiadomienia jest proste; po prostu nawiąż połączenie ze zdarzeniem RefreshRequested w obiekcie DialogViewControllerw następujący sposób:

dvc.RefreshRequested += OnUserRequestedRefresh;

Następnie w metodzie OnUserRequestedRefreshutwórz kolejkę niektórych danych ładowania, zażądasz danych z sieci lub uruchomisz wątek, aby obliczyć dane. Po załadowaniu danych należy powiadomić DialogViewController o tym, że nowe dane są w stanie i przywrócić widok do stanu domyślnego, należy to zrobić, wywołując polecenie ReloadComplete:

dvc.ReloadComplete ();

Obsługa wyszukiwania

Aby obsługiwać wyszukiwanie, ustaw EnableSearch właściwość w obiekcie DialogViewController. Możesz również ustawić SearchPlaceholder właściwość, która ma być używana jako tekst znaku wodnego na pasku wyszukiwania.

Wyszukiwanie spowoduje zmianę zawartości widoku jako typów użytkowników. Wyszukuje widoczne pola i wyświetla je użytkownikowi. Funkcja DialogViewController udostępnia trzy metody programowego inicjowania, kończenie lub wyzwalanie nowej operacji filtrowania w wynikach. Poniżej wymieniono następujące metody:

  • StartSearch
  • FinishSearch
  • PerformFilter

System jest rozszerzalny, więc możesz zmienić to zachowanie, jeśli chcesz.

Ładowanie obrazu tła

Aplikacja MonoTouch.Dialog zawiera moduł ładujący obrazów aplikacji TweetStation . Ten moduł ładujący obrazów może służyć do ładowania obrazów w tle, obsługuje buforowanie i może powiadamiać kod po załadowaniu obrazu.

Ograniczy również liczbę wychodzących połączeń sieciowych.

Moduł ładujący obrazów jest implementowany w ImageLoader klasie . Wystarczy wywołać DefaultRequestImage metodę . Musisz podać identyfikator URI dla obrazu, który chcesz załadować, a także wystąpienie interfejsu IImageUpdated , które zostanie wywołane po załadowaniu obrazu.

Na przykład poniższy kod ładuje obraz z adresu URL do elementu BadgeElement:

string uriString = "http://some-server.com/some image url";

var rootElement = new RootElement("Image Loader") {
    new Section() {
        new BadgeElement( ImageLoader.DefaultRequestImage( new Uri(uriString), this), "Xamarin")
    }
};

Klasa ImageLoader uwidacznia metodę Przeczyszczania, którą można wywołać, gdy chcesz zwolnić wszystkie obrazy, które są obecnie buforowane w pamięci. Bieżący kod zawiera pamięć podręczną dla 50 obrazów. Jeśli chcesz użyć innego rozmiaru pamięci podręcznej (na przykład jeśli spodziewasz się, że obrazy będą zbyt duże, że 50 obrazów będzie za dużo), możesz po prostu utworzyć wystąpienia narzędzia ImageLoader i przekazać liczbę obrazów, które mają być przechowywane w pamięci podręcznej.

Używanie linQ do tworzenia hierarchii elementów

Za pomocą sprytnego użycia składni inicjowania LINQ i C# linQ można użyć do utworzenia hierarchii elementów. Na przykład poniższy kod tworzy ekran z niektórych tablic ciągów i obsługuje wybór komórek za pośrednictwem funkcji anonimowej, która jest przekazywana do każdego StringElementelementu :

var rootElement = new RootElement ("LINQ root element") {
    from x in new string [] { "one", "two", "three" }
    select new Section (x) {
        from y in "Hello:World".Split (':')
        select (Element) new StringElement (y, delegate { Debug.WriteLine("cell tapped"); })
    }
};

Może to być łatwe w połączeniu z magazynem danych XML lub danymi z bazy danych w celu tworzenia złożonych aplikacji niemal całkowicie z danych.

Rozszerzanie mt. D

Tworzenie elementów niestandardowych

Możesz utworzyć własny element, dziedzicząc z istniejącego elementu lub przez wyprowadzanie z elementu klasy głównej.

Aby utworzyć własny element, należy zastąpić następujące metody:

// To release any heavy resources that you might have
void Dispose (bool disposing);

// To retrieve the UITableViewCell for your element
// you would need to prepare the cell to be reused, in the
// same way that UITableView expects reusable cells to work
UITableViewCell GetCell (UITableView tv);

// To retrieve a "summary" that can be used with
// a root element to render a summary one level up.  
string Summary ();

// To detect when the user has tapped on the cell
void Selected (DialogViewController dvc, UITableView tableView, NSIndexPath path);

// If you support search, to probe if the cell matches the user input
bool Matches (string text);

Jeśli element może mieć zmienny rozmiar, musisz zaimplementować IElementSizing interfejs, który zawiera jedną metodę:

// Returns the height for the cell at indexPath.Section, indexPath.Row
float GetHeight (UITableView tableView, NSIndexPath indexPath);

Jeśli planujesz zaimplementowanie GetCell metody przez wywołanie base.GetCell(tv) i dostosowanie zwróconej komórki, należy również zastąpić CellKey właściwość , aby zwrócić klucz, który będzie unikatowy dla elementu, w następujący sposób:

static NSString MyKey = new NSString ("MyKey");
protected override NSString CellKey {
    get {
        return MyKey;
    }
}

Działa to w przypadku większości elementów, ale nie dla StringElement elementów i StyledStringElement , ponieważ używają własnego zestawu kluczy w różnych scenariuszach renderowania. Należy replikować kod w tych klasach.

DialogViewControllers (DVCs)

Zarówno Emocje ion, jak i interfejs API elementów używają tego samego DialogViewControllerelementu . Czasami warto dostosować wygląd widoku lub użyć niektórych funkcji UITableViewController , które wykraczają poza podstawowe tworzenie interfejsów użytkownika.

Element DialogViewController jest tylko podklasą UITableViewController klasy i można go dostosować w taki sam sposób, jak można dostosować element UITableViewController.

Jeśli na przykład chcesz zmienić styl listy na Grouped wartość lub Plain, możesz ustawić tę wartość, zmieniając właściwość podczas tworzenia kontrolera, w następujący sposób:

var myController = new DialogViewController (root, true) {
    Style = UITableViewStyle.Grouped;
}

Aby uzyskać bardziej zaawansowane dostosowania elementu DialogViewController, takie jak ustawienie jego tła, należy je podklasować i zastąpić odpowiednie metody, jak pokazano w poniższym przykładzie:

class SpiffyDialogViewController : DialogViewController {
    UIImage image;

    public SpiffyDialogViewController (RootElement root, bool pushing, UIImage image) 
        : base (root, pushing) 
    {
        this.image = image;
    }

    public override LoadView ()
    {
        base.LoadView ();
        var color = UIColor.FromPatternImage(image);
        TableView.BackgroundColor = UIColor.Clear;
        ParentViewController.View.BackgroundColor = color;
    }
}

Innym punktem dostosowywania jest następująca metoda wirtualna w pliku DialogViewController:

public override Source CreateSizingSource (bool unevenRows)

Ta metoda powinna zwrócić podklasę DialogViewController.Source dla przypadków, w których komórki mają równomierny rozmiar lub podklasę DialogViewController.SizingSource , jeśli komórki są nierówne.

Tego przesłonięcia można użyć do przechwycenia dowolnej metody UITableViewSource . Na przykład funkcja TweetStation używa tej funkcji do śledzenia, kiedy użytkownik przewinął do góry i odpowiednio zaktualizuje liczbę nieprzeczytanych tweetów.

Walidacja

Elementy nie zapewniają weryfikacji siebie, ponieważ modele, które są dobrze odpowiednie dla stron internetowych i aplikacji klasycznych, nie są mapowane bezpośrednio na model interakcji i Telefon.

Jeśli chcesz przeprowadzić walidację danych, należy to zrobić, gdy użytkownik wyzwoli akcję z wprowadzonymi danymi. Na przykład przycisk Gotowe lub Dalej na górnym pasku narzędzi lub niektóre StringElement używane jako przycisk, aby przejść do następnego etapu.

W tym miejscu należy przeprowadzić podstawową walidację danych wejściowych i być może bardziej skomplikowaną walidację, taką jak sprawdzanie poprawności kombinacji użytkownika/hasła z serwerem.

Sposób powiadamiania użytkownika o błędzie jest specyficzny dla aplikacji. Możesz wyświetlić UIAlertView lub wyświetlić wskazówkę.

Podsumowanie

W tym artykule omówiono wiele informacji o monoTouch.Dialog. Omówił podstawy tego, jak mt. D działa i obejmuje różne składniki wchodzące w skład MT.D. Przedstawiono również szeroką gamę elementów i dostosowań tabeli obsługiwanych przez usługę MT. D i omówił sposób mt. D można rozszerzyć za pomocą elementów niestandardowych. Ponadto wyjaśniono obsługę formatu JSON w usłudze MT. D, który umożliwia dynamiczne tworzenie elementów na podstawie kodu JSON.