4D para iOS: Controles de entrada personalizados

Traducido automáticamente de Deepl

Hasta ahora, los formateadores personalizados le permitían hacer coincidir el texto o las imágenes con el contenido de un campo, como reemplazar verdadero/falso con una imagen o 1, 2 con etiquetas de texto. 4D v19 R3 le permite crear controles de entrada de acciones disponibles desde formularios de acciones, como crear una lista de elección con texto predefinido. Y aún mejor, esta lista puede ser llenada dinámicamente usando una fuente de datos como una lista de empleadores. ¡Profundicemos en los detalles!

RECORDATORIO DE LOS FORMATEADORES PERSONALIZADOS

Los formateadores personalizados le permiten tratar las enumeraciones utilizando un simple archivo JSON para mostrar los valores correspondientes en función de los valores de su base de datos.

Aquí hay un ejemplo del archivo manifest.json :

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

Este sencillo archivo JSON le permite convertir enteros en cadenas para que se muestren en su aplicación iOS. Pero también puedes crear y utilizar este tipo de formateadores para mostrar imágenes, enteros, emojis…

Colocándolos en una carpeta específica de «formateadores«, puedes asignarlos a un campo de texto, por ejemplo, para obtener ese tipo de resultado:

Los valores del campo de estado «Por hacer», «En curso» y «Hecho » en la parte inferior de la pantalla se muestran correctamente según el valor entero de su base de datos.

Es una forma sencilla de mostrar valores formateados en tus aplicaciones móviles. La ventaja es que esas listas de elección se utilizan automáticamente en tus formularios de acción, permitiéndote seleccionar uno de los valores de la lista para utilizarlo como parámetro. Pero uno de los límites es que esas listas son estáticas porque se basan en un archivo JSON.

blank

CONTROLES DE ENTRADA DE ACCIONES

Ahora hablemos de los controles de entrada. Esta nueva característica le permitirá crear

  • listas deelección utilizando un archivo manifest.json igual que antes y
  • listas basadasen fuentes de datos.

Esto le garantizará tener siempre listas actualizadas directamente accesibles desde su aplicación móvil.

Estos controles de entrada de acciones son sencillos de crear y muy fáciles de usar. Para utilizarlos en tus proyectos móviles, al igual que para los formateadores o los formularios personalizados de listas y detalles, tendrás que incluirlos en tu base de datos en una carpeta especial «inputControls» (mi base/Resources/mobile/inputControl).

Esos controles de entrada de acción estarán entonces disponibles y seleccionables en la sección Acción, en las propiedades de los parámetros, filtrados por el tipo de su parámetro de acción y la forma en que desea mostrar sus listas usando formatos.

Vamos a centrarnos en los formatos porque es un concepto bastante nuevo. Básicamente, los formatos te permiten definir la forma en que quieres mostrar tus listas en el lado de la aplicación móvil:

  • Push: abre una nueva vista que viene de la derecha para mostrar la lista
  • Segmentada: muestra tu lista en forma de elementos en una barra que puedes seleccionar
  • Popover: abre una nueva vista que viene de la parte inferior para mostrar la lista
  • Hoja: abre una hoja desde la parte inferior que muestra la lista desde la parte inferior
  • Picker: a diferencia de los otros, este formato permite desplazarse para seleccionar el valor deseado en lugar de seleccionar un valor haciendo clic en él

Ahora veamos algunos ejemplos

LISTAS DE ELECCIÓN ESTÁTICAS

Este es un ejemplo de un archivo manifest.json que puede ser utilizado como una lista de elección estática:

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

Muy similar al formateador de datos de la aduana, ¿verdad? Como puede ver, aquí se define una simple lista estática para este control de entrada de acciones con un formato de visualización de «hoja«.

LISTAS DE ELECCIÓN DINÁMICAS A PARTIR DE UNA FUENTE DE DATOS

Y aquí tenemos un ejemplo basado en una clase de datos Contacto y un atributo Apellido.

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

La lista de contactos actualizada será accesible como una lista en el formulario de acción de su aplicación móvil, basada en la clase de datos Contacto con un formato de visualización » push«.

Lo veremos más adelante, pero lo mejor es que puedes definir opciones inteligentes en tu archivo manifest.json, como mostrar una barra de búsqueda o cómo quieres ordenar tus listas.

CÓMO SE VE EN LA APLICACIÓN DEL USUARIO

blank

En este ejemplo, el push, el popover y el picker muestran listas basadas en una fuente de datos. Puedes añadir una búsqueda definiendo el valor «search» para el formato de visualización «push», una opción de ordenación definiendo el valor «order», así como el formato de visualización de tus datos (definiendo el «entityFormat»). Por ejemplo, para el control de entrada del selector:

  • el orden » descendente » le permite ordenar su lista en orden descendente
  • el entityFormat «%FirstName% %LastName% – %Job%» le permite mostrar «Sophie Adams – UX Designer» ya que los campos FirstName, LastName y Job están disponibles.

Y lo mejor de todo es que esa lista está disponible incluso si está desconectado.

CÓMO SE VE EN EL EDITOR DE PROYECTOS

Como primer paso, tendrás que crear tu control de entrada de acción desde tu editor de código favorito, siguiendo los ejemplos de esta entrada del blog o la documentación.Luego tendrás que añadirlos en la carpeta «inputControls» (mi base/Resources/mobile/inputControl).

blank

De vuelta al editor del proyecto, tus controles de entrada estarán disponibles y filtrados por el tipo de parámetro y el formato previamente definido en tu archivo JSON.

Y como puede ver con este ejemplo, es bastante fácil crear listas de elección estáticas y listas basadas en fuentes de datos para garantizar la mejor experiencia para sus usuarios móviles.

No dude en darnos su opinión en el foro de 4D, y consulte la documentación para más detalles.

David Azancot
• Propietario de Producto 4D for iOS - David Azancot se unió al equipo de Producto 4D como Propietario de Producto en 2017. Está a cargo de escribir las historias de usuario y traducirlas en especificaciones funcionales. Su papel también incluye asegurarse de que las implementaciones de funcionalidades satisfagan las necesidades de los clientes. David se graduó con un MBA en Mercadeo, Internet y Movilidad en el Instituto Leonard De Vinci y comenzó su carrera en 2011 con una empresa móvil de nueva creación, posteriormente adquirida por Madvertise (un grupo de mercadeo móvil). Apasionado de las interfaces móviles, fue la elección natural para desarrollar formatos de anuncios móviles interactivos para el grupo en 2015. Paralelamente, David desarrolla sus propias aplicaciones para iOS y Android desde 2012.