Blog
App Inventor, ¿Puedo dibujar de forma sencilla?
- septiembre 6th, 2010
- News
- 0 Comments
En este artículo vamos a seguir trabajando con la plataforma App Inventor, en este caso particular examinaremos algunos controles extras y para el escenario de implementación, la idea es recrear la posibilidad de dibujar círculos en mi solución Android.
http://appinventor.googlelabs.com/
El diseño de la solución tiende a contener alguna opción para seleccionar el fondo del editor que deseo generar, el color con el cual voy a dibujar círculos en el editor y el editor propiamente dicho.
¿Cómo asociamos estos requerimientos a controles que me provee App Inventor?
Para las selecciones tanto del fondo como del círculo utilizaremos “ListPicker”, de este forma podremos seleccionar el color de fondo y el color del círculo, y para mi editor utilizaremos un control “Canvas”
Fig. 1 Escenario de diseño de la solución
Algo interesante y una práctica que no se negocia en el desarrollo de software, es colocar nombres representativos a los controles para poder identificarlos correctamente en el momento de generar los bloques de código. Utilizaremos entonces, los nombres “Fondo” para la lista de colores de fondo, el nombre “Figura” para la lista de selección de los colores de la figura (Círculo), y Editor para el control de canvas, esto lo muestra la Fig. 1.
Fig. 2 Muestra el editor de código para representar el comportamiento de la selección de colores en el Editor.
La programación la realizamos en el evento “AfterPicking” de ambas listas y para este ejemplo se intenta detectar la selección del usuario mediante un control de “if” que consulta sobre la selección del usuario y establece en el editor el color del fondo y del pincel. Este comportamiento se muestra en la Fig.2.
Finalmente no resta generar la figura sobre el Editor.
Fig. 3 Programación del dibujo del círculo en el editor.
Para este comportamiento vamos a programar sobre el evento “Touched” para que al tocar el editor se pueda generar un círculo del tamaño deseado. En este caso sus dimensiones son de 30px como indica la Fig.3
Fig. 4 –Emulador con la solución
El comportamiento deseado se logra muy fácilmente en app inventor y para mostrarles la velocidad en la cual se desarrolla, les dejo un video de la implementación.
Espero les sea de utilidad…
http://appinventor.googlelabs.com/
Introducción
En primer punto nos generamos un nuevo proyecto en app inventor. El nombre del mismo queda a criterio de cada uno, en mi caso la solución se titula “dArtPG”El diseño de la solución tiende a contener alguna opción para seleccionar el fondo del editor que deseo generar, el color con el cual voy a dibujar círculos en el editor y el editor propiamente dicho.
¿Cómo asociamos estos requerimientos a controles que me provee App Inventor?
Para las selecciones tanto del fondo como del círculo utilizaremos “ListPicker”, de este forma podremos seleccionar el color de fondo y el color del círculo, y para mi editor utilizaremos un control “Canvas”
Fig. 1 Escenario de diseño de la solución
Algo interesante y una práctica que no se negocia en el desarrollo de software, es colocar nombres representativos a los controles para poder identificarlos correctamente en el momento de generar los bloques de código. Utilizaremos entonces, los nombres “Fondo” para la lista de colores de fondo, el nombre “Figura” para la lista de selección de los colores de la figura (Círculo), y Editor para el control de canvas, esto lo muestra la Fig. 1.
¿Generamos el comportamiento?
Vamos a trabajar con el editor de código por bloques de la solución para representar la selección de colores en el fondo del editor y el color de la figura que se dibujará.Fig. 2 Muestra el editor de código para representar el comportamiento de la selección de colores en el Editor.
La programación la realizamos en el evento “AfterPicking” de ambas listas y para este ejemplo se intenta detectar la selección del usuario mediante un control de “if” que consulta sobre la selección del usuario y establece en el editor el color del fondo y del pincel. Este comportamiento se muestra en la Fig.2.
Finalmente no resta generar la figura sobre el Editor.
Fig. 3 Programación del dibujo del círculo en el editor.
Para este comportamiento vamos a programar sobre el evento “Touched” para que al tocar el editor se pueda generar un círculo del tamaño deseado. En este caso sus dimensiones son de 30px como indica la Fig.3
¿Realizamos una prueba de la solución?
En este ejemplo utilizaremos el emulador que se provee con los extras de app inventor para no utilizar un equipo físico.Fig. 4 –Emulador con la solución
El comportamiento deseado se logra muy fácilmente en app inventor y para mostrarles la velocidad en la cual se desarrolla, les dejo un video de la implementación.
Espero les sea de utilidad…
Nicolas Bortolotti, Ingeniero U.T.N. Regional San Francisco - Comunidad Xcloud
