Creación de aplicaciones

Para crear una aplicación, debe crear diseños y páginas, llenarlas con contenido y configurar la interacción con la aplicación web.

Diseños

Anteriormente, presentamos el concepto de Diseños . Para comenzar la creación del diseño, primero debe delinear la estructura de su aplicación e identificar las plantillas de página que se utilizarán.

Si te pierdes algo, no te preocupes. Puede aumentar la lista de diseño cuando sea necesario.

Lista de diseño

La Lista de diseños proporciona todos los diseños de su aplicación web. Aquí puede realizar una variedad de operaciones y administrar diseños.

Para acceder a la Lista de diseño , seleccione la cuarta pestaña en la barra de herramientas izquierda en la pestaña Diseñador de UI o use la tecla de acceso directo 4 . Todos los diseños de su aplicación se mostrarán aquí.

Cada aplicación debe tener al menos un diseño. Cuando crea una nueva aplicación, se crearán automáticamente uno o varios diseños según la plantilla de aplicación seleccionada. Uno de ellos está marcado como **predeterminado**.

En la Lista de diseños, puede realizar las siguientes acciones en los diseños:

• seleccionar,
• agregar nuevo,
• rebautizar,
• duplicar,
• borrar.

Diseño predeterminado

El diseño predeterminado se selecciona automáticamente en la lista de diseños al crear una página nueva. Sin embargo, esto se puede reemplazar con un diseño diferente si es necesario.

El uso del diseño predeterminado aumenta la velocidad de desarrollo, por lo que recomendamos utilizar el diseño utilizado con más frecuencia como predeterminado. Tenga en cuenta que sólo se puede establecer un diseño como predeterminado a la vez. Anular el diseño predeterminado no afecta a las páginas existentes a menos que se elimine el diseño inicial.

El diseño predeterminado está marcado con un icono de estrella azul en la lista de diseños.

Crear nuevo diseño

Puede diseñar diferentes diseños para diferentes tipos de páginas. Siga estos pasos para crear un nuevo diseño:

• Presione CTRL/⌘+L o abra la Lista de diseño (atajo 4 ) desde la barra de herramientas izquierda del Diseñador de interfaz de usuario y haga clic en el botón Más en el encabezado del panel.
• Proporcione el nombre del diseño en el modal que aparece. Recomendamos utilizar un título legible que refleje la estructura del diseño para una identificación rápida al asignar diseños a las páginas.
• Seleccionar plantilla de diseño:
  • Base: plantilla en blanco sin elementos adicionales, buena para páginas sin navegación, como páginas de autenticación o de error.
  • Barra lateral izquierda: plantilla con menú de barra lateral, buena para paneles de administración, CMS, ERP, etc.
  • Menú superior: plantilla con menú superior, buena para sitios web o páginas de destino.
• Habilite la configuración Diseño predeterminado si este diseño se va a establecer como predeterminado.
• Haga clic en el botón Crear .

No hay límite para la cantidad de diseños que puede crear.

Cambiar el nombre del diseño

Para cambiar el nombre de un diseño, haga doble clic en el nombre del diseño, realice los cambios necesarios y presione Enter para guardar o Esc para revertir los cambios.

Duplicar diseño

Para duplicar un diseño, junto con su contenido y configuración:

1. Pase el cursor sobre el diseño que desea duplicar.
2. Haga clic en el icono Duplicar.

Los diseños duplicados aparecen automáticamente en la lista con un índice agregado a sus nombres. Si duplica el diseño establecido como predeterminado, el diseño recién creado no anula el diseño de origen.

Eliminar diseño

Para eliminar el diseño:

1. Pase el cursor sobre el diseño que desea eliminar.
2. Haz clic en el ícono de la Papelera.
3. Confirmar la eliminación.

Para eliminar el diseño vinculado a cualquier página, debe reasignar el diseño de cualquier página vinculada antes de eliminarlo. Esto se puede hacer a través del modal de confirmación o manualmente para cada página.

Para eliminar el diseño predeterminado, debe configurar otro diseño como predeterminado.

❗️ Importante: No puedes deshacer una operación de eliminación de diseño.

opciones de diseño

Haga clic en el diseño de destino en la Lista de diseños para acceder a su configuración desde la barra lateral de configuración izquierda.

Desde el encabezado de la barra lateral de Configuración, puede cambiar el nombre del diseño seleccionado haciendo clic en el nombre o eliminarlo.

Puede configurar el diseño seleccionado como predeterminado y ver todas las páginas vinculadas aquí. Para editar una página vinculada, haga clic en ella en la lista.

Además, puede crear cierta lógica empresarial para el diseño.

Diseño de lógica empresarial

En la pestaña de lógica empresarial, seleccione un desencadenador para establecer una acción. Esto abrirá el editor de procesos de negocio, centrado en el activador seleccionado.

Aquí puede crear un flujo de acción para uno o más activadores, como implementar la navegación, alterar las propiedades de forma condicional, alternar la visibilidad, enviar datos y más. Consulte nuestra guía sobre cómo crear un proceso empresarial para obtener más información.

🔔 Para lograr un rendimiento óptimo de las aplicaciones, cree procesos comerciales complejos en el backend.

Diseño de edición

Los diseños, como componentes globales y plantillas de página, aplican automáticamente todas las modificaciones a todas las páginas vinculadas.

Para editar un diseño, seleccione el elemento de destino en la lista de diseños y agregue los componentes necesarios desde el panel de elementos de la interfaz de usuario arrastrándolos y soltándolos en el área del lienzo.

