Markup JSON per MonoTouch.Dialog

Questa pagina descrive il markup Json accettato da JsonElement di MonoTouch.Dialog

Iniziamo con un esempio. Di seguito è riportato un file JSON completo che può essere passato a 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"
                }
            ]
        }
    ]
}

Il markup precedente produce l'interfaccia utente seguente:

Ogni elemento nell'albero può contenere la proprietà "id". In fase di esecuzione è possibile fare riferimento a singole sezioni o elementi usando l'indicizzatore JsonElement. nel modo seguente:

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

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

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

Sintassi dell'elemento radice

L'elemento Root contiene i valori seguenti:

• title
• sections (facoltativo)

L'elemento radice può essere visualizzato all'interno di una sezione come elemento per creare un controller annidato. In tal caso, la proprietà "type" aggiuntiva deve essere impostata su "root"

URL.

Se la "url" proprietà è impostata, se l'utente tocca questo elemento RootElement, il codice richiederà un file dall'URL specificato e renderà visualizzato il contenuto delle nuove informazioni. È possibile usarlo per creare l'estensione dell'interfaccia utente dal server in base a ciò che l'utente tocca.

group

Se impostato, imposta il nomegruppo per l'elemento radice. I nomi di gruppo vengono usati per selezionare un riepilogo visualizzato come valore dell'elemento radice da uno degli elementi annidati nell'elemento . Si tratta del valore di una casella di controllo o del valore di un pulsante di opzione.

radioselected

Identifica l'elemento di opzione selezionato negli elementi annidati

title

Se presente, sarà il titolo usato per RootElement

type

Deve essere impostato su "root" quando questo viene visualizzato in una sezione (usato per annidare i controller).

sezioni

Si tratta di una matrice Json con singole sezioni

Sintassi della sezione

La sezione contiene:

• header (facoltativo)
• footer (facoltativo)
• Matrice elements

di autorizzazione

Se presente, il testo dell'intestazione viene visualizzato come didascalia della sezione.

piè di pagina

Se presente, il piè di pagina viene visualizzato nella parte inferiore della sezione.

Elementi figlio

Si tratta di una matrice di elementi. Ogni elemento deve contenere almeno una chiave, ovvero la "type" chiave usata per identificare il tipo di elemento da creare. Alcuni elementi condividono alcune proprietà comuni come "caption" e "value". Di seguito è riportato l'elenco degli elementi supportati:

• string elementi (con e senza stili)
• entry righe (normale o password)
• boolean valori (con opzioni o immagini)

Gli elementi stringa possono essere utilizzati come pulsanti fornendo un metodo da richiamare quando l'utente tocca la cella o l'accessorio,

Elementi di rendering

Gli elementi di rendering sono basati su C# StringElement e StyledStringElement e possono eseguire il rendering delle informazioni in vari modi ed è possibile eseguirne il rendering in diversi modi. Gli elementi più semplici possono essere creati come segue:

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

Verrà visualizzata una stringa semplice con tutte le impostazioni predefinite: carattere, sfondo, colore del testo e decorazioni. È possibile associare le azioni a questi elementi e renderle simili ai pulsanti impostando la "ontap" proprietà o le "onaccessorytap" proprietà:

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

Il codice precedente richiama il metodo "Show Foto" nella classe "Acme.PhotoLibrary". è "onaccessorytap" simile, ma verrà richiamato solo se l'utente tocca l'accessorio invece di toccare la cella. Per abilitare questa operazione, è necessario impostare anche l'accessorio:

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

Gli elementi di rendering possono visualizzare due stringhe contemporaneamente, una è la didascalia e un'altra è il valore. Il rendering di queste stringhe dipende dallo stile, è possibile impostarli usando la "style" proprietà . Il valore predefinito mostrerà il didascalia a sinistra e il valore a destra. Per altri dettagli, vedere la sezione relativa allo stile. I colori vengono codificati usando il simbolo '#' seguito da numeri esadecimali che rappresentano i valori per i valori rosso, verde, blu e forse alfa. Il contenuto può essere codificato in forma breve (3 o 4 cifre esadecimali) che rappresenta valori RGB o RGBA. Oppure la forma lunga (6 o 8 cifre) che rappresentano valori RGB o RGBA. La versione breve è una abbreviata per scrivere la stessa cifra esadecimale due volte. La costante "#1bc" viene quindi intepretata come red=0x11, green=0xbb e blue=0xcc. Se il valore alfa non è presente, il colore è opaco. Alcuni esempi:

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

Accessorio

Determina il tipo di accessorio da visualizzare nell'elemento di rendering, i possibili valori sono:

• checkmark
• detail-disclosure
• disclosure-indicator

Se il valore non è presente, non viene visualizzato alcun accessorio

background

La proprietà di sfondo imposta il colore di sfondo per la cella. Il valore è un URL di un'immagine (in questo caso, il downloader di immagini asincrone verrà richiamato e lo sfondo verrà aggiornato dopo il download dell'immagine) oppure può essere un colore specificato usando la sintassi del colore.

caption

Stringa principale da visualizzare nell'elemento di rendering. Il tipo di carattere e il colore possono essere personalizzati impostando le "textcolor" proprietà e "font" . Lo stile di rendering è determinato dalla "style" proprietà .

colore e colore dettaglio

Colore da utilizzare per il testo principale o per il testo dettagliato.

