Znacznik języka Json dla obiektu MonoTouch.Dialog

Artykuł
03/08/2024

Na tej stronie opisano znaczniki Json akceptowane przez element JsonElement monoTouch.Dialog

Zacznijmy od przykładu. Poniżej znajduje się kompletny plik JSON, który można przekazać do elementu JsonElement.

{     
    "title": "Json Sample",
    "sections": [ 
        {
            "header": "Booleans",
            "footer": "Slider or image-based",
            "id": "first-section",
            "elements": [
                { 
                    "type": "boolean",
                    "caption": "Demo of a Boolean",
                    "value": true
                }, {
                    "type": "boolean",
                    "caption": "Boolean using images",
                    "value": false,
                    "on": "favorite.png",
                    "off": "~/favorited.png"
                }, {
                    "type": "root",
                    "title": "Tap for nested controller",
                    "sections": [
                        {
                            "header": "Nested view!",
                            "elements": [
                                {
                                    "type": "boolean",
                                    "caption": "Just a boolean",
                                    "id": "the-boolean",
                                    "value": false
                                }, {
                                    "type": "string",
                                    "caption": "Welcome to the nested controller"
                                }
                            ]
                        }
                    ]
                }
            ]
        }, {
            "header": "Entries",
            "elements" : [
                {
                    "type": "entry",
                    "caption": "Username",
                    "value": "",
                    "placeholder": "Your account username"
                }
            ]
        }
    ]
}

Powyższy znacznik tworzy następujący interfejs użytkownika:

Każdy element w drzewie może zawierać właściwość "id". W czasie wykonywania można odwoływać się do poszczególnych sekcji lub elementów przy użyciu indeksatora JsonElement. Jak to:

var jsonElement = JsonElement.FromFile ("demo.json");

var firstSection = jsonElement ["first-section"] as Section;

var theBoolean = jsonElement ["the-boolean"] as BooleanElement;

Składnia elementu głównego

Element Główny zawiera następujące wartości:

title
sections (opcjonalny)

Element główny może pojawić się wewnątrz sekcji jako element w celu utworzenia zagnieżdżonego kontrolera. W takim przypadku właściwość dodatkowa "type" musi być ustawiona na "root"

Adres URL

"url" Jeśli właściwość jest ustawiona, jeśli użytkownik naciągnie ten element RootElement, kod zażąda pliku z określonego adresu URL i spowoduje wyświetlenie nowej zawartości. Można go użyć do utworzenia rozszerzenia interfejsu użytkownika z serwera na podstawie tego, co użytkownik naciągnie.

grupa

Jeśli zostanie ustawiona, spowoduje to ustawienie nazwy grupy dla elementu głównego. Nazwy grup służą do wybierania podsumowania wyświetlanego jako wartość elementu głównego z jednego z zagnieżdżonych elementów w elemecie. Jest to wartość pola wyboru lub wartość przycisku radiowego.

wybrany radioselekt

Identyfikuje element radiowy wybrany w zagnieżdżonych elementach

title

Jeśli jest obecny, będzie to tytuł używany dla elementu RootElement

type

Musi być ustawiona na "root" wartość , gdy ta wartość jest wyświetlana w sekcji (jest to używane do zagnieżdżania kontrolerów).

sekcje

Jest to tablica Json z poszczególnymi sekcjami

Składnia sekcji

Sekcja zawiera:

header (opcjonalny)
footer (opcjonalny)
elements Tablicy

Jeśli jest obecny, tekst nagłówka jest wyświetlany jako podpis sekcji.

Jeśli jest obecny, stopka jest wyświetlana w dolnej części sekcji.

elementy

Jest to tablica elementów. Każdy element musi zawierać co najmniej jeden klucz, "type" czyli klucz używany do identyfikowania rodzaju elementu do utworzenia. Niektóre elementy mają niektóre typowe właściwości, takie jak "caption" i "value". Oto lista obsługiwanych elementów:

