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.