Publi

miércoles, 25 de abril de 2012

Empezamos a "programar": Block Editor



El Block Editor


Una vez que tenemos nuestra interfaz preparada (como la dejamos en la entrada anterior), vamos a proceder a realizar la "programación" de nuestra aplicación, es decir, definir qué es lo que va a hacer nuestro programa y cuándo (al hacer click sobre un botón, cuando se inicie la aplicación, ...)

Para ello, desde la interfaz web tendremos que pulsar sobre botón Open the Block Editor ...
el cual nos intentará abrir el Editor de Bloques, que es un fichero con extensión .jnlp que necesita de un Java Web Start instalado en nuestro ordenador:
NOTA: Como se acaba de comentar, para utilizar el Editor de Bloques, hace falta tener instalado en el sistema un Java Web Start.
- Para Windows podemos conseguirlo instalando el que trae en JRE, en su versión 1.6. !!! NO UTILICES LA 1.7 !!! que por el momento está dando problemas.
- Para Linux, existen multitud de posibilidades. Una de ellas es la que se ve en la imagen anterior, el IcedTea Java 6 Web Start, que viene de forma predeterminada en muchas distribuciones o se puede instalar fácilmente desde el repositorio.

Si continuamos, pulsando el botón OK, nos mostrará una ventana avisando de que vamos a ejecutar una aplicación que no ha sido verificada y no se reconoce al emisor. Le damos a Run, ya que es nuestra aplicación y nos debemos conocer perfectamente.
y nos abrirá nuestro Editor de Bloques preparado para comenzar a programar:
Es aquí donde iremos creando el comportamiento de la aplicación.

Vamos a distinguir 3 pestañas en la parte izquierda de la pantalla:


Built-In tiene elementos comunes a todas la aplicaciones que vayamos generando, concretamente:


  • Definition: Sirve para crear variables, procedimientos y funciones. Lo veremos en un próximo Post.
  • Text: Todas las funciones realizables sobre Texto
  • Lists: Todas las funciones posibles sobre Listas
  • Math: Todo lo necesario para el manejo matemático de las aplicaciones
  • Logic: La lógica del programa
  • Control: Todo lo necesario para tomar decisiones (If, For, While, ...)
  • Colors: Toda la gestión sobre los colores
Iremos viendo todo los elementos conforme nos vayan haciendo falta.

My Blocks tiene todos los elementos que hemos añadido en el Editor de Diseño, más todo lo que hayamos definido en Definition:
 
Cada elemento tiene sus métodos (qué se puede hacer con ellos) y propiedades  (qué características va a tener).

Advanced tiene una serie de opciones que, como su propio nombre indica, tienen un propósito más avanzado. Por ahora no vamos a entrar a comentarlos.

Lo primero que vamos a hacer es introducir un mensaje de "Hola Ciclo" en el momento que el usuario pulse sobre el botón Hola (llamado btnHola).
Para ello pinchamos sobre btnHola y comprobamos qué se puede hacer con él

 En verde aparece las acciones que puede tener un botón, que paso a describir:
Lo que ponga dentro se realizará cuando hagamos click (con el ratón, con el dedo si es una pantalla táctil, ...) en el botón.
Lo que ponga dentro se realizará en el momento que el botón btnHola reciba el foco de la aplicación (justo antes de hacer click, por ejemplo)
Lo que ponga dentro se realizará cuando hagamos un click largo, es decir, mantengamos pulsado unos segundo, en el botón
Lo que ponga dentro se realizará en el momento que el botón btnHola pierda  el foco de la aplicación (justo después de hacer click, por ejemplo).

Nosotros vamos a utilizar el btnHola.Click. Lo Arrastramos al área de trabajo


Por tanto, cuando pulsemos sobre el botón Hola (btnHola.Click), quiero que me muestre, en el label llamado lblMensaje, el texto "Hola Ciclo"
Vemos qué propiedades tiene lblMensaje

El que muestra información es la propiedad .Text
pero vemos que hay 2. ¿Para qué sirve cada uno?
  • Aquí podemos indicar el valor que queremos que nos muestre el lblMensaje (concretamente indica "set lblMensaje.Text to", que quiere decir "establece lblMensaje.Text a"). Será aquí donde indiquemos el texto "Hola Ciclo"
  • Aquí podremos utilizar el valor de lblMensaje.Text, por ejemplo, para comparalo con otro texto, introducirlo en una caja de texto, ...
Bueno, pues continuando con nuestro ejemplo, vamos a indicar que el texto de lblMensaje.Text será "Hola Ciclo".
Lo primero es arrastrar la propiedad al área de trabajo


Y si quiero que aparezca "Hola Ciclo"... ¿Qué tendré que hacer?
Pues sí, efectivamente, tendré que utilizar propiedades de Texto. Para ello nos iremos a

y observamos las cosas que podemos hacer con el texto. La primera es indicarn texto, mediante la propiedad
Lo arrastramos a nuestra área de trabajo

Hacemos click donde pone text


y lo cambiamos por "Hola Ciclo"




y ya tenemos nuestro primer programa!!. Así de fácil. Si todo ha ido bien, nos deberá mostrar el mensaje "Hola Ciclo" cuando le demos al botón Hola. Lo probamos con el emulador






       
Y vemos el resultado. La presentación no es espectacular, pero .... ¿sabes lo que hubieses necesitado de programación para realizar esta aplicación con un lenguaje de programación "real"? Líneas y líneas de código, mientras que con App Inventor ... apenas un par de "pinchar y arrastrar" han valido para hacer la aplicación.

Bueno, en el próximo post iremos ampliando la aplicación, para que si insertamos los datos que nos pide nos muestre un mensaje más apropiado, cambiarle colores, ...

Pero como me dijeron una vez: "Prueba, prueba y prueba ... que será la forma más fácil de que te equivoques, pero la forma más rápida y fiable de aprender".
Así que ya sabes ... sigue investigando por tu cuenta y aquí iremos viendo más cosas en futuros post.

Hasta pronto!

2 comentarios: