Elementos de la interfaz de usuario

Los usuarios interactúan con la aplicación empresarial a través de interfaces de usuario. Antes de empezar a crear las aplicaciones, revise los elementos de la interfaz de usuario.

Páginas

Las páginas son las interfaces de usuario (UI) para la aplicación. Puede utilizar páginas para crear distintos tipos de UI para el usuario.

Las páginas se desarrollan con un diseñador visual donde puede arrastrar varios componentes a su página y luego configurarlos. Cuando se despliega la aplicación, las páginas se representan como páginas web HTML en tiempo de ejecución.

Existen tres formas de añadir páginas a la aplicación:

Los usuarios básicos y avanzados pueden pulsar en el menú de la página en el panel de navegación superior y en el botón Nuevo.
Cuando se inicia la creación de una aplicación, la primera página se crea de forma predeterminada. La paleta de vistas también se inicia de forma inmediata, de modo que puede empezar a añadir vistas a la primera página. Esta página inicial se conoce como página de inicio. Cada vez que se crea una página utilizando este método, la paleta de vistas se inicia automáticamente.
Los usuarios básicos y avanzados pueden añadir páginas nuevas al configurar determinadas vistas dentro de su aplicación.
También puede añadir páginas nuevas cuando se personalizan determinadas vistas. Imagine que añade un botón a su página de inicio. El botón es un botón Siguiente que llama a una acción y, a continuación, dirige al usuario a una página designada. Cuando define los valores de Paso siguiente, seleccione una entrada para la propiedad Ir a página. Puede establecer esta propiedad en Página nueva y, a continuación, especificar un nombre para la nueva página. Cuando haya terminado de configurar la página Paso siguiente, se generará la nueva página. Puede crear páginas nuevas cuando configure cualquier vista que utilice la configuración de pasos siguientes.
Los usuarios avanzados pueden utilizar el diagrama para su proyecto de aplicación para añadir una nueva página a su aplicación.

Al crear páginas, puede configurar una validación de página sin códigos que le permita asegurarse de que los datos esperados son introducidos por el usuario final y que los valores de datos son válidos para dicha página:

Puede marcar un elemento como necesario y validar su valor. Por ejemplo, si tiene un valor de antigüedad en la página, puede configurar la validación para asegurarse de que el valor está presente y que se ajusta al rango de valores válidos.
Existen dos configuraciones posibles para manejar los errores de validación. Puede impedir que el usuario salga de la página cuando haya un error y puede inhabilitar la vista cuando haya un error. Por ejemplo, puede permanecer en la página actual cuando se pulsa el botón Aceptar y aparece un error. También puede configurar el botón Aceptar para que se inhabilite hasta que no haya errores de validación.

Hay dos maneras de suprimir una página:

Los usuarios básicos y avanzados pueden suprimir una página de la aplicación yendo a la página que desea suprimir y, a continuación, pulsando el icono de suprimir en el panel de navegación superior.
Consejo: Realice una instantánea de la aplicación antes de suprimir páginas.
Los usuarios avanzados pueden cambiar al diagrama de aplicación, pulsar el botón derecho del ratón en una página y, a continuación, seleccionar Suprimir.

Si suprime una página que utiliza otra vista para la propiedad Ir a la página, rompe la lógica para dicha vista. Cualquier vista que apunte a la página que ha suprimido, debe actualizarse para que apunte a una página existente.

Menú de navegación por las páginas

Puede organizar las páginas de su aplicación en un menú de navegación que resulte visible para los usuarios. Cuando añade una página al menú de navegación, se crea un elemento de menú para esa página y se añade al menú.

Puede crear tres tipos de elementos de menú de navegación:

Páginas: Elemento de menú que permite navegar a una o varias páginas.
Carpetas: Elemento de menú que puede contener otros elementos de menú.
Enlaces externos: Elemento de menú que enlaza al usuario con un destino externo a la aplicación.

También puede asociar páginas a elementos de menú de navegación existentes, específicamente páginas. Supongamos que su aplicación tiene un flujo de páginas de cuatro páginas, pero no desea que cada página del flujo tenga su propio elemento de menú de navegación. Puede asociar las cuatro páginas del flujo a un elemento de menú de navegación. De este modo, independientemente de dónde esté el usuario en el flujo de página, se resalta el elemento de menú asociado.

Para escenarios avanzados, los elementos del menú de navegación pueden activar sucesos de límite. Para configurar sucesos de límite, cambie a la modalidad de vista Avanzada y utilice el Diagrama.

Vistas

Las vistas son conjuntos reutilizables de widgets de interfaz de usuario, como campos de texto, selectores de fecha y hora y botones, que los usuarios pueden utilizar para interactuar con un servicio o un objeto de negocio. Las vistas pueden comprender uno o varios conjuntos de otras vistas, enlaces de datos, instrucciones de diseño y comportamientos.

Dado que las vistas son reutilizables, cada instancia de vista puede compartir partes de su interfaz de usuario con otras instancias de vistas. Por ejemplo, cree una página que contenga una instancia de vista que incluye un conjunto de campos de dirección. Si crea una segunda página que necesita los mismos campos de dirección, puede reutilizar la misma vista. En ambos casos, la página está utilizando una instancia de la vista. Puede editar las propiedades de cada instancia de forma independiente. Por ejemplo, al cambiar la etiqueta de una instancia de vista, no se cambia la etiqueta de la otra. Ambas instancias de vista utilizan una referencia para apuntar a la definición de vista. Este enfoque significa que si la definición de la vista cambia, puede ver que el cambio se refleja en las instancias de la vista.

