Markup Json MonoTouch.Dialog

Artigo
07/13/2023

Esta página descreve a marcação Json aceita pelo JsonElement de MonoTouch.Dialog

Vamos começar com um exemplo. Veja a seguir um arquivo Json completo que pode ser passado para 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"
                }
            ]
        }
    ]
}

A marcação acima produz a seguinte interface do usuário:

Cada elemento na árvore pode conter a propriedade "id". Em runtime, é possível fazer referência a seções ou elementos individuais usando o indexador JsonElement. Dessa forma:

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

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

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

Sintaxe do elemento raiz

O elemento Root contém os seguintes valores:

title
sections (opcional)

O elemento raiz pode aparecer dentro de uma seção como um elemento para criar um controlador aninhado. Nesse caso, a propriedade "type" extra deve ser definida como "root"

url

Se a "url" propriedade estiver definida, se o usuário tocar nesse RootElement, o código solicitará um arquivo da URL especificada e tornará o conteúdo as novas informações exibidas. Você pode usar isso para criar a interface do usuário do servidor com base no que o usuário toca.

group

Se definido, isso define o nome do grupo para o elemento raiz. Os nomes de grupo são usados para escolher um resumo exibido como o valor do elemento raiz de um dos elementos aninhados no elemento . Esse é o valor de uma caixa de seleção ou o valor de um botão de opção.

radioselected

Identifica o item de rádio selecionado em elementos aninhados

título

Se estiver presente, será o título usado para o RootElement

tipo

Deve ser definido como "root" quando isso aparece em uma seção (isso é usado para aninhar controladores).

sections

Esta é uma matriz Json com seções individuais

Sintaxe da seção

A seção contém:

header (opcional)
footer (opcional)
Matriz elements

Se estiver presente, o texto do cabeçalho será exibido como um legenda da seção.

Se estiver presente, o rodapé será exibido na parte inferior da seção.

elementos

Essa é uma matriz de elementos. Cada elemento deve conter pelo menos uma chave, a "type" chave usada para identificar o tipo de elemento a ser criado. Alguns dos elementos compartilham algumas propriedades comuns, como "caption" e "value". Estas são a lista de elementos com suporte:

string elementos (com e sem estilo)
entry linhas (regular ou senha)
boolean valores (usando comutadores ou imagens)

Os elementos de cadeia de caracteres podem ser usados como botões fornecendo um método para invocar quando o usuário toca na célula ou no acessório,

Elementos de renderização

Os elementos de renderização são baseados em StringElement e StyledStringElement em C# e podem renderizar informações de várias maneiras e é possível renderizá-los de várias maneiras. Os elementos mais simples podem ser criados da seguinte maneira:

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

Isso mostrará uma cadeia de caracteres simples com todos os padrões: fonte, plano de fundo, cor do texto e decorações. É possível conectar ações a esses elementos e fazer com que eles se comportem como botões definindo a "ontap" propriedade ou as "onaccessorytap" propriedades:

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

O acima invocará o método "ShowPhotos" na classe "Acme.PhotoLibrary". O "onaccessorytap" é semelhante, mas só será invocado se o usuário tocar no acessório em vez de tocar na célula. Para habilitar isso, você também deve definir o acessório:

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

Os elementos de renderização podem exibir duas cadeias de caracteres ao mesmo tempo, uma é a legenda e outra é o valor. A forma como essas cadeias de caracteres são renderizadas depende do estilo, você pode definir isso usando a "style" propriedade . O padrão mostrará o legenda à esquerda e o valor à direita. Consulte a seção sobre estilo para obter mais detalhes. As cores são codificadas usando o símbolo '#' seguido de números hexadecimais que representam os valores para os valores vermelho, verde, azul e talvez alfa. O conteúdo pode ser codificado em formato curto (3 ou 4 dígitos hexadecimais) que representa valores RGB ou RGBA. Ou a forma longa (6 ou 8 dígitos) que representam valores RGB ou RGBA. A versão curta é uma abreviação para gravar o mesmo dígito hexadecimais duas vezes. Portanto, a constante "#1bc" é preterida como red=0x11, green=0xbb e blue=0xcc. Se o valor alfa não estiver presente, a cor será opaca. Alguns exemplos:

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

acessório

Determina o tipo de acessório a ser mostrado em seu elemento de renderização, os valores possíveis são:

checkmark
detail-disclosure
disclosure-indicator

Se o valor não estiver presente, nenhum acessório será mostrado

background

A propriedade background define a cor da tela de fundo da célula. O valor é uma URL para uma imagem (nesse caso, o downloader de imagem assíncrona será invocado e a tela de fundo será atualizada depois que a imagem for baixada) ou pode ser uma cor especificada usando a sintaxe de cor.

caption

O main cadeia de caracteres a ser mostrada no elemento de renderização. A fonte e a cor podem ser personalizadas definindo as "textcolor" propriedades e "font" . O estilo de renderização é determinado pela "style" propriedade .

color e detailcolor

A cor a ser usada para o texto main ou o texto detalhado.

detailfont e fonte

A fonte a ser usada para o legenda ou o texto detalhado. O formato de uma especificação de fonte é o nome da fonte seguido opcionalmente por um traço e o tamanho do ponto. Veja a seguir as especificações de fonte válidas:

