MonoTouch.Dialog Json Markup

Cette page décrit le balisage Json accepté par JsonElement de MonoTouch.Dialog

Commençons par un exemple. Voici un fichier Json complet qui peut être passé dans 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"
                }
            ]
        }
    ]
}

Le balisage ci-dessus génère l’interface utilisateur suivante :

Chaque élément de l’arborescence peut contenir la propriété "id". Au moment de l’exécution, il est possible de référencer des sections ou des éléments individuels à l’aide de l’indexeur JsonElement. Comme ceci :

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

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

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

Syntaxe de l’élément racine

L’élément Root contient les valeurs suivantes :

• title
• sections (facultatif)

L’élément racine peut apparaître à l’intérieur d’une section en tant qu’élément pour créer un contrôleur imbriqué. Dans ce cas, la propriété "type" supplémentaire doit être définie sur "root"

url

Si la "url" propriété est définie, si l’utilisateur appuie sur ce RootElement, le code demande un fichier à partir de l’URL spécifiée et affiche le contenu des nouvelles informations. Vous pouvez l’utiliser pour créer une extension de l’interface utilisateur à partir du serveur en fonction de ce que l’utilisateur appuie.

group

Si la valeur est définie, cela définit groupname pour l’élément racine. Les noms de groupe sont utilisés pour sélectionner un résumé affiché en tant que valeur de l’élément racine de l’un des éléments imbriqués dans l’élément . Il s’agit de la valeur d’une case à cocher ou de la valeur d’une case d’option.

radioselected

Identifie l’élément radio sélectionné dans les éléments imbriqués

title

Le cas échéant, il s’agit du titre utilisé pour l’élément RootElement.

type

Doit être défini sur "root" lorsque cela apparaît dans une section (utilisé pour imbriquer les contrôleurs).

sections

Il s’agit d’un tableau Json avec des sections individuelles

Syntaxe de section

La section contient :

• header (facultatif)
• footer (facultatif)
• Tableau elements

en-tête

Le cas échéant, le texte d’en-tête s’affiche sous la forme d’un légende de la section.

pied de page

Le cas échéant, le pied de page est affiché en bas de la section.

elements

Il s’agit d’un tableau d’éléments. Chaque élément doit contenir au moins une clé, la "type" clé utilisée pour identifier le type d’élément à créer. Certains éléments partagent des propriétés communes comme "caption" et "value". Voici la liste des éléments pris en charge :

• string éléments (avec et sans style)
• entry lignes (standard ou mot de passe)
• boolean valeurs (à l’aide de commutateurs ou d’images)

Les éléments de chaîne peuvent être utilisés comme boutons en fournissant une méthode à appeler lorsque l’utilisateur appuie sur la cellule ou sur l’accessoire,

Éléments de rendu

Les éléments de rendu sont basés sur C# StringElement et StyledStringElement. Ils peuvent restituer des informations de différentes manières et il est possible de les restituer de différentes manières. Les éléments les plus simples peuvent être créés comme suit :

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

Cette opération affiche une chaîne simple avec toutes les valeurs par défaut : police, arrière-plan, couleur de texte et décorations. Il est possible de raccorder des actions à ces éléments et de les faire se comporter comme des boutons en définissant la "ontap" propriété ou les "onaccessorytap" propriétés :

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

La méthode ci-dessus appellera la méthode « ShowPhotos » dans la classe « Acme.PhotoLibrary ». Le "onaccessorytap" est similaire, mais il ne sera appelé que si l’utilisateur appuie sur l’accessoire au lieu d’appuyer sur la cellule. Pour l’activer, vous devez également définir l’accessoire :

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

Les éléments de rendu peuvent afficher deux chaînes à la fois, l’une est la légende et l’autre est la valeur. Le rendu de ces chaînes dépend du style. Vous pouvez le définir à l’aide de la "style" propriété . La valeur par défaut affiche le légende à gauche et la valeur à droite. Pour plus d’informations, consultez la section sur le style. Les couleurs sont encodées à l’aide du symbole « # », suivi de nombres hexadécimaux qui représentent les valeurs des valeurs rouge, verte, bleue et peut-être alpha. Le contenu peut être encodé sous forme abrégée (3 ou 4 chiffres hexadécimaux) qui représente des valeurs RVB ou RVBA. Ou le formulaire long (6 ou 8 chiffres) qui représentent des valeurs RVB ou RVBA. La version courte est un raccourci permettant d’écrire deux fois le même chiffre hexadécimal. Ainsi, la constante « #1bc » est inteprétée comme red=0x11, green=0xbb et blue=0xcc. Si la valeur alpha n’est pas présente, la couleur est opaque. Exemples :

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

Accessoire

Détermine le type d’accessoire à afficher dans votre élément de rendu, les valeurs possibles sont les suivantes :

• checkmark
• detail-disclosure
• disclosure-indicator

Si la valeur n’est pas présente, aucun accessoire n’est affiché

background

La propriété d’arrière-plan définit la couleur d’arrière-plan de la cellule. La valeur est soit une URL vers une image (dans ce cas, le téléchargeur d’image asynchrone sera appelé et l’arrière-plan sera mis à jour une fois l’image téléchargée) ou il peut s’agir d’une couleur spécifiée à l’aide de la syntaxe de couleur.

caption