detailfont e font

Tipo di carattere da utilizzare per il didascalia o il testo dei dettagli. Il formato di una specifica del tipo di carattere è il nome del carattere seguito facoltativamente da un trattino e dalla dimensione del punto. Di seguito sono riportate le specifiche valide del tipo di carattere:

• "Helvetica"
• "Helvetica-14"

linebreak

Determina il modo in cui le linee vengono suddivise. I valori possibili sono:

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

Sia character-wrap che word-wrap possono essere usati insieme alla "lines" proprietà impostata su zero per trasformare l'elemento di rendering in un elemento a più righe.

ontap e onaccessorytap

Queste proprietà devono puntare a un nome di metodo statico nell'applicazione che accetta un oggetto come parametro. Quando si crea la gerarchia usando i metodi JsonDialog.FromFile o JsonDialog.FromJson, è possibile passare un valore di oggetto facoltativo. Questo valore dell'oggetto viene quindi passato ai metodi. È possibile usarlo per passare un contesto al metodo statico. Ad esempio:

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

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

lines

Se questa proprietà è impostata su zero, la dimensione automatica dell'elemento verrà eseguita in base al contenuto delle stringhe contenute. Per il funzionamento di questa operazione, è necessario impostare anche la "linebreak" proprietà su "character-wrap" o "word-wrap".

style

Lo stile determina il tipo di stile di cella che verrà usato per eseguire il rendering del contenuto e corrispondono ai valori di enumerazione UITableViewCellStyle. I valori possibili sono:

• "default"
• "value1"
• "value2"
• "subtitle" : testo con un sottotitolo.

subtitle

Valore da usare per il sottotitolo. Si tratta di un collegamento per impostare lo stile su "subtitle" e impostare la "value" proprietà su una stringa. Questa operazione esegue entrambe con una singola voce.

Textcolor

Colore da utilizzare per il testo.

value

Valore secondario da visualizzare nell'elemento di rendering. Il layout di questo oggetto è interessato dall'impostazione "style" . Il tipo di carattere e il colore possono essere personalizzati impostando e "detailfont""detailcolor".

Elementi booleani

Gli elementi booleani devono impostare il tipo su "bool", possono contenere un "caption" oggetto da visualizzare e l'oggetto "value" è impostato su true o false. Se le "on" proprietà e "off" sono impostate, si presuppone che siano immagini. Le immagini vengono risolte in relazione alla directory di lavoro corrente nell'applicazione. Se si desidera fare riferimento a file relativi al bundle, è possibile usare come "~" collegamento per rappresentare la directory del bundle dell'applicazione. Ad esempio "~/favorite.png" , sarà il favorite.png contenuto nel file bundle. Ad esempio:

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

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

type

Il tipo può essere impostato su "boolean" o "checkbox". Se impostato su booleano, userà un UISlider o immagini (se "on" entrambi e "off" sono impostati). Se è impostata su una casella di controllo, verrà usata una casella di controllo. La "group" proprietà può essere utilizzata per contrassegnare un elemento booleano come appartenente a un determinato gruppo. Ciò è utile se la radice contenitore ha anche una "group" proprietà come radice riepilogerà i risultati con un conteggio di tutti i booleani (o caselle di controllo) che appartengono allo stesso gruppo.

Elementi voce

Gli elementi di immissione vengono usati per consentire all'utente di immettere i dati. Il tipo per gli elementi di immissione "entry" è o "password". La "caption" proprietà è impostata sul testo da visualizzare a destra e l'oggetto "value" è impostato sul valore iniziale su cui impostare la voce. Viene "placeholder" usato per visualizzare un suggerimento all'utente per le voci vuote (viene visualizzato in grigio). Di seguito sono riportati alcuni esempi.

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

correzione automatica

Determina lo stile di correzione automatica da utilizzare per la voce. I valori possibili sono true o false (o le stringhe "yes" e "no").

uso di maiuscole e minuscole

Stile di maiuscola da utilizzare per la voce. I valori possibili sono:

• all
• none
• sentences
• words

caption

Didascalia da utilizzare per la voce

tasti di scelta

Tipo di tastiera da utilizzare per l'immissione di dati. I valori possibili sono:

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

segnaposto

Testo dell'hint visualizzato quando la voce ha un valore vuoto.

return-key

Etichetta utilizzata per la chiave restituita. I valori possibili sono:

• default
• done
• emergencycall
• go
• google
• join
• next
• route
• search
• send
• yahoo

value

Valore iniziale per la voce

Elementi radio

Gli elementi radio hanno il tipo "radio". L'elemento selezionato viene selezionato dalla proprietà sull'elemento radioselected radice che lo contiene. Inoltre, se per la "group" proprietà è impostato un valore, questo pulsante di opzione appartiene a tale gruppo.

Elementi di data e ora

I tipi di "datetime""date" elemento e "time" vengono usati per eseguire il rendering delle date con ore, date o ore. Questi elementi accettano come parametri un didascalia e un valore. Il valore può essere scritto in qualsiasi formato supportato dalla funzione .NET DateTime.Parse. Esempio:

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

Elemento Html/Web

È possibile creare una cella che, quando toccata, incorpora un UIWebView che esegue il rendering del contenuto di un URL specificato, locale o remoto usando il "html" tipo . Le uniche due proprietà per questo elemento sono "caption" e "url":

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