4D para iOS: Controlos de entrada personalizados

Até agora, os formatadores personalizados permitiam combinar texto ou imagens com o conteúdo de um campo, tal como substituir verdadeiro/falso por uma imagem ou 1, 2 por etiquetas de texto. 4D v19 R3 permite-lhe criar controlos de entrada de acções disponíveis a partir de formulários de acções, tais como a criação de uma lista de escolha com texto pré-definido. E ainda melhor, esta lista pode ser preenchida dinamicamente utilizando uma fonte de dados, tal como uma lista de empregadores. Vamos mergulhar nos detalhes!

LEMBRETE DE FORMATADORES PERSONALIZADOS

Os formatadores personalizados permitem-lhe lidar com enumerações usando um simples ficheiro JSON para exibir os valores correspondentes, dependendo dos valores da sua base de dados.

Aqui está um exemplo do ficheiro manifest.json :

{
    "name": "integerToString",
    "type": [
        "integer"
    ],
    "binding": "localizedText",
    "choiceList": {
        "0":"To Do",
        "1":"In Progress",
        "2":"Done"
     }
}

Este simples ficheiro JSON permite-lhe converter inteiros em strings para serem exibidos na sua aplicação iOS. Mas também pode criar e utilizar esses tipos de formatadores para exibir imagens, inteiros, emojis…

Deixando-os cair numa pasta específica de “formatadores“, pode atribuí-los a um campo de texto, por exemplo, para obter esse tipo de resultado:

Os valores do campo de estado “To Do”, “In Progress” e “Done” na parte inferior do ecrã são exibidos correctamente de acordo com o valor inteiro na sua base de dados.

É uma forma simples de exibir os valores formatados nas suas aplicações móveis. O bónus é que essas listas de escolha são automaticamente utilizadas nos seus formulários de acção, permitindo-lhe seleccionar um dos valores da lista para o utilizar como parâmetro. Mas um dos limites é que essas listas são estáticas porque se baseiam num ficheiro JSON.

CONTROLOS DE ENTRADA DE ACÇÕES

Agora vamos falar de controlos de entrada! Esta nova funcionalidade permitir-lhe-á criar:

• listas de escolha usando um ficheiro manifest.json tal como antes e
• listas baseadas em fontes de dados.

Isto irá garantir-lhe sempre listas actualizadas directamente acessíveis a partir da sua aplicação móvel!

Esses controlos de entrada de acção são simples de criar e muito fáceis de utilizar. Para os utilizar nos seus projectos móveis, tal como para formatadores ou formulários de lista e detalhes personalizados, terá de os incluir na sua base de dados numa pasta especial “inputControls” (a minha base/Recursos/móvel/inputControl).

Esses controlos de entrada de acção estarão então disponíveis e seleccionáveis na secção Acção, nas propriedades dos parâmetros, filtrados pelo tipo do parâmetro da sua acção e pela forma como pretende exibir as suas listas usando formatos.

Vamos concentrar-nos nos formatos porque é um conceito bastante novo. Basicamente, os formatos permitem-lhe definir a forma como pretende exibir as suas listas no lado da aplicação móvel:

• Push: abre uma nova visualização que vem da direita para exibir a lista
• segmentado: mostra a sua lista sob a forma de artigos numa barra que pode seleccionar
• Popover: abre uma nova vista que vem do fundo para exibir a lista
• Folha: abre uma folha a partir do fundo que mostra a lista a partir do fundo
• Picker: ao contrário dos outros, este formato permite-lhe percorrer o valor desejado para ser seleccionado em vez de seleccionar um valor clicando sobre ele

Agora vamos dar uma vista de olhos a alguns exemplos!

LISTAS DE ESCOLHA ESTÁTICAS

Aqui está um exemplo de um ficheiro manifest.json que pode ser utilizado como uma lista de escolha estática:

{
    "name": "choiceListSheet",
    "type": [
        "text"
     ],
    "format": "sheet",
    "choiceList": {
        "1":"Vincent",
        "2":"David",
        "3":"Anass",
        "4":"Eric",
        "5":"Quentin",
        "6":"Houssam"
     }
}

Muito semelhante ao formatador de dados aduaneiros, certo? Como pode ver, uma lista estática simples é definida aqui para este controlo de entrada de acção com um formato de exibição “folha”.

LISTAS DE ESCOLHA DINÂMICA DE FONTE DE DADOS

E aqui está um exemplo baseado numa classe de dados de Contacto e um atributo LastName.

{
    "name": "datasourcePush"
    "type": [
        "text"
    ],
    "format":"push",
    "choiceList": {
        "dataSource": {
            "dataClass": "Contact",
            "field": "LastName",
            "entityFormat": "%FirstName% %LastName% - %Job%",
            "search": "LastName",
            "order": "descending" 
        }
    }
}

A lista de contactos actualizada será acessível como uma lista na forma de acção da sua aplicação móvel, baseada na classe de dados Contacto com um formato de exibição “push”.

Veremos isso mais tarde, mas o melhor é que pode definir opções inteligentes no seu ficheiro manifest.json, tais como exibir uma barra de pesquisa ou como quer ordenar as suas listas!

COMO FICA NA APLICAÇÃO DO UTILIZADOR

Neste exemplo, o push, o popover, e as listas de recolha baseadas numa fonte de dados. Pode adicionar uma pesquisa definindo o valor “pesquisa” para o formato de exibição “push”, uma opção de ordenação definindo o valor “ordem”, bem como o formato de exibição dos seus dados (definindo o “entityFormat”). Por exemplo, para o controlo da introdução de dados pelo seleccionador:

• a ordem “decrescente ” permite-lhe ordenar a sua lista por ordem decrescente
• a entidade “%FirstName%%LastName% – %Job%”Format permite-lhe exibir “Sophie Adams – UX Designer” uma vez que o campo FirstName, LastName e Job estão disponíveis.

E o melhor de tudo, essas listas estão disponíveis mesmo que esteja offline!

COMO LOCA no editor do projecto

Como primeiro passo, terá de criar o seu controlo de entrada de acção a partir do seu editor de códigos favorito, seguindo exemplos deste post no blog ou da documentação. Depois terá de os adicionar na pasta “inputControls” (a minha base/Recursos/móvel/inputControl).

De volta ao editor do projecto, os seus controlos de entrada estarão disponíveis e filtrados pelo tipo de parâmetro e pelo formato previamente definido no seu ficheiro JSON.

E como pode ver com este exemplo, é bastante fácil criar listas de escolha estáticas e listas baseadas em fontes de dados para garantir a melhor experiência para os seus utilizadores móveis!

Não hesite em dar-nos feedback sobre o fórum 4D, e consulte a documentação para mais detalhes!