Creación de aplicaciones con App Inventor (3)

Comenzamos, ahora sí, a dar nuestros primeros pasos de forma seria con App Inventor.

Paleta - Interfaz de usuario

- Botón: vamos a arrastrar el componente "Botón" a nuestra "Screen1". Si nos fijamos, a la izquierda de la pantalla del ordenador nos aparecen las propiedades que tiene este botón. Color (podemos modificarlo), Habilitado (si quitamos la opción, el botón saldría en gris y no nos dejaría pulsarlo), negrita/cursiva para la letra que tiene en el interior, tamaño/tipo de letra, alto/ancho del botón (automático = el botón tendrá el tamaño del texto de su interior; ajustar al contenedor = ocuparía la pantalla del teléfono, o bien el contenedor que le asignásemos, opción que veremos más adelante). Por ejemplo, pondremos que tenga un alto del 20% de la pantalla, y que se ajuste un 100% en el ancho del contenedor. Quedaría de la siguiente manera:

Podríamos también ponerle una imagen de fondo, que cambiaría el color del fondo del botón por la imagen que cargásemos. Incluso podemos editar la forma (por defecto es un rectángulo). Mostrar pulsación es la opción visual que permite comprobar que presionamos el botón en el móvil. También podemos colocar el texto donde queramos en el botón, y su color.

- Selector de fecha: tiene aspecto de botón, y de hecho las propiedades que vimos antes con el botón también las vemos ahora. Lo que nos va a permitir es elegir una fecha. Si vamos al emulador y hacemos click en el selector de fecha, se nos abre una pequeña ventana donde podremos elegir una fecha de un año concreto. Aprenderemos más tarde qué hacer con esta información.

- Selector de hora: funciona igual que el selector de fecha.

- Selector de lista: botón que permite abrir un visor de lista. Tendrá una serie de elementos que podremos elegir en "elementos desde la cadena", separados por una coma. El resto de propiedades son similares a los botones anteriores. En "selección" podremos poner el elemento por defecto que aparecerá marcado en la lista, si queremos.

- Visor de lista: similar al anterior. Escribimos los elementos de la lista en "ElementosDesdeCadena".

- Desplegable: similar al anterior, solo que en este caso no se nos abre una ventana nueva sino que nos deja seleccionar directamente. Añadimos los ElementosDesdeCadena, "prompt" es el nombre que le vamos a dar, y en "selección" diremos cuál de los elementos queremos que aparezca seleccionado por defecto.

- Casilla de verificación: sirve para que el usuario marque una opción. Se suele utilizar, por ejemplo, en las condiciones de uso de una aplicación, o para elegir una o varias opciones. La mayoría de opciones son similares a los botones anteriores, aunque en este caso se añade la opción "verificado", que nos permite cambiar la casilla para que aparezca o no seleccionada por defecto. En "Habilitado" podemos hacer que el usuario vea esta casilla pero no pueda marcarla.

- Etiqueta: similar a la anterior, aunque solamente contiene texto. Sus opciones, como vemos, son solo de texto, y normalmente se utiliza para acompañar o informar para qué se utilizan los campos de texto o campos de contraseña, aunque también pueden acompañar a cualquier otro componente. Por ejemplo, en una etiqueta ponemos "Nombre y apellidos" y a continuación incluimos un "campo de texto", un espacio donde el usuario podrá escribir un texto con el que luego hagamos lo que estimemos conveniente en nuestra app.

También se podría poner una pista al usuario para que identifique qué información debe incluir en ese cuadro de texto, y así ahorrarnos la etiqueta. En nuestro caso, en "pista" podemos poner "introduce tu nombre y apellidos". En el emulador podremos ver el efecto que se produce.

Por otro lado, si quisiéramos que hubiera un texto por defecto, deberíamos introducirlo en "Texto", no en "pista". Por último, en "Multilínea" dejamos al usuario que cree diferentes líneas, en "SoloNumeros" solo dejamos escribir cifras (por ejemplo para teléfonos o códigos postales).

- Campo de Contraseña: es similar al anterior. Podemos probarlo introduciendo antes una etiqueta (que ponga "contraseña"), tras lo que pondremos el campo de contraseña. Es igual que el campo de texto, pero todo lo que se escriba se va a ocultar bajo asteriscos.

- Imagen: cuando arrastramos el componente imagen, aparece un cuadrado pequeño hasta que elijamos la imagen que lo rellene. El tamaño puede configurarse también como los demás, con un alto determinado, ancho, etc. Seleccionamos el archivo imagen que sea, aceptamos y ésta se introduce dentro de la pantalla. Es importante señalar que cada vez que añadamos una imagen a la aplicación -aunque después la borremos- aparecerá en la parte inferior de la pantalla, en el apartado "medios".

- Notificador: aunque lo arrastremos a la pantalla, en la parte inferior nos indica que es un componente no visible. Quiere decir esto que tendremos que configurarlo mediante los bloques. El notificador sirve que, al hacer click sobre algo o cuando ocurra un evento, nos muestre una ventana de notificación. Por ejemplo: incluimos un botón (lo llamaremos notificador), de forma que cuando haga click en ese botón aparezca una notificación. Una vez incluido el botón, nos vamos a bloques y lo configuramos. Cuando hacemos click en el botón1, se mostrará el notificador.

Y la alerta tendrá un texto que sea, en este caso, "Comprobando funcionamiento".