Chaîne main à afficher sur l’élément de rendu. La police et la couleur peuvent être personnalisées en définissant les "textcolor" propriétés et "font" . Le style de rendu est déterminé par la "style" propriété .

couleur et couleur des détails

Couleur à utiliser pour le texte main ou le texte détaillé.

detailfont et police

Police à utiliser pour le légende ou le texte de détail. Le format d’une spécification de police est le nom de police suivi éventuellement d’un tiret et de la taille de point. Les spécifications de police suivantes sont valides :

• « Helvetica »
• « Helvetica-14 »

linebreak

Détermine la façon dont les lignes sont décomposées. Les valeurs possibles sont les suivantes :

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

word-wrap Et character-wrap peuvent être utilisés avec la "lines" propriété définie sur zéro pour transformer l’élément de rendu en élément multiligne.

ontap et onaccessorytap

Ces propriétés doivent pointer vers un nom de méthode statique dans votre application qui prend un objet comme paramètre. Lorsque vous créez votre hiérarchie à l’aide des méthodes JsonDialog.FromFile ou JsonDialog.FromJson, vous pouvez passer une valeur d’objet facultative. Cette valeur d’objet est ensuite passée à vos méthodes. Vous pouvez l’utiliser pour passer un certain contexte à votre méthode statique. Par exemple :

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

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

lignes

Si cette valeur est définie sur zéro, la taille automatique de l’élément dépend du contenu des chaînes contenues. Pour que cela fonctionne, vous devez également définir la propriété sur "linebreak""character-wrap" ou "word-wrap".

style

Le style détermine le type de style de cellule qui sera utilisé pour afficher le contenu et correspond aux valeurs d’énumération UITableViewCellStyle. Les valeurs possibles sont les suivantes :

• "default"
• "value1"
• "value2"
• "subtitle" : texte avec un sous-titre.

subtitle

Valeur à utiliser pour le sous-titre. Il s’agit d’un raccourci permettant de définir le style sur "subtitle" et de définir la "value" propriété sur une chaîne. Cela se fait à la fois avec une seule entrée.

textcolor

Couleur à utiliser pour le texte.

value

Valeur secondaire à afficher sur l’élément de rendu. La disposition de ce est affectée par le "style" paramètre . La police et la couleur peuvent être personnalisées en définissant et "detailfont""detailcolor".

Éléments booléens

Les éléments booléens doivent définir le type sur "bool", peuvent contenir un "caption" à afficher et est "value" défini sur true ou false. Si les "on" propriétés et "off" sont définies, elles sont supposées être des images. Les images sont résolues par rapport au répertoire de travail actuel dans l’application. Si vous souhaitez référencer des fichiers relatifs à l’offre groupée, vous pouvez utiliser comme "~" raccourci pour représenter le répertoire de l’offre groupée d’applications. Par exemple "~/favorite.png" , sera le favorite.png contenu dans le fichier d’offre groupée. Par exemple :

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

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

type

Type peut être défini sur ou "boolean""checkbox". Si la valeur est booléenne, elle utilise un UISlider ou des images (si et "on""off" sont définis). Si la case à cocher est définie, elle utilise une case à cocher. La "group" propriété peut être utilisée pour marquer un élément booléen comme appartenant à un groupe particulier. Cela est utile si la racine contenant a également une "group" propriété, car la racine récapitule les résultats avec un nombre de tous les booléens (ou cases à cocher) qui appartiennent au même groupe.

Éléments d’entrée

Vous utilisez des éléments d’entrée pour permettre à l’utilisateur d’entrer des données. Le type des éléments d’entrée est ou "entry""password". La "caption" propriété est définie sur le texte à afficher à droite, et le "value" est défini sur la valeur initiale sur laquelle définir l’entrée. Le "placeholder" est utilisé pour afficher un indicateur à l’utilisateur pour les entrées vides (il est grisé). Voici quelques exemples :

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

Autocorrection

Détermine le style de correction automatique à utiliser pour l’entrée. Les valeurs possibles sont true ou false (ou les chaînes "yes" et "no").

mise en majuscules

Style de mise en majuscule à utiliser pour l’entrée. Les valeurs possibles sont les suivantes :

• all
• none
• sentences
• words

caption

Légende à utiliser pour l’entrée

clavier

Type de clavier à utiliser pour la saisie de données. Les valeurs possibles sont les suivantes :

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

espace réservé

Texte d’indicateur affiché lorsque l’entrée a une valeur vide.

return-key

Étiquette utilisée pour la clé de retour. Les valeurs possibles sont les suivantes :

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

value

Valeur initiale de l’entrée

Éléments radio

Les éléments radio ont le type "radio". L’élément sélectionné est sélectionné par la radioselected propriété sur son élément racine contenant. En outre, si une valeur est définie pour la "group" propriété, cette case d’option appartient à ce groupe.

Éléments date et heure

Les types d’éléments "datetime", "date" et "time" sont utilisés pour afficher des dates avec des heures, des dates ou des heures. Ces éléments prennent comme paramètres un légende et une valeur. La valeur peut être écrite dans n’importe quel format pris en charge par la fonction .NET DateTime.Parse. Exemple :

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

Élément Html/Web

Vous pouvez créer une cellule qui, une fois appuyé, incorporera un UIWebView qui restitue le contenu d’une URL spécifiée, locale ou distante à l’aide du "html" type . Les deux seules propriétés de cet élément sont "caption" et "url":

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