"Helvetica"
"Helvetica-14"

linebreak

Determina como as linhas são divididas. Os valores possíveis são:

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

E character-wrap podem ser usados junto com a "lines" propriedade definida como zero para transformar o elemento de renderização em um elemento de várias linhasword-wrap.

ontap e onaccessorytap

Essas propriedades devem apontar para um nome de método estático em seu aplicativo que usa um objeto como um parâmetro. Ao criar sua hierarquia usando os métodos JsonDialog.FromFile ou JsonDialog.FromJson, você pode passar um valor de objeto opcional. Esse valor de objeto é então passado para seus métodos. Você pode usar isso para passar algum contexto para seu método estático. Por exemplo:

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

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

lines

Se isso for definido como zero, ele tornará o elemento de tamanho automático dependendo do conteúdo das cadeias de caracteres contidas. Para que isso funcione, você também deve definir a "linebreak" propriedade como "character-wrap" ou "word-wrap".

estilo

O estilo determina o tipo de estilo de célula que será usado para renderizar o conteúdo e eles correspondem aos valores de enumeração UITableViewCellStyle. Os valores possíveis são:

"default"
"value1"
"value2"
"subtitle" : texto com um subtítulo.

subtitle

O valor a ser usado para o subtítulo. Esse é um atalho para definir o estilo "subtitle" como e definir a "value" propriedade como uma cadeia de caracteres. Isso faz ambos com uma única entrada.

Textcolor

A cor a ser usada para o texto.

value

O valor secundário a ser mostrado no elemento de renderização. O layout disso é afetado pela configuração "style" . A fonte e a cor podem ser personalizadas definindo o "detailfont" e "detailcolor"o .

Elementos boolianos

Os elementos boolianos devem definir o tipo como "bool", pode conter um "caption" a ser exibido e o "value" é definido como true ou false. Se as "on" propriedades e "off" estiverem definidas, elas serão consideradas imagens. As imagens são resolvidas em relação ao diretório de trabalho atual no aplicativo. Se você quiser referenciar arquivos relativos a pacotes, poderá usar o "~" como um atalho para representar o diretório do pacote de aplicativos. Por exemplo "~/favorite.png" , será o favorite.png contido no arquivo de pacote. Por exemplo:

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

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

type

O tipo pode ser definido como "boolean" ou "checkbox". Se definido como booliano, ele usará um UISlider ou imagens (se ambos "on" e "off" estiverem definidos). Se definido como caixa de seleção, ele usará uma caixa de seleção. A "group" propriedade pode ser usada para marcar um elemento booliano como pertencente a um grupo específico. Isso será útil se a raiz que contém também tiver uma "group" propriedade, pois a raiz resumirá os resultados com uma contagem de todos os boolianos (ou caixas de seleção) que pertencem ao mesmo grupo.

Elementos de entrada

Você usa elementos de entrada para permitir que o usuário insira dados. O tipo para elementos de entrada é "entry" ou "password". A "caption" propriedade é definida como o texto a ser mostrado à direita e o "value" é definido como o valor inicial para o qual definir a entrada. O "placeholder" é usado para mostrar uma dica ao usuário para entradas vazias (é mostrado esmaecido). Estes são alguns exemplos:

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

Autocorreção

Determina o estilo de correção automática a ser usado para a entrada. Os valores possíveis são true ou false (ou as cadeias de caracteres "yes" e "no").

Capitalização

O estilo de capitalização a ser usado para a entrada. Os valores possíveis são:

all
none
sentences
words

caption

O legenda a ser usado para a entrada

teclado

O tipo de teclado a ser usado para entrada de dados. Os valores possíveis são:

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

espaço reservado

O texto da dica que é mostrado quando a entrada tem um valor vazio.

chave de retorno

O rótulo usado para a chave de retorno. Os valores possíveis são:

default
done
emergencycall
go
google
join
next
route
search
send
yahoo

value

O valor inicial da entrada

Elementos de rádio

Os elementos de rádio têm o tipo "radio". O item selecionado é escolhido pela radioselected propriedade em seu elemento raiz que contém. Além disso, se um valor for definido para a "group" propriedade , esse botão de opção pertencerá a esse grupo.

Elementos de data e hora

O elemento tipos "datetime"e "date""time" são usados para renderizar datas com horários, datas ou horas. Esses elementos assumem como parâmetros um legenda e um valor. O valor pode ser escrito em qualquer formato compatível com a função .NET DateTime.Parse. Exemplo:

"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

Você pode criar uma célula que, quando tocada, inserirá uma UIWebView que renderiza o conteúdo de uma URL especificada, local ou remota usando o "html" tipo . As duas únicas propriedades para esse elemento são "caption" e "url":

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

Compartilhar via

Markup Json MonoTouch.Dialog

Sintaxe do elemento raiz

url

group

radioselected

título

tipo

sections

Sintaxe da seção

header

rodapé

elementos

Elementos de renderização

acessório

background

caption

color e detailcolor

detailfont e fonte

linebreak

ontap e onaccessorytap

lines

estilo

subtitle

Textcolor

value

Elementos boolianos

type

Elementos de entrada

Autocorreção

Capitalização

caption

teclado

espaço reservado

chave de retorno

value

Elementos de rádio

Elementos de data e hora

Elemento Html/Web

Recursos adicionais