Main Content

Diseñar aplicaciones en App Designer

en App Designer proporciona un amplio conjunto de herramientas de diseño para diseñar aplicaciones modernas y de aspecto profesional.Design View También proporciona una extensa biblioteca de componentes de interfaz de usuario, por lo que puede crear una variedad de características interactivas. Los cambios que realice se reflejarán automáticamente en.Design ViewCode View Por lo tanto, puede configurar muchos aspectos de la aplicación sin escribir ningún código.

Para agregar un componente a la aplicación, arrástrelo desde el lienzo.Component Library

El nombre del componente aparece en el después de agregarlo al lienzo.Component Browser Puede seleccionar componentes tanto en el lienzo como en el.Component Browser La selección se produce en ambos lugares simultáneamente.

Algunos componentes, como los campos de edición y los reguladores, se agrupan con una etiqueta cuando se arrastran hacia el lienzo. Estas etiquetas no aparecen de forma predeterminada, pero puede agregarlas a la lista haciendo clic con el botón derecho en cualquier lugar de la y seleccionando.Component BrowserComponent Browser Include component labels in Component Browser Si no desea que el componente tenga una etiqueta, puede excluirla presionando y sosteniendo la tecla mientras arrastra el componente hacia el lienzo.Ctrl

Si un componente tiene una etiqueta y cambia el texto de la etiqueta, el nombre del componente en los cambios para que coincida con ese texto.Component Browser Puede personalizar el nombre del componente haciendo doble clic en él y escribiendo un nuevo nombre.

Personalización de componentes

Puede personalizar la apariencia de un componente seleccionándolo y, a continuación, editando sus propiedades en la ficha del.InspectorComponent Browser Por ejemplo, desde esta pestaña puede cambiar la alineación del texto que se muestra en un botón.

Algunas propiedades controlan el comportamiento del componente. Por ejemplo, puede cambiar el intervalo de valores que acepta un campo de edición numérico cambiando la propiedad.Limits

Cuando se ejecuta la aplicación, el campo de edición acepta valores solo dentro de ese rango.

Puede editar algunas propiedades directamente en el lienzo haciendo doble clic en el componente. Por ejemplo, puede editar una etiqueta de botón haciendo doble clic en ella y escribiendo el texto deseado. Para añadir varias líneas de texto, mantenga pulsada la tecla y pulse.CambioEntrar

Alinear y espaciar componentes

En, puede organizar y cambiar el tamaño de los componentes arrastrándolos en el lienzo, o puede utilizar las herramientas disponibles en la pestaña de la tira de herramientas.Design ViewCanvas

El diseñador de aplicaciones proporciona sugerencias de alineación para ayudarle a alinear los componentes a medida que los arrastra en el lienzo. Las líneas de puntos anaranjadas que pasan por los centros de múltiples componentes indican que sus centros están alineados. Las líneas sólidas anaranjadas en los bordes indican que los bordes están alineados. Las líneas perpendiculares indican que un componente está centrado en su contenedor principal.

Como alternativa a arrastrar componentes en el lienzo, puede alinear los componentes utilizando las herramientas de la sección de la tira de herramientas.Align

Cuando se utiliza una herramienta de alineación, los componentes seleccionados se alinean con un componente de anclaje. El componente de anclaje es el último componente seleccionado y tiene un borde de selección más grueso que los demás componentes. Para seleccionar un anclaje diferente, mantenga pulsada la tecla o y haga clic dos veces en el componente deseado (una vez para anular la selección del componente y una segunda vez para seleccionarlo de nuevo).CtrlCambio Por ejemplo, en la siguiente imagen, la etiqueta es el delimitador.Format Options Al hacer clic en elAlign left botón alinea los bordes izquierdo de la lista desplegable y la casilla de verificación al borde izquierdo de la etiqueta.

Puede controlar el espaciado entre los componentes vecinos utilizando las herramientas de la sección de la tira de herramientas.Space Seleccione un grupo de tres o más componentes y, a continuación, seleccione una opción de la lista desplegable de la sección de la tira de herramientas.Space La opción distribuye el espacio uniformemente dentro del espacio ocupado por los componentes.Evenly La opción separa los componentes de 20 píxeles.20 Si desea personalizar el número de píxeles entre los componentes, escriba un número en la lista desplegable.

A continuación, haga clic enApply Horizontally OApply Vertically . Por ejemplo, seleccione y haga clic enEvenlyApply Vertically para distribuir el espacio entre una pila vertical de componentes.

Agrupar componentes

Puede agrupar dos o más componentes juntos para modificarlos como una sola unidad. Por ejemplo, puede agrupar un conjunto de componentes después de finalizar sus posiciones relativas, de modo que pueda moverlos sin cambiar esa relación.

Para agrupar un conjunto de componentes, selecciónelos en el lienzo y, a continuación, seleccione Grouping > Group en la sección de la tira de herramientas.Arrange

La herramienta también proporciona funcionalidad para estas tareas comunes:Grouping

  • Desagrupar todos los componentes de un grupo: seleccione el grupo. A continuación, seleccione Grouping > Ungroup.

  • Agregar un componente a un grupo: seleccione el componente y el grupo. A continuación, seleccione Grouping > Add to Group.

  • Eliminar un componente de un grupo: seleccione el componente. A continuación, seleccione Grouping > Remove from Group.

Organización de componentes en contenedores

Al arrastrar un componente a un contenedor como, por ejemplo, un panel, el contenedor se vuelve azul para indicar que el componente es un elemento secundario del contenedor. Se llama a este proceso de colocación de componentes en contenedores.Crianza

El muestra la relación primario – secundario mediante la sangría del nombre del componente secundario en el contenedor primario.Component Browser

Temas relacionados