Al editar un diseño, recuerde que la plantilla incluye un componente Contenedor de página que no se puede modificar. Esto determina la ubicación del contenido de su página dentro de la plantilla. El contenedor de página está resaltado en verde y no puede contener componentes internos mientras se encuentra en el modo de edición de diseño. El contenido se define directamente en la página y el tamaño del contenedor de página lo determina su componente principal.

paginas

Después de crear los diseños necesarios, es el mejor momento para comenzar a crear las páginas de la aplicación web. Después de crear los diseños necesarios, es el mejor momento para comenzar a crear las páginas de la aplicación web. Cada página de la aplicación web proporciona contenido que se muestra en el navegador web del usuario mediante la URL de destino.

Árbol de páginas

El árbol de páginas le muestra la estructura de su sitio web: las páginas de su sitio y las carpetas que albergan esas páginas. Aquí puede realizar diversas operaciones y organizar páginas y carpetas.

Para abrir el árbol de páginas, seleccione la tercera pestaña de la barra de herramientas izquierda del Diseñador de interfaz de usuario o presione 3. Aquí se mostrarán todas las páginas de su aplicación.

Cada solicitud debe tener al menos una página. Cuando crea una nueva aplicación, ya se crean una o varias páginas según la plantilla de aplicación seleccionada.

Puede realizar las siguientes acciones en páginas y carpetas:

• seleccionar,
• agregar nueva página o carpeta,
• rebautizar,
• mover la página y las carpetas hacia/fuera de la carpeta,
• duplicar,
• borrar.

Página de inicio

La página de índice es la página inicial de su solicitud. Cuando se ejecute su aplicación, esta página se mostrará primero si no creó ninguna redirección.

La página de índice marcó el ícono de la Casa en el árbol de páginas y no se puede cambiar a otra página. De forma predeterminada, esta página está vinculada con el diseño predeterminado creado automáticamente, pero puede cambiarlo en la Configuración de página.

Crear nueva página

Para agregar una página a su aplicación web:

1. Presione CTRL/⌘+P o abra el árbol de páginas (atajo 3 ) desde la barra de herramientas izquierda del Diseñador de interfaz de usuario y haga clic en el botón Más en el encabezado del panel.
2. Proporcione la URL de la página en el modal que aparece.
3. Seleccione la carpeta principal de la página o deje el campo vacío para colocar la página en la raíz.
4. Seleccione Diseño de página .
5. Haga clic en el botón Crear .

💡 Para crear una ruta anidada sin crear carpetas, proporcione una ruta completa a la página de destino en el campo URL de la página, por ejemplo, configuración/perfil. En este caso, la página Perfil se creará anidada en la carpeta Configuración.

Puede crear páginas y carpetas ilimitadas para su aplicación web.

🔔 Las aplicaciones web creadas con AppMaster Studio generan enrutamiento de aplicaciones por URL de página, por lo que en el formulario de generación de páginas, use la URL de la página en el formato correcto y, para una mejor comprensión, use una URL amigable.

Crear nueva carpeta

Puede crear carpetas para organizar la navegación y crear el enrutador adecuado para las páginas. Para crear una nueva carpeta:

• Presione CTRL/⌘+SHIFT+P o abra el Árbol de páginas (atajo 3) desde la barra de herramientas izquierda del Diseñador de interfaz de usuario y haga clic en el botón Carpeta en el encabezado del panel.
• Proporcione el nombre de la carpeta en el modal que aparece.
• Seleccione la carpeta principal si es necesario para crear un enrutador anidado
• Haga clic en el botón Crear .

Elementos de la interfaz de usuario

La interfaz de usuario de su aplicación consta de elementos: campos de entrada, botones, imágenes, casillas de verificación, calendarios, imágenes e íconos, cada uno de los cuales tiene un propósito específico.

AppMaster ofrece un editor visual de arrastrar y soltar que le permite seleccionar y colocar elementos directamente en la página en lugar de escribir código y obtener una vista previa inmediata.

Agregar elementos

Para agregar un elemento al lienzo:

1. Abra el Panel de elementos de la interfaz de usuario con una lista de elementos de la interfaz de usuario (atajo 1 ).
2. Seleccione el elemento necesario o utilice la barra de búsqueda.
3. Arrastre el elemento seleccionado a la página o al lienzo de diseño.

Para colocar el elemento de arrastre dentro del objetivo, suelte el elemento sobre los elementos de destino.

Para agregar un elemento antes o después de un elemento, arrastre el elemento sobre el borde del objetivo hasta que aparezca un separador.

El divisor depende de la dirección del contenedor principal:

• Si la Dirección del contenedor principal es Vertical , los elementos se agregarán desde arriba o desde abajo.
• Si la Dirección del contenedor principal es Horizontal , los elementos se agregarán desde la izquierda o la derecha.

Personalizar elementos

Cada componente que agregue al lienzo está dotado de un conjunto completo de configuraciones personalizables. Con las propiedades del elemento, puede administrar tanto la apariencia del elemento como los datos que se mostrarán.

Para configurar un elemento:

• Seleccione el componente de destino en el lienzo.
• Navegue hasta el panel Apariencia, la primera pestaña en la barra lateral derecha.
• Dentro del panel, elija el elemento de configuración específico que desea modificar.
• Ingrese sus valores preferidos en los campos designados.

El lienzo responde en tiempo real y muestra sus ajustes de inmediato.

Para obtener orientación adicional, coloque el cursor del mouse sobre una configuración brevemente para que aparezca una información sobre herramientas que proporciona una descripción concisa de la función de esa configuración.

Más allá de estas funciones interactivas, AppMaster mejora las capacidades de personalización a través de sus bloques especiales de procesos comerciales, Establecer propiedades y Establecer datos . Estos bloques proporcionan un nivel avanzado de acceso, lo que le permite modificar la configuración de cada componente mediante programación en su aplicación web.