string elementy (zarówno z stylem, jak i bez)
entry wiersze (zwykłe lub hasło)
boolean wartości (przy użyciu przełączników lub obrazów)

Elementy ciągu mogą być używane jako przyciski, udostępniając metodę wywoływania, gdy użytkownik naciągnie komórkę lub akcesorium,

Elementy renderowania

Elementy renderowania są oparte na elementach StringElement języka C# i StyledStringElement i mogą renderować informacje na różne sposoby i można je renderować na różne sposoby. Najprostsze elementy można utworzyć w następujący sposób:

{
    "type": "string",
    "caption": "Json Serializer"
}

Spowoduje to wyświetlenie prostego ciągu ze wszystkimi wartościami domyślnymi: czcionką, tłem, kolorem tekstu i dekoracjami. Można podłączyć akcje do tych elementów i sprawić, że zachowują się jak przyciski, ustawiając "ontap" właściwość lub "onaccessorytap" właściwości:

{
    "type": "string",
    "caption": "View Photos",
    "ontap": "Acme.PhotoLibrary.ShowPhotos"
}

Powyższe wywoła metodę "ShowPhotos" w klasie "Acme.PhotoLibrary". Element "onaccessorytap" jest podobny, ale zostanie wywołany tylko wtedy, gdy użytkownik naciągnie akcesorium zamiast naciskać na komórkę. Aby to włączyć, należy również ustawić akcesorium:

{
    "type": "string",
    "caption": "View Photos",
    "ontap": "Acme.PhotoLibrary.ShowPhotos",
    "accessory": "detail-disclosure",
    "onaccessorytap": "Acme.PhotoLibrary.ShowStats"
}

Elementy renderowania mogą wyświetlać dwa ciągi jednocześnie, jeden jest podpis, a drugi jest wartością. Sposób renderowania tych ciągów zależy od stylu. Można to ustawić przy użyciu "style" właściwości . Wartość domyślna spowoduje wyświetlenie podpis po lewej stronie i wartości po prawej stronie. Aby uzyskać więcej informacji, zobacz sekcję dotyczącą stylu. Kolory są kodowane przy użyciu symbolu "#", po którym następuje cyfry szesnastkowe reprezentujące wartości czerwone, zielone, niebieskie i może alfa. Zawartość może być zakodowana w postaci krótkiej (3 lub 4 cyfry szesnastkowej), która reprezentuje wartości RGB lub RGBA. Albo długa forma (6 lub 8 cyfr), która reprezentuje wartości RGB lub RGBA. Krótka wersja jest skrótem do pisania tej samej cyfry szesnastkowej dwa razy. Dlatego stała "#1bc" jest inteprepreted jako red=0x11, green=0xbb i blue=0xcc. Jeśli wartość alfa nie jest obecna, kolor jest nieprzezroczystym. Kilka przykładów:

"background": "#f00"
"background": "#fa08f880"

Akcesoria

Określa rodzaj metody dostępu, która ma być wyświetlana w elemecie renderowania, możliwe są następujące wartości:

checkmark
detail-disclosure
disclosure-indicator

Jeśli wartość nie jest obecna, nie jest wyświetlana żadna akcesorium

tło

Właściwość tła ustawia kolor tła komórki. Wartość jest adresem URL obrazu (w tym przypadku asynchroniczny program do pobierania obrazów zostanie wywołany, a tło zostanie zaktualizowane po pobraniu obrazu) lub może być kolorem określonym przy użyciu składni kolorów.

podpis

Główny ciąg, który ma być wyświetlany w elemecie renderowania. Czcionkę i kolor można dostosować, ustawiając "textcolor" właściwości i "font" . Styl renderowania "style" jest określany przez właściwość .

kolor i kolor szczegółów

Kolor, który ma być używany dla tekstu głównego lub tekstu szczegółowego.

detailfont i czcionka

