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) |
Sí |
|
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) |
Sí |
|
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) |
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 |
|
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) |
Especifica la posición de la etiqueta (si la etiqueta tiene un valor y, por lo tanto, es visible). |
Label-bold (Negrita etiqueta) |
No |
|
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) |
Sí |
|
Vertical |
Dirección en que se deben apliar los controles. |
|
BorderSize (Tamaño del borde) |
No |
Valor numérico |
|
Todavía no disponible |
Sí |
BorderColor (Color del borde) |
No |
|
|
Todavía no disponible |
Sí |
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 |
|
Body (Cuerpo) |
Especifica el color del texto. |
LinkColor (Color del enlace) |
No |
|
|
Especifica el color de los hiperenlaces detectados dentro del texto. |
HAlign (Alineación horizontal) |
No |
|
Left (Izquierda) |
Especifica la alineación horizontal del texto dentro de esta etiqueta. |
VAlign (Alineación vertical) |
No |
|
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 |
|
False (Falso) |
Especifica si el texto dentro de la etiqueta debe ir en negrita o no. |
Italic (Cursiva) |
No |
|
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 |
|
|
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 |
|
False (Falso) |
Especifica si los enlaces se deben detectar de forma automática o no. |
Type (Tipo) |
No |
|
|
Se puede usar para especificar el formato de esta etiqueta. El formato especificado se aplicará al texto dentro de la etiqueta. |
Format (Formato) |
No |
|
|
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 |
|
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 |
|
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 |
|
|
Especifica el color del texto del botón en su estado normal. |
TextColorPressed (Color de texto botón pulsado) |
No |
|
|
Especifica el color del texto del botón cuando está pulsado. |
TextColorSelected (Color de texto seleccionado) |
No |
|
|
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 |
|
Body (Cuerpo) |
Especifica el color del texto. |
LinkColor (Color del enlace) |
No |
|
|
Especifica el color de los hiperenlaces detectados dentro del texto. |
HAlign (Alineación horizontal) |
No |
|
Left (Izquierda) |
Especifica la alineación horizontal del texto dentro de esta etiqueta. |
VAlign (Alineación vertical) |
No |
|
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 |
|
False (Falso) |
Especifica si el texto dentro de la etiqueta debe ir en negrita o no. |
Italic (Cursiva) |
No |
|
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 |
|
|
Especifica el color del borde (en caso de que el borde sea visible) |
|
VAlign (Alineación vertical) |
No |
|
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 |
|
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) |
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. |
Sí |
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) |
Sí |
|
|
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 |
|
2 |
Grosor del borde en píxeles |
BorderColor (Color del borde) |
No |
|
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 |
|
False (Falso) |
Indicates if the text field is required. |
IsPassword |
No |
|
False (Falso) |
Indicates if the text field should behave like a password field. |
ShowClearButton |
No |
|
False (Falso) |
Indicates if a clear button should be shown once the user starts to enter text. |
VAlign |
No |
|
Top |
Specifies the vertical alignment of the text inside the text field |
HAlign |
No |
|
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) |
Sí |
|
|
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) |
Sí |
|
|
Especifica el parámetro «latitud» de las coordenadas visibles en el mapa. |
Long (Longitud) |
Sí |
|
|
Especifica el parámetro «longitud» de las coordenadas visibles en el mapa. |
ZoomLevel (Nivel de zoom) |
No |
|
|
Especifica el radio en kilómetros que se verá en torno a la localidad especificada. |
ZoomEnabled (Zoom disponible) |
No |
|
True (Verdadero) |
Especifica si el usuario puede utilizar el zoom para ampliar o reducir la vista del mapa. |
Fixed (Fijo) |
No |
|
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) |
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.
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}" /> |
Comentarios
0 comentarios
Inicie sesión para dejar un comentario.