AppMachine Centro de Ayuda

¿Cómo podemos ayudarle?

Seguir

Plantillas de diseño AppMachine

Esta página contiene información sobre las plantillas de diseño de AppMachine y la forma en que se pueden y se deben usar.


About AppMachine Templates

Las plantillas de AppMachine te permiten diseñar una maqueta con lenguaje tipo XML. Tu maqueta se traducirá luego a elementos nativos para cada plataforma disponible.

Cálculo de la anchura

Todas las anchuras que especifiques guardarán relación con la anchura del iPhone original, es decir, 320 píxels. Esos 320 píxels se usarán como punto referencia para todo dentro de AppMachine. Por lo tanto, al diseñar una maqueta, podrás partir de un ancho de 320 y un alto de 480 píxels, y nosotros traduciremos ese valor a las medidas específicas de cada dispositivo.

> Ejemplo

<container direction="vertical"> 

        <container direction="horizontal"> 

               <image height="52" width="52" margin="0" field="Thumb" />

               <container direction="vertical" vAlign="center" > 

                     <label field="name" margin="5"/>

                     <label field="DescriptionShort" maxlines="2" margin="0,5,5,5" />

                </container>

        </container>

</container>

Propiedades básicas

Todos y cada uno de los controles que se pueden utilizar en una plantilla de AppMachine tienen las siguientes propiedades básicas. Además de las propiedades básicas, cada control tiene luego propiedades adicionales.

Propiedad

Requerido

Valores admitidos

Valor por defecto

Descripción

Width (Ancho)

  1. fill_parent (llenar raíz)
  2. wrap_content (ajustar contenido)
  3. 100

fill_parent (llenar raíz)

Se usa para fijar el ancho del control.

La tercera opción te permite especificar un ancho en píxels.

Height (Alto)

  1. fill_parent (llenar raíz)
  2. wrap_content (ajustar contenido)
  3. 100

wrap_content (ajustar contenido)

Se usa para fijar el alto del control.

La tercera opción te permite especificar una altura en píxels para el control.

Flex

No

Valor entero

1

Cuando un control se encuentra ajustado dentro de distintos contenedores, puedes especificar el valor flex para darle a cada control un peso ponderado. Este peso ponderado se utilizará para dividir el espacio disponible.

Gravity (Gravedad)

No

  • Left (Izquierda)
  • Center (Centro)
  • Right (Derecha)
  • Top (Arriba)
  • Bottom (Abajo)
  • TopLeft (Arriba a la izquierda)
  • TopCenter (Arriba en el centro)
  • TopRight (Arriba a la derecha)
  • BottomLeft (Abajo a la izquierda)
  • BottomCenter (Abajo en el centro)
  • BottomRight (Abajo a la derecha)

Left (Izquierda)

Especifica la posición del control dentro de su contenedor raíz cuando hay espacio libre.

Margin (Margen)

No

Valor entero

 

Especifica el margen que se debe aplicar al control. Se puede definir un margen único para todos los lados, o un margen específico para cada lado.

Cuando se defina un margen específico para cada lado, los valores se escribirán en este orden: arriba, derecha, abajo, izquierda

Min-width (Anchura mínima)

No

Valor entero

 

Especifica la anchura mínima del control.

Min-height (Altura mínima)

No

Valor entero

 

Especifica la altura mínima del control.

BackgroundColor (Color de fondo)

No

  • Valor hexadecimal
  • Nombre de un tema de color de AppMachine

Transparente

Especifica el color de fondo del control.

Para más información sobre los temas de color de AppMachine, lee esta página.

Label (Etiqueta)

No

Texto  

Una vez especificada, la etiqueta se mostrará junto al control en cuestión. Se puede usar, por ejemplo, para especificar una etiqueta en un campo de texto sin tener que añadir manualmente un control de etiqueta.

Label-position (Posición de la etiqueta)

No

  • Top (Arriba)
  • Right (Derecha)
  • Bottom (Abajo)
  • Left (Izquierda)
