Marcado JSON de MonoTouch.Dialog

En esta página se describe el marcado Json aceptado por el JsonElement de MonoTouch.Dialog

Comencemos con un ejemplo. A continuación se muestra un archivo Json completo que se puede pasar 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"
                }
            ]
        }
    ]
}

El marcado anterior genera la siguiente interfaz de usuario:

Cada elemento del árbol puede contener la propiedad "id". En tiempo de ejecución es posible hacer referencia a secciones o elementos individuales mediante el indexador JsonElement. Por ejemplo:

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

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

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

Sintaxis del elemento raiz

El elemento Raíz contiene los siguientes valores:

• title
• sections (opcional)

El elemento raíz puede aparecer dentro de una sección como un elemento para crear un controlador anidado. En ese caso, la propiedad adicional "type" debe establecerse en "root"

url

Si se establece la propiedad "url", si el usuario pulsa en este RootElement, el código solicitará un archivo de la dirección URL especificada y hará que el contenido aparezca la nueva información. Puede usarlo para crear una extensión de la interfaz de usuario desde el servidor en función de lo que pulse el usuario.

group

Si se establece, establece el nombre del grupo para el elemento raíz. Los nombres de grupo se usan para seleccionar un resumen que se muestra como el valor del elemento raíz de uno de los elementos anidados del elemento. Este es el valor de una casilla o el valor de un botón de radio.

radioselected

Identifica el elemento de radio seleccionado en elementos anidados

title

Si está presente, será el título usado para RootElement

type

Debe establecerse en "root" cuando aparezca en una sección (se usa para anidar controladores).

secciones

Se trata de una matriz Json con secciones individuales.

Sintaxis de sección

La sección contiene:

• header (opcional)
• footer (opcional)
• Matriz elements

autorización

Si está presente, el texto del encabezado se muestra como un título de la sección.

pie de página

Si está presente, el pie de página se muestra en la parte inferior de la sección.

Elementos

Se trata de una matriz de elementos. Cada elemento debe contener al menos una clave, la "type" clave que se usa para identificar el tipo de elemento que se va a crear. Algunos de los elementos comparten algunas propiedades comunes, como "caption" y "value". Esta es la lista de elementos admitidos:

• string elementos (con y sin estilos)
• entry líneas (normal o contraseña)
• boolean valores (mediante modificadores o imágenes)

Los elementos de Cadena se pueden usar como botones proporcionando un método para invocar cuando el usuario pulsa en la celda o en el accesorio,

Elementos de representación

Los elementos de representación se basan en StringElement y StyledStringElement de C# y pueden representar información de varias maneras y es posible representarlos de varias maneras. Los elementos más sencillos se pueden crear de la siguiente manera:

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

Esto mostrará una cadena simple con todos los valores predeterminados: fuente, fondo, color de texto y decoraciones. Es posible enlazar acciones a estos elementos y hacer que se comporten como botones estableciendo la propiedad "ontap" o las propiedades de "onaccessorytap":

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

Lo anterior invocará el método "ShowPhotos" en la clase "Acme.PhotoLibrary". El "onaccessorytap" es similar, pero solo se invocará si el usuario pulsa en el accesorio en lugar de pulsar en la celda. Para habilitar esto, también debe establecer el accesorio:

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

Los elementos de representación pueden mostrar dos cadenas a la vez, una es el título y otra es el valor. La forma en que se representan estas cadenas depende del estilo, puede establecerla mediante la propiedad "style". El valor predeterminado mostrará el título a la izquierda y el valor de la derecha. Vea la sección sobre el estilo para obtener más detalles. Los colores se codifican con el símbolo '#' seguido de números hexadecimales que representan los valores para los valores rojo, verde, azul y tal vez alfa. El contenido se puede codificar en formato corto (3 o 4 dígitos hexadecimales) que representa valores RGB o RGBA. O la forma larga (6 o 8 dígitos) que representan valores RGB o RGBA. La versión corta es una abreviatura para escribir el mismo dígito hexadecimal dos veces. Por lo tanto, la constante "#1bc" está en desuso como red=0x11, green=0xbb y blue=0xcc. Si el valor alfa no está presente, el color es opaco. He aquí algunos ejemplos:

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

Accesorio

Determina el tipo de accesorio que se va a mostrar en el elemento de representación, los valores posibles son:

• checkmark
• detail-disclosure
• disclosure-indicator

Si el valor no está presente, no se muestra ningún accesorio.

background

La propiedad background establece el color de fondo de la celda. El valor es una dirección URL de una imagen (en este caso, se invocará el descargador de imágenes asincrónicas y el fondo se actualizará una vez descargada la imagen) o puede ser un color especificado mediante la sintaxis de color.

caption

Cadena principal que se va a mostrar en el elemento de representación. La fuente y el color se pueden personalizar estableciendo las propiedades "textcolor" y "font". El estilo de representación viene determinado por la propiedad "style".

