Una de las pantallas más utilizadas por la ductilidad que nos ofrece es la de tipo DETALLE.  

 

 

 

La página detalle es laque nos da una mayor flexibilidad, ya que nos permite crear diferentes composiciones en una forma muy sencilla e insertar cualquier elemento como iconos, imágenes, textos, videos y campos y sobre todo nos permite organizar la página con tablas, para mantener los elementos en orden.

 

La página Detalle dispone de una serie de ELEMENTOS con los que trabajar simplemente arrastrandolos a la pantalla.

 

        

 

Ahora revisaremos paso a paso cada tipo de elemento que tenemos disponible en nuestra página tipo Detalle:

 

ELEMENTO IMAGEN 

 

 

 

Si necesitamos insertar una imagen dentro de la pantalla de la App podremos utilizar este elemento.

Sólo nos bastará con arrastrarlo dentro de la pantalla del panel de edición  o, si hemos creado una tabla con celdas, podremos arrastrar este elemento dentro de la misma tabla (o celda).

 

 

 

Una vez insertado el elemento dentro de la pantalla, tendremos que pinchar el botón: “SELECT”  para poder subir una imagen.

El elemento imagen puede ser un elemento local o remoto.

LOCAL: Cuando hablamos de una recurso local nos referimos a aquellas imagenes que hemos importado a Mobincube a través del gestor de recursos desde nuestro equipo.

REMOTO: Cuando hablamos de una imagen remota nos referimos a aquella imagen que hemos importado a Mobincube a través del gestor de recursos, pero haciendo referencia a la URL que corresponde a la ruta hacia la imagen que originalmente fue definida y almacenada en el Cloud, lo cual nos permite modificarla o sustituirla sin modificar la aplicación en si.

 

 

Por cada imagen podemos elegir:

• Un Color de fondo
• El tipo de Alineamiento
• El Ancho
• Una lista de Acciones que ejecutar al tocarla

 

 

ELEMENTO TEXTO

 

Una vez arrastrado en la pantalla el elemento texto puede ser modificado de las siguientes formas:

• Fondo: Puede ser un degradado, transparencia o color sólido con grado de transparencia

 

 

 

 

• Tamaño alineación del AREA DEL TEXTO:

Escoge entre una alineación desde la izquierda, la derecha o centrada:

 

 

 

 

• Color del TEXTO:

Podemos elegir el color del texto entre diferentes códigos de colores.

 

 

 

 

• Tamaño del TEXTO:

Es posible elegir entre 3 estilos de títulos de texto: H1, H2, H3 o entre diferentes tamaños: Diminuta, Pequeña, Mediana, Grande, Gigante.

 

 

 

 

 

 

 

 

• Alinemiento del TEXTO:

Podemos elegir el tipo de alineamiento del texto dentro del area del elemento y podemos usar el subrayado, negrita y cursiva para cada texto del área .

 

 

 

 

 

 

 

 

ELEMENTO CAMPO

 

El elemento campo se usa como campo de entrada de datos. Que pueden ser números o texto.

Los campos sólo se utilizan para crear un Formulario de contacto y tendremos que usar cualquier elemento con la acción. ENVIAR FORMULARIO.

 

 

 

Los siguientes elementos aceptan esta acción:

• Imagen tanto local como remota
• Texto local y remoto
• Tabla

Para crear un formulario ver el artiuclo relacionado: FORMULARIO

 

 

 

ELEMENTO SEPARADOR

 

 

El elemento separador, tal y como su nombre indica, se usa para separar otros bloques de contenido formado por cualquier tipo de elemento. Se puede usar definiendo su aspecto como visible o no.

Las siguientes son las propiedades a definir para el separador: 

• Color de linea (En la barra lateral de las Propriedades de la App)

 

 

 

• Fondo: Gradiente, transparente, solid color.

 

 

 

• Anchura: 0-100% del ancho de la pantalla.
• Centrado: Izquierda, derecha, centrado. Solo es apreciable si la anchura es inferior al 100% de la pantalla.
• Estilo linea:  Puede ser solida, de puntos, interrumpida, invisible o degradada.

 

 

ELEMENTO TABLA

 

 

El elemento tabla nos permite insertar en una pantalla unas tablas en las que podemos insertar cualquiera elemento (imágenes, textos separadores, campos y videos) para poderlos posicionar y organizar.

Cada tabla está caracterizada por celdas y podemos editar las siguientes propriedades:

• Fondo: Puede ser degradado, transparente o un color plano con grado de transparencia modificable:  

 

 

• Centrado y anchura: Izquierda, derecha y centrado con una anchura de 0-100% de la pantalla:

 

 

• Acciones: Se pueden definir las siguientes acciones para una tabla. Éstas serán ejecutadas al pulsarse la tabla o un elemento comprendido dentro de la mismas: 

 

 

 

• Celda: Para cada tabla se pueden definir tantas celdas como deseamos.

Se puede definir la anchura de cada celda en porcentaje relativo a la anchura de la pantalla, de forma que una celda pueda ocupar el 100% de la pantalla ella sola. Además se pude definir el color de fondo, el alineamiento y una serie de acciones que cada celda pueda ejecutar.

 

 

El elemento TABLA es perfecto para crear galerías de Imágenes.

Para aprender a crear una galería de fotos podemos leer el artículo relacionado:  CREAR UNA GALERÍA DE IMÁGENES

 

 

ELEMENTO TEXTO REMOTO

 

 

El texto online nos permite visualizar cualquier contenido insertado en el Cloud, en la carpeta de TEXTO online, y actualizarlo cuando queremos.

 

Para insertar contenido texto online vamos en la carpeta TEXTOS del Cloud

 

 

 

Insertamos el texto que queremos visualizar y pinchamos en el icono del enlace para obtener la URL.

 

 

 

Ahora en la pantalla DETALLE arrastramos el campo TEXTO ONLINE e insertamos en el campo la URL obtenida del Cloud y pinchamos el botón CHECK.

 

 

 

A parte de la URL a la cual se debe hacer referencia (al Cloud), es posible definir las mismas propiedades que en el elemento texto normal explicado al principio de éste artículo.

 

ELEMENTO VIDEO

 

 

El elemento VIDEO nos da la posibilidad de insertar un video, con formato mp4, dentro de la pantalla.

Sólo tendremos que arrastrar el elemento video dentro de la pantalla, pinchar al botón SELECT y subir el recurso desde el gestor de recursos.

 

 

Para ver como utilizar un elemento video dentro de nuestra App podeís leer el artículo relacionado: COMO USAR VIDEOS EN UNA APP

 

Más en youtube: Detalle