Cómo crear una aplicación con dos screen a través de APPinventor

Buenas,

En este apartado vamos a aprender a crear una aplicación con dos "Screen", donde el screen1 mandará un cálculo al "Screen2".

Comenzamos por entrar en "MIT App Inventor" y le damos a "Invent". Hecho esto pulsamos en "New" para crear un nuevo proyecto.

Una vez dentro pasamos a crear lo que sería el entorno gráfico de nuestra aplicación, en este caso vamos a crear una calculadora que nos calcule la recta de dos números.

Para ello vamos a utilizar las siguientes paletas:

Screen1:
  • 2 Label: Contendrá el título de la aplicación, en este caso "Resta" y el separador entre los dos "TextBox", en este caso el signo "-".
  • 2 TextBox: Donde introduciremos los dos números a calcular.
  • 1 Screen Arrangement - Horizontal Arrangement: Será el que separe los dos "TextBox" y el "Label" central.
  • 1 Button: Para realizar el cálculo y el cambio de "Screen".
Screen2:
  • 2 Label: Contendrá el título de la aplicación, en este caso "Resultado" y el resultado de dicho cálculo.
  • 1 Button: Para volver a la "Screen" anterior y poder realizar más cálculos.
Nos quedará algo así:


Una vez hecho todo esto, pasamos a crear la estructura de la aplicación, donde explicaremos como interactúan las dos "Screen" y sus funciones.

Screen1:
  • Para empezar vamos a crear una variable donde quedará guardado el resultado de nuestro cálculo. Para ellos nos vamos a "Built-In", "Definition", y sacamos "variable", la cual renombraremos "vResultado", luego nos vamos a "Built-In", "Math" y sacamos "number" y le ponemos como dato "0", donde quedará registrado el resultado del cálculo.
  • Vamos a "My Blocks" y sacamos el "button1.click" donde introduciremos las funciones que hará el botón al hacerle click.
  • Dentro introduciremos las funciones, para ello nos vamos a "My Blocks", "My Definitions" y sacamos la variable "set global vResultado" que indicará que la función siguiente se guardará en esta variable. Seguidamente nos vamos a  "Built-In", "Math" y sacamos el signo "-" (recta). Hecho esto pasamos a introducir los dos campos donde irán los números a calcular, vamos a "My Blocks", e introducimos los dos "txt.text".
  • Por último pasamos a introducir el control que nos mandará el resultado a la "Screen2". Nos vamos a "Built-In", "Control" y sacamos el control "open another screen with start value", seguido nos vamos a  "Built-In", "Text" y sacamos "Text", el cual renombraremos con "Screen2" y lo introduciremos en "screenName". Luego nos vamos a "My Blocks", "My Definitions" y sacamos "global vResultado" que introduciremos en "startValue".
  • Con todo esto tenemos nuestra "Screen1" configurada y lista.
Screen1:


Screen2:
  • Pasamos a configurar la "Screen2", donde recogeremos los datos del cálculo y los mostraremos.
  • Para ello vamos a "My Blocks", "Screen2" y sacamos "Screen2.Initialize", donde indicaremos que debe hacer cuando inicie. Dentro introduciremos la función que recogerá el resultado al inicio, para ello vamos a "My Blocks", "lbl_resultado" y sacamos "set lbl_resultado.text" y luego le indicaremos que resultado coger, vamos a  "Built-In", "Control" y sacamos "call get start value". Con esto ya tendremos el resultado representado en la "Screen2".
  • Ahora vamos a indicarle al botón como regresar al "Screen1". Para ellos vamos a "My Blocks", "btn_volver" y sacamos "btn_volver.click", dentro le indicaremos la función a realizar cuando se pulse click. Nos vamos a  "Built-In", "Control" y sacamos "call open another screen" y le indicaremos a que "screen" ir, nos vamos a "Built-In", "Text" y sacamos "Text", el cual renombraremos con "Screen1" y lo introduciremos en "screenName".
  • Hecho todo esto ya tendremos nuestra aplicación lista.
Screen2:


Espero que os sea de utilidad, comenten cualquier duda y opinión.

