APLICACIÓN 2:
“Dibujar Círculos”
Aplicación 2: “Dibujar Círculos”
2
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
Aplicación 2: “Dibujar Círculos”
3
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”,
Aplicación 2: “Dibujar Círculos”
4
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”
Aplicación 2: “Dibujar Círculos”
5
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 “=”.
Aplicación 2: “Dibujar Círculos”
6
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.
Aplicación 2: “Dibujar Círculos”
7
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:
Aplicación 2: “Dibujar Círculos”
8
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”.
Aplicación 2: “Dibujar Círculos”
9
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.