EJERCICIO 4 – Calculadora
Creamos un nuevo proyecto el cual tendrá de nombre Calculadora. Después abrimos el visor Diseñador y elegimos desde la pestaña Paleta>Disposiciones la opción Disposición vertical. La arrastramos:
Veremos que se ha generado un nuevo objeto en la lista de Componentes.
A continuación, deberás establecer un ancho adecuado para esta capa de disposición desde el apartado Propiedades. En el campo llamado Ancho, debes seleccionar la opción Ajustar al contenedor, para que así el contenido se ajuste al tamaño de la pantalla del dispositivo.
Una vez se haya adaptado el tamaño de la capa a la pantalla del dispositivo, vas a indicar en las propiedades de esta capa que debe situar todo el contenido de su interior de un modo centrado.
Para ello vamos al apartado Propiedades y buscamos el campo que dice DispHorizontal y escogemos la opción Centro
Una vez ya está lista la disposición de los objetos dentro de la App, se van a comenzar a añadir éstos al apartado Visor. Lo primero que vas a añadir van a ser los campos donde se introducirán los números que luego serán calculados.
Para ello vamos a la Paleta y en la sección de Interfaz de usuario hemos de arrastrar el elemento CampoDeTexto dentro de la capa de disposición agregada anteriormente.
De la misma manera que se han agregado campos de texto, vamos a repetir el procedimiento, pero para agregar una etiqueta que hará de cabecera en los campos agregados anteriormente.
Para ello vamos a ir a la Paleta y en la sección de Interfaz de usuario arrastramos el elemento Etiqueta encima de cada uno de los dos campos de texto.
A continuación, vamos a renombrar estos componentes para hacer más fácil el trabajo con ellos. Para ello seleccionamos el componente deseado y clicamos en el botón Cambiar nombre. Poniendo Número 1 y Número 2.
Ya tenemos los componentes renombrados para localizarlos más fácilmente, vamos a modificar los textos que muestran por pantalla estos mismos componentes. Solamente modificamos el texto de las etiquetas que hacen de cabecera.
Para ello marcamos la etiqueta correspondiente en el visor, vamos al apartado de Propiedades y modificamos el campo Texto.
Vamos a tener que replicar los pasos para agregar otro campo de texto y otra etiqueta, los cuales servirán para mostrar el resultado del cálculo a realizar.
Deberá quedar algo como lo que se muestra en la imagen.
Ahora ya tenemos preparada la App para introducir los números a calcular y para que muestre el resultado.
A continuación, vamos a agregar un Botón para que estos componentes sepan en qué momento realizar las operaciones.
Para ello vamos al apartado de la Paleta y en la sección de Interfaz de usuario arrastramos el elemento Botón debajo del campo resultado.
Finalizada toda la parte de diseño, vamos a agregar bloques (instrucciones) a los componentes desde el apartado Bloques de la interfaz.
Para llevar a cabo esta tarea lo primero es plantear como va a funcionar la app:
El botón Suma va a recoger los valores de los campos 1 y 2, sumarlos.
Y mostrar el resultado en el campo 3. En el apartado bloques, primero selecciona el componente del botón “Suma” para que se muestren todos los bloques disponibles para este tipo de objeto.
En este caso vamos a querer que este botón inicie una serie de instrucciones.
Buscamos el siguiente bloque “Cuando Sumar .Clic”.
Ahora hay que decirle qué deseamos que haga, en este caso es mostrar en el campo 3 la suma de dos números.
Para ello vamos a hacer clic encima del CampoDeTexto3 en bloques.
A continuación, buscarás el bloque llamado:
Poner campo_3.text como y lo encajas en el bloque previo
Una vez encajado el bloque deberemos clicar en el hueco que marcamos en rojo y desde el triángulo invertido clicar y elegir la opción texto dentro de nuestro bloque.
Es el momento de indicar al campo 3 de donde va a recoger los números para posteriormente sumarlos y mostrarlos.
Como los valores van a recibir un tratamiento matemático, vamos a buscar en la sección Matemáticas el bloque que se encarga de Sumar, y lo vamos a unir con el conjunto de bloques anterior.
Por último, añadir el valor de los campos 1 y 2 a los huecos que propone el campo matemático. Ya que los datos que incluyen los campos 1 y 2 son representados en texto, vas a hacer clic.
En cada uno de éstos y buscarás el bloque de Texto para arrastrarlos al interior del bloque matemático, para obtener algo así.
Lo guardamos en nuestra carpeta de proyectos y lo probamos con nuestro dispositivo móvil (Ai Companion) o con el emulador de la aplicación.