color y detailcolor

Color que se va a usar para el texto principal o el texto detallado.

detailfont y fuente

Fuente que se va a usar para el título o el texto detallado. El formato de una especificación de fuente es el nombre de fuente seguido opcionalmente por un guión y el tamaño del punto. A continuación se muestran especificaciones de fuente válidas:

• "Helvetica"
• "Helvetica-14"

linebreak

Determina cómo se dividen las líneas. Los valores posibles son:

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

Tanto character-wrap y word-wrap se pueden usar junto con la propiedad "lines" establecida en cero para convertir el elemento de representación en un elemento de varias líneas.

ontap y onaccessorytap

Estas propiedades deben apuntar a un nombre de método estático en la aplicación que toma un objeto como parámetro. Al crear la jerarquía mediante los métodos JsonDialog.FromFile o JsonDialog.FromJson, puede pasar un valor de objeto opcional. A continuación, este valor de objeto se pasa a los métodos. Puede usarlo para pasar algún contexto al método estático. Por ejemplo:

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

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

lines

Si se establece en cero, hará que el tamaño automático del elemento dependa del contenido de las cadenas contenidas. Para que esto funcione, también debe establecer "linebreak" la propiedad en "character-wrap" o "word-wrap".

style

El estilo determina el tipo de estilo de celda que se usará para representar el contenido y corresponden a los valores de enumeración UITableViewCellStyle. Los valores posibles son:

• "default"
• "value1"
• "value2"
• "subtitle": texto con un subtítulo.

subtítulo

Valor que se va a usar para el subtítulo. Se trata de un acceso directo para establecer el estilo en "subtitle" y establecer la propiedad "value" en una cadena. Esto hace ambos con una sola entrada.

textcolor

Color que se va a usar para el texto.

value

Valor secundario que se va a mostrar en el elemento de representación. El diseño de esto se ve afectado por la configuración de "style". La fuente y el color se pueden personalizar estableciendo el "detailfont" y "detailcolor".

Elementos booleanos

Los elementos booleanos deben establecer el tipo en "bool", puede contener un "caption" para mostrar y el "value" se establece en true o false. Si se establecen las propiedades "on" y "off", se supone que son imágenes. Las imágenes se resuelven en relación con el directorio de trabajo actual de la aplicación. Si desea hacer referencia a archivos relativos a paquetes, puede usar el "~" como acceso directo para representar el directorio de agrupación de aplicaciones. Por ejemplo, "~/favorite.png" será el favorite.png que se encuentra en el archivo de agrupación. Por ejemplo:

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

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

type

El tipo se puede establecer en "boolean" o "checkbox". Si se establece en booleano, usará UISlider o imágenes (si se establecen tanto "on" como "off" ). Si se establece en la casilla, usará una casilla. La "group" propiedad se puede usar para etiquetar un elemento booleano como perteneciente a un grupo determinado. Esto resulta útil si la raíz contenedora también tiene una propiedad "group", ya que la raíz resumirá los resultados con un recuento de todos los booleanos (o casillas) que pertenecen al mismo grupo.

Elementos de entrada

Use elementos de entrada para permitir que el usuario escriba datos. El tipo para los elementos de entrada es "entry" o "password". La propiedad "caption" se establece en el texto que se va a mostrar a la derecha y el "value" se establece en el valor inicial en el que se establece la entrada. El "placeholder" se usa para mostrar una sugerencia al usuario para las entradas vacías (se muestra atenuada). Estos son algunos ejemplos:

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

autocorrección

Determina el estilo de corrección automática que se va a usar para la entrada. Los valores posibles son true o false (o las cadenas "yes" y "no").

uso de mayúsculas

Estilo de mayúsculas que se va a usar para la entrada. Los valores posibles son:

• all
• none
• sentences
• words

caption

Título que se va a usar para la entrada

métodos abreviados

Tipo de teclado que se va a usar para la entrada de datos. Los valores posibles son:

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

marcador de posición

Texto de sugerencia que se muestra cuando la entrada tiene un valor vacío.

return-key

Etiqueta usada para la clave de retorno. Los valores posibles son:

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

value

Valor inicial de la entrada

Elementos de radio

Los elementos de radio tienen tipo "radio". La propiedad radioselected selecciona el elemento seleccionado en su elemento raíz contenedor. Además, si se establece un valor para la propiedad "group", este botón de radio pertenece a ese grupo.

Elementos de fecha y hora

Los tipos de elemento "datetime", "date" y "time" se usan para representar fechas con horas, fechas o horas. Estos elementos toman como parámetros un título y un valor. El valor se puede escribir en cualquier formato admitido por la función DateTime.Parse de .NET. Ejemplo:

"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

Puede crear una celda que cuando se pulsa insertará una UIWebView que represente el contenido de una dirección URL especificada, ya sea local o remota mediante el tipo "html". Las dos únicas propiedades de este elemento son "caption" y "url":

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