Crea o edita una interfaz
Una vez creado el módulo de acuerdo con los requerimientos de tu proyecto, debes completar varios pasos para después construir las interfaces del módulo. Esto te permitirá reutilizar el contenido del módulo.
Antes de crear las interfaces, debes crear las vistas y las pantallas del módulo en el que estás trabajando. Necesitarás la información de la vista y la pantalla cuando configures la interfaz.
En las pantallas del módulo, configura la apariencia del componente o del flujo de pantallas dentro de él. Luego, en la interfaz del módulo, configuras la lógica que se asociará a los elementos visuales configurados en la pantalla, y que te permitirá conectarte con otras entidades cuando se invoque el módulo desde la app u otro módulo.
Una vez que hayas creado los elementos anteriores, puedes configurar la nueva interfaz o interfaces que necesites. Primero, haz clic en Interfaces en la página Overview o ve a Branch Edition > Interfaces.
Por razones de eficiencia, cada sección se explicará en videos usando un ejemplo de una interfaz de tipo componente. La configuración de todas las secciones aplica tanto a interfaces de tipo pantalla como a interfaces de tipo componente. Consulta las secciones a continuación para obtener más información.
En la página Interfaces, haz clic en + New interface.
Se abre el modal New Interface Configuration, donde completas los ajustes según tus necesidades. Ve al campo Functionality Name. Agrega un nombre que sea lo suficientemente descriptivo como para permitir que tu equipo identifique la interfaz y su propósito. Para este ejemplo, agrega Login_component, que incluye la funcionalidad de la interfaz y el tipo de interfaz que estás creando.
El nombre se muestra cuando se invoca la interfaz desde la pantalla de la app o módulo padre. Para interfaces de tipo componente, el nombre aparece en la pestaña Components del panel izquierdo. Para interfaces de tipo pantalla, el nombre aparece en la lista de enlaces disponibles en la pestaña Actions del panel derecho.
Ve al campo Functionality Name. Haz clic en la flecha y selecciona Component si deseas crear un componente que se pueda reutilizar o seleccione Screen si deseas crear un flujo de pantalla que incluya toda la pantalla o más de una pantalla. Para este ejemplo, haz clic en la flecha y selecciona Component.
Ve al campo Description. Describe y explica para qué se utilizará la interfaz. Para este ejemplo, agrega Reusable component for login purposes. It contains a welcome label, username and password inputs and a login button .
Luego, ve a la sección Parameters. Puedes completar los datos en las pestañas General, Input, Output, Message y Event de acuerdo con el propósito de la interfaz que estás creando. A continuación encontrarás más información sobre estas secciones.
La pestaña General aparece abierta de manera predeterminada. Completalos como se explica a continuación.
Nota
Solo el campo Container view es obligatorio.
Container view. Para interfaces de tipo componente, instancia de la vista donde se creó el componente. Para interfaces de tipo pantalla, pantalla inicial donde se creó el flujo de pantalla y desde donde comienza a ejecutarse.
Haz clic en la flecha y selecciona una vista del menú desplegable. Para este ejemplo, selecciona la vista V00|contents1:SLogin - Login.
La siguiente imagen muestra el módulo de pantalla donde se creó el contenido de la interfaz. La pantalla se creó antes de crear la interfaz.
Sugerencia
La vista contenedora combina la vista, el diseño y la secuencia y el nombre asignados a la pantalla donde se creó el contenido de la interfaz. Para establecer la vista contenedora, debes crear previamente la pantalla que contiene ese componente o el flujo de pantallas. Después de crear la interfaz, puedes volver atrás y configurar los atributos de acuerdo con los valores establecidos en las pestañas Input, Output, Messages y Events
On load process. Proceso (lambda o legacy) a ejecutar cuando la interfaz termina de cargarse en el dispositivo móvil o navegador. Los procesos que aparecen listados son aquellos previamente creados en el módulo. Si es necesario, haz clic en la flecha y selecciona uno de los procesos del menú desplegable. Define un proceso, por ejemplo, si el contenido de la interfaz implica resultados de transacciones y necesitas que se ejecute un proceso para que esos resultados se muestren en pantalla. Para este ejemplo, no definas un proceso.
Icon. Ícono que representa la interfaz que estás creando. Para interfaces de tipo componente, esta imagen aparecerá en la pestaña Components del panel izquierdo cuando se invoque la interfaz. Para agregar una imagen, haz clic en Upload. Cuando se abra el explorador de archivos, busca el archivo que deseas agregar en formato .JPG, .PNG o .SVG y haz clic en Open.
Size. Espacio (en altura y ancho) que ocupará la interfaz en la pantalla de la app o módulo padre cuando sea instanciada. En el caso de interfaces de tipo pantalla, completa los campos Width y Height con 100%, respectivamente. En el caso de interfaces de tipo componente, elije una de dos opciones: si deseas que el componente ajuste su tamaño automáticamente (es decir, que se adapte al tamaño del contenido dentro del componente), deja los campos vacíos; si deseas establecer un tamaño específico, introduce el número y el px o % de unidad de medida. Para este ejemplo, dado que es una interfaz de tipo componente, introduce 100% en el campo Width y 50% en el campo Height.
Sugerencia
En el caso de una interfaz de tipo componente, cuando se invoca desde una pantalla de la app o módulo padre en el editor de pantallas, puedes modificar el tamaño en la sección tamaño del panel derecho (pestaña Design). Los cambios solo tendrán efecto en esa app y no afectarán al tamaño inicial definido para la interfaz.
Haz clic en Input para abrir la pestaña. En esta pestaña, ingresa los parámetros que requiere la interfaz para funcionar en la app o módulo padre. Para una interfaz de tipo componente, una vez invocados, los parámetros aparecerán como atributos en la sección Basic Input del panel derecho (pestaña Design). Para una interfaz de tipo pantalla, una vez invocada, los parámetros aparecerán cuando se seleccione la interfaz como una Module Screen en el modal Create new link del panel derecho (sección Events & Actions de la pestaña Actions).
De forma predeterminada, la pestaña no contiene parámetros. Para agregar uno, haz clic en + Add Parameter. Luego, completa los campos como se explica a continuación.
En el campo New key, ingresa un nombre para identificar el parámetro a nivel de código; por ejemplo, cuando pruebes la app con Devtools. Para este ejemplo, ingresa Inputwelcome.
En el campo Name, ingresa el nombre para identificar el parámetro. Este nombre aparece como el nombre del parámetro en la sección Basic Inputs del panel derecho (pestaña Design). Para este ejemplo, ingresa Input_welcome.
Buena práctica
Para todas las pestañas, los campos New key y Name deben tener los mismos datos. Tenga en cuenta que, en el caso de la pestaña Input y Output, no puedes usar _ en el campo New key.
En el campo Internal register, ingresa el registro donde se almacenará el valor configurado en el parámetro. Usa un registro desde 999 en adelante, para que sea local al módulo y solo impacte en su configuración. Para este ejemplo, ingresa 2000, de modo que este registro almacene el valor definido para el parámetro Username. Luego, cuando invoques el registro en el mensaje de bienvenida (como se muestra en la imagen de arriba) o en cualquier otra parte de la app, el valor almacenado aparecerá en pantalla.
Nota
Los registros de 0 a 999 son globales, lo que significa que los valores almacenados en esos registros tienen efecto en todas las apps en las que se invocan. Los registros de 1000 en adelante son específicos para la app o módulo principal seleccionado.
En el campo Type, selecciona el formato del parámetro. Esto define el tipo de datos que se pueden ingresar en el panel derecho cuando se invoca la interfaz. Las opciones disponibles son: Text, Number Color, Image y Text Area. Aprende más acerca de las opciones disponibles en la siguiente tabla. Para este ejemplo, haz clic en la flecha y selecciona Text.
Text
Selecciona Text si el valor contiene una palabra o un breve conjunto de palabras.
Number
Selecciona Number si el valor es un número.
Color
Selecciona Color si el valor es un color. Cuando se instancia el componente, el panel derecho del editor de pantallas tendrá la sección del selector de color.
Image
Selecciona Image si el valor es una imagen. Cuando se instale el componente, el panel derecho del editor de pantallas tendrá una sección de explorador de imágenes.
Text Area
Selecciona Text Area si el valor contiene texto de longitud considerable en vez de un breve conjunto de palabras.
En el campo Default, ingresa un valor que aparece en el panel derecho de forma predeterminada configurado en el parámetro de entrada cuando se invoca la interfaz. Por ejemplo, puedes completar este campo para que, si no se define ningún valor en el editor de pantallas, el componente donde se invoca no permanezca vacío. Para este ejemplo, ready to start?.
Una vez que completaste los parámetros que necesitas, haz clic en Output. Para eliminar un parámetro antes de continuar con la siguiente pestaña, haz clic en el ícono de papelera.
Una vez que completaste los parámetros de entrada que necesitas, haz clic en Output. Para eliminar un parámetro antes de continuar con la siguiente pestaña, haz clic en el ícono de papelera. En la pestaña Output, puedes configurar parámetros que te permitan establecer valores que la interfaz pone a disposición en la app o módulo padre y almacenarlos de acuerdo con la configuración de ese contenido de interfaz en el panel derecho. Para una interfaz de tipo componente, una vez invocados, los parámetros aparecerán como atributos en la sección Basic Output del panel derecho (pestaña Design).
En el campo New key, ingresa un nombre para identificar el parámetro a nivel de código. Para este ejemplo, ingresa Outputusername.
En el campo Name, ingresa el nombre para identificar el parámetro. Este nombre aparece como el nombre del atributo en la sección Basic Outputs del panel derecho (pestaña Design). Para este ejemplo, ingresa Output_username.
En el campo Internal register, ingresa el registro para que el valor configurado para él en el módulo se almacene en un registro específico de la app o módulo padre en tiempo real. Definirás el registro padre en el panel derecho cuando configures las pantallas de la app o módulo padre. Usa un registro desde 999 en adelante, como se explicó para los parámetros de entrada. Para este ejemplo, escribe 1503.
En este caso, como se muestra en la imagen anterior, el contenido de la interfaz de componente incluye cuatro componentes: una etiqueta de texto para el mensaje de bienvenida, un componente text input para el campo Username, un componente text input para el campo Password y un componente button para el botón de Login. Para este ejemplo, considera el siguiente escenario: para el componente text input Username, establece el atributo Auto dump con el registro 1503. Luego, invoca la interfaz de componente en el editor de pantallas de la app padre. Una vez en la sección Basic Outputs (pestaña Design del panel derecho), se configura el parámetro Output_username con el registro padre #S{1500}. Como resultado, siempre que el usuario ingrese un valor en el campo Username, ese valor se almacenará en el registro de módulos 1503 y, en tiempo real, ese valor también se almacenará en el registro 1500 de la app padre.
Una vez que completes la pestaña Output, haz clic en Event. Para eliminar un parámetro antes de continuar con la siguiente pestaña, haz clic en el ícono de papelera. En la pestaña Event, puedes definir los eventos que la app o el módulo padre requiere que ejecute la interfaz. El evento debe invocarse desde la app o módulo padre. A continuación, se ejecutarán los eventos configurados según lo definido por la interfaz.
Sugerencia
Los eventos solo deben configurarse para interfaces de tipo componente.
Para este ejemplo, considera el siguiente escenario: en la pantalla del módulo donde creaste el contenido de la interfaz, agrega el componente text label lbl_invisible con el valor Sign in. Luego, configura el atributo Visible en false, para que la etiqueta no se muestre en la app.
Buena práctica
Si realizas cambios en la configuración de la app o el módulo, asegurate de guardarlos antes de cambiar a la otra entidad. Si no guardas los cambios, no aparecerán reflejados cuando se invoquen en la otra entidad.
Luego, ve a la página Processes y configura un proceso lambda llamado show_label para mostrar la etiqueta mencionada. Revisa la siguiente imagen.
Este proceso se configurará en el evento de interfaz, como se muestra a continuación.
En el campo New key, ingresa un nombre para identificar el parámetro a nivel de código. Para este ejemplo, escribe Showlabel.
En el campo Name, ingresa un nombre para identificar el parámetro cuando se invoque la interfaz desde la app o módulo padre. El nombre del evento aparece listado como Interface Messages en el modal Create New Link cuando configuras un evento desde la sección Events & Actions (pestaña Actions) en el panel derecho. Para este ejemplo, escribe Show_label.
En el campo Process, ingresa el proceso que se ejecutará cuando el evento se instancia en la app o módulo padre. Para este ejemplo, escribe Zshow_label.
Nota
Los procesos que aparecen al empezar a escribir son los creados en el módulo.
En la pantalla padre, configuraste un componente button con la leyenda Forgot my password. En este botón, configuras el evento Show_label: haz clic en el ícono vertical de tres puntos y, en el modal Create new link que se abre, selecciona Event. Luego, selecciona la acción SHOW LABEL.
Importante
Cuando agregas la interfaz de tipo de componente a la pantalla, asegurate de completar el campo Component id en el panel derecho. Si no defines un id, no podrás invocar el evento desde la pestaña Actions.
Una vez que completaste la pestaña Event, haz clic en Message. Para eliminar un parámetro antes de continuar con la siguiente pestaña, haz clic en el ícono de papelera. En la pestaña Messages, puedes definir los mensajes que la interfaz comunicará a la app o módulo padre para ejecutar un evento o acción específicos según se configuraron en las pantallas de ese padre.
En el campo New key, ingresa un nombre para identificar el parámetro a nivel de código. Para este ejemplo, ingresa a OnLoginClick.
En el campo Name, ingresa un nombre para identificar el parámetro cuando se invoque la interfaz desde la app o módulo padre. El nombre del evento aparece en la sección Events & Actions (pestaña Actions) en el panel derecho del editor de pantallas. A continuación, puedes configurar cualquier acción que se ejecute a partir de este evento, que solo tendrá efecto en la app o módulo padre. Para este ejemplo, ingresa ONLOGINCLICK.
Antes de invocar la interfaz desde el padre, debes configurar el evento o acción que ejecuta este mensaje en el módulo. Para este ejemplo, ve a la pantalla que muestra el contenido de la interfaz y haz clic en el botón Login. En el panel derecho, ve a la pestaña Actions. Luego, en la sección Events & Actions, ve al atributo OnClick. Haz clic en el icono vertical de tres puntos a la derecha. En el modal Create new link, selecciona Interface message y, luego, selecciona el mensaje OnLoginClick. Como resultado, cuando el usuario de la app haga clic en el botón Login, el mensaje se enviará a la app padre que a su vez ejecutará la acción o evento definido en el evento OnLoginClick.
Para guardar los cambios realizados en la información o los parámetros básicos, haz clic en Confirm. Para volver atrás, haz clic en Cancel o Close.
Edita una interfaz
Si tu u otro miembro del equipo necesita realizar cambios en una o más interfaces, busca la interfaz que deseas editar en la página Interfaces y haz clic en Edit. Se abre la página Edit Interface Configuration. Puedes modificar las secciones siguiendo las instrucciones dadas anteriormente.