En mobincube, para crear tu App añadiremos elementos a nuestra pantalla para crear la estructura que queremos. Estos son:
- Imagen
- Texto
- Campo
- Separador
- Tabla
- Texto online
- Imagen Online
- Video
Ahora vamos a ver cada uno de los elementos y veremos que propriedades y acciones se pueden aplicar a cada uno.
Elemento Tabla
El elemento tabla es como una se trata como una fila que se puede dividir en tantas celdas como deseas. Si deseas más de una fila, tendrás que arrastrar otra tabla (fila) en la pantalla.
Cuando arrastras una tabla en la pantalla puedes modificar algunos aspectos:
- Fondo: Puedes hacer que el fondo de una tabla sea transparente, sólido con alfa ajustable o con un gradiente:
- Alineación y ancho: Izquierda, derecha, centrado y anchura desde 0 - 100% de la pantalla:
- Acciones: Cuando asignas una acción a un elemento tabla, al pulsar cualquier cosa dentro de su perímetro se ejecutará la acción. Se pueden definir las siguientes acciones para un elemento tabla:
- Celdas: Por cada celda puedes definir tantas celdas como desees y cada celda se puede ajustar en el porcentaje que se refiere al% de la anchura respecto a la anchura total de la pantalla. Puedes exceder el ancho de la pantallas añadiendo muchas celdas obteniendo un efecto de deslizamiento horizontal que es muy útil en muchos casos. Esta es una de las formas de emular una galería de fotos dentro de una pantalla detalle:
Recuerda que las tablas se utilizan para definir el espacio y que puedes arrastrar cualquier otro elemento en una celda de la tabla.
Elemento Texto
Una vez arrastrado un elemento texto en la pantalla, esto se puede modificar de las siguientes maneras:
- Fondo: Puede ser un color gradiente, trasparente o sólido con transparencia
- Alineación del área del texto: podemos elegir una alineación de la izquierda, derecha o centro
- 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 cabecera de texto: H1, H2, H3, o entre diferentes tamaños: Diminuto, Pequeño, Medio, Grande, Gigante.
- Alineación del TEXTO
Podemos elegir la alineación del texto en el área y podemos utilizar los Negrita, Cursiva y Subrayado para cada texto del área.
Elemento Separador
El separador como su nombre lo describe se usa para separar los elementos de una manera visual. Se puede utilizar permitiendo que el separador sea visible o no, por lo que aún puede crear un espacio entre los elementos sin que el separador sea visible. Las propiedades que se pueden aplicar a un separador son las siguientes:
- Color de fondo: el color del área del separador es independiente de que esto sea visible o no. Puede ser sólido o transparente.
- Ancho: 0-100% del anchjo de l apantalla.
- Alineación: Izquierda, centrada o derecha. Este cambio sólo se aprecia si la anchura es menor que 100%.
- Estilo de línea: Puede ser sólido, con diferentes tipos de puntos o invisible.
- Color de línea: El color de los separadores tiene que ser definido antes de que se arrastre a la pantalla y se hace desde la barra de herramientas como se muestra a continuación:
Elemento Imagen
En esta sección vamos a describir cómo utilizar y personalizar el elemento imagen. Este elemento va a ser un elemento local o remoto. Cuando hablamos de imagen local nos referimos a una imagen importada en Mobincube desde nuestro ordenador o directamente desde el gestor de imágenes integrado en Mobincube. Pero cuando hablamos de imagen remota o contenidos (RSS, texto, etc.) nos referimos a contenidos que hemos almacenado en el Cloud de Mobincube. Este contenido se puede cambiar desde el Cloud, cambiando el contenido de la app sin tener que regenerarlo. Si deseas obtener más información sobre el contenido remoto haz clic aquí.
La primera cosa que hay que hacer es la de subir una imagen, así que que empezaremos arrastrando el elemento imagen en la pantalla y luego haremos clic en el botón "seleccionar":
Una vez que hayas hecho clic en el botón "seleccionar" , mencionado anteriormente podrás elegir una imagen de las siguientes maneras:
- Archivo local en tu ordenador:
- Archivo remoto que requiere una URL generada en el Cloud:
Ahora puedes seleccionar la imagen haciendo clic en ella y empezando a editar sus propriedades:
- Fondo: Algunas de las opciones de edición, como el fondo, van a depender del tipo de imagen que se está editando. Las imágenes PNG permiten que unas partes de la imagen sean transparente o semitransparente en algunas áreas. Estas áreas se verán afectadas por los colores de fondo definidos, pero esto no afecta a las imágenes que no tengan definidas las áreas transparentes:
Podemos observar que una imagen con áreas transparentes será de color en sus áreas transparentes cuando se aplica el color de fondo. Este cambio no se visualiza en una imagen sin zonas transparentes porque no tiene áreas transparentes que permiten ver a través de las partes de la imagen por el fondo.
Alineación y ancho: Puedes alinear una imagen en la pantalla a la izquierda, a la derecha o centrada. En cuanto a anchura se puede definir esto desde 0-100% del ancho de la pantalla:
- Acción: Las siguientes acciones se pueden aplicar a un elemento imagen:
:
El elemento Campo
El elemento campo se utiliza como campo de entrada de texto para que el usuario pueda introducir un texto o datos numéricos. Cuando se utilizan uno o más campos de una página detalle, tendrás que añadir un botón "Enviar". Se puede utilizar cualquier elemento como botón de envío, siempre que tenga acciones definibles.
En los primeros elementos que hemos introducido en este artículo no hemos mencionado la acción "Enviar Formulario". Esta acción sólo se mostrará como opción en la lista de acciones si se ha colocado un elemento campo.
Los siguientes elementos tienen la acción "Enviar Formulario":
- Imagen/Imagen Remota
- Texto/Texto (online) Remoto
- Tabla
Vamos a través de las propiedades definibles tanto de los elementos de campo como del botón "Enviar Formulario":
En la pantalla anterior hemos insertado los elementos siguientes en el orden mencionado:
El elemento texto que dice: "CAMPOS:".
Separador
Campo número 1
Separador
Campo número 2
Separador
Elemento texto con la acción "enviar formulario" asignado al mismo.
El elemento campo se puede definir de la siguiente forma:
Fondo: De la misma manera que todos los otros elementos descritos en este artículo.
Alinear: izquierda, derecha o centrado en la pantalla.
Anchura: Ajustable de 0 a 100% de ancho de la pantalla.
- Campo y color de fuente
- Nombre de referencia: Este es el identificador del campo o el nombre que posee la variable del campo.
- Tipo de datos: Se puede definir como texto o número.
Ahora vamos a repasar las propiedades que pueden afectar el elemento "enviar formulario". Debido a que esto puede variar dependiendo de qué elemento (texto, imagen, tabla) se utiliza, como botón de envío sólo se mencionan las propiedades de las acciones relacionadas con las que podemos ver, haciendo clic en propiedades, una vez que hemos aplicado la acción "enviar formulario" al elemento:
Cuando se selecciona propiedades se te preguntará si deseas enviar los valores de los campos a un script (como variables) o si deseas utilizar los valores de los campos para enviar un SMS a otro dispositivo:
- Enviar a un script: Sólo tienes que insertar la URL en la que el script está y recuerda que el nombre de las variables enviadas será el nombre de referencia definido anteriormente:
-
Enviar SMS: En primer lugar se te pide que selecciones el campo (por nombre Referencia) que contiene el número telefónico o de introducirlo manualmente.
La primera opción se utiliza si deseas que el usuario controle el destino del SMS y el segundo si deseas que el SMS siempre lluegue al mismo destino.
En segundo lugar hay que escribir el mensaje que deseas envíen. Ouedes hacer esto en caso de requerir un mensaje estándar. Una vez más si deseas que el usuario escriba el mensaje, simplemente escribe en esta área de texto el nombre de Referencia del campo que deseas que el usuario use para escribir el mensaje. Este nombre de referencia tiene que estar entre llaves "{ Reference Name}"
Si pero deseas enviar un enlace de descarga, sólo tienes que escribir en el área del texto la URL entre llaves "{URL}":
Elemento Texto Online
Tienes exactamente las mismas propiedades para definir que en un elemento de texto normal, como se explica en la sección Elemento de texto de este artículo:
Elemento Vídeo
El elemento vídeo te permite añadir un vídeo MP4 nativo en una pantalla. Tendrás que añadir el vídeo al gestor de recursos antes de que puedas seleccionarlo.
El vídeo permite una configuración adicional que te permite elegir cuando va a iniciar la reproducción del vídeo. De momento hay dos opciones:
- Al tocar el video: La aplicación mostrará un icono play hasta que el usuario haga clic en ello.
- Al cargar la sección: El video empezará a reproducirse tan pronto como la pantalla se ha cargado.
Como se puede ver en la imagen, hay una opción de acción en el elemento vídeo. Esta acción funciona un poco diferente de otras acciones utilizadas en Mobincube ya que la App va a ejecutar la acción una vez que el vídeo acabe (Es muy bueno para hacer una lista de reproducción).
Más en youtube: Pantalla Detalle