Diseño horizontal

El Diseño horizontal es una vista de coach de contenedor de diseño que crea una sección en la cual puede disponer los elementos de diseño uno al lado del otro de forma horizontal. Cuando el diseño horizontal está vinculado a una lista, la sección horizontal se repite para cada elemento de la lista, lo que genera un formato similar a una tabla.

El Diseño horizontal y Diseño vertical están entre los controles que se utilizan con más frecuencia para diseñar una interfaz de usuario. Utilizados conjuntamente los controles Diseño horizontal y Diseño vertical proporcionan la mayoría de las prestaciones de diseño de flujo, que puede utilizar para interfaces de usuario complejas.

Consejo: Generalmente, los controles Diseño horizontal y Diseño vertical del kit de herramientas de IU de BPM se utilizan conjuntamente con Panel contraíble. Su control correspondiente en el kit de herramientas Coaches de respuesta en desuso es Sección.

Propiedades de configuración

Establecer o modificar propiedades de configuración para Diseño horizontal como, por ejemplo, propiedades de aspecto, respuesta y rendimiento, en la pestaña de propiedades de Configuración.

Tamaño de pantalla: Una propiedad de configuración que tenga el icono Tamaños de pantalla además del nombre de propiedad, puede tener distintos valores para cada tamaño de pantalla. Si no define un valor, el tamaño de la pantalla hereda el valor del siguiente tamaño de pantalla más grande como su valor predeterminado. Si está utilizando el editor de escritorio de Process Designer (en desuso), está estableciendo el valor para el tamaño de pantalla grande. Los otros tamaños de pantalla heredan este valor.

Definiciones de temas: Las definiciones de temas especifican los colores y estilos de un control y determinan el aspecto del control. Puede obtener una vista previa del aspecto de los controles en el editor de temas. Consulte Temas.

Las propiedades de configuración de aspecto para el Diseño horizontal se muestran en la tabla siguiente:

Tabla 1. Propiedades de configuración de aspecto para Diseño horizontal
Propiedad de configuración del aspecto	Descripción	Tipo de datos
Flujo de diseño	El diseño de los controles: Horizontal Desplazamiento en línea horizontal Horizontal ajustado Horizontal con ajuste de línea automático Vertical Vertical ajustado	`String`
Alineación horizontal	La alineación horizontal de los controles en el diseño: Justificado Izquierda Centro Derecha Nota: Justificado funciona bien en combinación con el flujo de diseño Desplazamiento en línea horizontal ni con Horizontal con ajuste de línea automático. Si utiliza esta combinación puede que obtenga resultados inesperados.	`String`
Alineación vertical	La alineación vertical de los controles en el diseño. Esta propiedad solo se aplica a los flujos de diseño horizontal. Arriba Medio Abajo	`String`
Anchura	Especifica la anchura del control. Puede especificar la anchura en `px` (píxeles), en `%` (porcentaje) o en unidades `em`. Por ejemplo, `50px`, `20%` o `0.4em`. Si no se especifica ningún tipo de unidad, se presupone que es `px`	`String`
Altura	Especifica la altura del control en `px` (píxeles) o en unidades `em`. Si no se especifica ningún tipo de unidad, se presupone que es `px`	`String`

Las propiedades de configuración de respuesta para el Diseño horizontal aparecen listadas en la tabla siguiente:

Tabla 2. Propiedades de configuración de respuesta para Diseño horizontal
Propiedad de configuración de respuesta	Descripción	Tipo de datos
Sensor de respuesta	(Opcional) el identificador del control Sensor de respuesta que contiene este diseño. Si se omite, se utiliza el sensor más cercano dentro del contenedor padre.	`Boolean`
Comportamiento	Especifica cómo debe comportarse la sección según los factores de recuadro que hay definidos en el sensor de respuesta. Nombre de factor de recuadro: El nombre del factor de recuadro del sensor de respuesta al que se aplican estos atributos. Diseño hijo: El diseño que se puede utilizar con el factor de recuadro especificado. Vertical Vertical ajustado Horizontal Desplazamiento en línea horizontal Horizontal ajustado Horizontal con ajuste de línea automático Alineación hija: La alineación que se puede utilizar con el factor de recuadro especificado: Justificado Izquierda Centro Derecha Anchura de hijo: Anchuras de los controles hijo que se puede utilizar con este factor de recuadro. Por ejemplo, `60%`. Observe que se pueden especificar más anchuras para los controles que están incluidos en el diseño. Por ejemplo, `80%`, `20%`. Visibilidad: Los valores de visibilidad que se puede utilizar con el factor de recuadro especificado. Visible Ninguno Oculto Anchura: La anchura de sección que se puede utilizar con el factor de recuadro especificado. Altura: La altura de sección que se puede utilizar con el factor de recuadro especificado. Estilo CSS: Los estilos CSS que se pueden aplicar al factor de recuadro especificado. Clase CSS: Las clases CSS que se pueden añadir al factor de recuadro especificado.	`ResponsiveBehavior[]`

También puede controlar la reacción del contenido anidando el diseño horizontal en un control Sensor de respuesta.

Las propiedades de configuración de rendimiento para el Diseño horizontal aparecen listadas en la tabla siguiente:

Tabla 3. Propiedades de configuración de rendimiento para Diseño horizontal
Propiedad de configuración del rendimiento	Descripción	Tipo de datos
Carga asíncrona	Mejora la experiencia con la IU para grandes conjuntos de datos a costa de un tiempo más lento de para cargar las filas en general al empezar a cargar la sección. Esta propiedad solo se utiliza cuando la sección está vinculada a una lista.	`Boolean`
Tamaño de lote asíncrono	Especifica el número de filas que se cargan de forma síncrona en un lote asíncrono. Utilice esta propiedad para optimizar el rendimiento de carga síncrona y asíncrona. Esta propiedad solo se utiliza cuando la sección está vinculada a una lista.	`Integer`

Ejemplo

En el web Process Designer, añada un control Diseño horizontal al diseño de coach, que utilizará como control de contenedor. Dentro del contenedor, coloque tres controles de panel, que puede denominar Categorías de trabajo, Tipo de reclamación y Elementos. Establezca las propiedades de cada uno de los controles como se indica a continuación:

Para Diseño horizontal: En Aspecto, establezca Flujo de diseño en Horizontal, Alineación horizontal en Justificado, Alineación vertical en Arriba y Anchura en 750px. Deje Altura en blanco.
Para Categorías de trabajo: En Aspecto, establezca Estilo de color en Aviso y Anchura en 350px.
Para Tipo de reclamación: En Aspecto, establezca Estilo de color en Éxito y Anchura en 350px.
Para Elementos: En Aspecto, establezca Estilo de color en Peligro y Anchura en 350px.

Al ejecutar el coach, el resultado muestra tres paneles de la misma altura y anchura dispuestos el uno al lado del otro dentro de la sección horizontal: Categorías de trabajo tiene el color amarillo de Aviso, Tipo de reclamación tiene el color verde de Éxito y Elementos tiene el color rojo de Peligro.

Sucesos

Establezca o modifique los manejadores de sucesos para el control en la pestaña Sucesos. Puede definir que los sucesos se desencadenen mediante programación o cuando el usuario interactúa con el control. Para obtener información sobre cómo definir y codificar sucesos, consulte Sucesos definidos por el usuario.

El diseño horizontal tiene los tipos siguientes de manejadores de sucesos:

Al cargar: Se activa cuando se carga la página. Por ejemplo:
```
me.setWidth("100%");
```
En actualización con respuesta: Se activa cuando se cambia el tamaño de la sección para ajustarlo al tamaño de pantalla de un dispositivo.

Según el suceso específico, puede utilizar lógica de JavaScript para modificar los efectos del control. Puede obtener más información sobre la utilización de sucesos con controles en el tema Sucesos definidos por el usuario.

Métodos

Para los métodos que están disponibles para el diseño horizontal, consulte la API JavaScript Diseño horizontal.

Recursos adicionales

Para obtener información sobre cómo crear un coach, consulte Creación de coaches.
Para obtener información sobre las propiedades estándar (General, Configuración, Posicionamiento, Visibilidad y Atributos HTML), consulte Propiedades de vista de coach.