Top (Arriba)

Especifica la posición de la etiqueta (si la etiqueta tiene un valor y, por lo tanto, es visible).

Label-bold (Negrita etiqueta)

No

  • True (Verdadero)
  • False (Falso)
False (Falso)

Especifica si el texto dentro de la etiqueta debe ir en negrita o no.

Controles

Las plantillas de AppMachine ofrecen un amplio espectro de controles que puedes utilizar para crear tus pantallas y maquetas personalizadas.

Container (contenedor)

Los contenedores se puden utilizar para alinear controles horizontal o verticalmente.

> Ejemplo

1

2

3

<Container direction="vertical" width="fill_parent" height="wrap_content" margin="5" >

    <!-- Contenido del contenedor -->

</Container>

> Propiedades

Además de las propiedades básicas, el control Container (contenedor) admite también las siguientes propiedades.

Propiedad

Requerido

Valores admitidos

Valor por defecto

Descripción

Experimental

Direction (Dirección)

  • Horizontal
  • Vertical

Vertical

Dirección en que se deben apliar los controles.

 

BorderSize (Tamaño del borde)

No

Valor numérico

 

Todavía no disponible

BorderColor (Color del borde)

No

  • Color hexadecimal
  • Nombre de un tema de color de AppMachine

 

Todavía no disponible

 

FrameLayout (Diseño del cuadro)

El control FrameLayout (Diseño del cuadro) se puede utilizar para apilar controles.

> Ejemplo

1

2

3

<FrameLayout width="fill_parent" height="wrap_content" margin="5" >

    <!-- The content of the container -->

</FrameLayout >

> Propiedades

Este control no tiene propiedades adicionales.

Etiqueta

El control Label (etiqueta) se puede utilizar para mostrar texto simple –sin formato– en la maqueta.

> Ejemplo

1

<Label width="fill_parent" height="wrap_content" text="I can build my own native apps using AppMachine" />

> Propiedades

Además de las propiedades básicas, el control Label (etiqueta) admite también las siguientes propiedades.

Propiedad

Requerido

Valores admitidos

Valor por defecto

Descripción

Field (Campo)

No

 

 

Campo cuyos datos están vinculados a este control.

Nota: Utiliza solo «field» (campo) o solo «text» (texto). No se pueden combinar ambos.

Text (Texto)

No

 

 

El texto estático que debe aparecer en esta etiqueta

Nota: Utiliza solo «field» (campo) o solo «text» (texto). No se pueden combinar ambos.

TextColor (Color del texto)

No

  • Color hexadecimal
  • Nombre de un tema de color de AppMachine

Body (Cuerpo)

Especifica el color del texto.

LinkColor (Color del enlace)

No

  • Color hexadecimal
  • Nombre de un tema de color de AppMachine

 

Especifica el color de los hiperenlaces detectados dentro del texto.

HAlign (Alineación horizontal)

No

  • Left (Izquierda)
  • Center (Centro)
  • Right (Derecha)

Left (Izquierda)

Especifica la alineación horizontal del texto dentro de esta etiqueta.

VAlign (Alineación vertical)

No

  • Top (Arriba)
  • Center (Centro)
  • Bottom (Abajo)

Center (Centro)

Especifica la alineación vertical del texto dentro de esta etiqueta.

FontSize (Tamaño de fuente)

No

Tamaño de la fuente en píxels

 

Especifica el tamaño del texto.

Bold (Negrita)

No

  • True (Verdadero)
  • False (Falso)

False (Falso)

Especifica si el texto dentro de la etiqueta debe ir en negrita o no.

Italic (Cursiva)

No

  • True (Verdadero)
  • False (Falso)

False (Falso)

Especifica si el texto dentro de la etiqueta debe ir en cursiva o no.

MaxLines (Número máximo de líneas)

No

  • Valor numérico
  • Automático

 

Número máximo de líneas que se deben mostrar.

Nota: Especificar el número máximo de líneas puede mejorar el rendimiento de las plantillas usadas en listas.

