AppMachine Centro de Ayuda

¿Cómo podemos ayudarle?

Seguir

Diseña tus pantallas con el editor de maqueta

Al trabajar con uno de nuestros bloques alimentados por datos de, por ejemplo, Excel o un servicio web, es importante que diseñes una maqueta de aspecto atractivo para exponer tus datos. Para ayudarte a hacer el diseño te ofrecemos un editor de maqueta fácil e intiuitivo. Con el editor de maqueta (Layout Editor) podrás crear un diseño para visualizar tus datos sin necesidad de escribir ni una sola línea de código.

En este vídeo te mostramos cómo funciona el editor:

Requisitos previos

  • Un bloque Excel o Web Service (Servicio Web) donde estén alojados tus datos;

Recomendación: El editor de maqueta (Layout Editor) detectará de forma automática el tipo de datos durante la importación de tu documento Excel o tu servicio web. El sistema creará el control adecuado en función del tipo de datos existentes.

Instrucciones paso a paso

En estas instrucciones vamos a usar el archivo de ejemplo para floristerías (Flower Shops Demo File), el cual se adjunta a este artículo.

  1. Entra en http://design.appmachine.com y abre la app que contiene el bloque Excel o el bloque Web Service (Servicio Web);
  2. Selecciona el bloque ExcelWeb Service;
  3. A mano izquierda verás todos los campos de datos disponibles.
    En el centro aparece una previsualización de tu pantalla, donde puedes diseñar a tu gusto la maqueta.
    Nota: Por defecto, el sistema colocará un campo en tu plantilla, normalmente el campo "Nombre". Si no lo necesitas, puedes borrarlo.            Screen_Shot_2014-04-16_at_12.55.27.png
  4. Añade campos a tu maqueta arrastrando el campo deseado desde el panel de la izquierda al panel central. Screen_Shot_2014-04-16_at_12.59.52.png
  • Selecciona un campo en el editor de maqueta para cambiar las propiedades.
  • El panel de la izquierda cambiará a la pestaña de Propiedades, en la cual se mostrarán todas las propiedades disponibles. Las propiedades disponibles serán distintas en función del tipo de campo seleccionado.Screen_Shot_2014-04-16_at_13.08.24.png
  • Cambia la posición de un campo seleccionándolo en el editor de maqueta y arrastrándolo a otra posición.Screen_Shot_2014-04-16_at_13.15.58.png
  • Cambia el tamaño del campo arrastrando el borde horizontal o vertical del mismo. También puedes puedes fijar la anchura y la altura en la pestaña de propiedades.Screen_Shot_2014-04-16_at_13.17.40.png
  • Para borrar un campo, selecciónalo y pulsa el botón de borrar (Delete).

Si deseas modificar el diseño de la maqueta por medio de código fuente, pulsa en el botón Source

Lee aquí todo sobre las etiquetas que se pueden usar en nuestro lenguaje XML. 

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 2 de 2
¿Tiene más preguntas? Enviar una solicitud

Comentarios