entrada-POST

En esta nueva entrada vamos a aprender como crear interfaces de usuario, o UI, que se ajusten a diferentes tamaños de pantalla. Además, veremos también como utilizar los datos que podemos obtener de diferentes elementos de la UI.

Elementos típicos de una UI

Para crear UI hay ciertos elementos con los que podemos llegar a tener una interfaz completa y funcional, como botones o cuadros de introducción de texto. Para diseñar la interfaz de usuario, tenemos que escribir el código correspondiente a cada elemento, modificando sus parámetros para adecuarlo a nuestras necesidades. El código de alguno de los elementos de mayor interés para generar interfaces es:

Botón:

botón

checkbox: (Modo puede ser true o false y determina si se inicia marcado o no)

checkbox

texto: Imprime un texto por pantalla:

Slider: Crea una barra por donde podemos deslizar un marcador y que nos dará el valor entre el mínimo y el máximo que marquemos.

Input: Crea un cuadro de texto donde se puede escribir.

editText

En el caso del checkbox, podría utilizarse toggle, que crea un botón que puede cambiar de estado, o switch, que generá un botón “deslizable”, pero sin la posibilidad de añadir texto junto al botón, por lo que habría que generar un elemento de texto para indicar cuál es la función del switch. La funcionalidad básica de los tres elementos es la misma, pero dependiendo de las características de la aplicación o nuestros gustos utilizaremos uno u otro.

Para ver como se escriben el resto de las funciones, se puede utilizar la referencia rápida y buscar dentro de UI (lo que puede estar sin actualizar y llevar a errores) o dentro de los ejemplos.

Una buena práctica para crear interfaces es mantener fijo el alto de los elementos, pudiendo así saber donde colocar el siguiente elemento. Por ejemplo, si un elemento tiene un alto h = 150 podemos colocar el siguiente elemento a una distancia ligeramente mayor cambiando la posición, es decir, el valor de la altura más el margen (150 + m). En elementos sucesivos, incluiríamos incrementos hasta colocarlos en la posición deseada. Por ejemplo, dos veces la altura más el margen 2*150 + m.

Creando UI que se adaptan a diferentes tamaños de pantalla

Como podemos acceder a los datos del terminal que se esté utilizando para ejecutar el código, podemos utilizarlo para generar interfaces que se adapten a diferentes tipos de pantalla. Para generar este código, nos valemos de las funciones ui.screenWidth y ui.screenHeight, que devuelven el ancho y el alto de la pantalla, respectivamente.

El código que puede utilizarse para generar este tipo de programas es:

Donde en primer lugar establecemos un margen que utilizaremos para separar los elementos de la UI del borde vertical, y establecer un margen entre los distintos elementos, para evitar que se solapen.

Dependiendo del número de elementos que se incluyan en la interfaz y del tamaño de estos, es posible que el texto que muestran se visualice incorrectamente, por lo que es preferible fijar el alto (h en el código anterior) de los elementos y evitar utilizar altos adaptativos (con el código anterior hacemos que el ancho de los elementos sea adaptativo a diferentes tamaños de pantalla).

Si hacemos que la posición en el “eje X” de los elementos sea margin, como hemos fijado w = ui.screenWidth – 2 * margin los elementos terminarán en el “final” de la pantalla con el mismo margen en ambos lados, dando la impresión a simple vista de una interfaz con un diseño más cuidado.

Cotas

Variables en Protocoder

Las variables en Protocoder se diferencian del lenguaje Arduino en que no tenemos que determinar el tipo de dato que almacenará la variable. Por ejemplo, en Arduino cuando queremos guardar un número entero utilizaríamos:

Y en Protocoder:

Por lo que evitamos problemas de incompatibilidades entre los datos que estamos introduciendo y los que espera recibir la variable, evitando así errores.

Funciones en Protocoder

Para generar una función, en Protocoder utilizamos un código similar a este:

Por ejemplo una función que muestre un toast, un mensaje flotante en la pantalla propio de Android, sería así:

Donde showToast es el nombre de la función y string es el parámetro que hay que pasar a la función. Por ejemplo, para utilizar esta función podríamos utilizar esta línea de código:

Creando la UI y programando una aplicación

bq_Aquaris_E4

En este caso, vamos a generar una aplicación que simule una pantalla de acceso de usuario a un servicio, en el que se nos pide nombre de usuario y contraseña para poder acceder una vez que se haya pulsado sobre un botón. Además, incluiremos un checkbox que cambiará la transparencia de una imagen para aprender sobre su uso y un botón con imagen que llevará a un popup con información.

En primer lugar, cambiamos el color del fondo e incluimos el código del apartado anterior, que nos facilitará crear la aplicación:

Antes de empezar a incluir elementos, vale la pena tomarse un minuto y reflexionar, o incluso dibujar un boceto, sobre qué los elementos que vamos a incluir y donde vamos a colocarlos. En este caso, incluiremos dos entradas de texto y un botón para manejar el usuario y la contraseña, un checkbox y una imagen y el botón que mostrará el popup.

Gestor de contraseña

En primer lugar creamos las variables donde se almacenarán los datos que introducirá el usuario por pantalla y el nombre de usuario y contraseña correcto:

A continuación generamos los códigos de las dos entradas de texto:

En el elemento de nombre pass, hemos utilizado la posición Y del elemento como h + margin, debido a que el elemento anterior tiene un tamaño igual a h y queremos que quede separado de este. Para los siguientes elementos utilizaremos 2*h + margin, 3*h +margin, etc.

En ambos elementos, utilizamos la variable val para almacenar en la variable correspondiente, userName o password, que se introduce por teclado.

Para finalizar el gestor de contraseña, tenemos que incluir finalmente un botón que compruebe si el nombre de usuario y la contraseña es correcta:

Checkbox y cambio de transparencia en elementos

El checkbox es un elemento que permite marcar o desmarcar, normalmente puede utilizarse para cambiar una condición, por ejemplo encender o apagar una luz, marcar o desmarcar una opción. En este programa de Protocoder, utilizaremos el checkbox para cambiar la transparencia, aplha, de una imagen pero puede realizarse con prácticamente cualquier elemento, view.

En primer lugar, creamos el checkbox y le asignamos el nombre alpha:

El Checkbox suele ir acompañado de la opción que vamos a modificar, representada como un texto entre comillas al principio de los parámetros. El valor val que devuelve la función será true o false dependiendo de si la casilla está marcada o no, respectivamente.

Para modificar la transparencia de un elemento, o view, utilizamos la sintaxis:

Para cambiar la transparencia de algún elemento, tenemos que modificar nombreView por el nombre de variable que hayamos asignado al elemento visual y cambiamos número por un número entre 0 y 255, correspondiendo a transparente y opaco, respectivamente.

Botón con imagen y Popup

Por último, vamos a incluir un botón con una imagen, incluida en las descargas, que puede utilizarse para mostrar información mediante un cuadro de dialogo. En primer lugar, tenemos que subir la imagen al cuadro de subidas de la parte inferior derecha, pasarla a la carpeta del proyecto dentro de la carpeta Protocoder en Android o conectarnos a través de FTP a nuestro terminal (puede activarse el ftp en los ajustes de Protocoder).

Una vez que la imagen esté subida, tenemos que escribir este código para incluir el botón con imagen:

Donde los parámetros son, respectivamente: posición X, posición Y, tamaño X, tamaño Y, nombre de la imagen. La programación es igual que para cualquier botón, al pulsar sobre éste, se ejecutará el código que se escriba dentro de su definición.

Para usar el Popup, una ventana emergente que se coloca encima del resto de la interfaz, utilizamos el siguiente código:

En nuestro caso, utilizamos este código:

Como podemos saber que opción se ha pulsado puede trabajarse con la respuesta, que será true o false, si se ha pulsado en la Respuesta_si o Respuesta_no.

9 comentarios

  1. Hola Luis,

    Primero felicitaros por este curso, que creo que es muy útil y animaros a seguir con ello.

    Mi pregunta: en las descargas que hay en este capitulo hay un archivo de extensión .proto, ¿con qué se abre? Lo digo porque seria mucho mejor disponer del código fuente, ya que estoy intentando hacerlo con las indicaciones de este capítulo y hay cosas que no funcionan (por ejemplo la función showToast, falta un punto y coma en la línea 4 del ui.addButton, la definición de la variable imgSize), que entiendo que no tengan que estar, ya que esto es una explicación, pero para mi que estoy empezando me cuesta más que si pudiese descargarme el código fuente directamente.

    Un saludo,

    Yolanda

    Que conste que mi objetivo es h

    1. Luis Díaz

      Hola Yolando,

      Gracias por el comentario.

      Puedes importar los archivos .proto ( son los archivos de proyecto ) si lo abres desde un explorador de archivos en Android. Puedes descomprimir los archivos del .proto dentro del ordenador y puedes ver el código fuente del programa en el archivo main.js.

      Un saludo.

      1. Muchas gracias a los dos.

        Efectivamente abriéndolo desde el explorador de Android me ha funcionado.

        Yolanda

  2. Hola de nuevo,

    ¿Hay disponible documentación sobre protocoder? Lo digo porque he buscado por internet y lo único que he encontrado es el quickreference que hay en el navegador y que en algunas sentencias me da error al ejecutar. Lo he comparado con los ejemplos y veo que no son exactamente iguales. Ejemplo:

    – Sentencia en QuickReference:
    ui.addButton(label, x, y, function(){
    });

    – Sentencia en ejemplos:
    ui.addButton(label, x, y).onClick(function() {
    });

    Muchas gracias por adelantado,

    Yolanda

    1. Luis Díaz

      Hola Yolanda,

      Actualmente no hay documentación. La mejor forma de saber cual es la sintaxis de cada función es buscar en los ejemplos, ya que el quickreference puede no estar actualizado. Debido a esto, conviene utilizar los ejemplos.

      Un saludo.

  3. Hi Luis,
    me encanta Protocoder, estoy iniciando en él, hasta ahora he trabajado, digamos, en modo diseño, me gustaría saber como hacer que mi proyecto se convierta en una aplicación descargable y ejecutable en cualquier teléfono sin necesidad de descargar APK en dicho teléfono, muchas gracias

    1. Luis Díaz

      Hola Jorge Luis,

      Para compartir aplicaciones con Protocoder necesitas enviar el archivo .proto del proyecto y tener en el terminal a instalar la aplicación de Protocoder. Actualmente no puede exportarse un archivo .apk de un proyecto de protocoder.

      Un saludo.

Los comentarios están cerrados.