DetectLinks (Detectar enlaces)

No

  • True (Verdadero)
  • False (Falso)

False (Falso)

Especifica si los enlaces se deben detectar de forma automática o no.

Type (Tipo)

No

  • Currency (Moneda)
    Formatea el texto como campo de moneda
  • Distance (Distancia)
    Formatea el texto como campo de distancia
  • Duration (Duración)
    Formatea el texto como duración expresada en hh:mm:ss 
  • DurationInMiliseconds (Duración en milisegundos)
    Formatea el texto como duración calculada en milisegundos en vez de en segundos
  • Date (Fecha)
    Formatea el texto de acuerdo según lo definido por la propiedad Format (formato)

 

Se puede usar para especificar el formato de esta etiqueta. El formato especificado se aplicará al texto dentro de la etiqueta.

Format (Formato)

No

  • ShortDate (Fecha corta)
  • LongDate (Fecha larga)
  • ShortTime (Tiempo corto)
  • LongTime (Tiempo largo)
  • Since (Desde)
  • Other date formatting string like "mmm YYYY" (Otro formato de fecha, como por ejemplo "mmm AAAA")

 

Al especificar un tipo, puedes usar el campo Format (formato) para definir un subformato adicional para el tipo específico.

Button (botón)

El control button (botón) se puede usar para crear un elemento que permitirá al usuario ejecutar una acción al pulsar sobre él.

Ejemplo

1

<Button name="btnSubmit" title="My button text" width="100" height="44" />

> Propiedades

Además de las propiedades básicas, el control button (botón) admite también las siguientes propiedades

Propiedad

Requerido

Valores admitidos

Valor por defecto

Descripción

Title (Título)

No

Texto

 

Texto que debe aparecer en el botón.

Bold (Negrita)

No

  • True (Verdadero)
  • False (Falso)

False (Falso)

Especifica si el texto dentro de la etiqueta debe ir en negrita o no.

FontSize (Tamaño de fuente)

No

Valor numérico

 

Especifica el tamaño de la fuente utilizada en el botón.

Selected (Seleccionado)

No

  • True
  • False

False (Falso)

Especifica el estado por defecto del botón. Cuando se especifica como estado True (Verdadero), el botón aparecerá seleccionado.

BackgroundImage (Imagen de fondo)

No

URL

 

Especifica el URL a la imagen que se utilizará como imagen de fondo del botón.

BackgroundImagePressed (Imagen de fondo botón pulsado)

No

URL

 

Especifica el URL a la imagen que se utilizará como imagen de fondo del botón cuando esté pulsado.

BackgroundImageSelected (Imagen de fondo seleccionada)

No

URL

 

Especifica el URL a la imagen que se utilizará como imagen de fondo del botón cuando esté seleccionado.

TextColor (Color del texto)

No

  • Color hexadecimal
  • Nombre de un tema de color de AppMachine

 

Especifica el color del texto del botón en su estado normal.

TextColorPressed (Color de texto botón pulsado)

No

  • Color hexadecimal
  • Nombre de un tema de color de AppMachine

 

Especifica el color del texto del botón cuando está pulsado.

TextColorSelected (Color de texto seleccionado)

No

  • Color hexadecimal
  • Nombre de un tema de color de AppMachine

 

Especifica el color del texto del botón cuando está seleccionado.

Webview (Vista web)

> Advertencia sobre el funcionamiento de este control

No utilices nunca este control dentro de una lista.

Se puede utilizar para mostrar como HTML datos con formato RTF. 

> Advertencia sobre la interpretación del formato

El uso del valor wrap_content (ajustar contenido) para determinar la propiedad Height (Alto), el tamaño de la vista web podría ser incorrecto. Siempre que sea posible, utiliza un tamaño estático, y recurre solo al modo wrap_content (ajustar contenido) cuando sea un imprescindible.

Debido a problemas de representación, la implementación del valor wrap_content (ajustar contenido) puede ofrecer una altura estimada errónea.

