Diseño de componentes

Sería posible colocar elementos en el espacio vacío del lienzo de forma sencilla, pero es mejor intentar que todo esté limpio y ordenado inmediatamente. Por lo tanto, para empezar, vamos a diseñar el espacio de trabajo. Vamos a añadir un componente (Container) al lienzo donde colocaremos todos los demás elementos. Después de añadirlo, debemos hacer clic en el icono del engranaje y proceder a la configuración de este contenedor.

Ajustes del contenedor

Vamos a ver los ajustes disponibles.

• Name - el nombre con el que podemos referirnos a este contenedor en los procesos de negocio de la aplicación. Por ejemplo, si queremos crear un proceso de negocio para cambiar alguna configuración de este contenedor.
• Direction - la dirección en la que se dispondrán los elementos dentro del contenedor dado. Horizontalmente, si queremos disponerlos en fila, uno detrás de otro, o viceversa, verticalmente, cuando los elementos van uno debajo del otro.
• Wrap - Establecer la salida de los elementos. Deben estar en la misma línea (nowrap), o pueden estar envueltos (wrap).
• Alignment - cómo deben alinearse los elementos en el contenedor (ajuste separado para la alineación horizontal y vertical).
• Size - El tamaño del contenedor. Puede establecerse como un porcentaje del espacio disponible o tener un tamaño estrictamente fijo en píxeles.
• Max Width -la anchura máxima permitida (en caso de que no esté estrictamente fijada y varíe en función del contenido).
• Margin/Padding - La sangría de los bordes del contenedor. Externa o interna, respectivamente.
• Image, Gradient or Overlay (Background color) - la posibilidad de establecer el fondo deseado. Puede elegir un color específico (o una combinación de diferentes colores con un gradiente) o seleccionar una imagen de fondo.
• Border - selección del marco y su apariencia (color, grosor, radio de redondeo).
• Visible - visibilidad del elemento (así como de todos los elementos anidados).

Los ajustes seleccionados se pueden ver en la captura de pantalla. Por supuesto, puedes experimentar y cambiarlos, eligiendo tu diseño único.

Vamos a añadir otro al contenedor creado. Vamos a añadir los campos de entrada necesarios a la misma. Configúrelo como vertical, alineado al centro, con un ancho del 40% y con un padding izquierdo (padding-left 20px).

Componentes de la aplicación

A continuación, añada los componentes propios al contenedor. Nuestro proceso de negocio acepta dos números del tipo float. Para introducirlos, hay que añadir dos Input componentes (float), un botón (Button), que iniciará el proceso de cálculo, y hacer un pequeño ajuste visual para firmar su Label.

Agreguemos un bloque más donde firmaremos lo que planeamos calcular en general (suma, resta, etc.). Establezcamos el ancho al 30% con los elementos dispuestos verticalmente, centrados y alineados a la derecha (end/center). Añadamos 5 componentes de Label al propio contenedor y cambiemos inmediatamente su texto por el deseado.

El último paso en el diseño visual es añadir otro contenedor para mostrar el resultado del cálculo. Lo añadimos por analogía con el contenedor anterior, pero fijamos la alineación a la derecha con un pequeño relleno a la izquierda. La característica de este contenedor es que inicialmente será invisible (el interruptor Visible está apagado). Vamos a activarlo en el momento en que tengamos el resultado de los cálculos. Agreguemos 5 componentes de Label a él, y no necesitamos ni siquiera cambiar su texto porque el bloque sigue siendo invisible (lo principal es establecer su Name para poder identificar el elemento necesario al crear procesos de negocio).

Si todo se hizo correctamente, veremos el siguiente resultado en el diseñador web:

Y esto en la aplicación publicada: