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