Czcionka do użycia dla podpis lub tekstu szczegółów. Format specyfikacji czcionki to nazwa czcionki, po której opcjonalnie następuje kreska i rozmiar punktu. Poniżej przedstawiono prawidłowe specyfikacje czcionek:

"Helvetica"
"Helvetica-14"

Linebreak

Określa podział wierszy. Możliwe wartości to:

character-wrap
clip
head-truncation
middle-truncation
tail-truncation
word-wrap

Oba character-wrap elementy i word-wrap mogą być używane razem z właściwością "lines" ustawioną na zero, aby przekształcić element renderowania w element wielowierszowy.

ontap i onaccessorytap

Te właściwości muszą wskazywać nazwę metody statycznej w aplikacji, która przyjmuje obiekt jako parametr. Podczas tworzenia hierarchii przy użyciu metod JsonDialog.FromFile lub JsonDialog.FromJson można przekazać opcjonalną wartość obiektu. Ta wartość obiektu jest następnie przekazywana do metod. Można go użyć, aby przekazać jakiś kontekst do metody statycznej. Na przykład:

class Foo {
    Foo ()
    {
        root = JsonDialog.FromJson (myJson, this);
    }

    static void Callback (object obj)
    {
        Foo myFoo = (Foo) obj;
        obj.Callback ();
    }
}

linie

Jeśli jest ustawiona wartość zero, spowoduje to automatyczne ustawianie rozmiaru elementu w zależności od zawartości zawartych ciągów. Aby to działało, należy również ustawić "linebreak" właściwość na "character-wrap" lub "word-wrap".

— styl

Styl określa rodzaj stylu komórki, który będzie używany do renderowania zawartości i odpowiada wartościom wyliczenia UITableViewCellStyle. Możliwe wartości to:

"default"
"value1"
"value2"
"subtitle" : tekst z podtytułem.

Napisów

Wartość do użycia dla podtytułu. Jest to skrót umożliwiający ustawienie stylu na "subtitle" i ustawienie "value" właściwości na ciąg. Dotyczy to zarówno pojedynczego wpisu.

Textcolor

Kolor do użycia dla tekstu.

wartość

Wartość pomocnicza, która ma być wyświetlana w elemecie renderowania. Na układ tego ustawienia ma wpływ "style" ustawienie. Czcionkę i kolor można dostosować, ustawiając wartości "detailfont" i "detailcolor".

Elementy logiczne

Elementy logiczne powinny ustawić typ na "bool", może zawierać "caption" wartość , aby wyświetlić, a "value" właściwość jest ustawiona na wartość true lub false. "on" Jeśli właściwości i "off" są ustawione, przyjmuje się, że są obrazami. Obrazy są rozpoznawane względem bieżącego katalogu roboczego w aplikacji. Jeśli chcesz odwołać się do plików względnych pakietu, możesz użyć "~" skrótu do reprezentowania katalogu pakietu aplikacji. Na przykład "~/favorite.png" będzie favorite.png, który znajduje się w pliku pakietu. Na przykład:

{ 
    "type": "boolean",
    "caption": "Demo of a Boolean",
    "value": true
},

{
    "type": "boolean",
    "caption": "Boolean using images",
    "value": false,
    "on": "favorite.png",
    "off": "~/favorited.png"
}

type

Typ można ustawić na "boolean" wartość lub "checkbox". Jeśli ustawiono wartość logiczną, użyje identyfikatora UISlider lub obrazów (jeśli są ustawione zarówno "on" , jak i "off" ustawione). Jeśli ustawisz pole wyboru na wartość , będzie ono używać pola wyboru. Właściwość "group" może służyć do tagowania elementu logicznego jako należącego do określonej grupy. Jest to przydatne, jeśli element główny zawierający ma "group" również właściwość , ponieważ katalog główny będzie podsumowywać wyniki z liczbą wszystkich wartości logicznych (lub pól wyboru), które należą do tej samej grupy.

Elementy wpisu