> Ejemplo

1

<Webview width="fill_parent" height="250" value="<p>Hello world!</p>" />

> Propiedades

Además de las propiedades básicas, el control Webview (Vista web) admite también las siguientes propiedades.

Todas las propiedades disponibles para el control Label (Etiqueta), están también disponibles para el control Webview (Vista web).

Propiedad

Requerido

Valores admitidos

Valor por defecto

Descripción

Field (Campo)

No

 

 

Campo cuyos datos están vinculados a este control.

Nota: Utiliza solo «field» (campo) o solo «text» (texto). No se pueden combinar ambos.

Text (Texto)

No

 

 

El texto estático que debe aparecer en esta etiqueta

Nota: Utiliza solo campo o solo texto. No se pueden combinar ambos.

TextColor (Color del texto)

No

  • Color hexadecimal
  • Nombre de un tema de color de AppMachine

Body (Cuerpo)

Especifica el color del texto.

LinkColor (Color del enlace)

No

  • Color hexadecimal
  • Nombre de un tema de color de AppMachine

 

Especifica el color de los hiperenlaces detectados dentro del texto.

HAlign (Alineación horizontal)

No

  • Left (Izquierda)
  • Center (Centro)
  • Right (Derecha)

Left (Izquierda)

Especifica la alineación horizontal del texto dentro de esta etiqueta.

VAlign (Alineación vertical)

No

  • Top (Arriba)
  • Center (Centro)
  • Bottom (Abajo)

Center (Centro)

Especifica la alineación vertical del texto dentro de esta etiqueta.

FontSize (Tamaño de fuente)

No

Tamaño de la fuente en píxels

 

Especifica el tamaño del texto

Bold (Negrita)

No

  • True (Verdadero)
  • False (Falso)

False (Falso)

Especifica si el texto dentro de la etiqueta debe ir en negrita o no.

Italic (Cursiva)

No

  • True (Verdadero)
  • False (Falso)

False (Falso)

Especifica si el texto dentro de la etiqueta debe ir en cursiva o no.

Image (Imagen)

El control Image (Imagen) sirve para mostrar imágenes.

> Ejemplo

1

<Image value="http://481xy61dp22v2uqbx85ez1twoe.wpengine.netdna-cdn.com/wp-content/themes/appmachinenew/2014/images/header/logo-dark.png" width="wrap_content" height="wrap_content" />

> Propiedades

Además de las propiedades básicas, el control Image (Imagen) admite también las siguientes propiedades.

Propiedad

Requerido

Valores admitidos

Valor por defecto

Descripción

Expirimental

Field (Campo)

No

 

 

Campo cuyos datos están vinculados a este control.

Nota: Utiliza solo «field» (campo) o solo «value» (valor). No se pueden combinar ambos.

 

Value (Valor)

No

URL

 

Especifica el URL de la imagen que se debe mostrar.

 

DefaultValue (Valor por defecto)

No

URL

 

Especifica el URL de la imagen que se debe mostrar mientras se carga otra imagen o cuando una imagen no está disponible.

 

Border (Borde)

No

Grosor en píxels

 

Especifica el grosor del borde en píxels.

 

BorderColor (Color del borde)

No

  • Valor hexadecimal
  • Nombre de un tema de color de AppMachine

 

Especifica el color del borde (en caso de que el borde sea visible)

 

VAlign (Alineación vertical)

No

  • Top (Arriba)
  • Center (Centro)
  • Botom (Abajo)

Top (Arriba)

Especifica la posición vertical de la imagen dentro del control y cómo se debe alinear cuando exceda la altura especificada para el control.

 

HAlign (Alineación horizontal)

No

  • Left (Izquierda)
  • Center (Centro)
  • Right (Derecha)

Center (Centro)

Especifica la posición horizontal de la imagen dentro del control y cómo se debe alinear cuando exceda la anchura especificada para el control.

 

ScaleType (Tipo de escala)