Puede modificar las instancias de la vista utilizando propiedades de configuración y alterando temporalmente los estilos predeterminados. Si define un enlace para una instancia, debe coincidir con el tipo en la definición de página. Se produce un aviso si el tipo de objeto de negocio no coincide con el tipo del enlace de datos que se ha definido para la vista. Para cada instancia de vista, se presentan las propiedades de configuración. Si desea alterar temporalmente el valor predeterminado, puede proporcionar un valor específico o asignar una variable. También puede exponer la propiedad de configuración a cualquier vista que contenga la vista. La exposición de la propiedad de configuración crea una opción de configuración en la vista actual con el enlace coincidente. No tiene que crear la opción de configuración y enlazarla.

Vistas en kits de herramientas o aplicaciones: Puede crear una vista en la aplicación o en un kit de herramientas. En general, cree vistas altamente reutilizables en kits de herramientas y vistas más especializadas en aplicaciones. Si elige la aplicación significa que puede reutilizarla sólo dentro de la aplicación. Sin embargo, también significa que si alguien edita la vista, los cambios se aplican a las instancias de vista en dicha aplicación. Si la vista es un kit de herramientas y, a continuación alguien lo edita, los cambios se pueden aplicar a todas las instancias de vista en todas las aplicaciones que utilizan dicha versión del kit de herramientas. Debido a que la edición de una definición de vista puede afectar a muchas instancias, tenga cuidado al realizar cambios. Por ejemplo, la supresión de un recuadro de contenido en la definición de vista puede significar que las páginas o las vistas que contienen instancias de dicha vista no pueden mostrar el contenido que se había definido en dicho recuadro de contenido. No puede editar directamente la definición de la vista desde la página o la vista padre. En su lugar, tendrá que abrir la definición de vista para poder cambiarla.

Kit de herramientas de IU: El kit de herramientas de IU, que es el predeterminado, proporciona un amplio conjunto de vistas que puede utilizar para crear aplicaciones que se ejecutan en varios dispositivos. Utilice las vistas de la IU para el nuevo desarrollo. Para familiarizarse con las vistas de IU, explore el ejemplo Descubrir IU.

Lugar toolkit: El kit de herramientas de Lugar consta de un conjunto de vistas que puede utilizar para diseñar sus propias aplicaciones empresariales y paneles de instrumentos basados en el servicio humano de cliente que se personalizan para la gestión de trabajo en Lugar. Las vistas del kit de herramientas Workplace están disponibles en la paleta Application Designer para el panel de instrumentos y el diseño de aplicaciones.

Kit de herramientas de Content Services: El kit de herramientas de Content Services contiene todos los componentes de la interfaz de usuario, acciones y datos, que se pueden utilizar para proporcionar funciones de gestión de contenido.

Desarrollo de vistas de estilo compuesto versus estilo de widget

Normalmente, al crear la vista, puede seguir uno de los patrones siguientes. O bien puede utilizar una combinación de ambos patrones, si la interfaz de usuario es más compleja y lo requiere.

Las vistas de estilo compuesto son simples y no requieren ningún conocimiento técnico avanzado para su creación. Para crear una vista de estilo compuesto, añada contenido al diseño desde la paleta. Si la vista tiene varias áreas de información, utilice el diseño de cuadrícula para organizar las vistas, establezca sus propiedades y complete el enlace de datos, según sea necesario. Las vistas de estilo compuesto se pueden reutilizar en varias páginas o en otras vistas que se pueden crear de forma jerárquica.
Las vistas de estilo de widget son más complejas y requieren un conjunto de conocimientos más técnicos. Normalmente, las vistas de estilo de widget son vistas personalizadas que pueden incluir, por ejemplo, un segmento HTML personalizado que puede llenar con código HTML, o bien un iFrame con un ID específico. Puede establecer las propiedades de configuración de la vista de estilo de widget y añadir CSS en línea y lógica JavaScript en línea en la página Comportamiento. Para el comportamiento que se produce durante el tiempo de ejecución, por ejemplo, cuando se carga una página o cuando se pulsa un botón, puede colocar la lógica JavaScript en los manejadores de sucesos de la vista, bajo Sucesos.

Plantillas de vistas

Las plantillas proporcionan una forma de crear un aspecto estandarizado a través de varias páginas.

Una plantilla es una vista que se marca como utilizable como plantilla en las propiedades de Visión general. A continuación, los usuarios pueden seleccionar la plantilla cuando crean sus vistas. Las nuevas vistas disponen del contenido de la plantilla como contenido base al que los usuarios pueden añadir contenido. Por ejemplo, se puede crear una vista con el logotipo de la empresa en un área de banner y un recuadro de contenido como marcador para otros contenidos. Cuando utiliza esta vista como una plantilla, puede seleccionarla cuando crea otra vista o página. La nueva vista tiene el área de cabecera que se define en la plantilla junto con un área para el contenido. Otros usuarios también pueden utilizar la plantilla cuando crean vistas para que tenga un aspecto coherente en las nuevas vistas. Puesto que las plantillas son vistas, también puede soltarlas en páginas. Por ejemplo, si tiene una plantilla que tiene un banner común, puede soltarlo en una página para que la página tenga el banner común.

Consejo: Si la plantilla está utilizando celdas en un diseño de cuadrícula, los valores de dirección de las celdas alteran temporalmente los valores de vista previa de cualquier recuadro de contenido de esas celdas.

La plantilla sirve también como modo de actualizar varias vistas simultáneamente. Puesto que la plantilla es una referencia a una vista y no a una copia, si cambia la plantilla, todas las vistas y páginas que se basan en dicha plantilla se actualizan también con dichos cambios. Para continuar con el ejemplo anterior, puede actualizar la plantilla para cambiar la imagen de logo. Todas las vistas que utilizan su plantilla se actualizarán con el nuevo logotipo.