Elementy wprowadzania umożliwiają użytkownikowi wprowadzanie danych. Typ elementów wejściowych to "entry" lub "password". Właściwość "caption" jest ustawiona na tekst, który ma być wyświetlany po prawej stronie, a "value" właściwość jest ustawiona na wartość początkową, aby ustawić wpis na . Element "placeholder" służy do wyświetlania użytkownikowi wskazówek dotyczących pustych wpisów (jest wyświetlany jako wyszarzony). Oto kilka przykładów:

{
    "type": "entry",
    "caption": "Username",
    "value": "",
    "placeholder": "Your account username"
}, {
    "type": "password",
    "caption": "Password",
    "value": "",
    "placeholder": "You password"
}, {
    "type": "entry",
    "caption": "Zip Code",
    "value": "01010",
    "placeholder": "your zip code",
    "keyboard": "numbers"
}, {
    "type": "entry",
    "return-key": "route",
    "caption": "Entry with 'route'",
    "placeholder": "captialization all + no corrections",
    "capitalization": "all",
    "autocorrect": "no"
}

autocorrect

Określa styl autokorekty do użycia dla wpisu. Możliwe wartości to true lub false (lub ciągi "yes" i "no").

Wielkości liter

Styl wielkich liter do użycia dla wpisu. Możliwe wartości to:

all
none
sentences
words

podpis

Podpis do użycia dla wpisu

klawiatura

Typ klawiatury, który ma być używany do wprowadzania danych. Możliwe wartości to:

ascii
decimal
default
email
name
numbers
numbers-and-punctuation
twitter
url

Symbol zastępczy

Tekst wskazówki wyświetlany, gdy wpis ma pustą wartość.

return-key

Etykieta używana dla klucza powrotnego. Możliwe wartości to:

default
done
emergencycall
go
google
join
next
route
search
send
yahoo

wartość

Początkowa wartość wpisu

Elementy radiowe

Elementy radiowe mają typ "radio". Wybrany element jest wybierany przez radioselected właściwość w jej zawierającym element główny. Ponadto jeśli dla właściwości ustawiono "group" wartość, ten przycisk radiowy należy do tej grupy.

Elementy daty i godziny

Typy elementów "datetime""date" i "time" służą do renderowania dat z godzinami, datami lub godzinami. Te elementy przyjmują jako parametry podpis i wartość. Wartość można zapisać w dowolnym formacie obsługiwanym przez funkcję .NET DateTime.Parse. Przykład:

"header": "Dates and Times",
"elements": [
    {
        "type": "datetime",
        "caption": "Date and Time",
        "value": "Sat, 01 Nov 2008 19:35:00 GMT"
    }, {
        "type": "date",
        "caption": "Date",
        "value": "10/10"
    }, {
        "type": "time",
        "caption": "Time",
        "value": "11:23"
    }                       
]

Html/Web, element

Możesz utworzyć komórkę, która po naciśnięciu zostanie osadzona w widoku UIWebView, który renderuje zawartość określonego adresu URL — lokalnego lub zdalnego przy użyciu "html" typu . Jedyne dwie właściwości tego elementu to "caption" i "url":

{
    "type": "html",
    "caption": "Miguel's blog",
    "url": "https://tirania.org/blog" 
}

Udostępnij za pośrednictwem

Znacznik języka Json dla obiektu MonoTouch.Dialog

Składnia elementu głównego

Adres URL

grupa

wybrany radioselekt

title

type

sekcje

Składnia sekcji

nagłówek

stopka

elementy

Elementy renderowania

Akcesoria

tło

podpis

kolor i kolor szczegółów

detailfont i czcionka

Linebreak

ontap i onaccessorytap

linie

— styl

Napisów

Textcolor

wartość

Elementy logiczne

type

Elementy wpisu

autocorrect

Wielkości liter

podpis

klawiatura

Symbol zastępczy

return-key

wartość

Elementy radiowe

Elementy daty i godziny

Html/Web, element

Dodatkowe zasoby