No

  • ScaleAspectFit (Encajar)
  • ScaleAspectFill (Rellenar)

ScaleAspectFit (Encajar)

Especifica la escala que se aplicará a la imagen.

 

Parralax

No

Valor numérico

 

Especifica el porcentaje de imagen que será visible, el resto se utilizará para aplicar un efecto al desplazar la lista.

 

TextField (campo de texto)

El control TextField (campo de texto) se puede usar para permitir que los usuarios introduzcan un texto de una sola línea.

> Uso

<TextField width="fill_parent" height="44" margin="5" Label="Your name" Placeholder="please enter your name..." />

> Propiedades

Además de las propiedades básicas, el control TextField (campo de texto) admite también las siguientes propiedades.

Propiedad

Requerido

Valores admitidos

Valor por defecto

Descripción

Binding (Vinculación)

 

 

Parámetro de un servicio web vinculado a este control. Cuando el usuario introduce texto, este se asignará automáticamente al parámetro.

Puedes especificar un vínculo usando el formato WebserviceName.ParameterName (NombreServicioWeb.NombreParámetro)

Border (Borde)

No

  • Grosor en píxels

2

Grosor del borde en píxeles

BorderColor (Color del borde)

No

  • Valor hexadecimal
  • Nombre de un tema de color de AppMachine
 

Especifica el color del borde (en caso de que el borde sea visible)

Placeholder (Marcador de posición)

No

 

 

Texto estándar que aparece cuando el campo de texto está vacío.

IsRequired (Se requiere)

No

  • True (Verdadero)
  • False (Falso)

