APLICACIÓN 2: Dibujar Círculos

APLICACIÓN 2: Dibujar Círculos

Objetivo: Crearemos una aplicación que nos permita dibujar círculos en la pantalla, seleccionando el color del fondo y del mismo dibujo. También vamos a asignarle un icono a la aplicación, que se encuentra en la carpeta image que se adjunta Paso 1: 1) Al acceder a la aplicación nos encontraremos con la siguiente pantalla, ya que tenemos el proyecto de la aplicación 1: 2) Creamos un nuevo proyecto. 1. Pulsamos en New. Nos aparecerá el siguiente diálogo: 2. Escribimos Circulos y pulsamos OK. Nos aparecerá el panel de diseño 2

Paso 2: 1) En primer lugar vamos a añadir el icono que veremos en nuetra aplicación, para ello vamos Icon ð add, y seleccionamos el archivo (En este caso circulo.png). 2) A continuación cambiamos el nombre, en el campo title colocamos el nombre, en este caso Circulos 3) Para poner los botones para elegir las opciones de color: 1. Arrastramos desde Palette ð Screen Arrangement, el componente HorizontalArrangement. 2. Arrastramos desde Palette ð Basic, dos componentes de ListPicker 3. Cambiamos el nombre de ListPicker1 y de ListPicker2 por defecto, por otra más fácil de recordar (Ej. OpcionFondo y OpcionFigura), desde Components ð Rename. 4. Primero vamos a modificar OpcionFondo a. En Propiertes, vamos a cambiar el tamaño del botón, su texto y sus opciones: 1. Pondremos en Text, lo que queramos que aparezca en el botón, en este caso, Fondo. 2. En Width pondremos el valor Fill parent, y en Height el valor de 50 pixels. 3. En ElementsFromString colocamos las opciones de colores que queremos, separadas por comas, en este caso Rojo, Azul, Verde. 5. A continuación vamos a modificar OpcionFigura a. En Propiertes, vamos a cambiar el tamaño del botón, su texto y sus opciones: 1. Pondremos en Text, lo que queramos que aparezca en el botón, en este caso, Circulo. 2. En Width pondremos el valor Fill parent, y en Height el valor de 50 pixels. 3. En ElementsFromString colocamos las opciones de colores que queremos, separadas por comas, en este caso Negro, Amarillo, Blanco, 3

5) Ahora asignaremos el editor donde se dibujaran los círculos. 1. Arrastramos desde Palette ð Basic, el componente Canvas, y lo colocamos debajo de los botones. 2. Cambiamos el nombre de Canvas1 por defecto, por otra más fácil de recordar (Ej. Editor). 3. Le cambiamos el tamaño, 5. En Width pondremos el valor 300 pixels, y en Height el valor de 300 pixels 6) Para poner el botón de salir haremos lo siguiente: 1. Arrastramos desde Palette ð Basic, el componente Button. 2. Cambiamos el nombre del componente a BotonSalir y su texto a Salir. 7) El aspecto debe ser parecido a este: 8) Ahora guardamos, pulsando Save. Paso 3: Ahora modificaremos el comportamiento de los distintos componentes con el Editor de bloques, para ello lo abrimos pulsando Open the Blocks Editor. 1) Abrimos el archivo.jnlp que se ha descargado. 2) Para cambiar el color del fondo cuando elegimos una opcion: 1. Arrastramos My Blocks ð OpcionFondo la opción when OpcionFondo.AfterPicking do 4

2. Arrastramos Built- In ð Control la opción if test then- do y la encajamos dentro de when OpcionFondo.AfterPicking do 3. Arrastramos desde Built in ð Logic la opción = y la encajamos detrás de test. 4. Ahora tenemos que tener en cuenta los colores que hemos puesto en las opciones de fondo (En nuestro caso: Rojo, Azul y Verde), ya que estos serán los campos a rellenar en color. a. Arrastramos desde My Blocks ð OpcionFondo.Selection, y la encajamos en el primer lado del =. b. Al otro lado del = vamos a poner el texto que se va a seleccionar en la opción, en este caso vamos a empezar por el Rojo. Para ello pinchamos sobre un espacio libre y seleccionamos text y lo cambiamos por Rojo, esta pieza la encajamos detrás del =. 5

c. Arrastramos de My Blocks ð Editor, el elemento Editor.BackgroundColor to, y lo encajamos en then- do. d. Como en este caso el color con el que estamos trabajando es el rojo, seleccionaremos en un espacio en blanco color y red, y esa pieza la encajaremos detrás de Editor.BackgroundColor to. e. Para las otras opciones de color (Azul y verde),realizamos el mismo proceso anterior, pero con sus respectivos cambio de texto y de color. Seguimos encajando dentro del mismo paquete, hasta que nos quede un aspecto parecido a este: 3) Para cambiar el color del circulo cuando seleccionamos su opción correspondiente: 1. Arrastramos My Blocks ð OpcionFigura la opción when OpcionFigura.AfterPicking do. 2. Arrastramos Built- In ð Control la opción if test then- do y la encajamos dentro de when OpcionFigura.AfterPicking do. 6

3. Arrastramos desde Built in ð Logic la opción = y la encajamos detrás de test. 4. Ahora tenemos que tener en cuenta los colores que hemos puesto en las opciones de figura (En nuestro caso: Negro, Amarillo y Blanco), ya que estos serán los campos a rellenar en color. a. Arrastramos desde My Blocks ð OpcionFigura.Selection, y la encajamos en el primer lado del =. b. Al otro lado del = vamos a poner el texto que se va a seleccionar en la opción, en este caso vamos a empezar por el Negro. Para ello pinchamos sobre un espacio libre y seleccionamos text y lo cambiamos por Negro, esta pieza la encajamos detrás del =. c. Arrastramos de My Blocks ð Editor, el elemento Editor.PaintColor to, y lo encajamos en then- do. d. Como en este caso el color con el que estamos trabajando es el negro, seleccionaremos en un espacio en blanco color y black, y esa pieza la encajaremos detrás de Editor.PaintColor to e. Para las otras opciones de color (Amarillo y Blanco),realizamos el mismo proceso anterior, pero con sus respectivos cambio de texto y de color. f. Seguimos encajando dentro del mismo paquete, hasta que nos quede un aspecto parecido a este: 7

4) Para ordenar que al pinchar se dibuje un circulo: 1. Arrastramos My Blocks ð Editor la opción when Editor.touched do. 2. Arrastramos My Blocks ð Editor la opción call Editor.DrawCircle. 3. Arrastramos My Blocks ð My Definitions la opción value x para la x y value y para la y. En el caso del r vamos a asignarle el numero 30, pulsando en un lugar en blanco, Math, 123 y cambiando el número por 30; El resultado tendría que ser parecido al siguiente: 5) Reiniciar la aplicación cuando se pulse BotonSalir: 1. Arrastramos My Blocks ð BotonSalir la opción when BotonSalir.Click do. 2. Arrastramos Built- In ð Control la opción close application y la encajamos dentro de when BotonSalir.Click do. 8

6) El aspecto Final sería: Paso 4 Guardas pulsando Save desde la pantalla design. La aplicación ya está terminada, podemos probarla en el emulador o en el dispositivo. También podemos descargarla en el móvil, como se ha explicado anteriormente. 9