Saludos.

Autor: Unknown

El árticulo Cómo crear una aplicación con dos screen a través de APPinventor es publicado por Unknown el viernes, 5 de abril de 2013. Esperemos que este artículo sea de su interés, Gracias por su visita, por favor deje un comentario. Hay 37 Comentarios: en el post Cómo crear una aplicación con dos screen a través de APPinventor
 

37 comentarios:

  1. Hola necesito ayuda. Estoy empezando con el app inventor y tengo un boton en la scren principal y quiero que al pulsar ese boton se vaya a otra scren. He puesto buton.click - open another scren - text (el nombre de la scren a abrir) y no me sale. En el emulador al pulsar el boton me sale un mensaje que dice switching forms is not currently suported during development.
    Espero me puedas ayudar. Gracias y un saludo.

    ResponderEliminar
    Respuestas
    1. Buenas Rosalía,

      El emulador de appinventor no funciona con dos screen, prueba a pasar la aplicación a un teléfono móvil con android.

      También comentarte que en la segunda screen tienes que poner “Screen2.initialize” como se explica más arriba, con ello recogerías los datos que envías con el botón del primer screen para que aparezca en la segunda screen.

      Espero haberte ayudado. Un saludo.

      Eliminar
  2. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  3. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  4. Buenas Rosalía,

    Me alegro mucho de haberte sido de ayuda. Respecto al correo, me gustaría que me comentaras tus dudas por el blog, para así darle un poco de vidilla y poder solucionar los problemas contigo en el blog, cosa que podría ayudar mucho a otra gente.

    Gracias por tus comentarios, Un saludo.

    ResponderEliminar
  5. Por ejemplo al darle el nombre al proyecto para separar las palabras tengo que poner un guion bajo pero yo quiero que al instalar la aplicacion salga espacio entre las letras y no los guiones bajos.
    Otra cosa que quiero saber es por ejemplo en un apartado pongo partidos de futbol y quiero ir actualizando el resultado segun va pasando como se haria?
    gracias

    ResponderEliminar
  6. Buenas Rosalía,

    Para separar las letras por espacio descárgate el .apk, y una vez descargado renombras la aplicación antes de instalarla.

    Para ir actualizando los resultados necesitas usar el elemento "Clock" (Palette, Basic y sacar "Clock"). Pronto realizare una actividad explicando un poco su uso.

    Saludos

    ResponderEliminar
  7. Hola. He intentado cambiar el nombre para dejarle espacios y no me funciona. Le cambio el nombre pero al instalarla se queda con el nombre del proyecto guardado inicialmente.

    ResponderEliminar
  8. Buen dia, estoy utilizando app Inventor para crear una aplicacion mas compleja. Se trata de una aplicacion que sirve para programar un horario de alarma, es decir, el usuario decide en cuanto tiempo quiere que suene la alarma (1 hora, 2 horas, 4 horas) y efectivamente, a esa hora debe sonar. Consegui realizar toda la programación, y la alarma funciona, pero quiero que esa hora la guarde en otro screen, y no solo eso, sino guardar 5 alarmas distintas en 5 labels diferentes... Los pasos serian:
    1) Indico la hora de alarma y doy aceptar
    2) me lleva a un screen "Horarios", que me guarda esa hora
    3) vuelvo al menu para escoger la otra alarma
    4) Indico la otra alarma y doy aceptar
    5) Me lleva al screen Horarios y debe mostrarse la alarma anterior y la nueva alarma

    Como lo puedo hacer si la caracteristica de "open another screen with start value" solo recibe una variable? Muchisimas gracias por tu atencion y espero puedas responderme pronto... Pues es un proyecto que debo presentar la otra semana y estaria eternamente agradecido :)

    ResponderEliminar
  9. Hola Nicolas. El creador del blog, Jose Angel, seguro q te da una solucion muy bien explicada del problema, en cuanto pueda. Yo solo te propongo que ¿por qué no pruebas a guardar las alarmas en una Lista (una variable que guarda en su interior una lista de alarmas, creada con la propiedarld 'make a list') y la pasas al screen de las labels?.

    Habría una solución mejor, q es utilizando una base de datos TinyDB... Igualmente Jose Angel te podrá explicar cómo hacerlo muy pronto.

    Un saludo

    ResponderEliminar
  10. Buenas,

    Rosalía, respecto a tu problema, lo he estado mirando y no consigo dar con una solución para dejar el espacio, seguiré investigando y si consigo dar con la solución te lo haré saber, un Saludo y perdona la demora.

    Nicolas, como bien te ha dicho Fran Peña, sería una buena solución agregar una "Variable" que contenga la propiedad "Make a list", ese listado lo mandarías a la "Screen2" la cual la recogerías en otra "Variable"(También con la propiedad "Make a list"), así tendrías la alarma guardada en la "Screen2", de esa segunda variable sacarías los datos a tratar en los labels.
    Pronto explicaré un poco su uso mediante una actividad.

    Un saludo.

    ResponderEliminar
  11. Ok gracias. Yo si encuentro por ahi la solucion ya te aviso. Me gustaria si podeis que me enviarais al correo algun manual de ayuda ya que como veis yo estoy empezando y mis dudas son mas basicas que lo vuestro y ya si no consigo sacar lo que quiero os escribiria por aqui para preguntar.
    Gracias.

    ResponderEliminar
  12. Buenas Rosalía,

    Te he buscado un manual que explica paso a paso las funciones de App inventor, es muy interesante y creo que te podrá ayudar, dame tu correo y te lo mando.

    Saludos.

    ResponderEliminar
  13. Me referia a borrar el comentario

    ResponderEliminar
  14. Buenas Rosalía,

    Ya te he pasado algunas páginas web que considero interesantes para tu aprendizaje. También a sido borrado el comentario para que no este tu correo por el blog.

    Espero que te sean de utilidad.

    Comenta cualquier duda. Un Saludo.

    ResponderEliminar
  15. hola como estas
    una pregunta al momento de programar el button1 no encuentro la opcionde button1 click y lo unico que quiero es que ese boton me mande a otro screen

    ResponderEliminar
  16. ya resolví mi duda gracias a tu tutorial muchas gracias sigue asi

    ResponderEliminar
  17. Buenas Cox,

    Muchas gracias por tu comentario. Me alegro que hayas podido resolver tu problema.

    Un saludo.

    ResponderEliminar
  18. hola, estoy empezando con el app inventor y me gustaria saber al abrir dos screen es posible que en ves de arrojarme un solo resultado en la screen 2 me arroje dos? por ejemplo en la screen 1 escribo la casilla mes 1 y en la casilla año 3 le doy siguiente y que en la screen dos me salga mes 1 años 3 y 1mes

    ResponderEliminar
  19. K ONDA MEN COMO ESTAS?
    QUISIERA SABER SI ME PUEDES AYUDAR ES QUE E INTENTADO DE MUCHAS MANERAS Y NO SE COMO HACER QUE UN VIDEO AL MOMENTO DE DAR CLICK PARA QUE SE REPRODUZCA SE PONGA DE PANTALLA COMPLETA Y QUICIERA SABER SI ME PUEDES DECIR COMO HACERLO DE ANTEMANO GRACIAS

    ResponderEliminar
  20. Buenas,

    Cristian, si se puede arrojar varios resultados, yo cogería y concatenaría los resultados y luego los mandaría al siguiente “screen”.
    Ejemplo: Añades el mes y el año en dos “TextBox”, con un “make text” unes los dos “TextBox”, ese resultado lo mandas a una “variable”, y ya solo te quedaría mandar el contenido de la “variable”(que seria el mes y el año junto) al segundo “screen”.
    En el “make text” ya le puedes dar el formato que tu quieras, por ejemplo:
    Hoy estamos a “mes” del “año”.

    Cox, aún no he añadido un vídeo a mis aplicaciones, pero he estado mirando un poco por encima y he visto un control que se llama “VideoPlayer1.FullScreen” prueba a añadir ese control y me comentas. Si no consigues ponerlo en pantalla completa dímelo y me pondré a investigar como hacerlo.

    Espero haberos ayudado y perdonar la espera.

    Un saludo.

    ResponderEliminar
  21. Por favor ayudame con respecto a bluetooth...
    Cuando estoy conectado bluetooth en una pantalla y paso a otra pierdo la conexion...que deberia hacer...??? :(
    Gracias...:)

    ResponderEliminar
  22. hola, estoy intentando traspolar este ejemplo con videos. Tengo una lista de videos y para no hacer la app mas grande con diversas pantallas quiero tener una con las caracteristicas comunes y que se reproduzcan los videos en ella ¿se pedria hacer?

    ResponderEliminar
  23. Locoooo, sos lo mas .. No sabes cuanto me ayudo.. gracias

    ResponderEliminar
  24. Hola. Yo estoy comenzando con App Inventor y la verdad para muchas cosas no tengo ni idea, de hecho, ya muchas soluciones las he sacado de tu blog. Solo que ya me tope con una duda, ¿Cómo se puede extender el Editor de Bloques para poder seguir agregando mas código? Porque tengo casi todo el código "contraído" pero para trabajarlo una vez extendido se esta volviendo tan largo que ya no puedo agregarle mas? O ¿Cómo haría para un convertidor de números base (bin, octal y hexa) en la que inserte 6 checkbox con las diferentes operaciones en un button.click que convierte las bases y muestra resultado en un label? Me esta quedando muy largo ese Botón. De antemano muchas gracias

    ResponderEliminar
  25. Hola,
    Estoy empezando también con App Inventor y tengo una duda que quizás os podrá parecer tonta...bueno a mi me lo parece pero no encuentro la solución! Me gustaría saber como lo hago para cambiar mi Screen de inicio por otra. Realizé la Screen1 pero ahora he realizado otra (Screen2) que quiero que sea la pantalla de bienvenida, pero al crear la App me sale como primera pantalla la Screen1, y no veo manera en el programa de cambiarlo... alguien me podría ayudar por favor?
    Muchas gracias.

    ResponderEliminar
  26. Hola, por casualidad sabes como crear apps para mostrar resultados de futbol? Quiero hacer uno para la liga de futbol femenina de USA y no se como hacer.

    ResponderEliminar
  27. Deberias cambiar los colores del blog (fondo) es bastante dificil de leer.

    ResponderEliminar
  28. Hola, buenas y bendiciones para todo. La verdad soy nuevo en el mundo de la programacion en android, quisiera que me saque de una duda e estado creando muchas aplicaciones de prueba y las e ejecutado en diferentes smartphone android, hasta hay todo de maravilla, pero el problema es el siguiente cuando inicio la aplicacion o juego en un celular android no sale la pantalla completa ademas cuando toco el boton atras me sale un cuadro dos variables una que dice (stop this applicacion y otra con el icono de android que dice About this applicacion) por favor seria de gran ayuda que me ayudase en esto de poner mis aplicaciones en fullscreen

    ResponderEliminar
  29. Hola, referente al cambio de pantalla, existe la posibilidad de cambiarla solo deslizando la pantalla para pasar a la siguiente?

    ResponderEliminar
  30. Gracias,un poco des-actualizada pero sirvio

    ResponderEliminar
  31. Hola, porque siempre que hago una app se queda con el mismo nombre del proyecto original y siempre aparece ese al instalarla.

    ResponderEliminar
  32. Cómo hacer para cambiar varios screen deslizando para abajo gracias

    ResponderEliminar
  33. Hola, disculpa tengo que crear una calculadora pero que la operación y el resultado salgan en otra pantalla, es decir, en una pantalla esta el "espacio" para escribir los dos numeros que se quieren operar y los botones de las operaciones y en la otra aparece la operción eje: 2+1 y el resultado, pero no logro hacer que aparezca la operación, podrias ayudarme?

    ResponderEliminar
  34. hola a ver si me podeis ayudar ,tengo una app con dos pantallas al ir a la segunda pantalla selecciono una foto de la galería y quiero que aparezca en la primera pantalla y así hasta hacer un listado de fotos,el caso es que no consigo ver la foto en la primera pantalla,un saludo y gracias.

    ResponderEliminar