False (Falso

Indicates if the text field is required.

IsPassword

No

  • True (Verdadero)
  • False (Falso)

False (Falso)

Indicates if the text field should behave like a password field.

ShowClearButton

No

  • True (Verdadero)
  • False (Falso)

False (Falso)

Indicates if a clear button should be shown once the user starts to enter text.

VAlign

No

  • Top (Arriba)
  • Center (Centro)
  • Bottom (Abajo)

Top

Specifies the vertical alignment of the text inside the text field

HAlign

No

  • Left (Izquierda)
  • Center (Centro)
  • Right (Derecha)

Left

Specifies the horizontal (text) alignment of the text inside the textfield

ImagePicker (selector de imágenes)

El control ImagePicker (selector de imágenes) se puede utilizar para ofrecer a los usuarios la posibilidad de seleccionar o subir imágenes.

> Uso

<ImagePicker width="fill_parent" height="100" margin="5" Description="Please select an image." />

> Propiedades

Además de las propiedades básicas, el control ImagePicker (selector de imágenes) admite también las siguientes propiedades.

Propiedad

Requerido

Valores admitidos

Valor por defecto

Descripción

Binding (Vinculación)

 

 

Parámetro de un servicio web vinculado a este control. Cuando el usuario introduce texto, este se asignará automáticamente al parámetro.

Puedes especificar un vínculo usando el formato WebserviceName.ParameterName (NombreServicioWeb.NombreParámetro)

Description (Descripción)

No

 

 

Especifica el texto que aparecerá en el mensaje que ve el usuario cuando tiene que elegir la fuente de una imagen («de la librería» o «saca una foto»)

ImageWidth (Ancho de imagen)

No

 

 

Especifica la anchura máxima de la imagen seleccionada. Cuando la imagen sea más ancha, se ajustará su tamaño a la anchura máxima especificada.

Nota: El ajuste del tamaño tiene en cuenta las dimensiones de la imagen. Es decir, que el anchura real puede ser superior cuando la imagen supera la altura máxima.

ImageHeight (Alto de imagen)

No

 

 

Especifica la altura máxima de la imagen seleccionada. Cuando la imagen sea más alta, se ajustará su tamaño a la altura máxima especificada.

Nota: El ajuste del tamaño tiene en cuenta las dimensiones de la imagen. Es decir, que el altura real puede ser superior cuando la imagen supera la anchura máxima.

MapView (beta) [Vista de mapa (beta)]

El control MapView (vista de mapa) se puede utilizar para mostrar un punto geográfico determinado de acuerdo con unas coordenadas de latitud y longitud. 

Nota: El control MapView (vista de mapa) solo está disponible en este momento para iOS y estará disponible en breve para Android y Windows Phone.

> Uso

<MapView width="fill_parent" height="125" margin="5" lat="{data:latitude}" long="{data:longitude} />

> Propiedades

Además de las propiedades básicas, el control MapView (vista de mapa) admite también las siguientes propiedades.

Propiedad

Requerido

Valores admitidos

Valor por defecto

Descripción

Lat (Latitud)

  • {data:FieldName}
  • Nombre del campo
  • Un valor estático, como p. ej. 53.123456 

 

Especifica el parámetro «latitud» de las coordenadas visibles en el mapa.

Long (Longitud)

 

  • {data:FieldName}
  • Nombre del campo
  • Un valor estático, como p. ej. 5.3456789 

 

Especifica el parámetro «longitud» de las coordenadas visibles en el mapa.

ZoomLevel (Nivel de zoom)

No

  •  Valor numérico (p. ej. 25)

 

Especifica el radio en kilómetros que se verá en torno a la localidad especificada.

ZoomEnabled (Zoom disponible)

No

  • True (Verdadero)
  • False (Falso)

 True (Verdadero)

Especifica si el usuario puede utilizar el zoom para ampliar o reducir la vista del mapa.

Fixed (Fijo)

No

  • True (Verdadero)
  • False (Falso)

False (Falso)

Especifica si la localidad especificada estará siempre en el centro de la porción de mapa mostrada y el usuario no podrá moverse por el mapa o utilizar el zoom.

ShowUserLocation (Mostrar ubicación del usuario)

No

  • True (Verdadero)
  • False (Falso)

True (Verdadero)

Especifica si se debe mostrar en el mapa la ubicación del usuario.

 

Información adicional

Además de las controles de las plantillas, también hay disponible información adicional relevante sobre el formateo y la creación de maquetas personalizadas.

Colores

AppMachine ofrece un herramientas de estilo muy potentes disponibles para que nuestros usuarios las puedan incluir en sus plantillas. Si quieres hacer referencia a alguno de los colores que pueden especificar los usuarios en sus aplicaciones, aquí tienes una lista de los colores admitidos.

  • Body (cuerpo)
  • Title (título)
  • Support (asistencia)
  • BodyColor (color del cuerpo)
  • TitleColor (color del título)
  • SupportColor (color asistencia)
  • InputTextColor (color texto de entrada)
  • BackgroundColor (color de fondo)
  • SeperatorColor (color separador)
  • IconColor (color icono)
  • IconSelectedColor (color icono seleccionado)
  • ButtonColor (color del botón)
  • ButtonSelectedColor (color del botón seleccionado)
  • ButtonTextColor (color texto del botón)
  • ButtonTextSelectedColor (color texto del botón seleccionado)
  • ListBackgroundEvenColor (lista fondo color par)
  • ListBackgroundOddColor (lista fondo color impar)

Campos de referencia

La mayoría de los controles se pueden vincular a una fuente de datos especificando el nombre del campo de referencia en la propiedad field (campo).

Cuando manejas datos, es posible que quieras incluir información de tu documento Excel o tu servicio web en las propiedades de otro bloque de desarrollo. En general, siempre puedes acceder a los datos de un bloque de construcción raíz (como Excel o un servicio web) con el comando {data:fieldname}, reemplazando fieldname con el nombre del campo en cuestión.

Lee más sobre este tema

Valor / Título / Texto

Esta propiedad se puede utilizar para especificar un valor semiestático para un control. Puedes combinar estos valore estáticos con referencias a valores dinámicos como en el siguiente ejemplo:

Ejemplo

1

<Label width="fill_parent" height="wrap_content" text="El título de esta película es {data:MovieName}" />

 

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

Comentarios